Wireframe-first design

Sketch a layout, then let the agent fill it with real components. Great for when you know the structure you want before the content. There are two ways in: draw a free-form sketch and have it built for you, or drop labelled placeholder blocks straight onto the canvas.

Sketch a wireframe

Open File → Wireframe sketch… (or File → New Project → Sketch a wireframe) for a free-form drawing surface. Add shapes from the palette — heading, text, button, input, image, list, a section, or a plain box — then drag and resize them anywhere. Give each one a label ("hero", "3 pricing tiers", "Sign up").

You don't have to think about columns, rows, or alignment while you draw. Sketch it the way it should look, and when you press Build it the drawing is turned into a real, responsive layout: shapes side by side become a row, stacked shapes become a column, a tidy grid of cards becomes a grid, and anything you drew inside a section stays nested in it. The layout is inferred from your drawing — so you sketch freely and get clean, CSS-friendly structure back.

What lands on the canvas is a set of labelled blocks in that inferred layout, ready to fill.

Import from Excalidraw

Already sketched something in Excalidraw? Export it (File → Save to… gives you a .excalidraw file) and choose Import .excalidraw in the sketch editor. Rectangles become boxes, text becomes headings or body text, and a label drawn on top of a shape becomes that shape's label. From there it's the same flow — tweak the shapes, then Build it.

Complete with AI

Ask the agent to complete the wireframe, or just a single block. It replaces each placeholder with real bricks that match the label, keeping your layout. Complete the whole page at once, or one block at a time so you can review as you go.

Placeholder blocks

If you'd rather skip the drawing surface, place Wireframe blocks — labelled dashed boxes — directly on the canvas where each piece should go, and arrange them until the structure feels right. Then Complete with AI exactly as above. This is handy when you're adding a section or two to a page that already exists.

Bake a design back to a wireframe

It works both ways. Choose File → Bake canvas to wireframe… (or Bake current canvas inside the sketch editor) to turn whatever is on the canvas back into editable shapes. Rearrange the boxes — split a row, pull a card out of a grid, regroup a section — then Build it to re-apply the new structure. It's the fastest way to restructure a page without nudging individual components, and it round-trips: draw → build → bake → redraw → rebuild.

When to use it

• You want to lock the structure before committing to content.
• You're translating a sketch or a spec into a real page.
• You want to restructure an existing design quickly by moving boxes around.
• You want consistent sections you can fill in a predictable order.

Next steps

• Building with chat
• Editing on the canvas
• Templates & new projects