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-system-extractor-skill
Claude Code skill that extracts design systems from live websites. Uses Firecrawl MCP to scrape branding, CSS tokens, and typography, then outputs structured CSS custom properties, Style Dictionary JSON, an analysis report, and a visual preview page.
1stars
0forks
HTML
claude-codeclaude-code-skilldesign-systemdesign-tokensfirecrawlmcpstyle-dictionaryweb-scraping
Quality signals
StaleNo testsNo CIThin docsNo licenseNew
InstallSKILLInstall as a Claude Code skill
Universal installANY TOOL
$ npx skillcity@latest david-lai-jpg/design-system-extractor-skillAuto-detects the skill or MCP server in this repo and installs it for Claude Code, Codex, Cursor, Cline, OpenCode, Gemini CLI, Anti-Gravity, OpenClaw and Hermes.
Requires Node.js 18+ (ships with npx).
Or install manually
# Install into ~/.claude/skills/ mkdir -p ~/.claude/skills/design-system-extractor-skill curl -fsSL https://raw.githubusercontent.com/david-lai-jpg/design-system-extractor-skill/main/SKILL.md -o ~/.claude/skills/design-system-extractor-skill/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-system-extractor-skill — 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