Draw a screen

Draw a screen of a component as a simple page of boxes, put elements inside each other, say what each button does, and let AI add what you describe.

In short

A screen of a component is a page you draw with plain lines, like a pencil sketch. Every box on it is a part of the design, so the canvas, the code compare and the documentation all see it. You drag elements onto the page, put them inside panels and tabs, and say what each one does. AI can add what you describe, and a coding agent can build it.

Before you start

Who: In an organization you need "Create and change designs" to draw. A Viewer can open the pages and read them.
Plan: Drawing is part of every plan. The AI command uses your own AI key, or the platform's on a paid plan.
First: a design with a component in it, such as a web app. A design without one has no inside to draw.

Open a screen's page

On the canvas, double-click a component, or select it and press "Open what is inside". Its screens, functions and tables open as a design of their own.
Select a screen and press "Open its design". The first time, this starts the screen's own design.
Press "Sketch" at the top. The screen's page opens, with each of its parts drawn as a box.

Drag elements and put them inside each other

Open "Elements" in the left rail and drag a button, a field, a table or a panel onto the page.
Drag a box to move it. Drag a corner to resize it. Press Delete to remove the selected box.
Drop an element on a panel, a tab, a dialog or a list to put it inside. It then moves with its container.
Drag it out of the container to take it out again.

The canvas shows the same nesting. A part that holds others is a frame around them, and you resize it from its corners. Drop a part on a frame there to put it inside.

Say what a button does

Select the button. The inspector on the right is its documentation.
Write what it does under "Description".
Under "Calls", choose the function it runs. Press "Open the flow of" and its name to draw that function's steps.
Under "When it shows", write when people see it, such as the cart has items. Leave it empty when it always shows.
For a list or a table, choose under "Shows rows of" the table it shows. The inspector lists that table's columns.
Press "Explain" to have AI read the part's code and say what it does. This needs code connected to the design.

Let AI change the page

At the top of the page, write what to add or change, such as add a search field and two buttons above the table. Press "Draft".
Look at the page. Added elements have bold dashed lines, and removed ones fade.
Press "Apply" in the bar above the page to keep them, or "Discard" to drop them. One undo takes it all back.
On a design with an approved version, press "Propose as a Change" instead. A manager of the design approves it first.

AI never decides AI only proposes. Nothing changes until you apply it, or until a manager approves the Change.

Build it with a coding agent

Propose the page's change as a Change. The "Changes" panel opens on it.
Press "Copy prompt" and paste it into any coding tool. It describes the page as elements inside each other, with what each one does.
Or, once the Change is approved, press "Implement". It makes a card a coding agent can build from.

Good to know

The page has no colors or fonts on purpose. It shows what is on the screen and where, not how it looks.
A part found in the code keeps its place on the page after the next reading of the code.
An element can sit at most eight levels deep.
Only the design goes to AI, never the people on it or who it is shared with.
"Changes" in the Designer's side menu lists every Change of the designs you may open. Choose "Calendar" to see them by day, with freeze windows marked. See /help/designer/changes-to-an-approved-design.

If something goes wrong

There is no "Sketch" button - you are on a design of the whole system. Open a component's inside first.
An element does not go inside another - only panels, headers, tab bars, tabs, dialogs, drawers and lists hold elements.
The page changes become a Change instead of applying - the design has an approved version, so a manager approves it first.
"AI is not set up here yet." - add your own AI key under Settings › AI, or draw the elements yourself.

/help/designer/start-a-design
/help/designer/design-a-workflow
/help/designer/connect-your-code
/help/designer/export-and-implementation-prompt