design-system

Design System Engine — WrongStack

The contract

Default-framework UI is a failure, not a neutral starting point. Unstyled shadcn, bg-blue-500, stock Bootstrap gray, or "I'll pick colors as I go" all produce the same forgettable result and leave the codebase with no source of truth.

WrongStack ships a Design Studio: 50+ curated kits, each a complete design system — not a palette. Every kit carries its own radius scale, spacing rhythm, type ramp, motion curves, and elevation steps. The job here is to commit to ONE kit before any markup exists, push its tokens into a real file the build reads, and then write UI that only ever references those tokens.

Tokens in a file beat design intentions in a prompt. That is the whole idea.

---

The loop (never reorder; skip only explicit exceptions)

list → use → tune → materialize → BUILD → verify → fix drift

Steps 1–3 are cheap and happen before the first line of JSX/Dart/Swift. tune is optional when the chosen kit already fits; otherwise keep the order intact. If a UI file has already been written without a committed kit, stop, run the loop, and restyle against the tokens rather than patching colors by hand.

---

Step 1 — Commit to a kit

design {action:"list"}                      # browse available kits
design {action:"foundations"}               # read the stack-agnostic baseline
design {action:"use", kit:"<id>", stack:"web|react-native|flutter|swiftui|compose"}

use loads the kit's full spec for that stack — pass the right stack or the materialized output will be the wrong shape.

Target	stack
Next.js, Vite, Remix, any Tailwind v4 / shadcn web app	web
Expo / bare React Native	react-native
Flutter (any platform)	flutter
iOS native	swiftui
Android native	compose

Picking the kit

If the user pinned one with /design <kit-id>, that decision is final — use it and move on. Otherwise:

1. Run design {action:"list"} and read the kit descriptions. Do not pick from memory; the roster changes.
2. Match the kit to the product's tone, not to personal taste. Useful signals to reason from: audience (consumer vs. operator vs. developer), information density (marketing page vs. data table), emotional register (playful, editorial, clinical, brutalist, corporate-trustworthy), and any brand assets the user already has.
3. If two or three kits genuinely fit, name them with a one-line rationale each and ask. A ten-second question beats a full rebuild.
4. If the user gives zero signal and does not want to choose, pick the kit that best fits the product archetype, say which one and why in one sentence, and continue. Silence is not permission to fall back to defaults.