Generating designs

Generate AI designs in Agent chat, edit pages and components, and update your Subframe theme.

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

• Design new pages — Build a new page, or several alternatives to compare
• 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

Agent chat is for creating and updating designs. For adding interactivity and state, use Prototype mode.

​

Getting started

1. Click the Agent button in the toolbar or press Cmd + /
2. Type a prompt and press Enter or click the send button
3. The agent creates a new conversation and responds to your prompt

Agent chat docks to the right side of the editor and follows you across your project — it’s available on all project level pages.

The agent chooses how to respond based on your prompt:

• New pages — For new designs or creative exploration. The agent builds one page unless you ask for more, like “design 3 alternatives”.
• Direct edits — For simple changes to existing elements like colors, text, or layout tweaks

You can keep prompting while the agent 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

The agent builds each page on a canvas one section at a time, so you can watch it take shape. A page glows while the agent works on it, and alternatives are placed beside each other. Click a page’s row in the chat to jump to it on the canvas.

From there you can:

• Ask a follow-up — Refine a page or combine ideas from different alternatives (“use the header from the first one with the layout from the third”)
• Edit visually — Open any page in design mode for manual edits
• Delete the alternatives 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 agent chat 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 canvas it last worked on. Click the label in the chat header to jump to that resource.

​

Adding context

Give the agent references and guidance for your design:

• Adding context with @ — Reference other pages, components, and snippets 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
• Write design docs — Give the agent product context and design guidelines

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

​

Troubleshooting

The agent is not applying changes where I want them

Agent chat 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 the agent with components?

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

How do I undo changes?

Cmd + Z undoes changes made directly in the visual editor. It does not revert changes applied through MCP or API tools.

To revert a tool-applied change, restore the affected page, component, snippet, or theme using Version history. Use project version history to recover deleted items or roll back changes across multiple parts of your project.