Taste-Skill 실측: AI가 만든 UI에서 ‘AI 냄새’를 완전히 없애주는 79k Stars 오픈소스 도구
AI 코딩의 ‘AI 냄새’ 문제
Cursor, Claude Code, Codex 같은 AI 코딩 도구를 자주 사용한다면 이 상황에 익숙할 것이다:
AI에게 랜딩 페이지를 만들어달라고 하면 3초 만에 코드가 나온다. 미리보기를 열면—보라색 그라데이션, Inter 폰트, 같은 너비의 3개 카드, border-radius 16px, 많은 여백. 다른 프로젝트에서도 결과는 거의 동일하다.
이것이 이른바 ‘AI 냄새’(AI Slop)다. 코드 품질 문제가 아니라, 로직은 완벽할 수 있다. 문제는 시각적 획일성에 있다.
원인은 간단하다: 대규모 언어 모델의 훈련 데이터에서 shadcn/ui 템플릿, Tailwind 기본 색상, Vercel 스타일 랜딩 페이지의 비중이 매우 높다.
Taste-Skill이란
Taste-Skill은 Leonxlnx가 시작한 오픈소스 프로젝트로, 2026년 8월 기준 79,000+ GitHub Stars를 획득했다.
기술적으로 Taste-Skill은 코드 라이브러리나 Figma 플러그인이 아니다. Agent Skill 파일의 집합—AI에게 프론트엔드 코드 생성 시 어떤 디자인 원칙을 따라야 하는지 지시하는 구조화된 Markdown 문서다.
주요 특징:
- 모든 주요 AI 코딩 도구 호환: Cursor, Claude Code, Codex, Gemini CLI, v0, Lovable, OpenCode
- 원 커맨드 설치:
npx skills add https://github.com/Leonxlnx/taste-skill - 13개의 독립 Skill: 다양한 시나리오별 선택
- MIT 라이선스: 상업적 이용 가능
핵심 원리
3개의 조절 노브
| 파라미터 | 의미 | 낮은 값 | 높은 값 |
|---|---|---|---|
| DESIGN_VARIANCE | 레이아웃 실험성 | 중앙 정렬, 대칭 | 비대칭, 모던 |
| MOTION_INTENSITY | 애니메이션 깊이 | hover 효과만 | 스크롤 기반 |
| VISUAL_DENSITY | 정보 밀도 | 넓은 여백 | 대시보드 스타일 |
Brief 추론 (v2 신기능)
v2는 먼저 프로젝트 요구사항을 ‘읽는다’:
- 프로젝트 유형 분석
- 대상 사용자와 업계 관행 추론
- 적절한 디자인 시스템 선택
- 3개 노브 조정
설치
npx skills add https://github.com/Leonxlnx/taste-skill지원 도구
| 도구 | 방법 | 호환성 |
|---|---|---|
| Cursor | .cursor/skills/ 디렉토리 | ✅ |
| Claude Code | SKILL.md 자동 로딩 | ✅ |
| Codex | 대화 붙여넣기 / npx | ✅ |
| Gemini CLI, v0, Lovable, OpenCode | SKILL.md | ✅ |
13개 Skill 목록
코드 생성
| Skill | 설치 이름 | 용도 |
|---|---|---|
| taste-skill (v2) | design-taste-frontend | 범용 기본값 |
| gpt-tasteskill | gpt-taste | GPT/Codex용 엄격한 규칙 |
| image-to-code-skill | image-to-code | 이미지→분석→코드 |
| redesign-skill | redesign-existing-projects | 기존 프로젝트 감사 |
| output-skill | full-output-enforcement | 불완전한 출력 방지 |
비주얼 스타일
| Skill | 이름 | 스타일 |
|---|---|---|
| soft-skill | high-end-visual-design | 부드러운, 프리미엄 느낌 |
| minimalist-skill | minimalist-ui | Notion/Linear 스타일 |
| brutalist-skill | industrial-brutalist-ui | 스위스 타이포그래피 |
이미지 생성
| Skill | 이름 | 용도 |
|---|---|---|
| imagegen-frontend-web | imagegen-frontend-web | 웹 디자인 참고 이미지 |
| imagegen-frontend-mobile | imagegen-frontend-mobile | 모바일 UI 참고 이미지 |
| brandkit | brandkit | 브랜드 비주얼 보드 |
효과 비교
SaaS 랜딩 페이지
Taste-Skill 없이: 보라~파랑 그라데, Inter 폰트, 같은 너비 3 카드, 중앙 CTA.
Taste-Skill (v2) 사용: Skill이 프로젝트 유형을 추론 → shadcn/ui 선택 → 비대칭 hero → 딥블루+앰버 악센트 → 스크롤 애니메이션 → 높은 정보 밀도.
결론
추천 점수: ⭐⭐⭐⭐½ (4.5/5)
Taste-Skill은 AI 코딩 시대의 핵심 과제를 해결한다: 코드 생성이 더 이상 병목이 아닐 때, 디자인 감각이 가장 큰短板이 된다.
FAQ
1. Taste-Skill과 shadcn/ui의 관계는?
직접적인 관계 없음. shadcn/ui는 컴포넌트 라이브러리, Taste-Skill은 디자인 지시 세트. 함께 사용 가능.
2. Cursor나 Claude Code 없이도 사용할 수 있나?
예. SKILL.md를 지원하는 도구라면 모두 사용 가능.
3. Taste-Skill이 AI 생성을 느리게 하나?
거의 그렇지 않다. Skill 파일은 추가 API 호출이 없는 텍스트 지시.
4. v1과 v2 중 무엇을 선택해야 하나?
v1의 특정 동작에 의존하지 않는 한 v2를 권장.
5. 프로덕션 환경에서 사용할 수 있나?
Skill 자체는 개발 단계 코드 생성에만 영향을 미치며 프로덕션 환경에 패키징되지 않는다.
