An AI-native design stack: one repo that installs the tools and teaches the operating model. Clone it, run the setup script, read two documents, and you can produce design work the way this team ships it — agent-driven, evidence-gated, on a locked brand contract.
Built as our team's internal handbook, shared publicly because the pattern is reusable. Fork it, keep the mechanics, and replace the doctrine with your own where taste differs — but write yours down the same way.
git clone https://github.com/h3ro-dev/open-design-stack.git && cd open-design-stack
./setup.sh # audit: shows what's present / missing (changes nothing)
./setup.sh --install # installs the missing pieces (macOS)
./setup.sh --launch # first launch of Open Design — always via this (PATH)Then read, in order:
- ONBOARDING.md — your day-one path (15 min)
- docs/DOCTRINE.md — how we work; this is the part that makes the output good (20 min)
| Job | Tool | Status |
|---|---|---|
| Agentic design workspace (artifacts, decks, motion, DESIGN.md systems) | Open Design | Adopt |
| Design implementation | Next.js + Tailwind + shadcn/ui + Radix | Adopt (already our stack) |
| Design tokens (brand contract as data) | DTCG format + Style Dictionary | Adopt — working example in tokens/ |
| Evidence loop (screenshots, a11y, measurement) | Playwright + axe | Adopt (non-negotiable) |
| Visual editing of live React apps | Onlook | Pilot |
| Flows & sketches | Excalidraw | As needed (nothing to install) |
Full rationale — including what we deliberately skip (Penpot, OpenUI, Material UI, …) and why — lives in docs/STACK.md with verification dates. Don't adopt tools around this list without adding an evaluation there first.
setup.sh the installer/auditor (idempotent; --install to mutate)
ONBOARDING.md day-one path for a new team member
docs/
DOCTRINE.md the operating model (DESIGN.md-as-law, evidence, gates)
STACK.md dated tool evaluations: adopt / pilot / watch / skip
AGENT-SETUP.md Claude Code + Open Design agent wiring, incl. PATH gotcha
templates/
DESIGN-MD-TEMPLATE.md the brand-contract template every project starts from
tokens/
README.md how the token pipeline works
example/ DTCG tokens → Style Dictionary → CSS vars (tested, run it)
Every project gets a DESIGN.md brand contract before pixels; the contract is law and changes only by named amendment. Tools generate; doctrine decides. Nothing is "done" without inspectable evidence — real browser screenshots at 360/768/1440, clean console, an accessibility scan. Inspiration is filtered through the locked system (adopt / adapt / kill), never pasted over it. If a claim isn't provable, it doesn't ship.