taste (website design extractor) skill
taste
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
- 449 ★ on the repository
- Last commit
Extended access
Why this level
- The skill opens any address you give it in a browser, so keep internal and private pages out
- The `extract.js` script runs on the page inside Playwright, and `CLAUDE.md` and Cursor rules get appended in your project
- The result mirrors another site's styling: copying someone else's branded design one to one may infringe rights
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/tasteDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill opens any address you give it in a browser, so keep internal and private pages out
- The `extract.js` script runs on the page inside Playwright, and `CLAUDE.md` and Cursor rules get appended in your project
- The result mirrors another site's styling: copying someone else's branded design one to one may infringe rights
This is third-party code. Review the repository files before installing.
What it does
The skill takes a site address and opens the page in a real browser through Playwright MCP. It captures a viewport screenshot and a full-page one, then the `extract.js` script collects data from the DOM, up to 8000 elements. On request the agent also visits two or three linked pages: values that repeat across several pages count as signs of a system. The analysis runs in four steps: measurements across 20 categories with exact px and hex values, a search for five to eight system rules, four taste principles and a quality gate. Each principle is written in one schema: trigger, decision, reason, evidence and trade-off. The skill drops vague labels such as clean and modern and checks the result with a search for banned words. The output is two files: `{domain}.md` with a design map and the principles, and `{domain}.json` for machines. The skill then writes rules for the tool you chose: Cursor, Windsurf, Claude Code, Copilot, Bolt, Antigravity, v0, Figma Make and Lovable.
Who it is for. Frontend developers and designers who study the visual language of another site or want to hand an agent a reference for a new interface.
Good fit when
- A design reference is needed for a landing page in the spirit of Linear or Stripe, while the agent still produces stock templates
- Before a redesign you compare a competitor's visual language: colors, fonts, radii, depth and grid
- The team wants to understand why a page has no accent color and where the sense of air comes from
- Design rules should go into `.cursor/rules` or `CLAUDE.md` so the agent keeps the style between sessions
Not a fit when
- You need page content or data: the skill analyzes only how a site looks
- The page is behind a login: Playwright opens the sign-in form instead of the screen you want
- The site is guarded by bot protection such as Cloudflare: the skill sees a check page instead
- You need illustrations, icons or animation: the skill does not extract graphics
Example request
/taste https://linear.app and save the rules for Claude CodeLimitations
The skill works only together with Playwright MCP; without it, it stops and asks you to install the server. On first run Playwright downloads about 100 MB of Chromium, so the first navigation can take 30 to 60 seconds.
CSS custom properties such as `var(--color)` reach the skill as computed values: variable names do not appear in the result. On heavy SPAs, for example Figma and Notion, the page may not finish loading, and the report then carries a caveat. The skill waits up to six seconds.
If a page is taller than six screens, the full-page screenshot is skipped. The last commit in the repository dates from July 2026.
How to disable. Delete the `~/.claude/skills/taste` folder (or `~/.gemini/skills/taste`). Playwright MCP stays connected: remove it with `claude mcp remove playwright` if you no longer need it.
FAQ
How does taste differ from ordinary design token extraction?
Beyond colors, fonts and spacing, the skill records principles: when to apply a decision, what was rejected and at what cost. That helps an agent decide how to style a page it has never seen.
Why does the Playwright command carry the `--isolated` flag?
Every run starts from a clean browser state: cookies and account sign-ins do not leak into the analysis. Without the flag, with a Linear session open, the skill would analyze the app instead of the public page.
Where does the skill write the result?
To the current directory: `{domain}.md` and `{domain}.json`. The file for the chosen tool is written separately: `.cursor/rules/{domain}-taste.mdc` for Cursor, `.windsurf/rules/{domain}-taste.md` for Windsurf, and for Claude Code a section is appended to `CLAUDE.md`.
Does the skill work in Gemini CLI?
Yes. Clone the repository into `~/.gemini/skills/taste` and add Playwright MCP to the mcpServers block of `~/.gemini/settings.json`. If slash commands are not supported, write "run taste on linear.app".
How many pages of a site does the skill analyze?
The agent asks before starting: one page, or two or three linked ones such as Product, Pricing or Community. With several pages, values that repeat count as signs of a system.
Discussion
No questions or reviews yet.
Related
SkillsA skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
A skill for building high-craft interfaces: landing pages, dashboards and mobile screens on four routes, with a cheapness check
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| taste (website design extractor) (this card) | no | 449 | |
| designlang | no | 4,782 | a CLI that pulls design tokens from a site into files; taste adds principles with trade-offs |
| Taste Skill | no | 110,763 | anti-template frontend rules for generating interfaces; it does not break down another site |
README in short
The README starts by asking why taste matters when tokens exist, and shows a sample result for linear.app. A table of export formats follows, then a section on what the skill is and is not good for, installation in Claude Code and Gemini CLI, a phase-by-phase pipeline diagram, the folder structure and a list of limitations with workarounds. A version changelog closes the page.
README badge
Original SKILL.md
---
name: taste
description: >-
Reverse-engineer the design taste of any website. Given a URL, captures DOM data
and a screenshot via real browser, then runs a 4-step analysis to produce
{domain}.md + {domain}.json with practical design tokens (colors, typography,
spacing, radii, shadows, grid) AND taste DNA (Trigger → Decision → Reason →
Evidence trade-offs explaining WHY the design works).
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"
author: Senlin
---
# Taste — Reverse-Engineer a Website's Design DNA
This skill turns a URL into two files:
- **`./{domain}.md`** — human-readable. Two sections:
- **Design Map** — practical tokens (colors, type scale, spacing, radii, shadows, grid)
- **Taste DNA** — 3-4 opinionated trade-offs (Trigger → Decision → Reason → Evidence)
- **`./{domain}.json`** — structured. Same data, machine-parseable, for downstream tools (Cursor, Windsurf, design systems).