taste — Claude Code skill: what it does, how to install
Reverse-engineers any webpage aesthetic using a real browser to extract concrete design tokens and style rationale. Helps port a visual language to new code.
npx skills add senlindesign/taste-skill --skill taste -a claude-codeWhat taste does
The skill takes a webpage address, launches a headless browser, captures a screenshot, and parses the DOM. It writes the findings into two files: {domain}.md with human-readable rationale and {domain}.json containing structured tokens. Instead of vague labels, the output provides exact hex values and spacing scales.
Execution depends on the Playwright MCP server. The browser runs with the --isolated flag, preventing existing session cookies from skewing the analysis toward private account views. The initial run downloads a Chromium binary of about 100 MB, which takes 30 to 60 seconds. Subsequent analyses start in seconds.
The workflow is strictly for visual design extraction. It will fail if used for web scraping or text summarization. Without an active Playwright MCP connection, the agent stops immediately and demands setup.
What it helps with
- extract design tokens from a webpage into JSON
- document typography and spacing decisions for UI components
- supply concrete visual guidelines to an AI coding agent
- analyze a competitor interface before building a prototype
Example prompts for the agent
- /taste <url>
- analyze the design style of <url> and extract tokens
- build a dashboard matching the visual aesthetic of <url>
How to install taste
1Skills CLI (Vercel)
npx skills add senlindesign/taste-skill --skill taste -a claude-code2Manually: put the files in place
~/.claude/skills/taste/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/taste/
1Skills CLI (Vercel)
npx skills add senlindesign/taste-skill --skill taste -a codex2Manually: put the files in place
.agents/skills/taste/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add senlindesign/taste-skill --skill taste -a cursor2Manually: put the files in place
.cursor/skills/taste/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install senlindesign/taste-skill taste2Manually: put the files in place
.github/skills/taste/SKILL.md1Skills CLI (Vercel)
npx skills add senlindesign/taste-skill --skill taste -a gemini-cli2Platform CLI
gemini skills install https://github.com/senlindesign/taste-skillManually: put the files in place
.devin/skills/taste/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add senlindesign/taste-skill --skill taste -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about taste
How do I install taste in Claude Code?
Run npx skills add senlindesign/taste-skill --skill taste -a claude-code to install the skill. You will also need the Playwright MCP server connected.
What does the taste skill produce?
It generates {domain}.md with design tokens and decision rationale, plus {domain}.json for machine-readable consumption.
Why does Playwright require the isolated flag?
The --isolated flag opens a clean browser session without saved cookies or auth states. This ensures the analysis runs on public marketing pages instead of private account dashboards.
