documentation
03 dashboard

Design Studio

Design Studio gives you a designer agent that produces actual interactive HTML mockups on a canvas. Describe the screen you want; the agent designs it, checks it for visual problems, and hands you something you can click — not a paragraph describing a design.

What this page is for

Ask most AI tools for design help and you get a description of a design, a wireframe, or a generic template. Design Studio is different: the exolvra-designer agent produces a real, interactive single-page HTML mockup you can open and click through.

Use it for hero sections, landing pages, pitch decks, menus, dashboards — anything where you want to see the design, iterate in plain language, and walk away with a self-contained HTML file.

The canvas

A design lives on a canvas inside a project. The designer agent authors it with its own tools:

  • design_write — writes or updates the mockup’s HTML/CSS/JS.
  • check_canvas_overflow — verifies nothing spills outside its intended bounds.
  • check_design — runs a visual review pass for layout and quality issues.

A guardrail enforces the discipline: every design_write must be followed by both checks, and both must come back non-blocking, before the agent can call the design done. Findings the validators themselves flag as deferable don’t block — so the agent isn’t trapped fixing cosmetic nits forever.

Working with the designer

Open a project’s Designs tab and start a design, or create an issue describing the screen and assign it to the designer agent. Iterate by commenting: “make the hero darker,” “add a pricing row,” “drop the stock-photo vibe.” Each round re-runs the visual checks.

Briefs can set a design system preference for the project so successive mockups stay coherent.

  • Internal Apps — when you want a published, usable app rather than a mockup.
  • Built-in agents — the designer is one of the specialist roster.