Shift UI Components
shift-editor/shift
Guides design, implementation and review of Shift interface work: shared Base UI wrappers, Tailwind v4 theme tokens, Figma matching and accessible interaction states.
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
Install Extract Design
$ npx skills add Manavarya09/design-extract --skill extract-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Manavarya09/design-extract extract-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Manavarya09/design-extract.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/extract-design .claude/skills/extract-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "extract-design" agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design into .claude/skills/extract-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Manavarya09/design-extract/tree/main/skills/extract-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Manavarya09/design-extract --skill extract-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Manavarya09/design-extract extract-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Manavarya09/design-extract.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/extract-design .agents/skills/extract-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "extract-design" agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design into .agents/skills/extract-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Manavarya09/design-extract --skill extract-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Manavarya09/design-extract extract-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Manavarya09/design-extract.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/extract-design .cursor/skills/extract-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "extract-design" agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design into .cursor/skills/extract-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Manavarya09/design-extract.git --path skills/extract-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Manavarya09/design-extract --skill extract-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Manavarya09/design-extract extract-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Manavarya09/design-extract.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/extract-design .gemini/skills/extract-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "extract-design" agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design into .gemini/skills/extract-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Manavarya09/design-extract extract-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Manavarya09/design-extract --skill extract-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Manavarya09/design-extract.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/extract-design .github/skills/extract-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "extract-design" agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design into .github/skills/extract-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Manavarya09/design-extract --skill extract-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Manavarya09/design-extract extract-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Manavarya09/design-extract.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/extract-design .opencode/skills/extract-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "extract-design" agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design into .opencode/skills/extract-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
extract-design- GitHub stars
- 4.2k
- Token cost
- ~786 tokens
- SKILL.md length
- 280 words
- Files
- 1
- Skills in repo
- 25
- Repo updated
- First seen
- Licence
- MIT
At a glance
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
- Works in 3 steps: Read the generated markdown file to… → Present key findings to the user → Offer next steps
- User says extract design
- SKILL.md covers Prerequisites, Process, Output Files (8) and Additional Commands, plus 1 more section
- Calls npx and npm
What it does
Extract Design is an agent skill from Manavarya09/design-extract. 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', or '/extract-design'.
Its SKILL.md is about 790 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Design tokens, Accessibility and CSS and styling. It works with shadcn/ui, Tailwind CSS, Figma and React. The repository describes itself as: 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… The licence is MIT.
When your agent uses it
- User says extract design
- Get design system
- Design language
- What colors/fonts does this site use
Example prompts
- “extract design”
- “get design system”
- “design language”
- “/extract-design”
Requirements
- Node.js
- Pre-approved tools (allowed-tools): Bash, Read, Write, Glob
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Read the generated markdown file to understand the design
- Present key findings to the user
- Offer next steps
What it can do on your machine
Read from SKILL.md and the folder at commit 23b6c1b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
BashReadWriteGlob
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npxnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Extract Design loads about 786 tokens when it runs. Until then it costs about 111 tokens; SKILL.md has 280 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Bash, Read, Write, Glob
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Manavarya09/design-extract at commit 23b6c1b, republished under its MIT licence (© Manavarya09). 280 words, ~786 tokens.
Download SKILL.mdSave it as
.claude/skills/extract-design/SKILL.md (or your agent's skills folder).- name
- extract-design
- description
- 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', or '/extract-design'.
- allowed-tools
- Bash, Read, Write, Glob
Extract Design Language
Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
Prerequisites
Ensure designlang is available. Install if needed:
npm install -g designlangOr use npx (no install required):
npx designlang <url>Process
- Run the extraction on the provided URL:
npx designlang <url> --screenshotsFor multi-page crawling: npx designlang <url> --depth 3 --screenshots
For dark mode: npx designlang <url> --dark --screenshots
- Read the generated markdown file to understand the design:
cat design-extract-output/*-design-language.mdPresent key findings to the user:
- Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- WCAG accessibility score
- Component patterns found
- Notable design decisions (shadows, radii, etc.)
Offer next steps:
- Copy
*-tailwind.config.jsinto their project - Import
*-variables.cssinto their stylesheet - Paste
*-shadcn-theme.cssinto globals.css for shadcn/ui users - Import
*-theme.jsfor React/CSS-in-JS projects - Import
*-figma-variables.jsoninto Figma for designer handoff - Open
*-preview.htmlin a browser for a visual overview - Use the markdown file as context for AI-assisted development
- Copy
Output Files (8)
| File | Purpose |
|---|---|
*-design-language.md | AI-optimized markdown — the full design system for LLMs |
*-preview.html | Visual HTML report with swatches, type scale, shadows, a11y |
*-design-tokens.json | W3C Design Tokens format |
*-tailwind.config.js | Ready-to-use Tailwind CSS theme |
*-variables.css | CSS custom properties |
*-figma-variables.json | Figma Variables import format |
*-theme.js | React/CSS-in-JS theme object |
*-shadcn-theme.css | shadcn/ui theme CSS variables |
Additional Commands
- Compare two sites:
npx designlang diff <urlA> <urlB> - View history:
npx designlang history <url>
Options
| Flag | Description |
|---|---|
--out <dir> | Output directory (default: ./design-extract-output) |
--dark | Also extract dark mode color scheme |
--depth <n> | Crawl N internal pages for site-wide extraction |
--screenshots | Capture component screenshots (buttons, cards, nav) |
--wait <ms> | Wait time after page load for SPAs |
--framework <type> | Generate only specific theme (react or shadcn) |
© Manavarya09, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/extract-design of Manavarya09/design-extract.
Open the folder on GitHubat commit 23b6c1b
Compare with similar skills
Extract Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Extract Design this skillManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT | |
| Shift UI Componentsshift-editor/shift | 348 | — | ~2.5k | Automated safety check: Pass | Apache-2.0 | |
| Light Frontend DesignLight0305/Light-skills | 640 | — | ~3.1k | Automated safety check: Pass | MIT | |
| UI Design Systemtry-works/role-model | 118 | — | ~5k | Automated safety check: Pass | MIT | |
| Tailwind V4 Shadcnever-works/ever-works | 162 | 2 repos | ~3.8k | Automated safety check: Pass | MIT | |
| Shadcn Tailwind UILiarMTTT/TavernWeave | 153 | — | ~1.7k | Automated safety check: Pass | Custom licence |
Similar skills
Light Frontend Design
Light0305/Light-skills
Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
Tailwind V4 Shadcn
ever-works/ever-works
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
Audit AI Frontend
jxnl/personal-monorepo-template
Audit AI-generated, AI-shaped, or AI-looking frontend code, UI screenshots, and design diffs.
More from Manavarya09/design-extract
All 25 skills in this repoDesignlang Tokens
Manavarya09/design-extract
A skill your agent uses when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
Designlang Tokens
Manavarya09/design-extract
A skill your agent uses when styling UI for perplexity.ai — references the extracted design system tokens instead of inventing colors, spacing, or typography.
Designlang Tokens
Manavarya09/design-extract
A skill your agent uses when styling UI for planetscale.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
Designlang Tokens
Manavarya09/design-extract
A skill your agent uses when styling UI for posthog.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
Designlang Tokens
Manavarya09/design-extract
A skill your agent uses when styling UI for postman.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
Designlang Tokens
Manavarya09/design-extract
A skill your agent uses when styling UI for railway.app — references the extracted design system tokens instead of inventing colors, spacing, or typography.
Related
Works with
Categories
Questions about Extract Design
What does Extract Design do?
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract. Extract Design is an agent skill from Manavarya09/design-extract. Extract the full design language from any website URL.
When should I use Extract Design?
Extract Design fits situations like: user says extract design; get design system; design language; what colors/fonts does this site use.
How do I install Extract Design in Claude Code?
Run `npx skills add Manavarya09/design-extract --skill extract-design -a claude-code`. Or copy the skill folder (skills/extract-design in Manavarya09/design-extract) into .claude/skills/extract-design in your project. Claude Code loads it when a task matches its description.
How do I install Extract Design in Codex?
Run `npx skills add Manavarya09/design-extract --skill extract-design -a codex`. Or copy the skill folder (skills/extract-design in Manavarya09/design-extract) into .agents/skills/extract-design in your project. Codex loads it when a task matches its description.
Can I use Extract Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Manavarya09/design-extract --skill extract-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/extract-design, .gemini/skills/extract-design, .github/skills/extract-design and .opencode/skills/extract-design in your project.
What does Extract Design need to run?
Going by SKILL.md and its folder, Extract Design needs the command-line tools its instructions call (npx and npm). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Bash, Read, Write, Glob.
Does Extract Design access the network?
SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Extract Design safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Extract Design use?
Extract Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Extract Design use?
About 786 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Extract Design?
Skills that share tags, products or a category with Extract Design: Shift UI Components (shift-editor/shift, 348 stars), Light Frontend Design (Light0305/Light-skills, 640 stars), UI Design System (try-works/role-model, 118 stars) and Tailwind V4 Shadcn (ever-works/ever-works, 162 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Extract Design?
Manavarya09 (a GitHub user) maintains it in Manavarya09/design-extract, which has 4,189 GitHub stars. The repository holds 25 skills in this directory. The repository was last updated on October 8, 2026.
Source: Manavarya09/design-extract on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.