어떤 웹사이트의 디자인 취향도 역설계하세요. 토큰 + 트레이드오프 — 단순히 '무엇’이 아니라 '왜’입니다.

퀵 스타트: ~/.claude/skills/taste에 클론하고, Playwright MCP를 설치한 뒤 /taste 를 실행하세요. 전체 설치 가이드는 아래에 있습니다.

---

왜?

모든 디자인 추출 도구는 토큰을 제공합니다. “배경은 #08090A. 글꼴은 Inter입니다. 반경은 6px입니다.” 그건 취향이 아니라 사양서입니다. AI 에이전트가 토큰만 가지고 있을 때, 그 뒤에 숨겨진 결정을 이해하지 못한 채 숫자를 복사합니다. 출력은 어딘가 맞아 보이지만 템플릿이 다 떨어지면 바로 찌질러집니다.

취향은 토큰의 '왜’입니다: 왜 이 특정 흰색을 브랜드 강조 색상 대신 사용하는지, 왜 1픽셀 인셋 테두리를 드롭섀도 대신 사용하는지, 숨 쉴 공간이 구역 사이에 있지 않고 구역 안에 존재하는 이유. 취향이 있는 에이전트는 한 번도 본 적 없는 페이지에서 올바른 결정을 내릴 수 있습니다. 토큰만 있는 에이전트는 스타일시트를 적용하면 됩니다.

/taste는 어떤 URL이든 4단계 파이프라인을 실행하며, 두 URL을 모두 설명하는 {domain}.md와 {domain}.json를 생성합니다.

---

그것이 만들어내는 것들

/taste https://linear.app를 실행하면 두 개의 파일이 작성됩니다:

linear.md — 디자인 맵 + 맛 DNA:

**'직선적이야.

/taste — Design DNA Extractor

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.

---

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 primary: #F7F8F8
Font: Inter Variable — weight 510 (display), 590 (subhead)
Card radius: 6px
Primary depth signal: rgb(35,37,42) 0px 0px 0px 1px inset
Transition: 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)

## Taste DNA

Principle: Brand lives in white, not in color — RESTRAINT
Trigger: Deciding on an accent color.
Decision: Don't introduce one. Use white (#F7F8F8) on near-black.
Reason: On #08090A, white carries all the emphasis needed. A branded
        CTA button would make it feel like a template.
Evidence: Every nav link and CTA is white or near-white. The pink
          gradient in the hero is a one-time decorative moment,
          not a system. accentCandidates from DOM are 100% grays.
Trade-off: Can't differentiate feature tiers by color. Hierarchy
           comes from weight and size alone.

linear.json — same data, machine-parseable. Feed it to Cursor rules, Windsurf rules, CLAUDE.md, or any design system pipeline.

---

Usage