스킬UI·디자인
Taste Skill
디자인 방향 선정, 공개 사진 찾기, 실제 브라우저 확인까지 거쳐 에이전트가 흔한 AI 템플릿이 아닌 웹 페이지를 만들게 하는 디자인 스킬입니다.
Leonxlnx 제작 · 비공식 한국어 정리
언제 쓰면 좋나
랜딩 페이지, 제품 소개 페이지, 포트폴리오처럼 첫인상이 중요한 화면을 에이전트에게 처음부터 맡길 때 씁니다. 미리 조사해 둔 디자인 방향 중 하나를 고르고, 공개 아카이브의 실제 사진을 넣은 뒤, 브라우저에서 세 가지 화면 폭으로 확인하고 고치는 과정을 스스로 반복합니다. v2.1부터는 대시보드나 관리자 화면 같은 앱 화면도 별도 규칙으로 만듭니다.
설치
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"/plugin marketplace add Leonxlnx/taste-skill/plugin install taste-skill@taste-skillNode 22 이상과 Chrome, Edge, Chromium 중 하나가 필요. Codex는 codex plugin 명령으로 설치
주의할 점
- 페이지 하나를 만드는 데 30~45분, 토큰 수십만 개가 듭니다. 요금제 사용량을 생각하고 쓰는 편이 좋습니다.
- API 키는 필요 없지만, 사진을 찾을 때 인터넷 연결이 필요합니다.
- 사진은 퍼블릭 도메인, CC0, CC BY, CC BY-SA 자료만 쓰고 페이지에 출처를 표시합니다. CC BY-SA는 동일 조건 공유 의무가 있으므로 상업 사이트라면 조건을 확인하거나 직접 준비한 이미지로 바꾸세요.
- 예전 스타일 스킬(minimalist, brutalist 등)은 taste-skill-classics로, 이미지 생성 스킬은 imagegen-skills 저장소로 옮겨 갔습니다. 예전 글의 설치 명령은 맞지 않을 수 있습니다.
- 차트 스크립트가 데이터를 이스케이프하지 않고 화면에 넣는 문제가 이슈로 열려 있습니다(#160). 사용자 입력을 차트 라벨로 쓴다면 직접 처리해야 합니다.
커뮤니티 반응
AI가 만든 화면의 뻔한 패턴을 생성 단계에서 막는 스킬로 Impeccable과 함께 자주 추천되고, 여러 에이전트에서 쓸 수 있는 폭넓은 기본값이라는 평가가 있습니다. 반면 규칙을 프롬프트로만 주던 v1 시절에는 에이전트가 규칙을 끝까지 지키지 않는다는 불만과, SKILL.md가 약 2만 토큰이라 컨텍스트 부담이 크다는 지적이 나왔습니다. v2는 브라우저 검사 스크립트와 참조 파일 분리로 이 두 문제에 대응했습니다. v2.1.1에서는 Claude Code에서 스킬이 로드되지 않는 문제가 보고됐다가 바로 고쳐졌습니다.
다른 사용자들의 공개 후기를 요약했습니다(2026-10-23 확인).