Set up a design system fast. Then fix the ones that never quite land.
Reusable design judgment for Claude Code and Codex — the setup, the anti-slop gate, and the taste.
Note
Most AI-generated UI feels off. Not because the components are ugly, but because the parts don't agree with each other. Left alone, agents drift to the same generic defaults every time — the thing everyone calls AI slop. design-kit keeps the part you shouldn't have to redo (the judgment) and co-designs only the aesthetic, per project.
git clone https://github.com/bborok1234/design-kit ~/myworks/design-kit
cd ~/myworks/design-kit && ./install.shOne repo, both hosts:
- Claude Code — symlinked into
~/.claude/skills/design-kit. Say "set up a design system", "polish this screen", "kill the slop", or "why does this feel cheap" and it kicks in. - Codex — writes
~/.codex/prompts/design-kit.md. Call it with/design-kit.
It runs on its own. If you have gstack, it hands the heavy lifting over (/design-review, /design-shotgun, image generation); if you don't, that knowledge is baked in.
One skill, three flows. It picks the right one from what you ask.
| Flow | Say this | What happens |
|---|---|---|
| A · Bootstrap | "set up a design system" | A short interview, then 2–3 genuinely different directions to choose from (real family vocabulary, with a test that stops them collapsing into one). Pick one and it writes DESIGN.md + tokens, then renders to check. |
| B · Gate | "build / polish this UI" | Clone an existing section instead of inventing a new look, build on the tokens, then grade the render against a rubric (aim for ≥80, fix biggest-win first) plus the Trunk, squint, and embarrassment tests. |
| C · Diagnose → Fix | "quality won't land / why does this feel generic" | First it tells the two failures apart: messy (incoherent → strip the variance) vs bland (no point of view → re-direct). It fixes the right one, re-scores to ≥80, and locks the result into DESIGN.md. |
coherence-as-lint — for each design axis (radius, shadow, accent, spacing, icon, type, motion, border) pick exactly one value and use only it. A mixed axis is a lint error, not a style choice.
Quality comes in two layers, and you fix them differently:
- Not-broken (coherence). Do the axes agree? Is there hierarchy? Are the empty/loading/error states drawn? This is measurable, and you fix it by removing variance. But it's only the floor — a perfectly consistent UI can still be forgettable.
- Good (aesthetic). Does it have a point of view, or is it just the default everyone ends up at? That's taste. You judge it by eye, against references, and you get there by rendering a few times and narrowing down. This is the part that actually eats your time — and blandness doesn't go away by removing variance. It needs a point of view.
SKILL.md → operational spine (when → what, the loop, pointers) ← edit here
reference/
directions.md → 9 named families · picker · SAFE/RISK · anti-convergence · anti-generic · re-direction · imagery
judgment.md → per-axis rules · a11y/type specifics · motion · UX writing · slop tells
gate.md → 7-category scored rubric (≥80) · Trunk/squint/embarrassment · diagnose · common failures
templates/
DESIGN.template.md → the system SSOT to emit (9 sections + Agent Prompt Guide)
tokens.template.css → shadcn-compatible tokens (swap the accent → whole-app restyle)
install.sh → links both hosts (symlink for Claude, generated prompt for Codex)
Edit SKILL.md and reference/ only. Claude Code sees it right away through the symlink; for Codex, re-run ./install.sh and it regenerates the prompt (stripping the YAML front-matter and rewriting relative links to absolute paths). Change the repo once, both hosts stay current.
Think of it as ESLint for your design system, except it also has taste. It sets up the tokens, lints every axis for coherence, and then does the slow part with you: landing on an aesthetic that has a point of view, instead of stopping at the clean-but-forgettable thing agents reach for on their own.
It takes what's reusable across several design harnesses and boils it down to one skill. What it leaves behind is their over-specification (fixed mobile vocabularies, whole component libraries, per-metric numeric tables) — it keeps the structural laws and the measurable ceilings, and nothing you'd have to rip out on the next project.
- styleseed — coherence-as-lint, the judgment engine, conflict-resolution order, the motion system.
- awesome-claude-design — the style-family taxonomy and the
DESIGN.mdsection schema. - gstack design skills —
/design-review's live audit dimensions,/design-shotgun's parallel-variant method, and thedesignimage-generation engine.
README structure inspired by LazyCodex.
MIT © Mir Lim