Prototype Basics

The Prototype panel lets you define how each state looks. It uses a simple, AI-friendly syntax inspired by YAML and CSS.

State Sections

Start each state's prototype with its name in brackets:

[Login Screen]
  div:
    h1: "Welcome"
    p: "Please sign in"

[Dashboard]
  div:
    h1: "Dashboard"
    p: "You're logged in"

Note

State names must match exactly what you defined in your spec. For nested states, use the full path: [Dashboard/Sidebar/expanded]

Basic Structure

Each line is an element. Indentation (2 spaces) creates nesting:

[Example]
  div.container:
    header:
      h1: "Title"
    main:
      p: "Content goes here"
    footer:
      p: "Footer text"

This creates:

Generated HTML

<div class="container">
  <header>
    <h1>Title</h1>
  </header>
  <main>
    <p>Content goes here</p>
  </main>
  <footer>
    <p>Footer text</p>
  </footer>
</div>

Partial Prototypes

You don't need to define a prototype for every state. If a state doesn't have one, the preview will show a placeholder message.

Tip

Start with prototypes for your key states, then add more as you refine your design.