Taste icon

Taste

Taste는 URL로 웹사이트의 디자인 감각을 읽어 디자인 토큰과 근거로 정리하는 Claude Code skill입니다. AI agent와 개발 도구에서 활용할 수 있는 Markdown, JSON 파일을 출력합니다.

Taste

개요

Taste는 URL로 웹사이트의 디자인 감각을 읽는 Claude Code skill입니다. 페이지를 AI agent가 사용할 수 있는 디자인 컨텍스트로 바꾸며, 추출한 토큰과 시각적 선택의 근거를 함께 결합합니다.

홈페이지에 따르면 각 실행은 측정, 패턴, taste 추론, observer 검토의 네 단계로 사이트를 분석합니다. 결과물은 완전한 토큰 세트와 디자인이 무엇을 선택하고 무엇을 포기하는지 설명하는 taste 원칙을 담은 간결한 brief입니다.

기능

4단계 분석 파이프라인

하나의 요약이 아니라 같은 페이지를 측정, 패턴, taste, 편집 검토 관점에서 살펴보도록 네 개의 agent 역할로 URL을 처리합니다.

디자인 토큰 추출

색상, 간격, 반경, 그림자, 타이포그래피, 그리고 픽셀·hex 값·비율로 표기된 기타 측정값을 포함해 페이지에서 정확한 디자인 값을 수집합니다.

Taste 근거 출력

선택의 trigger, decision, reason, evidence, trade-off를 포함해 디자인 논리를 설명하는 4개의 taste 원칙을 도출합니다.

품질 검사 및 검증

최종 파일을 쓰기 전에 JSON을 검증하는 anti-slop 품질 게이트를 실행합니다.

이중 파일 출력

각 실행마다 두 개의 출력 파일을 씁니다. 하나는 `.md` brief이고, 다른 하나는 분석한 도메인 이름으로 저장된 `.json` 파일입니다.

사용 사례

  • 웹사이트 디자인을 역공학하기

    기존 사이트를 살펴보며 시각 시스템을 형성하는 것으로 보이는 디자인 토큰과 근거를 추출하고 싶을 때 Taste를 사용합니다.

  • AI agent에 디자인 컨텍스트 제공하기

    AI 코딩 agent가 구현 결정이나 규칙 파일로 변환할 수 있는 구조화된 디자인 컨텍스트가 필요할 때 사용합니다.

  • 재사용 가능한 디자인 산출물 생성하기

    특정 도메인에 대한 brief와 기계 판독 가능한 JSON 파일을 생성한 뒤, 이후 실행이나 도구에서 그 출력을 재사용할 때 사용합니다.

  • 사이트 간 분석 표준화하기

    여러 웹사이트를 비교하면서 주관적인 메모보다 일관된 측정 범주와 원칙 기반 분석을 원할 때 사용합니다.

Pros and Cons

Pros

  • 단일 패스 요약이 아니라 구조화된 다중 패스 워크플로를 사용합니다.
  • 근사값이 아니라 정확한 값으로 구체적인 디자인 측정값을 포착합니다.
  • 원시 토큰과 설명을 함께 제공해 AI agent가 디자인 의도를 재현하는 데 도움이 될 수 있습니다.
  • 다운스트림 도구 사용을 위해 Markdown과 JSON 두 형식의 출력을 제공합니다.
  • 잘못되거나 품질이 낮은 출력을 걸러내는 품질 게이트를 포함합니다.

Cons

  • 수집된 근거에는 pricing page가 없어, 가격과 요금제 구조는 확인되지 않았습니다.
  • 사이트는 여러 다른 tool target을 언급하지만, 설정은 Claude Code와 Gemini CLI에 대해서만 명시적으로 문서화합니다.

FAQ

Taste는 어떤 플랫폼을 지원하나요?

Claude Code skill이면서 Gemini CLI에서도 사용할 수 있는 것으로 보입니다. 홈페이지에는 Cursor, Windsurf, GitHub Copilot, Bolt, Antigravity, Vercel의 v0, Figma, Lovable용 출력 경로도 나열되어 있지만, 설정 예시는 Claude Code와 Gemini CLI에 대해서만 명시적으로 보여줍니다.

출력은 어떻게 생겼나요?

홈페이지는 네 단계 워크플로를 설명합니다. 웹페이지에서 측정을 추출하고, 패턴을 감지하고, taste를 추론한 뒤, 결과를 필터링하는 observer 단계를 거칩니다. 최종 산출물은 분석한 도메인에 대한 `.md` 파일과 `.json` 파일입니다.

어떻게 사용하나요?

홈페이지에는 Claude Code 또는 Gemini CLI를 위한 3단계 설정이 표시됩니다. 관련 skills 디렉터리에 skill을 복제하고, Playwright MCP를 설치한 다음, CLI를 다시 시작하고 URL에 대해 `/taste`를 실행합니다.

누구를 위한 도구인가요?

사이트는 이 skill이 어떤 웹사이트의 디자인 감각도 읽고 URL에서 디자인 컨텍스트를 생성할 수 있다고 설명합니다. 기존 사이트에서 구조화된 디자인 토큰과 근거를 얻고자 하는 AI agent와 개발자를 대상으로 합니다.

가격 정보가 있나요?

`/pricing`의 pricing page는 현재 404를 반환하므로, 수집된 근거에는 공개된 가격 모델이 포함되어 있지 않습니다.

Quick Facts

카테고리
Developer Tool
주요 형식
Claude Code skill
지원 CLI 예시
Claude Code, Gemini CLI
소스 도메인
tastelab.xyz
출력 파일
.md and .json
가격
수집된 근거에 없음