Design

Handoff to Code

Passing generated screens to the Code chapter.

1 min read · 3 sections

Design screens are the reference the Code chapter builds the real, interactive app from. Handoff is how they get there, the boundary between what it looks like and what it does.

How handoff works

When your screens are ready and you move to Code, the generated pages are passed along as handoff context:

Source pages: the names of the screens handed off.
Last handoff time: when it happened.

In the Code chapter, these appear in a design panel, and the AI uses each screen's HTML and screenshot as reference when it writes the frontend.

Where you'll see it

In Code, a design panel lists the handed-off screens; click one for detail, or tell the AI to "implement this screen".
On the hub, the Code card's preview shows a handoff chip ("2 pages") once screens have been passed.

Static now, interactive later

Design produces static HTML: layout, styling, and content. The interactive behavior (state, routing, data, wallet connection) is added in Code. So handoff is the boundary between what it looks like and what it does.