Describe it.
Ship it.
Designers author real product prototypes in plain English — real components, real tokens, real app chrome. No mockups. No drift.
/prototype in Claude Code
A designer types a plain-English page description into a terminal. Claude Code reads the DS-Brain, picks the right reference story, and writes a real .stories.tsx under _demos/ — real oi-ui components inside the canonical app shell. Storybook hot-reloads. You iterate by talking.
❯ /prototype A GPU monitoring dashboard on the Accelerators page with 4 KPIs (Total GPUs 128, Utilization 73%, Active jobs 42, Queue depth 8), a 7-day line chart of GPU compute vs memory, and a table of 5 active workloads with status badges. ✔ read DS-Brain dispatcher + pattern catalog ✔ matched reference: Accelerators.stories.tsx ✔ wrote _demos/tenant-admin-tools/resource-monitoring/Accelerators.stories.tsx ⟳ Storybook hot-reloaded — review at localhost:6007
- Semantic --oi-* tokens only. No hex, no primitives, no Ant token.* — the whole point of the system.
- Real components only. No hand-rolled divs styled to look like oi-ui. Every visible pixel is a real component.
- Real app shell, always. Every prototype renders inside the canonical chrome. No fake sidebars, no fake app bars.
- Inline styles OK inside stories. Spacing tweaks don't need a promoted molecule.
- No ceremony. No PROMPT-*.md plans, no 8-file contract for story-local pieces — they live at T0 until promoted.
- One-prompt builds. Small prototypes ship in a single message. Only wave-length builds need the full cycle.
The pivot we're proud of
We built our own AI playground first — a SpecRenderer, a JSON schema, an LLM proxy, a designer chip UI. It worked. Then we measured it against just… using Claude Code — and killed our own product in a day.
“Sandboxed artifacts couldn't import real components — every prototype became a CSS mock. The ceiling was a dealbreaker.”
24 shipped prototypes
Monitor dashboards
Resource monitoring
Inference tools
Everything else
Claude Design, for everybody
One command — /design-sync — bundled the entire living library into Claude Design as the org design system “OIUI”. Now anyone in the company prototypes on the real system, no terminal required.
❯ /design-sync ✔ reference storybook built ✔ converter self-heal loop · build 10 · exit 0 ✔ 219 previews generated · fidelity graded per component ✔ design system “OIUI” published to organization → 220 components · 3,491 tokens · usage notes for Claude
Prototyping in waves
The team never big-bangs a page. Prototypes climb the same ladder the system did:
One batch per message. And the golden habit: anything wrong twice gets fixed in the design system, not the project.