Taste Skill

디자인 방향 선정, 공개 사진 찾기, 실제 브라우저 확인까지 거쳐 에이전트가 흔한 AI 템플릿이 아닌 웹 페이지를 만들게 하는 디자인 스킬입니다.

스킬UI 디자인Leonxlnx 제작 · 비공식 한국어 정리
설치 방법 보기원본 저장소

언제 쓰면 좋나

랜딩 페이지, 제품 소개 페이지, 포트폴리오처럼 첫인상이 중요한 화면을 에이전트에게 처음부터 맡길 때 씁니다. 미리 조사해 둔 디자인 방향 중 하나를 고르고, 공개 아카이브의 실제 사진을 넣은 뒤, 브라우저에서 세 가지 화면 폭으로 확인하고 고치는 과정을 스스로 반복합니다. v2.1부터는 대시보드나 관리자 화면 같은 앱 화면도 별도 규칙으로 만듭니다.

설치

설치 전에 알아 둘 것

Node 22 이상과 Chrome, Edge, Chromium 중 하나가 필요합니다. Codex에서는 codex plugin 명령으로 설치합니다.

아래 방법 중 하나만 따라 하면 됩니다.

아래 명령은 Claude Code 기준입니다. Codex, Cursor에서는 원본 저장소의 설치 안내를 따르세요.

방법 1 npx로 스킬 설치

  1. 터미널에서 실행
    npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

방법 2 Claude Code 플러그인

  1. Claude Code에서 입력
    /plugin marketplace add Leonxlnx/taste-skill
  2. Claude Code에서 입력
    /plugin install taste-skill@taste-skill

주의할 점

  • 페이지 하나를 만드는 데 30~45분, 토큰 수십만 개가 듭니다. 요금제 사용량을 생각하고 쓰는 편이 좋습니다.
  • API 키는 필요 없지만, 사진을 찾을 때 인터넷 연결이 필요합니다.
  • 사진은 퍼블릭 도메인, CC0, CC BY, CC BY-SA 자료만 쓰고 페이지에 출처를 표시합니다. CC BY-SA는 동일 조건 공유 의무가 있으므로 상업 사이트라면 조건을 확인하거나 직접 준비한 이미지로 바꾸세요.
  • 예전 스타일 스킬(minimalist, brutalist 등)은 taste-skill-classics로, 이미지 생성 스킬은 imagegen-skills 저장소로 옮겨 갔습니다. 예전 글의 설치 명령은 맞지 않을 수 있습니다.
  • 차트 스크립트가 데이터를 이스케이프하지 않고 화면에 넣던 문제(#160)는 v2.1.5에서 고쳐졌습니다. 사용자 입력을 차트 라벨로 쓴다면 그보다 이전 버전은 /plugin update 등으로 먼저 업데이트하세요.

커뮤니티 반응

AI가 만든 화면의 뻔한 패턴을 생성 단계에서 막는 스킬로 Impeccable과 함께 자주 추천되고, 여러 에이전트에서 쓸 수 있는 폭넓은 기본값이라는 평가가 있습니다. 반면 규칙을 프롬프트로만 주던 v1 시절에는 에이전트가 규칙을 끝까지 지키지 않는다는 불만과, SKILL.md가 약 2만 토큰이라 컨텍스트 부담이 크다는 지적이 나왔습니다. v2는 브라우저 검사 스크립트와 참조 파일 분리로 이 두 문제에 대응했습니다. v2.1.1에서는 Claude Code에서 스킬이 로드되지 않는 문제가 보고됐다가 바로 고쳐졌습니다.

다른 사용자들의 공개 후기를 요약했습니다(2026-10-23 확인).

함께 비교한 글

비슷한 도구

Taste Skill 대신 쓸 만한 도구와 같은 UI 디자인 카테고리에서 별이 많은 도구입니다.