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-generatorЩо робить
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.
Вхід і вихід
Ключові фічі
- 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
Як встановити
Потрібен Node 18+. Команда ставить весь набір скілів у поточну папку проєкту:
npx skills add victor-shulga/design-system-generatorЩоб скіл був під рукою в усіх проєктах, додайте -g:
npx skills add -g victor-shulga/design-system-generatorВ архіві папка design-system-generator/skills/ — перекладіть її вміст у ~/.claude/skills/, кожна вкладена папка стане окремим скілом. Перезапустіть Claude Code. Claude Desktop і claude.ai приймають по одному скілу за раз: там запакуйте потрібну папку окремим архівом і завантажте через Settings → Capabilities → Skills.
Завантажити ZIP · 18 КБВідкрийте репозиторій на GitHub і скопіюйте папку skills/ собі. Головний файл — SKILL.md, решта підтягується з нього.
Перевірка: напишіть у чаті /design-system-generator — скіл має відгукнутись. Якщо ні: скіли читаються на старті сесії, перезапустіть Claude.