Design System
Pulls design tokens out of live websites, HTML files, or screenshots and writes them into a structured DESIGN.md file. You point it at a URL and it uses Playwright to grab the page, extracts colors from CSS custom properties or Tailwind classes, maps typography and component patterns, then outputs everything as natural language with semantic roles instead of raw CSS. Works with Google Stitch projects too if you have the SDK installed. The real utility is when you're starting a new project based on an existing site's visual language or need to document a design system that was never formalized. Output is optimized for feeding into the design-loop skill.
- skills.sh installs
- 1.1K
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add jezweb/claude-skills --skill design-system --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.mdbefore 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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/jezweb/claude-skills
- Categories
- Frontend Development, Automation & Workflows, Design & UI/UX
- First seen
- Jun 3, 2026
More from jezweb/claude-skills
All 166- Onboarding Ux1.1K
- Roadmap1.1K
- Stripe Payments1.1K
- Tailwind Patterns1.1K
- Uk Business English1.1K
- App Docs1.1K
- Gws Setup1.1K
- Product Showcase1.1K
- Gws Install1.1K
- Strategy Document1.1K
- Team Update1K
- Us Business English1K
- Nextjs1K
- Design Loop1K
- Cloudflare Api997
- Parcel Tracking996
- Db Seed981
- Award Application971
- Nz Business English933
- Fork Discipline905
- Nemoclaw Setup902
- Motion785
- React Native Expo738
- Ux Extract687
Recommended
More Frontend Development
docker-containerizationailabs-393/ai-labs-claude-skillsThis skill should be used when containerizing applications with Docker, creating Dockerfiles, docker-compose configurations, or deploying containers to various 1.1Kskills.sh installs
social-media-carouselinference-sh/skillsMulti-slide carousel design for Instagram, LinkedIn, and Twitter/X with layout rules and hooks. Covers slide structure, text hierarchy, swipe psychology, and pl1.1Kskills.sh installs
appkitreown-com/skillsGuides developers through integrating Reown AppKit into web applications (React, Next.js, Vue, Nuxt, Svelte, vanilla JavaScript). Use when adding wallet connect1.1Kskills.sh installs
ionic-app-creationcapawesome-team/skillsGuides the agent through creating a new Ionic app using the Ionic CLI. Covers project scaffolding with ionic start, framework selection (Angular, React, Vue), t1.1Kskills.sh installs
typography-auditmblode/agent-skillsAudits web typography against 78 rules in 10 categories: font selection and @font-face setup, sizing and measure, punctuation, spacing and rhythm, hierarchy, al1.1Kskills.sh installs
cardkostja94/marketing-skillsWhen the user wants to design, optimize, or audit card layouts for content display. Also use when the user mentions "card layout," "card component," "card grid,1.1Kskills.sh installs