Docs
Start building
Design

Design overview

Chapter 02 · generate every screen from the approved spec.

2 min read · 4 sections

Design Studio turns the approved PRD into real, previewable screens. Start from hundreds of design systems, or bring your own brand kit and the agents build the look around it; then walk the details screen by screen on a live canvas. The finished screens hand off to Code as the reference for the real build.

Design unlocks once the PRD is approved.

What it does

  • Generates screens from the PRD: pages and journeys become real, previewable HTML.
  • Design-system catalog: pick a theme from a community catalog, or build from scratch.
  • Live canvas: every page is a card on a canvas; click to preview full screen.
  • Visual editing: click into any element and edit text, styles, and structure in place.
  • Shared components: build a navbar or card once, reuse it across pages, edit it in one place.
  • Figma import: paste a share link or upload a .fig file; frames compile into pixel-faithful pages.
  • Media kit: generate social cards, mockups, posters, an icon set, and launch copy from the real product.
  • Handoff: pass generated screens to Code.

The layout

  • A canvas of page cards (powered by the same flow-graph engine as the journeys view), each showing a live preview and a status, with shared components alongside.
  • A Media kit tab next to the canvas for launch assets.
  • A chat panel for natural-language design instructions: add a page, restyle, or regenerate.
  • Topbar chips for the Brand kit, the design system, and Figma import, plus the handoff to Code.

Page states

Each page card moves through: pending → generating → generated (or error). A page can also be approved or skipped. While generation is live, the canvas streams HTML in and a run-state chip shows progress.

The pages ahead