Discover the toolingbehind modern intelligence
The operating system for AI infrastructure discovery. Search a live map of MCP servers, AI agents, LLM tools, automation systems, and developer infrastructure.
design-extract
Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension.
3.2kstars
295forks
JavaScript
accessibilityagent-skillaichrome-extensionclaude-code-pluginclicsscursordesign-systemdesign-to-codedesign-tokensdtcg
Quality signals
ActiveNo testsNo CIThin docsNo licensePopular
AI summary
Auto-generated overview of what this skill does and when to reach for it.
Extracts a live website’s full design system—tokens, layout, motion, voice, and components—into 17+ files for reuse in code, design tools, or AI agents.
Use this when
- Need to rebuild a competitor’s UI from their live site
- Migrating a legacy app to modern design tokens
- Generating Tailwind/shadcn themes from an existing site
- Creating a brand book from a deployed website
- Debugging design inconsistencies across pages
Don't use when
- Extracting designs from static PDFs or Figma files
- Working with non-web platforms (e.g., native mobile apps)
- Needing pixel-perfect exports for print
Capabilities
- Extracts DTCG tokens (primitive, semantic, composite layers)
- Detects layout grids, flex containers, and responsive breakpoints
- Captures hover/focus/active states and interaction animations
- Generates WCAG contrast scores with remediation suggestions
- Outputs typed React component stubs with variant matrices
- Provides MCP server for AI agents (Cursor, Claude, Windsurf)
InstallSKILLInstall as a Claude Code skill
Universal installANY TOOL
$ npx skillcity@latest Manavarya09/design-extractAuto-detects the skill or MCP server in this repo and installs it for Claude Code, Codex, Cursor or Cline.
Requires Node.js 18+ (ships with npx).
Or install manually
# Install into ~/.claude/skills/ mkdir -p ~/.claude/skills/design-extract curl -fsSL https://raw.githubusercontent.com/Manavarya09/design-extract/main/SKILL.md -o ~/.claude/skills/design-extract/SKILL.md
Loading README…
Ask a simulated agent to run this skill. It loads the real SKILL.md and reasons over your task with NVIDIA.
design-extract — sandboxAI sandbox
Pick a quick prompt below or type your own — watch the agent execute this skill step by step.
guest@skillcity:~$Try a prompt