Generating screens

Generation reads the pages and journeys from your approved PRD and builds a live screen for each, streaming them onto the canvas one at a time.

Kicking it off

When you open Design with an empty canvas, a kickoff card appears with a short checklist of what the run will draw on: the PRD (approved or not), the design system (selected or not), the Brand kit (with per-category counts, and an Add shortcut if it's empty), and the brief.

If the PRD is approved, its pages and journeys come in as context. Hit Generate to build everything, or type a more specific instruction.

The phases

Generation moves through a sequence of phases, surfaced in the chat as it goes:

• research / ideation: Modus analyzes the spec and the problem space.
• generating: pages are produced one at a time: each starts, streams its HTML in chunks, then completes.
• refinement: quality passes and any fixes.
• handoff / done: screens are ready to pass to Code.

Along the way Modus may ask a question (a wizard prompt) when it needs a decision from you.

Watching it build

Each page appears on the canvas as a card. As HTML streams in, the preview fills; the status badge moves from pending to generating to generated. Brief messages in the chat narrate phase changes, tool use, and per-page start/done events.

Quality checks

After each page is generated, Modus runs an automatic quality check across three dimensions:

Each returns pass / warn / fail, surfaced on the page card so you can see which screens need another look.

Regenerating & aborting

You can regenerate the whole set, or abort a run in progress. Reconnecting mid-run replays any events you missed, so the canvas stays in sync.