← Home

The Design Tab

The Design tab brings your whole design system into Layout Live, so you never have to switch to the web Studio to answer “what tokens do we have?” or “what does the Button spec say?” while tweaking a page. It has three views: Tokens, Components, and Guidelines.

Tokens

The Tokens view lists every design token in the connected kit, and they are editable in place. Change a value and the running page previews it instantly, before anything is saved, so you can judge a new brand colour or spacing scale against your real app rather than a swatch. Save to commit, or discard to snap back.

  • Instant preview. Edits apply to the page live while you type or scrub, ahead of saving. What you see is your actual product wearing the new value.
  • Light and dark, separately. Each token exposes its light and dark values as distinct fields, so tuning the dark theme never touches the light one (and vice versa).
  • Writes to the real files. Saving persists the change to tokens.css, tokens.json, and layout.md together, so the kit stays consistent for the MCP server, Studio, and every agent reading it.
  • Undoable. Token saves join the same undo stack as class edits: Cmd+Z reverses one, and the Edits panel lists it with a per-edit revert.
Because a token cascades to every class that references it, the Tokens view is the fastest way to restyle a whole page at once. One edit to --color-primary restyles every primary button in the app, live.

Components

The Components view shows the design system's component inventory, the same one your agent sees through list_components. Each component entry carries its spec and a copyable code example, so when you spot a hand-rolled card that should have been the Card component, the correct usage is one copy button away.

Guidelines

The Guidelines view renders your layout.md sections readably: colour rules, typography scale, spacing grid, anti-patterns, the lot. It is the human-readable face of the same file your agent consumes, useful for checking what the system actually says before you override it.

Reduced mode

The full Design tab requires the project to be prepared with the CLI (npx @layoutdesign/context install --live), which is what gives Live a .layout/ kit to read and write. On a plain Tailwind project without the CLI, Live runs in reduced mode: token suggestions come from your Tailwind config, and the Design tab's editing, components, and guidelines views are unavailable. See the CLI guide for the one-command setup.

Next steps