Taste Lab

taste: AI 에이전트에게 디자인의 '맛'과 의사결정 논리를 부여하는 혁신 도구

현대의 웹 디자인은 단순히 색상 코드와 폰트 크기의 조합이 아닙니다. 진정한 디자인은 수많은 **의사결정(decisions)**과 그 과정에서의 **트레이드오프(trade-offs)**가 얽혀 만들어진 결과물입니다. taste는 모든 웹사이트의 URL을 분석하여 AI 에이전트가 즉시 학습하고 실행할 수 있는 완벽한 디자인 컨텍스트로 변환해주는 강력한 추출 도구입니다.

What's taste?

taste는 디자인의 본질을 이해하기 위한 도구입니다. 대다수의 디자인 추출 도구가 단순히 폰트나 색상 값인 '토큰(Tokens)'만을 나열하는 '스펙 시트'에 그친다면, taste는 그 이상의 것을 제공합니다.

taste = decisions × trade-offs

이 공식은 taste의 핵심 철학입니다.

• 의사결정(Decision): "왜 순수한 검정색 대신 이 특정한 Near-black(#08090A)을 선택했는가?"와 같은 '이유(Why)'를 찾는 과정입니다.
• 트레이드오프(Trade-off): 특정 디자인 요소를 선택함으로써 무엇을 얻었고, 무엇을 의도적으로 포기했는지를 양면에서 분석하는 것입니다.

맥락을 모르는 AI 에이전트는 숫자를 복사할 뿐이지만, taste를 보유한 AI 에이전트는 각 결정의 의미를 이해합니다. 이를 통해 한 번도 본 적 없는 새로운 페이지에서도 브랜드의 정체성에 맞는 올바른 디자인 판단을 내릴 수 있게 됩니다.

taste의 주요 특징 (Features)

taste는 디자인의 '맛'을 분석하기 위해 고도로 정제된 4단계 파이프라인을 운영합니다. 각 단계는 서로 다른 역할을 가진 AI 에이전트들이 수행하며, 최종적으로 잡음이 제거된 고품질의 디자인 데이터를 생산합니다.

1. 4단계 분석 파이프라인 (The Pipeline)

H4. 01 단계: 측정치 추출 (Extract Measurements)

Senior Design AI의 역할로, 웹페이지에서 정확하고 객관적인 디자인 측정치를 추출합니다. 대략적인 수치가 아닌 픽셀(px), 헥스 코드(hex), 비율(ratio) 등의 정확한 데이터를 수집합니다.

H4. 02 단계: 패턴 감지 (Detect Patterns)

Principal Design Engineer가 1단계에서 수집된 측정치를 바탕으로 시스템적인 규칙(SYSTEMATIC RULES)을 탐지합니다. 디자인이 어떻게 구조화되어 있는지 그 패턴을 분석합니다.

H4. 03 단계: 취향 추론 (Infer Taste)

Ultimate Design Critic이 개입하여 디자이너가 내린 의도적이고 고통스러운 '트레이드오프'를 도출합니다. 디자인의 원칙과 철학을 읽어내는 핵심 단계입니다.

H4. 04 단계: 최종 관찰 (Observer)

Lead Critic & Final Editor가 무의미한 정보나 오류를 무자비하게 걸러냅니다. 품질 게이트를 통과한 데이터만이 최종 파일로 기록됩니다.

2. 정밀한 역설계 역량

• 광범위한 카테고리: 20가지 측정 카테고리를 통해 모든 디자인 요소를 세밀하게 분석합니다.
• 시스템 레벨 규칙: 5~8개의 시스템 규칙을 추출하며, 각 규칙에는 구체적인 근거(Evidence)와 디자인 목표(Design Goal)가 명시됩니다.
• Taste DNA 원칙: 트리거, 결정, 이유, 근거, 트레이드오프를 포함한 4가지 핵심 원칙을 정의합니다.

taste의 결과물 (The Output)

taste를 실행하면 AI 에이전트가 읽을 수 있는 두 가지 핵심 파일이 생성됩니다.

Part 1: Design Map (디자인 맵)

웹페이지의 모든 토큰 세트를 완벽하게 정리합니다.

• 컬러 시스템: 배경색(#08090A), 텍스트 레이어, 패널 경계선 값 등.
• 타이포그래피: Inter Variable 폰트 적용, 자간(tracking), 행간(line-height) 등의 상세 스펙.
• 간격 및 반경: 8px 베이스 유닛, 섹션 패딩, 요소별 테두리 반경(Radius).
• 깊이 및 그림자: 카드 테두리 인셋, 플로팅 카드 그림자, 비네트 효과 등.

Part 2: Taste DNA (테이스트 DNA)

각 디자인 결정의 이유를 설명하는 4가지 원칙입니다.

• Trigger: 특정 선택을 유도한 요소
• Decision: 최종적으로 선택된 디자인 내용
• Reason: 선택 이면의 디자인 논리
• Evidence: 구체적인 DOM 값 및 데이터 증거
• Trade-off: 이 선택으로 인해 감수하거나 포기한 것

어떻게 사용하는가? (How to Use)

taste는 클론 후 간단한 설정을 통해 어디서든 실행할 수 있습니다.

1. 저장소 클론: Claude 스킬 디렉토리에 taste를 복제합니다. git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

2. Playwright MCP 설치: 웹페이지 분석을 위한 브라우저 환경을 구성합니다. claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

3. 분석 실행: Claude Code를 재시작한 후, 원하는 URL을 분석합니다. /taste https://linear.app

활용 사례 (Use Case)

taste에서 생성된 파일은 별도의 설정 없이 다양한 AI 도구에 바로 적용할 수 있습니다.

• Cursor: .cursor/rules/{domain}-taste.mdc로 자동 적용.
• Windsurf: .windsurf/rules/{domain}-taste.md를 통해 컨텍스트 공유.
• Claude Code: CLAUDE.md 파일에 디자인 취향 섹션을 추가하여 활용.
• v0 by Vercel: taste-tokens.css 및 상세 지침으로 디자인 구현.
• Figma Make: 추출된 CSS를 바탕으로 피그마 디자인 가이드 생성.
• 기타 도구: GitHub Copilot, Bolt, Lovable, Antigravity(Gemini) 등과 완벽 호환.

FAQ (자주 묻는 질문)

Q: taste가 분석하는 주요 데이터는 무엇인가요? A: 모든 색상, 폰트 두께, 간격, 테두리 반경, 그림자 등을 분석하며, 특히 수치뿐만 아니라 그 선택의 디자인적 '이유'를 함께 분석합니다.

Q: AI 에이전트 없이 단독으로 사용할 수 있나요? A: taste는 기본적으로 AI 에이전트에게 디자인 컨텍스트를 제공하기 위해 설계되었지만, 생성된 마크다운(.md) 파일은 디자이너나 개발자가 분석용으로 읽기에도 매우 훌륭한 자료가 됩니다.

Q: 무료로 사용할 수 있나요? A: Sen Lin이 제작한 오픈 소스 프로젝트로, GitHub을 통해 누구나 이용하고 기여할 수 있습니다.

Q: 어떤 원리로 웹사이트를 분석하나요? A: Playwright를 사용하여 실제 웹페이지의 DOM과 스타일 정보를 수집한 후, 4단계의 특화된 AI 에이전트들이 이를 해석하여 인간의 논리적 사고 방식과 유사한 'Taste DNA'를 도출합니다.

---

이 도구는 Sen Lin에 의해 제작되었습니다. 디자인의 본질을 이해하는 AI를 경험해보세요.