Example prompts

Prompts to try, roughly in order of difficulty. Copy one, adjust the names to your project, and run it against a connected agent.

Work in a scratch project rather than something you care about. Everything an agent does is undoable, but it is easier to experiment when you do not have to undo anything.

Start every session with this one. The server ships its own build playbook, and an agent that has not read it will make avoidable mistakes:

Read react-to-design first, then select my project.

Warm up — read before writing

Safe: none of these change anything.

List my projects, select "Scratch", and show me its file tree.

Open components/atoms/Button and describe its structure — elements, properties,
states, variants and what each variant changes.

Search this project for every element whose text mentions "Sign in".

That last one is worth knowing about early: the search covers element names, text, code and the names of properties, states and events, so it is how you find where something lives when you cannot remember.

Build something

Create components/atoms/Badge. A rounded pill with a label property, 4px by 10px
padding, a subtle background and centered 12px text. Build it in one call.

"In one call" matters. An agent can push a whole nested subtree — every element with its own styles — in a single step, and building node-by-node is the single biggest waste of a session.

Add left and right children slots to Badge so a caller can place an icon on
either side, and make the middle text flexible so the pill grows with content.

Variants and the design system

Give Badge four variants: sizeSmall, sizeLarge, typeSuccess and typeDanger.
Colors should come from design-system tokens, not hex values — add semantic
tokens if the right ones do not exist yet.

Add a "Dark" theme, then set the semantic colors Badge uses so it stays readable
in both themes. Show me every theme value you set.

Asking for tokens rather than hex is the difference between a component that re-themes and one that does not. Say it explicitly the first few times.

Logic

Add an "open" state to components/molecules/Dropdown. Clicking the trigger
toggles it, clicking outside closes it, and the panel is only rendered while open.

On components/molecules/SignInForm, add validation: email must match an email
pattern, password at least 8 characters. Disable Submit until both are valid, and
show the message under the field it belongs to.

Validation is declarative here — conditions and named field rules, not code — so one prompt can specify all of it.

Animation

Add a timeline to components/organisms/Hero that fades the heading in and slides
it up 20px over 600ms, with the subheading following 150ms later. Ease it out.

Make the heading animate word by word, radiating from the center.

Data

Create an API file for GET https://jsonplaceholder.typicode.com/posts, declare the
response as a list, mount it into components/organisms/PostList and repeat a card
over it. Show a loading state while it is in flight.

The canvas preview really fetches, so this one gives you live rows on the canvas rather than placeholders.

Database and auth

Create a tasks table with Title, Status and Owner columns. Add a public view
that returns Title and Status sorted by Status, and repeat a card over it in
components/organisms/TaskList.

Add an insert action to tasks that only allows Title and Status, and wire it to
the Add button on TaskList.

On pages/members, mount a view that needs a signed-in user, and wire the
sign-in form to the built-in Users table.

The writable allowlist in the second prompt is the security model: a caller can only ever set the columns the action offers. Views run in the canvas preview with a real session — use the preview's user picker to test who sees what.

Make it check its own work

Build this habit first: ask for evidence, not a summary.

Take a screenshot of Badge in every variant and show me.

Click the trigger on Dropdown in the preview and tell me what changed in the
component's state.

Export components/atoms/Badge and show me the generated tsx and scss.

Check for type errors in everything you just built.

Treat a clean type check as weak evidence, not proof — the checker is lossy, and silence does not guarantee it compiles. A screenshot plus a read of the exported code is stronger.

The round trip

Here is a component from our codebase. Find the design nodes that produced it.

Paste exported React and the agent maps it back to the design that emitted it — useful when a developer reports something and you need to find where to fix it.

The whole loop

Add a local-folder export target pointing at ~/code/my-site/src, export the
project there, and tell me what files it wrote.

Pair that with the boilerplates and an agent can take you from design to a running site without you opening the settings panel.

Rebuild an existing site

Desktop app only, and the most involved thing here:

Capture https://example.com, derive a design system from it, and show me the
colors, spacing and type scale you found before writing anything.

Asking to see the tokens before they are written is worth doing — the derivation is statistical, and it is much easier to correct at that point than afterwards.

Prompts that will not work

Not everything has a tool behind it. These will fail, and it is quicker to know:

• "Create a document page for the blog." Agents can write and edit documents, but not create a document page.

• "Drag the third mesh point up." Mesh points and path anchors are edited by hand on the canvas. An agent can capture keyframes and add whole paths, but not nudge an individual point.

Habits that make prompts land

• Name the layer. "Add a Card molecule" respects the project's atomic structure; "make a card" leaves it guessing.

• Point precisely. Right-click a file or element → Copy For MCP, and paste the reference into your prompt.

• Ask for one call. Say "build it in one call" for anything with structure.

• Ask for tokens, not values.

• Ask it to verify, then check the export diff yourself.

• Undo freely. An agent's edit is an ordinary undo step on your stack.

Where next

• What agents can do — the shape of working with one.

• MCP tools — the full inventory behind these prompts.