Extract Design
Point this at any website URL and it extracts the entire design system into eight different formats: Tailwind config, CSS variables, React theme, shadcn/ui theme, Figma variables, W3C design tokens, plus an AI-optimized markdown file and visual HTML preview. It crawls the site, identifies colors, typography, spacing, shadows, breakpoints, even runs WCAG accessibility scoring. The output is genuinely practical. You can drop the Tailwind config straight into your project or import the Figma JSON for designer handoff. Built on the designlang CLI tool, so you'll need Node installed. Honest take: this is exactly what you'd build yourself if you were reverse engineering a design system, except someone already did the work.
- skills.sh installs
- 3.4K
- GitHub stars
- 5K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add manavarya09/design-extract --skill extract-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Extract Design Language
Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
Prerequisites
Ensure designlang is available. Install if needed:
npm install -g designlang
Or use npx (no install required):
npx designlang <url>
Process
- Run the extraction on the provided URL:
npx designlang <url> --screenshots
For multi-page crawling: npx designlang <url> --depth 3 --screenshots
For dark mode: npx designlang <url> --dark --screenshots
- Read the generated markdown file to understand the design:
cat design-extract-output/*-design-language.md
- Present key findings to the user:
- Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- WCAG accessibility score
- Component patterns found
- Notable design decisions (shadows, radii, etc.)
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/manavarya09/design-extract
- Category
- Design & UI/UX
- First seen
- May 16, 2026
Recommended
More Design & UI/UX
motion-uiaffaan-m/eccProduction-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.2.8Kskills.sh installs
impeccable-design-polishnexu-io/open-designFollow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page 2.7Kskills.sh installs
responsive-designowl-listener/designer-skillsDesign adaptive layouts and interactions that work across all screen sizes and input methods.2.5Kskills.sh installsmicro-interaction-specowl-listener/designer-skillsSpecify micro-interactions with trigger, rules, feedback, and loop/mode definitions.2.5Kskills.sh installsdesign-qa-checklistowl-listener/designer-skillsCreate QA checklists for verifying design implementation accuracy.2.5Kskills.sh installs