# taste

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 579 installs · ★ 427
- Author: Senlin
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/senlindesign/taste-skill/tree/HEAD/SKILL.md
- Updated: 2026-07-07
- HTML: https://affpapa.org/en/nevibecode/skills/taste

## What it 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.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add senlindesign/taste-skill --skill taste -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/taste/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/taste/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add senlindesign/taste-skill --skill taste -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/taste/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add senlindesign/taste-skill --skill taste -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/taste/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install senlindesign/taste-skill taste
```

2. **Manually: put the files in place**
- File: `.github/skills/taste/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add senlindesign/taste-skill --skill taste -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/senlindesign/taste-skill
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/taste/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add senlindesign/taste-skill --skill taste -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/senlindesign/taste-skill/tree/HEAD/SKILL.md

## When to use it
- 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
- /taste <url>
- analyze the design style of <url> and extract tokens
- build a dashboard matching the visual aesthetic of <url>

## Similar
- [extract-design-system](https://affpapa.org/en/nevibecode/skills/extract-design-system.md) — skill · 130700 installs
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [explain-interface](https://affpapa.org/en/nevibecode/skills/explain-interface.md) — skill · 14100 installs
- [design-component](https://affpapa.org/en/nevibecode/skills/design-component.md) — skill · 522 installs
- [huashu-design-html-native](https://affpapa.org/en/nevibecode/skills/huashu-design-html-native.md) — skill · 426 installs
- [Web Design Builder](https://affpapa.org/en/nevibecode/skills/web-design-builder.md) — skill · 416 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md