Taste Skill

왜 쓰나요

핵심 기능

타이포그래피 규칙: 스케일, 대비, 계층
간격 시스템 적용 (1px 어긋난 패딩 없음)
색상 팔레트 규율 (단일 액센트, 시맨틱 중성색)
구성 비평 (시각적 무게, 여백)
자기 설명: '이렇게 해' 뿐만 아니라 수정이 왜 중요한지 설명
Tailwind, 바닐라 CSS, SwiftUI, Compose에서 작동

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "taste-skill-leon",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "taste-skill-leon": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Leonxlnx/taste-skill",
          "~/.claude/skills/taste"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add taste-skill-leon -- git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Taste Skill

취향 필터를 통해 Claude가 생성한 랜딩 페이지 검토

👤 Claude가 만든 마케팅 페이지를 출시하는 모든 개발자 ⏱ ~30 min intermediate

언제 쓸까: 첫 번째 출력이 괜찮지만 기억에 남지 않을 때.

사전 조건

스킬 설치 — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

흐름

비평

Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ 복사됨

→ 각각 태그된 10~20개의 위반
1등급 수정

Apply only severity-high fixes. Don't change copy — only visual/structural.✓ 복사됨

→ diff 적용됨; 사이트가 더 이상 '일반적'으로 보이지 않음
반복

Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ 복사됨

→ 2번의 패스로 수렴

결과: 생성된 것이 아닌 만든 것처럼 읽히는 페이지.

함정

스킬이 브랜드와 싸우는 스타일을 강제 — --brand /design/brand.md를 전달하여 가드레일을 존중하게 하세요

함께 쓰기: filesystem

단일 컴포넌트의 취향 이슈 감사

👤 디자인 시스템을 다루는 개발자 ⏱ ~15 min beginner

언제 쓸까: 시스템에 새 컴포넌트를 출시하기 전.

흐름

비평

Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ 복사됨

→ 인용된 라인과 함께 이슈
변형 확인

Compare hover, focus, and disabled states for visual coherence.✓ 복사됨

→ 드리프트 있으면 감지됨

결과: '왜 저게 이상해 보이지'라는 티켓이 줄어든 컴포넌트 출시.

함정

비평이 의도적인 디자인 선택을 무시 (예: 브루탈리스트 스타일) — --style brutalist 같은 것을 전달하여 일부 규칙을 완화하세요

taste-skill을 사용하여 새 디자인 시스템 기준선 설정

👤 새 제품을 시작하는 팀 ⏱ ~60 min intermediate

언제 쓸까: 토큰 스케일, 폰트, 팔레트를 선택하고 합리적인 기본값을 원할 때.

흐름

기준선 생성

Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ 복사됨

→ 선택별 이유가 있는 tokens.json
스트레스 테스트

Generate sample pages (login, dashboard, settings) using the baseline. Critique your own output.✓ 복사됨

→ 페이지 + 가능한 개선 사항이 있는 자기 비평

결과: 이해관계자와 협상할 필요 없는 방어 가능한 출발점.

함정

생성된 기준선이 너무 '안전' — 출력이 밋밋하지 않도록 브랜드 입력(무드, 참조)을 제공하세요

함께 쓰기: design-extract-mcp

조합

다른 MCP와 조합해 10배 효율

taste-skill-leon + design-extract-mcp

참조 사이트에서 토큰을 pull한 후 taste-skill로 정제

taste-skill-leon + filesystem

비평을 디자인 리뷰 기록으로 유지

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
critique	path_or_url, brand?	출시 전 검토
fix	path, severity_threshold	비평 후 1/2등급 목표
baseline	context: {product, audience}	디자인 시스템 콜드 스타트

비용 및 제한

운영 비용

API 쿼터: 해당 없음
호출당 토큰: 보통 — 전체 페이지 비평은 5~10k tokens
금액: 무료
팁: 전체 페이지보다 컴포넌트 수준에서 비평하는 것이 더 저렴합니다; 그 방식으로 반복하세요

보안

권한, 시크릿, 파급범위

최소 스코프: filesystem-read filesystem-write

자격 증명 저장: 없음

데이터 외부 송신: 로컬

문제 해결

자주 발생하는 오류와 해결

명백히 일반적인 UI에서 비평이 위반을 반환하지 않음

스킬이 '관대' 모드일 수 있습니다 — --strict를 전달하세요

수정이 레이아웃을 깨트림

먼저 --diff-preview로 실행하고 선택적으로 적용하세요

브랜드 가이드라인과 충돌

--brand를 통해 브랜드 마크다운을 전달하여 스킬이 예외를 존중하게 하세요

대안

Taste Skill 다른 것과 비교

대안	언제 쓰나	단점/장점
stevembarclay/pencilplaybook	Pencil 제품에 뿌리를 둔 UI 디자인 취향을 원할 때	Pencil에 특화됨; taste-skill은 일반적
단순한 brand.md 프롬프트	하나의 제품만 출시할 때	이 스킬이 방지하려는 AI 일반 패턴을 잡아내지 못합니다