Extract Design System
arvindrk/extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.
Install Website Design Taste Extractor
$ npx skills add senlindesign/taste-skill --skill taste -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install senlindesign/taste-skill taste --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "taste" agent skill from https://github.com/senlindesign/taste-skill/tree/main into .claude/skills/taste/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "taste", 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.
$ npx skills add senlindesign/taste-skill --skill taste -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install senlindesign/taste-skill taste --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "taste" agent skill from https://github.com/senlindesign/taste-skill/tree/main into .agents/skills/taste/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "taste", 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 senlindesign/taste-skill --skill taste -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install senlindesign/taste-skill taste --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "taste" agent skill from https://github.com/senlindesign/taste-skill/tree/main into .cursor/skills/taste/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "taste", 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.
$ npx skills add senlindesign/taste-skill --skill taste -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install senlindesign/taste-skill taste --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "taste" agent skill from https://github.com/senlindesign/taste-skill/tree/main into .gemini/skills/taste/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "taste", 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 senlindesign/taste-skill tasteInstalls 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 senlindesign/taste-skill --skill taste -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "taste" agent skill from https://github.com/senlindesign/taste-skill/tree/main into .github/skills/taste/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "taste", 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 senlindesign/taste-skill --skill taste -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install senlindesign/taste-skill taste --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "taste" agent skill from https://github.com/senlindesign/taste-skill/tree/main into .opencode/skills/taste/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "taste", 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
taste- GitHub stars
- 385
- Token cost
- ~5.3k tokens
- SKILL.md length
- 2,516 words
- Files
- 17 (incl. references)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.
- Works in 7 steps: Parse the URL and export target → Capture page data (Playwright MCP) → Run the 4-step analysis → …
- Extracting a website's design tokens into Markdown and JSON
- SKILL.md covers When to activate, Prerequisites, Workflow and Error handling, plus 1 more section
- Runs JavaScript scripts from its folder; calls claude, npx and python3; reaches linear.app and stripe.com
What it does
Given a URL, the skill captures DOM data and a screenshot with a real browser, then runs a four-step analysis (measure, pattern, taste, observer, each with its own reference file) and writes a Markdown file and a matching JSON file named after the domain. The Design Map section holds colors, type scale, spacing, radii, shadows and grid as concrete values; the Taste DNA section holds a few opinionated trade-offs written as trigger, decision, reason and evidence.
The pipeline rejects vague phrases such as clean and modern in favor of pixel and hex values and restraint trade-offs. It needs the Playwright MCP server connected and uses extract.js from the references. It triggers on the /taste command and on requests to study a site's design, borrow its feel or compare against a competitor, but not on data scraping or content summaries. Export formats are described in a reference file.
When your agent uses it
- Extracting a website's design tokens into Markdown and JSON
- Studying a competitor's visual language and the reasons behind it
- Giving a coding agent design guidance modeled on a reference site
- Porting the feel of an existing site to a new project
Example prompts
- “/taste https://stripe.com”
- “Extract the design tokens from linear.app and explain why its spacing works.”
- “I want my dashboard to feel like Linear; analyze its design first.”
Requirements
- The Playwright MCP server connected to your agent
- Compatibility (from SKILL.md): Requires Playwright MCP. Claude Code: `claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated`. Gemini CLI: add to ~/.gemini/settings.json mcpServers block (see README).
Workflow steps
7 steps, taken from the step headings in SKILL.md.
- Parse the URL and export target
- Capture page data (Playwright MCP)
- Run the 4-step analysis
- Write the output files
- Self-audit (Anti-Slop pass)
- Export for your build tool
- Report
What it can do on your machine
Read from SKILL.md and the folder at commit 6dce223. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
claudenpxpython3
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
linear.appstripe.comvercel.com
Also links to:
playwright.dev
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.
Compatibility
Requires Playwright MCP. Claude Code: `claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated`. Gemini CLI: add to ~/.gemini/settings.json mcpServers block (see README).
From compatibility in the SKILL.md frontmatter.
Context cost
Website Design Taste Extractor loads about 5.3k tokens when it runs, and up to ~15k if it reads all its reference files. Until then it costs about 245 tokens; SKILL.md has 2,516 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 passed
The automated check found no risky patterns in SKILL.md.
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
Without a licence we can't republish the file, so here is its outline and opening line. It has 2,516 words (~5,289 tokens).
“This skill turns a URL into two files:”
- name
- taste
- compatibility
- Requires Playwright MCP. Claude Code: `claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated`. Gemini CLI: add to ~/.gemini/settings.json mcpServers block (see README).
- metadata.version
- 1.1.0
- metadata.author
- Senlin
Files
SKILL.md and 16 other files (references) in the repository root of senlindesign/taste-skill.
- SKILL.md
- .gitignore
- README.md
- docs/Cherry.glb
- docs/avatar.png
- docs/github.svg
- docs/index.html
- docs/mac.png
- docs/senlin.png
- docs/taste-title.png
- evals/evals.json
- references/export-formats.md
- references/extract.js
- references/step1-measure.md
- references/step2-pattern.md
- references/step3-taste.md
- references/step4-observer.md
Open the folder on GitHubat commit 6dce223
Compare with similar skills
Website Design Taste Extractor 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 |
|---|---|---|---|---|---|---|
| Website Design Taste Extractor this skillsenlindesign/taste-skill | 385 | — | ~5.3k | Automated safety check: Pass | None | |
| Extract Design Systemarvindrk/extract-design-system | 236 | 1 repos | ~514 | Automated safety check: Pass | MIT | |
| Igniteui Angular Figma To AppIgniteUI/igniteui-angular | 599 | — | ~6.4k | Automated safety check: Pass | MIT | |
| Omk StitchKaimingWan/oh-my-kiro | 107 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
Similar skills
Igniteui Angular Figma To App
IgniteUI/igniteui-angular
Builds Angular views from Figma designs with Ignite UI for Angular, supporting Indigo.Design kits, third-party kits, and plain frames.
Omk Stitch
KaimingWan/oh-my-kiro
Google Stitch design-to-code workflow with design system management.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Related
Works with
Categories
Questions about Website Design Taste Extractor
What does Website Design Taste Extractor do?
Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look. Given a URL, the skill captures DOM data and a screenshot with a real browser, then runs a four-step analysis (measure, pattern, taste, observer, each with its own reference file) and writes a Markdown file and a matching JSON file named after the domain. The Design Map section holds colors, type scale, spacing, radii, shadows and grid as concrete values; the Taste DNA section holds a few opinionated trade-offs written as trigger, decision, reason and evidence.
When should I use Website Design Taste Extractor?
Website Design Taste Extractor fits situations like: extracting a website's design tokens into Markdown and JSON; studying a competitor's visual language and the reasons behind it; giving a coding agent design guidance modeled on a reference site; porting the feel of an existing site to a new project.
How do I install Website Design Taste Extractor in Claude Code?
Run `npx skills add senlindesign/taste-skill --skill taste -a claude-code`. Or copy the skill folder (the senlindesign/taste-skill repository) into .claude/skills/taste in your project. Claude Code loads it when a task matches its description.
How do I install Website Design Taste Extractor in Codex?
Run `npx skills add senlindesign/taste-skill --skill taste -a codex`. Or copy the skill folder (the senlindesign/taste-skill repository) into .agents/skills/taste in your project. Codex loads it when a task matches its description.
Can I use Website Design Taste Extractor 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 senlindesign/taste-skill --skill taste -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/taste, .gemini/skills/taste, .github/skills/taste and .opencode/skills/taste in your project.
What does Website Design Taste Extractor need to run?
Going by SKILL.md and its folder, Website Design Taste Extractor needs JavaScript for the scripts in its folder and the command-line tools its instructions call (claude, npx and python3). Our summary lists: The Playwright MCP server connected to your agent. Compatibility (from SKILL.md): Requires Playwright MCP. Claude Code: `claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated`. Gemini CLI: add to ~/.gemini/settings.json mcpServers block (see README)..
Does Website Design Taste Extractor access the network?
SKILL.md names 4 domains. In commands or code: linear.app, stripe.com and vercel.com; the agent is likely to contact these when it follows the instructions. As links in the text: playwright.dev. This is read from the text; nothing was executed.
Is Website Design Taste Extractor safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Website Design Taste Extractor use?
No licence was found for Website Design Taste Extractor or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Website Design Taste Extractor use?
About 5.3k tokens (SKILL.md is roughly 21k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 10k tokens, read only when the agent opens those files.
What are the alternatives to Website Design Taste Extractor?
Skills that share tags, products or a category with Website Design Taste Extractor: Extract Design System (arvindrk/extract-design-system, 236 stars), Igniteui Angular Figma To App (IgniteUI/igniteui-angular, 599 stars), Omk Stitch (KaimingWan/oh-my-kiro, 107 stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Website Design Taste Extractor?
senlindesign (a GitHub user) maintains it in senlindesign/taste-skill, which has 385 GitHub stars. The repository was last updated on July 7, 2026.
Source: senlindesign/taste-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.