Skip to content

AI assistant ​

The AI assistant opens via the AI Assistant tab in the element panel or directly from the welcome screen. It creates complete layouts and makes targeted edits to existing elements. The assistant runs entirely server-side: the API key never leaves the server.

Choose a mode ​

ModeWhen to use
CreateGenerate a new layout from a prompt or image
EditModify an existing element, e.g. add a button

Text prompt ​

  1. Select the Create mode.
  2. Describe the desired layout in the input field, e.g. "Hero banner with a large image, a white headline, and a CTA button".
  3. Click Generate element.

Quick-start buttons are available for a fast start: Banner, Slider, Accordion, Grid, Card. Clicking one pre-fills the input field with a matching example prompt.

Image input ​

Upload a screenshot, mockup, or wireframe. The AI reads structure and style directly from the image and generates the matching layout. Use the optional text field to add details the image cannot show:

  • Exact text (headings, body copy, button labels)
  • Button URLs
  • Brand colours if they differ from the image
  • Which section to focus on if the screenshot contains multiple sections

Maximum image size: 10 MB (automatically compressed). Click the upload area or drag the image onto it.

Anthropic provider required

Uploading images requires the Anthropic provider, configured under Settings → System → Plugins → DmfTheOne → Configure.

Voice input ​

Click Voice input and dictate your prompt. The recording runs until you click Stop recording. Voice input is converted to text and processed like a normal prompt.

Edit mode ​

  1. Switch to Edit mode in the AI assistant.
  2. Describe the change you want, e.g. "Add a button below the image in the first column".
  3. Click Generate element.

The AI only modifies the described area and leaves the rest of the layout untouched.

Preview and apply ​

After generating, a Preview of the layout appears.

  • Click Apply to element to accept the layout.
  • Click ↩ Undo last apply to restore the state before the last apply.
  • Close the panel without applying to discard the suggestion.