Maintainer of this skill?
by arla6ka
Agent skills and design systems from design.how. Build a design system from your app, use agents to ship UI, enforce it in CI.
# Add to your Claude Code skills
git clone https://github.com/arla6ka/design.howSee how design.how compares with popular alternatives.
design.how is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by arla6ka. Agent skills and design systems from design.how. Build a design system from your app, use agents to ship UI, enforce it in CI. It has 124 GitHub stars.
design.how's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/arla6ka/design.how" and add it to your Claude Code skills directory (see the Installation section above).
design.how is primarily written in TypeScript. It is open-source under arla6ka on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh design.how against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Skills and design systems for coding agents, from design.how.
npx skills@latest add https://design.how
Or from GitHub, which installs the same six skills:
npx skills@latest add arla6ka/design.how
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/.
Each one installs with shadcn and brings its own skill, so your agent builds with its components and follows its rules.
Warm and light, for consumer apps, with one glowing action.
npx shadcn@latest add https://design.how/r/lime/theme.json
Components and source and docs.
Cold and calm, for AI agents and developer tools, with colour only for what a thing is and what went wrong.
npx shadcn@latest add https://design.how/r/quartz/theme.json
Components and source and docs.
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/ and commits nothing.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, and the three that drive a browser need Playwright and a Chromium. node evals/run.mjs --lint checks the skills themselves, including that no word the glossary avoids creeps back, and --triggers asks a host which skill each prompt starts, or none. Each case in evals/incidents/ only proves its rule is written down in the skill it names, not that an agent follows it. --case <id> prints one to run by hand.
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. 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, and runs checks that fail when a screen drifts. Every commit goes to the run branch, a new one cut at the start or the one you name, and never to your default branch. Merging is your call.
MIT licensed.