design.how plugin
design.how: 6 skills turn an app's UI into a design system for the agent, plus four ready systems for shadcn.
- 314 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skills edit many project files and run scripts with a browser, and screen migration works through parallel workers.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/design-howDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills edit many project files and run scripts with a browser, and screen migration works through parallel workers.
This is third-party code. Review the repository files before installing.
What it does
design.how is a set of skills and design systems for coding agents. Six skills take the interface an app already ships and build a system the agent can use, then add a drift check and, on request, move all screens onto the system. `design-system-boss` is the entry point: you describe the problem in plain words, it reads the repository, picks a playbook and runs the other skills in order. `build-design-system` builds tokens, one canonical component per family, docs and checks. `migrate-design-system` moves screens with parallel workers, each checked against its before screenshot. There are also `token-mapping`, `component-docs` and `ui-review`. Four ready systems sit separately: Glaze, Lime, Quartz and Sodium. Each installs through shadcn and brings its own skill. The Vault folder holds skills for visual effects: moving type, shader fields and small interface pieces.
Who it is for. Frontend developers and designers whose UI has accumulated inconsistency and who need a token and component system the agent understands.
Good fit when
- The app has varying radii, spacing and shades and needs tokens.
- Colour codes and pixel values are mapped to tokens by purpose without changing code.
- A new project starts with the ready Quartz system for agent interfaces through shadcn.
- Before moving screens, an audit runs that writes notes to `.design-system/` and commits nothing.
Not a fit when
- You need one quick style fix: the set is built for a whole system.
- The app is outside the web stack and screenshots and a browser are unavailable.
- The system needs its own taste instead of the default bans and widths from `taste.md`.
Example request
Audit my app's interface, find inconsistency in tokens and propose a design system plan. Commit nothing.Limitations
Scripts that take screenshots need Playwright and Chromium. Screen migration launches parallel workers and edits many project files, so start with the audit mode that only writes notes. The checks in `evals/` confirm only that a rule is written in a skill and not that an agent follows it. The skills build on a shared `build-design-system`, so install it alongside any skill you pick. Ready systems install through shadcn from the network. The last commit dates from November 2026.
How to disable. In Claude Code uninstall the plugin: `/plugin uninstall design-system-skills@design-how`. Skills installed through `npx skills` are deleted from the agent's skills directory, and `.design-system/` from the project.
FAQ
How do I install all six skills?
Run `npx skills@latest add https://design.how`. From GitHub the same is installed by `npx skills@latest add arla6ka/design.how`.
How do I install the plugin in Claude Code?
Run `/plugin marketplace add arla6ka/design.how`, then `/plugin install design-system-skills@design-how`.
How do I add a ready system?
With a shadcn command, for example `npx shadcn@latest add https://design.how/r/quartz/theme.json`. The system's skill is installed with the theme.
Where do I begin?
With the `design-system-boss` skill: you describe the problem and it picks a playbook and runs the rest. It ends with the system, one migrated flow and a CI check.
What is Vault?
A folder of skills for visual effects: moving type, shader fields and small pieces. Each installs by name, for example `npx skills add https://design.how/vault/warp-type`.
Discussion
No questions or reviews yet.
Related
PluginsAn MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A Claude Code skill pack: token and component audits, governance, docs and reports for a design system team
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| design.how (this card) | no | 314 | ||
| extract-design-system | no | 288 | extracts tokens from a public site; design.how builds a system from your own app and migrates screens | |
| Design Systems MCP | no | not required | 227 | an MCP with design system knowledge; here skills for building and migrating and four ready systems |
README in short
The set has six skills, ten scripts with `--help` and `--self-test`, four systems and an effects catalogue. The glossary and default taste live inside `build-design-system` and can be replaced with your own.