We turned our design system into a box of bricks — then built two prototyping machines on top of it. Now engineers, PMs, and anyone with an idea snaps together real product pages in minutes. This is how.
Three months of design-system work gave us more than a component library. Six layers, each snapping only onto the layer below — tokens, atoms, molecules, organisms, templates, pages. Every brick owns its insides, never its outsides. Spacing is math. Colors have passports. And an AI-readable brain remembers why every decision was made.
One system, two lanes. The canon lane produces deployment-ready prototypes — real .stories.tsx files with real oi-ui components, one git mv away from production. The fast lane puts the entire library in Claude Design, so anyone with a browser ships an idea before lunch.
Type a page in plain English inside the repo. Claude Code reads the DS-Brain, studies sibling demos, and writes a real Storybook story into _demos/ — rendered in the true OI app shell.
One command synced the living library into Claude Design — not screenshots: the real components, bundled from source, fidelity-graded, published to the whole org. Describe a page; get it back built from actual OI parts.
The deck teaches atomic design the LEGO way: tokens get passports, a button is molded from six tokens live, atoms SNAP! into molecules, a wireframe fills itself into a real page, and a robot builds the finale. Pop quizzes included — with confetti.
Avatar + text + badge… SNAP! A user card is born, with a comic-book POW and confetti.
Watch a card re-theme itself — teal → purple → orange → dark — while nobody touches the component.
A sentence goes in, the robot picks real bricks off the shelf, and the page slots fill one by one.
W110 shipped the OI Lite Playground — spec renderer, LLM proxy, designer UI. It worked. But plain-English prototyping through Claude Code and Claude Design was better: real components instead of a schema, a subscription login instead of API keys, no custom app to maintain. We archived our own tool and kept the workflow. // the best tool is the one you don't have to build
Prototyping stopped being a designer's job and became a company sport. Engineers prototype the feature before the ticket. PMs walk into reviews with working pages, not wireframes. Sales demos ideas that don't exist yet — built from the same bricks engineering ships.
28 canon prototypes live in _demos/ today · per-person split illustrative — see slides for the leaderboard