← All skills
build-design-system
77 / 100 · Review before installing
Check before installing.
By arla6ka/design.how (GitHub) · design · 315 stars · scanned at commit 419fa5a
Use when someone wants a design system built from the UI an app already ships, or one phase of it, such as "extract tokens from the app", "add states to our Button", "replace the hardcoded colors with tokens" or "start a design system". Moving screens onto an existing system's components is migrate-design-system. A vague whole-app ask goes to design-system-boss.
Works with any agent that supports SKILL.md skills.
What this skill can do
Runs commands on your computer
The author does not mention this.
Found in 12 places.
Show 9 more
- skills/build-design-system/scripts/check-system.mjs, line 1290
const git = (args) => execFileSync("git", args, { cwd: root, stdio: ["ignore", "pipe", "pipe"], maxBuffer: 256 << 20 }).toString(); - skills/build-design-system/scripts/check-system.mjs, line 1518
const run = (...a) => { const r = spawnSync(process.execPath, [fileURLToPath(import.meta.url), "--root", tmp, "--no-self-test", ...a], { cwd: tmp, encoding: "ut - skills/build-design-system/scripts/check-system.mjs, line 1550
const run = (...a) => { const r = spawnSync(process.execPath, [fileURLToPath(import.meta.url), "--root", it, "--no-self-test", ...a], { cwd: it, encoding: "utf8 - skills/build-design-system/scripts/check-system.mjs, line 1580
const git = (d) => { try { return execSync("git rev-parse --show-toplevel", { cwd: d, stdio: ["ignore", "pipe", "ignore"] }).toString().trim(); } catch { return - skills/build-design-system/scripts/check-system.mjs, line 1814
try { prefix = execFileSync("git", ["rev-parse", "--show-prefix"], { cwd: root, stdio: ["ignore", "pipe", "ignore"] }).toString().trim(); } catch {} - skills/build-design-system/scripts/find-chromium.mjs, line 21
import { execSync } from "node:child_process"; - skills/build-design-system/scripts/find-chromium.mjs, line 25
const sh = (cmd, cwd) => { try { return execSync(cmd, { cwd, stdio: ["ignore", "pipe", "ignore"] }).toString().trim(); } catch { return ""; } }; - skills/build-design-system/scripts/pixdiff.mjs, line 26
import { spawnSync } from "node:child_process"; - skills/build-design-system/scripts/pixdiff.mjs, line 53
const run = (...a) => { const r = spawnSync(process.execPath, [fileURLToPath(import.meta.url), ...a], { encoding: "utf8" }); return { code: r.status, out: (r.st
Connects to the internet
This is disclosed by the author in the skill's SKILL.md or README.
Found in 4 places.
Show 1 more
Downloads and installs other software
The author does not mention this.
Found in 4 places.
Show 1 more
Safer alternatives
Low-risk skills in the same category (design) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'build-design-system' ] || [ -L ~/.agents/skills/'build-design-system' ]; then echo 'A skill folder named build-design-system already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/arla6ka/design.how' "$d" && git -C "$d" checkout --quiet '419fa5af1721eebfab9e0062a630de36ffd0b342' -- 'skills/build-design-system' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/build-design-system' ~/.agents/skills/'build-design-system' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'build-design-system' ~/.claude/skills/'build-design-system' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for arla6ka/design.how shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/arla6ka/design.how/)
Score history
| Date | Version | Score |
|---|
| 2026-11-07 | 419fa5a | 100 |