Skip to main content
The agent builds what you describe, so the more it knows about your product, the closer the first result is. Brief it the way you would brief a designer on your team.

​
Say who it is for and what it does

“Generate a table” leaves the agent guessing. Say where the screen lives, who uses it and what they need to get done.
Describe the product, not the code. What the user sees, what they click, what happens next.

​
Start with one screen

A whole app in one prompt usually comes out shallow. Build it up:
  1. One screen first, for example the dashboard.
  2. Refine it until the style is right.
  3. Then add the next screens. They follow the style you settled on.
  4. Then add the flows between them.

​
Be specific, and set limits

Name the layout, the content and what to leave out. Clear limits get better results than open briefs.
Use real names, real numbers and hex codes: “#FF6600 for the primary button”, “show 12 invoices, three of them overdue”.

​
Answer the quick questions

When a prompt leaves something open, the agent may ask before it builds. The questions appear above the generation input under Quick questions. Pick an answer or type your own. A minute here saves a round of fixes.

​
Point at what to change

To change one part of a screen, do not describe where it is. Click Select, click the element and write the change on it. You can note up to 10 elements and send them together. See Select and edit with AI. For a color, a margin or a line of text, change it yourself in the visual editor. Saving straight to code there costs no credits.

​
Say what to leave alone

The agent changes whatever your prompt touches. Say what must stay as it is.

​
Put standing rules in project rules

If you keep repeating the same instruction, write it once in project rules. The agent follows rules.md on every generation, and design.md for how things should look. This is also where a short version of your design guidelines belongs: when to use which color, how headings and body text differ, spacing habits, which component to use for what, tone of voice. The color and font values themselves belong in your theme.

​
Show it a picture

Attach a screenshot or a sketch to the prompt and say what to take from it: the layout, the colors, the density. “Match the layout of this screenshot, but use our colors” works better than the image alone. If your design is in Figma, import the frames instead.

​
Ask for options

Not sure which direction is right? Ask for several in one prompt, then put them side by side.
See Compare options side by side.

​
Ask for a plan first

For a big change, ask the agent to plan before it edits.

​
Start a new thread for a new topic

A thread carries everything said in it. When you move to unrelated work, start a fresh one with New thread or /clear. Earlier threads stay available. See Threads, context and queued messages.

​
When something goes wrong

  • If the preview shows an error, let the agent fix it first. See the error fixer in Prompt the agent.
  • Tackle one problem per prompt, and paste the exact error text or a screenshot.
  • If a change went the wrong way, roll back to an earlier version and reword the prompt. See Versions and rollback.

​
Limits

A prompt can be up to 15,000 characters.