arla6ka / design.how

# design.how
Skills and design systems for coding agents, from design.how.
## Install
 [code] 
Or from GitHub, which installs the same six skills:
 [code] 
One skill, with `build-design-system` beside it for the shared glossary, taste file and scripts: `npx skills@latest add arla6ka/design.how --skill build-design-system --skill ui-review`. A design system's skill without its code: `npx skills@latest add arla6ka/design.how/systems/quartz`.
It works with any coding agent that reads skills. In Claude Code you can also run `/plugin marketplace add arla6ka/design.how`, then `/plugin install design-system-skills@design-how`. To install by hand, copy the folders in `skills/` into your agent's skills folder, such as `.agents/skills/`.
## Design systems
Each one installs with shadcn and brings its own skill, so your agent builds with its components and follows its rules.
### Glaze
Glassy and compact, for AI products, with glass only on what you press.
 [code] 
Components and source and docs.
### Lime
Warm and light, for consumer apps, with one glowing action.
 [code] 
Components and source and docs.
### Quartz
Cold and calm, for AI agents and developer tools, with colour only for what a thing is and what went wrong.
 [code] 
Components and source and docs.
## Skills
These turn the UI your app already ships into a design system your agent can use, add a check that catches new drift, and move every screen onto it when you ask.
- design-system-boss. Start here. Say what's wrong in plain words, and it reads the repo, picks a playbook 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 writes only its own notes under `.design-system/` and commits 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.
Shared words are in glossary.md, and the default bans, widths and voice in taste.md. Both ship inside `build-design-system`, which the other skills build on, so install it next to any skill you add on its own. Replace the taste file with your own.
Ten scripts do what prose can't. `build-design-system` has `check-system.mjs`, `oklch.mjs`, `capture.mjs`, `capture-guard.mjs`, `pixdiff.mjs` and `find-chromium.mjs`. `migrate-design-system` has `land.mjs`, `legacy.mjs`, `bodies-check.mjs` and `parity.mjs`. Each has `--help` and `--self-test