Motif
Ten skills that plan, build and enforce a real design system, then keep your agent inside it.
A motif is the element that recurs until a work feels like one work. That's what a spacing scale is: the same six numbers, everywhere, on purpose.
Dogfood
We ran it on this site first.
Every codebase already has a design system. It's just an accidental one, built under
deadline, one p-[13px]
at a time.
Here's what the linter found on the app you're reading this on, before any of it was cleaned up. 229 of those findings are this page. Nothing here has a ratified system yet, so the page documenting one breaks it too.
$ npm run design-lint
47 files · 148 errors · 1582 warnings
1772 raw-palette
83 arbitrary-value
65 off-scale-spacing
22 raw-hex
19 off-scale-text
1961 findings across 47 files
The pipeline
Five phases. Each one fails without the last.
Phases 0 to 2 decide. Phases 3 and 4 execute. An execution phase never invents a value. If the tokens don't cover something it stops and asks. Improvising is how design systems rot, and an agent improvises a lot faster than a team does.
Why it can be automated
The tree is known before you start.
A domain model has to be discovered. It branches on whatever problem you happen to be in. Design doesn't. You can't pick component padding before the base unit, or line-height before the scale ratio. So the tree ships as data and the interview becomes a walk through it instead of an exploration.
An edge is a hard prerequisite. The frontier is every unsettled node whose parents are already settled. That's one round of questions.
Phase 1
Every round renders.
Nobody picks between a 1.200 and a 1.250 type ratio by reading the numbers. So the grill writes a standalone HTML file using your fonts, your colors and your copy, and asks you to look at it.
- Real content, never lorem ipsum. Lorem hides line-length problems, and line length is most of what a type scale decides.
- Options side by side. One option on its own is unanswerable. You need something to compare it against.
- Every recommendation shows its evidence. The absorption number from phase 0, not taste.
Round 2
Type scale
Unblocks sizes, leading and every component's text.
A · 1.200 Minor Third
Display 38
Heading 31
Title 26
Body 16
B · 1.250 Major Third
Display 49
Heading 39
Title 31
Body 16
Q1. Type ratio
> B, 1.250. You have 14 sizes. This absorbs 11.
Phase 5
Four passes that use the system.
Each one reads the tokens and refuses to invent new ones. That gate is structural, not a suggestion. A beautify pass with no token system underneath is exactly the AI slop every motion-audit tool complains about.
Beautify
beautifyCorrections, not redesigns
Snaps spacing and type to scale, fixes measure, optical alignment, overflow and focus states.
Transitions
apply-transitionsClassify the interaction, not the element
Finds every state change that happens instantly and gives it the right duration and easing.
Icons
choose-iconsCoverage before commitment
Works out which icons the product actually needs, tests real coverage, then applies one library everywhere.
Empty States
empty-statesThe most-seen, least-designed screen
Finds functionality that renders nothing when it has no data, and builds a real zero state.
Docs
Get started
Install
# all ten skills, any agent
npx skills add MaxPrehoda/motif
# or as a Claude Code plugin
/plugin marketplace add MaxPrehoda/motif
Works in Claude Code, Cursor, Codex, Copilot, Gemini CLI, and anything else that
reads SKILL.md.
Read every skill in full
before you install anything, or browse the
source on GitHub.
Run the pipeline
> /design-system
# or one phase at a time
> /design-extract
> /design-grill
It resumes at the first phase whose file is missing, so an interrupted run picks up where it stopped.
What lands in your repo
DESIGN.md the system, written for an agent
.design/drift.json the measurement
.design/decisions.json every settled node
.design/records/ the few expensive decisions
scripts/design-lint.mjs the enforcement
tailwind.config / @theme the tokens
The one rule
Never invent a value.
If a value has no token you've found a gap in the system or a one-off that shouldn't exist. Both need a human. Execution phases stop and report instead of guessing.