Skills that turn the UI your app already ships into a design system your coding agent can use, with a check that catches new drift, then move every screen onto it when you ask.

Agents copy whatever is in the repo. If it has three buttons, forty grays and a token file half the code ignores, every new screen picks a different one. More agents spread the mess faster.

These skills come from building design systems for startups that raised millions. They read your app first, keep its look, and give agents components they can import, rules they can find, and checks that fail when they guess.

Follow along at design.how.

npx skills@latest add arla6ka/skills

It works with any coding agent that reads skills. To install by hand, copy the folders in skills/ into your agent's skills folder, such as .agents/skills/. If your agent installs skills by upload, download them at design.how and upload the zips in the upload folder, one per skill.

An agent with no system picks a button at random, invents a gray, skips the loading state and says it's done. It never checks the screens it didn't open.

Each skill swaps a guess for a step it can prove. It screenshots every route before the first edit, maps values to tokens by what they do, writes rules with a Don't and a Do, and runs checks that fail when a screen drifts. Nothing lands on your branch until you merge.

• design-system-boss. Start here. Say what's wrong in plain words, and it reads the repo, picks a route and runs the other skills in order. It ends with the system, one flow moved onto it and a CI check, then offers the full migration with its size.
• build-design-system. Builds tokens, one canonical component per family, docs and checks from the app you have, and proves them on one real flow.
• migrate-design-system. Moves every screen onto the system with parallel workers, each checked against its before screenshot. Start with audit mode, which changes nothing.
• token-mapping. Maps hex codes and pixel values to your tokens by purpose, so an 8px radius never stands in for an 8px gap. It never edits.
• component-docs. Writes a component's docs from its code and two real uses in your product, with the rules right next to the examples.
• ui-review. Reviews a screen or flow, including the states a screenshot misses, and ranks what's actually broken.

MIT licensed.