senlindesign

Taste Skill — Design skill for Claude Code

Design community

Claude Code skill — reverse-engineer any website's design taste: concrete tokens + opinionated trade-offs (WHY, not just WHAT).

How to install Taste Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open senlindesign/taste-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Taste Skill does

Claude Code skill — reverse-engineer any website's design taste: concrete tokens + opinionated trade-offs (WHY, not just WHAT).

Alternatives in Design

  • Claude Design Engineer — Design engineering for Claude Code 4.1k ★
  • Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
  • Extract Skill — Reverse-engineer design systems, tokens, and components from live products or screenshots 2.8k ★

README

/taste — Design DNA Extractor

[![Made for Claude Code](https://img.shields.io/badge/Made%20for-Claude%20Code-blueviolet?style=flat-square&logo=anthropic)](https://docs.anthropic.com/en/docs/claude-code) [![Works with Gemini CLI](https://img.shields.io/badge/Works%20with-Gemini%20CLI-4285F4?style=flat-square&logo=google)](https://ai.google.dev/gemini-api/docs/gemini-cli) [![Playwright MCP](https://img.shields.io/badge/Requires-Playwright%20MCP-1db954?style=flat-square)](https://playwright.dev/docs/api/class-playwright) [![License: MIT](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE) [![Demo](https://img.shields.io/badge/Landing%20Page-→-CF9FFC?style=flat-square)](https://www.tastelab.xyz)

Reverse-engineer any website's design taste. Tokens + trade-offs — not just "what", but "why".

**Quick start:** Clone into `~/.claude/skills/taste`, install Playwright MCP, run `/taste `. [Full install guide below.](#installation)


Why?

Every design extraction tool gives you tokens. "The background is #08090A. The font is Inter. The radius is 6px." That's not taste — that's a spec sheet. When an AI agent has only tokens, it copies the numbers without understanding the decisions behind them. The output looks vaguely right but generates slop the moment the template runs out.

Taste is the "why" behind the tokens: *why* this specific white instead of a branded accent color, *why* 1px inset border instead of a drop shadow, *why* the breathing room lives inside sections instead of between them. An agent with taste can make the right call on a page it's never seen. An agent with only tokens just applies the stylesheet.

`/taste` runs a 4-step pipeline on any URL and produces a `{domain}.md` and `{domain}.json` that explain both.


What It Produces

Running `/taste https://linear.app` writes two files:

**`linear.md`** — Design Map + Taste DNA:

## Design Map

Background: #08090A
Surface (card): rgba(255,255,255,0.05)
Text