Extract Design System
Extract Design System is an agent skill (a SKILL.md file) from arvindrk/extract-design-system. Extract design primitives from a public website and generate starter token files for your project. It works with Claude Code, Codex and Cursor and has 256 GitHub stars.
github.com/arvindrk/extract-design-system/skills/extract-design-system (opens in a new tab)
Data as of from the GitHub API and skills.sh; description from the skill's SKILL.md. Report an error
Add this skill
Claude
Claude Code loads skills from ~/.claude/skills/ (all projects) or .claude/skills/ (one project):
git clone --depth 1 https://github.com/arvindrk/extract-design-system.git
cp -r extract-design-system/skills/extract-design-system ~/.claude/skills/extract-design-system # personal, or .claude/skills in a projectIn the Claude apps, zip the extract-design-system folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).
ChatGPT / Codex
Codex reads skills from .agents/skills/ in a repo or ~/.agents/skills/ for every project:
git clone --depth 1 https://github.com/arvindrk/extract-design-system.git
cp -r extract-design-system/skills/extract-design-system .agents/skills/extract-design-system # repo; ~/.agents/skills for all projectsStandalone skills also load in the ChatGPT desktop app.
Cursor
Cursor loads skills from .cursor/skills/ (or ~/.cursor/skills/) and also reads .claude/skills/:
git clone --depth 1 https://github.com/arvindrk/extract-design-system.git
cp -r extract-design-system/skills/extract-design-system .cursor/skills/extract-design-system # project; ~/.cursor/skills for all projectsSource (checked Oct 7, 2026): code.claude.com/docs/en/skills (opens in a new tab), support.claude.com/en/articles/12512180-using-skills-in-claude (opens in a new tab), learn.chatgpt.com/docs/build-skills (opens in a new tab), cursor.com/docs/context/skills (opens in a new tab)
What this skill does
Extract design primitives from a public website and generate starter token files for your project. Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.
Similar skills
More design & frontend skills
Sound Effects
elevenlabs/skills
Generate sound effects from text descriptions using ElevenLabs.
Maintained · last commit Oct 23, 2026
OfficialDesign & frontendPythonUizze UI
uizze/uizze
The official Uizze skill for building and improving UI/UX.
Active · last commit Oct 12, 2026
Design & frontendJavaScript17 Pricing Strategy Global
minhnv0807/ai-business-skills
Use when a price has to be set or changed — value-based pricing, anchoring, charm pricing, decoy tiers, good-better-best packaging, discount policy, and margin math, with currency psychology for US…
Active · last commit Sep 12, 2026
Design & frontendPowerShellConvex Create Component
convex/agent-skills
Builds reusable Convex components with isolated tables and app-facing APIs.
Maintained · last commit Oct 13, 2026
OfficialDesign & frontendTypeScriptSvg Diagram
bybit-exchange/svg-diagram
SVG diagramming conventions blending a technical look with CJK-friendly typography.
Too new to judge · created Aug 13, 2026
OfficialDesign & frontendJavaScriptImage To Video
prime-skills/runcomfy-agent-skills
Animate any still image on RunComfy — this skill is a smart router that matches the user's intent to the right i2v model in the RunComfy catalog.
Maintained · last commit May 15, 2026
Design & frontend
How do I install the Extract Design System skill?
Copy the extract-design-system folder (the one containing SKILL.md) into ~/.claude/skills/ for Claude Code, .agents/skills/ for Codex or .cursor/skills/ for Cursor. The agent picks it up automatically when a task matches its description.
Is the Extract Design System skill free?
Yes. The repository is open source under the MIT license.
Is Extract Design System maintained?
The repository's most recent commit was on Jun 19, 2026. Its latest release is v0.1.11. appsgit only lists skills from repositories with a commit in the last six months.