design-system
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.
npx skills add jezweb/claude-skills --skill design-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Design System Extractor Analyse an existing website, HTML file, or screenshot and synthesise a semantic design system into a `DESIGN.md` file. The output is optimised for use with the `design-loop` skill and general page generation. ## When to Use - Starting a new project based on an existing site's visual language - Documenting a site's design system that was never formally written down - Preparing `.design/DESIGN.md` before running the design loop - Extracting brand guidelines from a client's existing website - Creating consistency documentation for a multi-page project - Extracting design tokens from a Google Stitch project ## Workflow ### Step 1: Identify the Source Ask the user for one of: | Source | Method | |--------|--------| | **Live URL** | Browse via Playwright CLI or scraper, screenshot + extract HTML | | **Local HTML file** | Read the file directly | | **Screenshot image** | Analyse visually (limited — no exact hex extraction) | | **Existing project** | Scan `site/public/` for HTML files to analyse | | **Stitch project** | Use `@google/stitch-sdk` to fetch screen HTML + design theme | ### Step 2: Extract Raw Design Data #### From a Live URL 1. **Browse the site** usi
- When to Use
- Workflow
- Step 1: Identify the Source
- Step 2: Extract Raw Design Data
- Step 3: Analyse Design Tokens
- Step 4: Synthesise into Natural Language
- Step 5: Write DESIGN.md
- Step 6: Verify Accuracy
- Step 7: Report to User
- Handling Multiple Pages
- Tips
- Common Pitfalls
What does the design-system skill do?
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill design-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.