Motif
Ten skills for AI coding agents that set up a design system for your app, then make sure the agent sticks to it.
A design system is a short list of spacing sizes, font sizes and colors that the whole app reuses. Motif measures what your code uses today, helps you choose the list, updates your code to match, and adds a linter so it stays that way.
Tested on this site
We ran it on this site first.
Most apps end up with dozens of slightly different spacing values and shades of gray,
because each one gets picked on the spot. A
p-[13px]
here, a p-3.5 there.
This is what Motif's linter found on the site you're reading, before we fixed anything.
Most of the warnings are Tailwind colors like
text-neutral-500
used directly instead of a named color. 256 of the findings are on this page.
We haven't run the full pipeline here yet, so even the page about Motif breaks the rules.
$ npm run design-lint
47 files · 254 errors · 2294 warnings
2293 raw-palette
128 arbitrary-value
75 off-scale-spacing
28 raw-hex
23 off-scale-text
1 off-scale-radius
2548 findings across 47 files
How it works
Five phases, run in order.
Each phase uses the file the one before it wrote. The first three work out what your
system should be and save it as design tokens: named values like
primary or
radius-lg
that your code uses instead of raw numbers. The last two apply those tokens to your code.
While it's changing code, the agent never makes up a value. If it needs one your tokens don't cover, it stops and asks you. Guessing is how apps drift out of consistency, and an agent can guess hundreds of times in one session.
The questions
Design decisions happen in a fixed order.
Some choices depend on others. You can't set button padding until you've picked a spacing grid, or font sizes until you've picked a type scale. That order is the same for every project, so Motif already knows which questions to ask and when. Each row below is one round of questions.
The first question, what kind of product this is, is the only one your code can't answer. It shapes the defaults for everything below it.
An arrow means the decision above it has to be made first. R1 to R5 are the rounds of questions.
Phase 2
You see every option before you choose.
Nobody can choose between two type scales by reading “1.200” and “1.250.” So for each round, Motif writes a web page that shows the options in your own fonts, colors and text, and you pick by looking.
- Your real text, not lorem ipsum. Placeholder text hides problems like lines that run too long, which is most of what a type scale is about.
- Options side by side. One option on its own is hard to judge. Two next to each other are easy.
- Every recommendation comes with a reason. It tells you how many of your current values already fit, using the counts from phase 1.
Round 2
Type scale
Sets the size of every heading and paragraph in the app.
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 scale
> B, 1.250. 11 of your 14 font sizes already fit it.
After the pipeline
Four clean-up passes that use your system.
Once you have tokens, these skills fix common UI problems with them. Each one needs your DESIGN.md file and won't run without it. Without a system to follow, “make it look better” just means an agent making up new values, which is how apps become inconsistent in the first place.
Beautify
beautifyFixes, not redesigns
Fixes small layout mistakes in an existing UI, like uneven spacing, text lines that run too long and icons that sit slightly off-center, without changing the design.
Transitions
apply-transitionsAnimates things that currently snap
Finds menus, modals, tooltips and hover states that change instantly, and gives each one a transition that fits.
Icons
choose-iconsChecks coverage before picking a library
Lists the icons your product needs, checks which library actually has them, then uses that one library everywhere.
Empty States
empty-statesWhat users see before there's data
Finds lists, tables and pages that show nothing when there's no data, and gives each one a proper empty 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 it
> /design-system
# or one phase at a time
> /design-extract
> /design-grill
If a run gets interrupted, run /design-system again
and it picks up where it left off.
Files it adds to your repo
DESIGN.md the rules, written for agents to read
.design/drift.json what phase 1 measured
.design/decisions.json every choice you made
.design/records/ why you made the big ones
scripts/design-lint.mjs the linter
tailwind.config / @theme the tokens
The one rule
Never make up a value.
If the code needs a value your tokens don't have, either the system is missing something or that value shouldn't exist. Either way it's your call, so the agent stops and asks instead of guessing.