Design System Generator
A client's URL → a single-file HTML design system built on their real colors and fonts.
npx skills add victor-shulga/design-system-generatorWhat it does
Reads a live site for the brand colors and fonts it actually uses — filtering out the theme-default palette noise that fools a naive scrape — then builds a single-file HTML design system: logo, color and type scales, spacing, components, pricing table, voice, and the LinkedIn artifacts, all in the client's own brand.
Input and output
Key features
- Real colors and fonts pulled from the live CSS
- Filters WordPress and Gutenberg default-palette noise
- 15-section anatomy: tokens, type, components, voice
- LinkedIn artifacts — banner, post footer, carousel cover
- Single file, no build step, deploy-ready
How to install
Node 18+ required. The command installs the whole set of skills into the current project folder:
npx skills add victor-shulga/design-system-generatorTo keep the skill at hand in every project, add -g:
npx skills add -g victor-shulga/design-system-generatorThe archive holds the folder design-system-generator/skills/ — move its contents into ~/.claude/skills/; every folder inside it becomes a skill of its own. Restart Claude Code. Claude Desktop and claude.ai take one skill at a time: zip the folder you need separately and upload it under Settings → Capabilities → Skills.
Download the ZIP · 18 KBOpen the GitHub repository and copy the folder skills/ to your machine. The main file is SKILL.md, and the rest is pulled in from it.
Check it works: type /design-system-generator in the chat — the skill should answer. If it does not: skills are read at session start, so restart Claude.