Generating designs

Use AI to generate page designs, make edits, and update your theme.

You can prompt AI to generate page designs, edit your existing designs, or update your theme.

• Design new pages — Generate multiple variations of page designs
• Edit your page directly — Make targeted changes to your current page
• Design components and snippets — Create reusable building blocks and design system examples
• Update your theme — Modify colors, fonts, and tokens project-wide
• Answer questions — Search Subframe docs for help with features and development workflows

Ask AI is for creating and updating designs. For adding interactivity and state, use Prototype mode.

Getting started

1. Click the Ask AI button in the toolbar or press Cmd + /
2. Type a prompt and press Enter or click the send button
3. Ask AI will create a new conversation and responds to your prompt

The Ask AI panel docks to the right side of the editor and follows you across your project — it’s available on all project level pages.

Our AI will choose how to respond based on your prompt:

• Variations — For new designs, creative exploration, or prompts requiring new components. Ask AI will generate 1-4 variations for you to choose from.
• Direct edits — For simple changes to existing elements like colors, text, or layout tweaks

You can keep prompting while AI is working — follow-up messages queue and send when the current response finishes. Click the stop button (or press Esc) to stop a running response.

Review designs

Variations land as real pages in a flow on your canvas as each one finishes generating. The chat shows a live tile for each variation — click a tile to jump to that page on the canvas.

From there you can:

• Ask a follow-up — Refine a variation or combine ideas from different ones (“use the header from variation 1 with the layout from variation 3”)
• Edit visually — Open any variation in design mode for manual edits
• Delete the variations you don’t want

Conversation history

Your conversations persist across sessions and pages so you can reference past generations.

Click the history button at the top of the Ask AI panel to see every chat in the project, grouped by recency — or hover over it to peek at the list. An animated indicator means a chat is still working, and a dot marks unread results. Click the + button to start a new chat.

Each chat is labeled with the page, component, or flow it last worked on. Click the label in the chat header to jump to that resource.

Ask AI toolbar

Ask AI includes additional tools:

• Adding context with @ — Reference other pages, components, snippets, and docs in your prompt
• Upload image — Add reference images
• Import from Figma — Import Figma designs using the image model
• Reference a web page — Paste a URL to use a live web page as a reference
• Personalize AI — Configure project-wide context

You can also use quick edits to make targeted edits to specific elements using AI.

Troubleshooting

AI is not applying changes where I want them

Ask AI is great for generating new designs or making broad changes to your page. But for more targeted edits, you may want to use quick edits.

How do I use AI with components?

Open the component editor and use the same Ask AI panel to insert elements, create variants, and refactor components. You can also right-click or press / to open quick actions and select Ask AI to edit….

How do I undo changes?

Press Cmd + Z to undo. Subframe maintains full undo history, so you can step back through multiple changes. You can also use Version history to restore a previous state.