extract-design
From the author
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 site use', 'turn this URL into design tokens', 'make a Tailwind theme from this site', or '/extract-design'. Do not use for building a new UI from scratch unless the user first wants to extract an existing website's design language.
Install
npx skills add Manavarya09/design-extract --skill extract-design -a claude-code
Installs to .claude/skills/extract-design/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 91
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- designlang-tokensManavarya09/design-extractUse when styling UI for retool.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.Design★ 4.3K
- brand-extractnexu-io/open-designExtract a complete Brand Kit from a live website by driving the in-app browser. Use when a brand-extraction project opens with a site in the Browser tab, or when the user asks to "extract a brand", "pull the brand from <url>", "get the colors/fonts/logo from this site", or build a brand/design system from a reference website. Pairs with the agent-browser tool for measurement and pauses for the user when an anti-bot wall blocks the page.Design★ 102.9K
- design-extractnexu-io/open-designExtract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.Design★ 102.9K
- tailwind-design-systemwshobson/agentsBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.Design★ 41.4K
- figma-extractnexu-io/open-designPull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.Design★ 102.9K
- design-itsickn33/agentic-awesome-skillsRoutes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.Design★ 48.2K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in