Design feature
Generate brand themes, propose pages, iterate on visual ideas, and apply a design live — all from inside the Studio.
The design feature gives every project a designer agent who can propose visual directions, generate full themes, draft component mockups, and apply a chosen design live across the project’s frontend.
Theme generation
Ask the designer for a theme in plain English — “a calm, editorial look with serif headings” or “something playful and tactile, warm colours”. The Studio returns three candidate themes with palette, typography, radius, and shadow tokens. Click any candidate to preview the project under it without committing.
Page proposals
For a brand new surface, ask the designer to propose a page. They return a few directions as interactive previews — actual rendered React components, not static images — so you can click around before picking one. Selecting a proposal hands it to the frontend engineer to ship.
Live preview
Every design change shows up in a preview frame side-by-side with the editor. Tweak a token, see it apply instantly. Switch between device sizes (1280 / 768 / 375) without leaving the surface.
Applying a design
When you’re happy, click Apply. The Studio opens a PR against the project’s frontend repo that updates the design tokens, regenerates component styles, and includes a summary of what changed. Reviewing the PR is the normal flow — nothing ships without your sign-off.
Design system
The output of the design feature is a design system, not a stack of one-off mockups. Themes, components, and patterns are stored in the project so every future surface inherits them automatically.