Feature/Design
See the screen before anyone builds it.
The design stage draws an HTML mockup before the worker starts, built from your project’s own UI profile. Review it frame by frame, pin comments where the change goes, revise, and approve. The approved frames ship with the card.
Mockups that look like your product
Every mockup starts from a UI profile: a per-project description of the UI, its libraries, tokens, components and patterns, plus a style kit of CSS and HTML snippets.
- Built by a read-only run on the runner and cached in Nautelle
- Editable, and rebuilt when the files it came from change on the base branch
- The worker builds with the project’s real components; the mockup is a reference, not code to copy
- Libraries
- React 19 · Tailwind 4 · lucide-react
- Tokens
- --color-accent · --radius-surface · --text-title
- Components
- Button · Sheet · DataTable · EmptyState
- Patterns
- List with filters, detail sheet, empty state
- Style kit
- CSS and HTML snippets for the mockups
Rebuilt when its source files change on the base branch
Draw, review, revise, approve
Open the generate panel on a card, a stack or a plan task. Pick one to three variants, the design skills, the profile and the model, then Generate. A design turn is read-only.
- A revision holds named frames as tabs: a list, a form, an empty state
- Switch between Desktop, Mobile or your own presets, light and dark, and zoom
- Revise design sends every open comment in one batch; earlier revisions stay viewable
- Approve accepts a variant with all its frames and archives the others
- Generate1 to 3 variants
- FramesList · Form · Empty
- PinComments on a frame
- ReviseAll open comments
- ApproveOne variant, all frames
Pin a comment where the change goes
Click the mockup to pin a comment to a place on a frame. Comments belong to the frame and the revision, so the next revision knows exactly what to change.
- On a phone, a pin opens a bottom sheet for the comment
- The toolbar shrinks to presets and zoom, and Approve stays reachable
- Design skills default to the set saved in Settings → Design
The approved design goes with the work
The approved frames are committed next to the spec, in the card’s branch or the docs pull request, and listed in the worker prompt’s Design section. A design has exactly one owner: a card, a plan task or a stack.
- A card in a stack keeps its own design, which reads the stack’s approved design as reference
- A design-required stack runs nothing until its design is approved
- A mockup renders in a sandboxed frame with no network access
- External assets come only from a fixed allowlist of CDNs at exact versions
Where it sits in the chain
The whole chainDesign sits between the cards and Run, for the cards and stacks that need one.
- 01Say what you want
- 02Interview
- 03Card, split or stack
- 04Design
- 05Run
- 06CI
- 07Merge
Every screen and setting, in the design guide.
The guide covers each control, limit and rule on this page, with the exact names you will see in the app.