Playground
Edit a spec and watch it validate and render. The validator and the renderer here are the same modules the MCP server imports, not a reimplementation of them, so this page cannot disagree with validate_spec.
Specs validate against largen's reference components, the same set the MCP tools fall back to when you pass no manifest of your own. A spec may only name components from that list; anything else is rejected before it renders.
The share link carries the spec in the URL fragment, so it never reaches the server and needs nothing stored to work.
Result
…
Generate a spec with Claude
Copy the prompt below into Claude, replace the [instruction]: line with what you want built, and paste the JSON it returns into the editor above.
[instruction]: <what you want built — e.g. "a revenue card with a stat and a warning"> # Approved UI components Render UI by naming a component from this list. Never emit HTML, CSS, class names or colours — choose a `component`, and optionally a `tone`, `variant` and `size`. Anything outside these lists is rejected before it reaches the page. **tone** — Semantic colour. Inherits — set it on a container to re-tone everything inside. `primary` · `secondary` · `success` · `info` · `warning` · `danger` · `neutral` **variant** — How the tone is applied as a fill. Derived from the tone, never a separate colour. Applies to the element it is on. `solid` · `soft` · `outline` · `ghost` **size** — One multiplier scaling type, padding and gap. Inherits. `xs` · `sm` · `md` · `lg` · `xl` ## Components - `alert` — A message reporting a state. Use with a tone. - `badge` — A short inline label or count. - `dot` — A bare status dot. No content. - `spinner` — An indeterminate activity indicator. - `skeleton` — A loading placeholder occupying a future element's box. - `card` — A container grouping related content on a surface. - `panel` — A surface with no border. - `divider` — A labelled or bare horizontal rule. - `stat` — A figure with a label. Wraps stat-label and stat-value. - `stat-label` — The label above a figure. - `stat-value` — The figure itself. Renders tabular-nums. - `menu` — A vertical list of navigation or action items. - `crumbs` — An ancestry trail. - `steps` — A numbered sequence. Mark position with aria-current. - `bubble` — A conversation bubble. data-side="end" for the user's own turn. - `avatar` — A person's image or initials. - `tip` — Wraps a child; hint text goes in data-tip. - `prose` — Long-form rendered text. Wrap markdown output in this. - `stack` — Vertical layout. Set --gap. - `row` — Horizontal layout, no wrap. - `cluster` — Horizontal layout that wraps. Tag lists, icon groups. - `grid` — As many columns as fit at --min-item. - `center` — Constrained measure, centred. - `field` — Groups a label, a control and its hint or error. - `field-label` — The label above a form control. - `field-hint` — Guidance under a form control. - `field-error` — A validation message under a form control. Carries the danger tone itself. - `table-wrap` — A scroll container for a wide table. The table itself is already themed. - `toolbar` — A wrapping row of controls. - `empty` — An empty state. Wraps empty-title and empty-note. - `empty-title` — The headline of an empty state. - `empty-note` — The explanation under an empty state's headline. ## Notes - State (disabled, invalid, checked, read-only) is NOT settable here. It comes from the DOM and from real HTML attributes. - There is no field for a colour, a class, or inline CSS. The safety property is structural, not defensive: the worst a compromised model can do is pick the wrong approved component. Return only the JSON spec, nothing else.