Design System Toolkit — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited Design System Toolkit (Plugin) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
Aggregate score unchanged between these scans.
The primary manifest — the file an agent reads to learn what this artifact does.
Two Claude Code skills for getting a design system into Claude Code — so it applies your tokens, type, and components automatically on every UI task.
| Skill | Use it when… | What it produces |
|---|---|---|
| `design-system-generator` | You're starting from scratch and want a system created from your taste. | A brand interview → a markdown spec (docs/design-system.md) + an HTML visual style guide, and a CLAUDE.md reference. |
| `design-system-importer` | You already have a design system (usually in Figma) and just need it translated into code + a spec Claude can read. | Extracts colors, type, spacing, radius, shadows, icons & components from Figma → markdown spec + synced code tokens + an HTML visual guide. Figma stays the source of truth. |
Rule of thumb: no system yet → generator. System already designed in Figma → importer.
Three ways to install. Methods 1 and 3 let you grab one or both skills (you're copying folders, so you choose). Method 2 (marketplace) installs the whole plugin — easiest, but all-or-nothing.
A skill folder can live in `~/.claude/skills/` (available in every project) or `your-project/.claude/skills/` (just that one project). The commands below use the global path — swap it for the project path if you prefer. After any manual copy, restart Claude Code so the skill appears.
Which one should I use? - Just want it working, fine with both skills → Method 2 (marketplace) - Comfortable in a terminal, want to choose one skill → Method 1 (git clone) - Don't use git / want to look at the files first → Method 3 (ZIP)
# Get the repo
git clone https://github.com/brianamazzio/design-system-toolkit.git
# Copy the skill(s) you want into your personal skills folder:
cp -R design-system-toolkit/skills/design-system-importer ~/.claude/skills/ # the Figma importer
cp -R design-system-toolkit/skills/design-system-generator ~/.claude/skills/ # the from-scratch generatorWant just one? Run only that one cp line. Then restart Claude Code — the skill appears as /design-system-importer or /design-system-generator.
/plugin marketplace add brianamazzio/design-system-toolkit
/plugin install design-system-toolkitThis installs the bundled plugin (both skills). Invoke them with /design-system-importer or /design-system-generator. To remove later: /plugin uninstall design-system-toolkit.
⚠️ The marketplace route can't cherry-pick a single skill — if you want only one, use method 1 or 3.
Download: on this repo, click the green Code button → Download ZIP. Or in a terminal:
curl -L https://github.com/brianamazzio/design-system-toolkit/archive/refs/heads/main.zip -o design-system-toolkit.zip
unzip design-system-toolkit.zipThen copy the skill folder(s) from the unzipped design-system-toolkit-main/skills/ into ~/.claude/skills/:
cp -R design-system-toolkit-main/skills/design-system-importer ~/.claude/skills/
cp -R design-system-toolkit-main/skills/design-system-generator ~/.claude/skills/Copy only the folder(s) you want, then restart Claude Code.
design-system-generatorRuns a structured brand interview (personality, colors, type, density, references, constraints), then generates:
design-system-visual.html — a browser-reviewable style guide showing every token.docs/design-system.md — the precise spec Claude reads each session.CLAUDE.md.Best run before building screens, to lock the visual foundation.
design-system-importerFor systems that already exist in Figma. It:
docs/design-system.md, syncs your real code tokens (e.g. a Tailwind @theme block or CSS variables) to match Figma, and renders design-system-visual.html.design-system-importer against a live Figma file: the Figma MCP connected to the account that owns the file. (It can also work from a token JSON export or screenshots if you can't connect live.)design-system-toolkit/
├── .claude-plugin/
│ ├── plugin.json # plugin manifest
│ └── marketplace.json # lets `/plugin marketplace add` find the plugin
├── skills/
│ ├── design-system-generator/SKILL.md
│ └── design-system-importer/SKILL.md
├── README.md
└── LICENSEMIT — see LICENSE.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.