Skip to content

Refresh editor left panel and Ask AI toolbar docs #228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
atran3 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Refresh editor left panel and Ask AI toolbar docs #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67d54f5
Refresh editor left panel and Ask AI toolbar docs
claude Sep 10, 2026
48664a8
Note that the Ask AI panel opens by default
claude Sep 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/docs/learn/ask-ai/prompt-to-design.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,7 @@ Each chat is labeled with the page, component, or flow it last worked on. Click
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
- **[Upload image](/learn/ask-ai/image-to-design)** — Add reference images, including [Figma frames pasted as PNGs](/learn/ask-ai/image-to-design#import-from-figma)
- **[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

Expand Down
12 changes: 8 additions & 4 deletions packages/docs/learn/editor/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ You can use the mode buttons in the top-right of the editor to switch between th
</Card>
</CardGroup>

[Ask AI](/learn/ask-ai/prompt-to-design) is available in every mode — click the **Ask AI** button in the toolbar or press <kbd>Cmd</kbd> + <kbd>/</kbd> to open the docked panel and generate pages, components, and theme changes from a prompt.
[Ask AI](/learn/ask-ai/prompt-to-design) is available in every mode. The docked panel opens by default and stays open as you switch projects — press <kbd>Cmd</kbd> + <kbd>/</kbd> or click the **Ask AI** button in the toolbar to toggle it. Use it to generate pages, components, and theme changes from a prompt.

## Editor layout

Expand All @@ -42,11 +42,15 @@ The editor consists of three main areas: left panel, canvas (center), and Inspec

### Left panel

You have the following panels available to you:
The top of the left panel is the **Project** section, which brings your project's navigation into one place:

**Pages** — Switch between pages and flows in your project. Navigate to different designs or subcomponents when editing components.
- **All pages** — Jump to any page in your project.
- **Design system** — Browse your Theme, Components, Snippets, Icons, and Documentation.
- **Flows** — Open a flow to work on its pages together.

**Layers** — View and organize the element hierarchy for the current page. Select, reorder, or group elements. Shows the complete component tree.
Below it, the **Layers** section shows the element hierarchy for the page you're editing. Select, reorder, or group elements in the tree. Drag the divider between the sections to resize them.

{/* TODO: Update image — the left panel now leads with a combined Project section (All pages, Design system, Flows) above Layers */}

### Canvas (center)

Expand Down
Loading