Summary
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.
Install to Claude Code
npx -y skills add manavarya09/design-extract --skill extract-design --agent claude-codeInstalls into .claude/skills of the current project.
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Files
SKILL.md
Select a file.
Featured
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Give your AI agent a complete email layer—sending, inbound inboxes, and sandbox testing.
Get 4K emails/month free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
