Updated 1w ago
by Manavarya09
design-extract
Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.
4.2k GitHub stars (4,244)
+104 in 20 days
| Period | New stars |
|---|---|
| Sep 27 | 0 |
| Sep 28 | +2 |
| Sep 29 | +2 |
| Sep 30 | +6 |
| Oct 1 | +1 |
| Oct 2 | +11 |
| Oct 3 | −3 |
| Oct 4 | +5 |
| Oct 5 | +5 |
| Oct 6 | 0 |
| Oct 7 | +5 |
| Oct 8 | +5 |
| Oct 9 | +9 |
| Oct 10 | +6 |
| Oct 11 | +12 |
| Oct 12 | +11 |
| Oct 13 | +9 |
| Oct 14 | +4 |
| Oct 15 | +7 |
| Oct 16 | +7 |
- 2 skills (2 skills found in its SKILL.md files)
- 361 forks (361 forks)
- 1w ago last update (Last updated 1w ago)
Install
Skills CLI
npx skills add Manavarya09/design-extract
Asks which skills and agents to install. Just one: npx skills add Manavarya09/design-extract --skill extract-design — add -g for every project.
Claude Code
git clone https://github.com/Manavarya09/design-extractcp -r "design-extract/skills/extract-design" ~/.claude/skills/
Copies the extract-design skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add Manavarya09/design-extract
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this sit…
skills/extract-design/SKILL.md on GitHub (opens in a new tab) -
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
website/public/gallery/cal-com/.claude/skills/designlang/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.