> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Generating designs

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

<Frame>
  <img src="https://mintcdn.com/subframe-59800133/E2DcgNWNaQUj3Q4q/images/ask-ai/ask-ai-mode.png?fit=max&auto=format&n=E2DcgNWNaQUj3Q4q&q=85&s=e78b77dda893303c1983180a30a050c7" alt="The Ask AI panel docked to the right side of the editor" width="581" height="273" data-path="images/ask-ai/ask-ai-mode.png" />
</Frame>

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](/learn/prototype-mode/overview).

## Getting started

1. Click the **Ask AI** button in the toolbar or press <kbd>Cmd</kbd> + <kbd>/</kbd>
2. Type a prompt and press <kbd>Enter</kbd> 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

<Tip>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 <kbd>Esc</kbd>) to stop a running response.</Tip>

## 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](/learn/design-mode/layers) 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 @](/learn/ask-ai/adding-context)** — Reference other pages, components, snippets, and docs in your prompt
* **[Upload image](/learn/ask-ai/image-to-design)** — Add reference images
* **[Import from Figma](/learn/ask-ai/image-to-design#import-from-figma)** — Import Figma designs using the image model
* **[Reference a web page](/learn/ask-ai/image-to-design#reference-a-web-page)** — Paste a URL to use a live web page as a reference
* **[Personalize AI](/learn/ask-ai/personalizing-ai)** — Configure project-wide context

You can also use [quick edits](/learn/ask-ai/making-quick-edits) to make targeted edits to specific elements using AI.

## Troubleshooting

<AccordionGroup>
  <Accordion title="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](/learn/ask-ai/making-quick-edits).
  </Accordion>

  <Accordion title="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 <kbd>/</kbd> to open [quick actions](/learn/design-mode/quick-actions) and select
    **Ask AI to edit...**.
  </Accordion>

  <Accordion title="How do I undo changes?">
    Press <kbd>Cmd</kbd> + <kbd>Z</kbd> to undo. Subframe maintains full undo history, so you can step back through
    multiple changes. You can also use [Version history](/learn/projects/version-history) to restore a previous state.
  </Accordion>
</AccordionGroup>