AI가 기본값으로 뽑아내는 보라색 그라데이션 + 가운데 정렬 히어로 + Inter 폰트 — 그 "AI 슬롭(slop)"을 잡는 13개의 SKILL.md 묶음.
SKILL.md 한 장이 AI 코딩 에이전트의 행동을 어떻게 바꾸는지부터.
2025년 하반기, Cursor / Claude Code / Codex / Windsurf / GitHub Copilot 같은 AI 코딩 에이전트들이 일제히 SKILL.md라는 공통 규격을 받아들이기 시작했다. 폴더에 SKILL.md 파일 하나만 떨궈두면 에이전트가 자동으로 읽고 그 규칙대로 코드를 짠다. 별도 SDK도, 빌드도, 설정도 없다.
그런데 "AI에게 무슨 지시를 어떻게 적느냐"는 사람마다 다르다. 좋은 SKILL.md는 "AI의 통계적 편향을 의도적으로 어긋나게" 만들고, 나쁜 SKILL.md는 그저 모범 답안만 나열한다. Taste Skill은 후자가 아니라 전자를 노린 레포다.
agent-skills 표준으로 띄운 포맷. 프론트매터(name, description)와 본문(규칙)을 가진 마크다운 한 장. 에이전트는 사용자 요청 키워드와 description을 매칭해 자동으로 본문을 컨텍스트에 끌어온다. "플러그인 없이 동작하는 플러그인"이라 부를 만하다.DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 세 개의 다이얼을 노출한다. 8/6/4가 기본값. 사용자가 채팅에서 "더 정적으로", "더 빽빽하게" 말하면 AI가 다이얼을 임시로 조정한다.한 문장으로.
저자 Leon Lin (@lexnlin)이 Cursor·Claude Code·Codex로 프론트엔드를 짜다 발견한 "AI는 보라색을 미친 듯이 좋아한다"는 관찰에서 출발했다. 단일 파일이 아니라 13개의 특화 스킬로 쪼개진 게 특징. Shell 스크립트 한 줄(skill.sh)이 레지스트리 역할을 하고, 나머지는 전부 마크다운이다.
레포 언어 통계는 Shell 100%. 진짜 자산은 skills/*/SKILL.md 13개 파일에 담긴 "AI 편향 교정 규칙"이다.
시대적 배경 + 경쟁 자료 대비 차별점.
2025년 가을, Anthropic이 Claude Skills를 공식 발표하고 Vercel Labs가 npx skills add CLI를 띄우면서 SKILL.md는 사실상 표준 포맷이 됐다. TrendShift 데일리 차트의 절반이 "OO-skills" 레포라는 사실 자체가 이를 증명한다. Taste Skill은 그 흐름의 "디자인 카테고리 대표주자"가 됐다.
| 자료 | 접근 | 한계 / 차이 |
|---|---|---|
| shadcn/ui | 컴포넌트 라이브러리 | "코드"는 주지만 "취향"은 안 줌 |
| Vercel v0 | 제너레이션 서비스 | 특정 회사 호스트 제품에 묶임 |
| Cursor Rules / Claude.md | 프로젝트 단위 지시문 | 1회용·디자인 특화 X |
| OO-skills (대다수) | SKILL.md 1장 | 한 가지 톤만 강제 |
| Taste Skill | 다이얼 + 13 변종 + 안티슬롭 규칙 | "맥락 따라 어떤 스킬을 부를지" 선택지를 줌 |
대부분의 디자인 스킬은 "이렇게 해라"라는 명령형이다. Taste Skill은 DESIGN_VARIANCE=8 같은 수치 노브를 두고 "1~3이면 대칭/센터, 4~7이면 오프셋, 8~10이면 마수너리"처럼 구간별 규칙을 적어둔다. 같은 SKILL.md가 다이얼 값에 따라 다른 결과물을 낸다.
모범 답안만 적힌 가이드는 흔하다. Taste Skill의 특이점은 금지 목록 (Section 7. AI Tells). "Inter 금지, 보라색 글로우 금지, John Doe 금지, 3-column 카드 금지, Elevate/Seamless 같은 단어 금지"처럼 AI가 흔히 빠지는 함정을 콕 집어 적어둔다. "하지 마라" 규칙이 "해라" 규칙보다 훨씬 효과적이다.
같은 디자인 스킬이라도 미니멀(Notion 스타일), 브루털리스트(스위스 타이포), 소프트(고급 잡지 스타일), 스티치(Google Stitch 호환) 등 의도 단위로 분리해 두었다. 사용자는 자기 프로젝트 톤에 맞는 1개만 골라 설치한다. output-skill처럼 "AI가 자꾸 잘라먹는 문제"를 잡는 보조 스킬도 함께 산다.
"빌드"가 없는 빌드 시스템.
Taste Skill의 진짜 신기한 점은 실행 가능한 코드가 거의 없다는 것이다. skill.sh 셸 스크립트 한 줄과 13개의 마크다운 — 이게 전부다. 그런데도 GitHub은 Shell 100%라고 인식한다. 마크다운은 GitHub 언어 통계에서 제외되기 때문이다.
npx skills add https://github.com/Leonxlnx/taste-skill 한 줄. 레포의 skills/ 폴더를 스캔해 SKILL.md를 전부 로컬 에이전트 디렉토리로 복사한다.--skill "design-taste-frontend"로 13개 중 하나만 골라 설치 가능. 이때 인자는 SKILL.md 프론트매터의 name: 값이지 폴더명이 아니다.| 스킬 | 역할 |
|---|---|
taste-skill | 메인. DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 다이얼 노출. |
gpt-tasteskill | GPT/Codex 특화. 더 엄격한 GSAP 모션·레이아웃 강제. |
image-to-code-skill | 이미지 → 분석 → 코드 파이프라인. |
redesign-skill | 기존 프로젝트 리디자인. 먼저 audit → 그다음 수정. |
soft-skill | "비싸 보이는" 부드러운 UI. 스프링 모션 강조. |
minimalist-skill | Notion/Linear 스타일. 따뜻한 모노크롬 + 비스포크 타이포. |
brutalist-skill | 스위스 타이포 + CRT 미학 (Beta). |
stitch-skill | Google Stitch 호환. DESIGN.md export 포맷. |
output-skill | AI가 "// rest of code..." 같이 잘라먹는 거 방지. |
imagegen-frontend-web | 웹 디자인 레퍼런스 이미지 생성용. |
imagegen-frontend-mobile | 모바일 스크린/플로우 이미지 생성용. |
brandkit | 로고/팔레트/타이포 브랜드 보드 이미지 생성용. |
taste-skill-v1 | v1 고정 사용자용 보존본 (install name: design-taste-frontend-v1). 최신 v2로 이행하지 않으려는 사용자를 위한 레거시 스냅샷. |
'use client'로 격리.'use client' 래퍼 안에.package.json 확인 후 문법 결정.postcss.config.js에 tailwindcss 플러그인을 넣지 말고 @tailwindcss/postcss 또는 Vite 플러그인 사용.motion/react import)이 기본. UI/Bento 인터랙션 전담. 신규 코드는 import { motion } from 'motion/react' 사용.useEffect cleanup 블록.@phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react 허용 (우선순위 순). lucide-react는 명시적 요청 시만 허용, SVG 직접 제작 금지.Geist·Outfit·Cabinet Grotesk·Satoshi·Geist Mono·JetBrains Mono 권장.코드 없이 어떻게 AI 행동을 바꾸나.
┌────────────────────────────────────────────────────────────┐
│ 사용자: "랜딩 페이지 만들어줘" │
└──────────────┬─────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ AI 에이전트 (Claude Code / Cursor / Codex / Copilot) │
│ ① 사용자 요청 → 키워드 추출 │
│ ② 설치된 SKILL.md들의 description과 매칭 │
│ ③ 매칭된 SKILL.md 본문을 컨텍스트에 prepend │
└──────────────┬─────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ Taste Skill 규칙이 컨텍스트에 주입됨 │
│ • DESIGN_VARIANCE=8 → 마수너리/CSS Grid 강제 │
│ • Forbidden: Inter, 보라색 글로우, h-screen, 3-col cards │
│ • Required: Geist 폰트, min-h-[100dvh], Bento 2.0 │
│ • Settings: 다이얼 값을 사용자 발언으로 재조정 │
└──────────────┬─────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────┐
│ LLM 생성: 규칙에 어긋나지 않는 JSX/TSX + Tailwind 클래스 │
│ ↓ │
│ Pre-flight Checklist (Section 10) 셀프 검토 │
│ ↓ │
│ 최종 코드 출력 │
└────────────────────────────────────────────────────────────┘
전통적인 가이드라인은 "이렇게 해라"라는 정적 규칙이다. Taste Skill의 핵심 트릭은 본문 안에 if VARIANCE > 4 then ... 같은 분기 규칙을 적어두는 것이다.
## 6. TECHNICAL REFERENCE (Dial Definitions) ### DESIGN_VARIANCE (Level 1-10) * 1-3 (Predictable): Flexbox justify-center, strict 12-column ... * 4-7 (Offset): Use margin-top: -2rem overlapping, ... * 8-10 (Asymmetric): Masonry layouts, CSS Grid with fractional units ... ### MOTION_INTENSITY (Level 1-10) * 1-3 (Static): No automatic animations. CSS :hover only. * 4-7 (Fluid CSS): transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) * 8-10 (Advanced Choreography): Complex scroll-triggered ...
LLM은 컨텍스트에서 다이얼 값을 보고 해당 구간 규칙만 골라 적용한다. 사용자가 채팅에서 "조금만 차분하게"라고 말하면 LLM이 알아서 다이얼 값을 8에서 3으로 내린다 (저자의 메인 트릭).
LLM 학습 데이터엔 "John Doe", "Inter font", "보라색 그라데이션"이 압도적으로 많다. 그래서 "예쁘게 만들어줘"라고 하면 통계적 평균값이 나온다.
Taste Skill의 안티 슬롭 규칙은 그 평균값을 "이건 금지"라고 콕 집어 차단한다. 마치 작가에게 "독자가 한 번이라도 본 표현은 쓰지 마"라고 미리 못 박는 것과 같다.
Inter 폰트 / 보라색 글로우 / 가운데 정렬 히어로 / 3-column 카드 / "Elevate / Seamless / Unleash" 슬로건 / John Doe 같은 이름 / 99.99% / Acme·Nexus·SmartFlow / 둥근 mouse cursor / 색깔 가득한 hero 섹션
Geist·Satoshi 폰트 / 1px inner border + 인너 섀도우(Liquid Glass) / 비대칭 split / 마수너리 Bento / Spring physics (stiffness 100, damping 20) / 47.2% 같은 유기적 숫자 / picsum.photos seed 기반 placeholder
SKILL.md 마지막 섹션엔 출력 직전 체크리스트가 적혀 있다. LLM이 코드를 뱉기 전 스스로 검토하도록 유도하는 패턴이다. "메타 인지 프롬프트"의 일종이다.
## 10. FINAL PRE-FLIGHT CHECK - [ ] Is global state used appropriately? - [ ] Is mobile layout collapse guaranteed? - [ ] Do full-height sections use min-h-[100dvh] instead of h-screen? - [ ] Do useEffect animations contain strict cleanup? - [ ] Are empty, loading, and error states provided? - [ ] Are cards omitted in favor of spacing where possible? - [ ] Did you isolate CPU-heavy perpetual animations?
어디에 뭐가 들어있나.
taste-skill/ ├── .github/ # 이슈 템플릿 ├── assets/ # README 배너·로고 이미지 ├── examples/ # 실제 결과물 미리보기 │ ├── floria-top.webp │ └── floria-bottom.webp ├── research/ # 스킬 설계 배경 에세이 │ └── *.md ├── skills/ # ★ 이 폴더가 진짜 자산 │ ├── llms.txt # 13개 스킬 카탈로그 (LLM용) │ ├── taste-skill/SKILL.md # 메인 스킬 (다이얼 노출) │ ├── gpt-tasteskill/SKILL.md │ ├── image-to-code-skill/SKILL.md │ ├── imagegen-frontend-web/SKILL.md │ ├── imagegen-frontend-mobile/SKILL.md │ ├── brandkit/SKILL.md │ ├── redesign-skill/SKILL.md │ ├── soft-skill/SKILL.md │ ├── minimalist-skill/SKILL.md │ ├── brutalist-skill/SKILL.md │ ├── output-skill/SKILL.md │ ├── stitch-skill/SKILL.md │ └── taste-skill-v1/SKILL.md ├── skill.sh # 로컬 레지스트리 (Bash assoc array) ├── LICENSE # MIT └── README.md # 설치·개요·예제
Bash declare -A SKILLS=(...)로 만든 13개 매핑 테이블. 사용자가 source ./skill.sh taste-skill하면 해당 SKILL.md의 상대 경로를 출력한다. 이게 이 레포의 "실행 코드" 전부다. 100% Shell 통계의 출처.
각 스킬의 한 줄 설명. LLM이 어떤 스킬을 부를지 결정할 때 빠르게 훑는 메타데이터. llms.txt는 2024년경 등장한 "LLM용 sitemap.xml" 표준이다.
프론트매터(name·description) + 본문(섹션 1~10) 구조. 한 파일이 보통 200~400줄. taste-skill의 SKILL.md만 봐도 다이얼·아키텍처·금지목록·창의 카탈로그·Pre-flight 체크리스트 등 10개 섹션이 적혀 있다.
기술별 + 사고법별로 정리.
대부분 프롬프트는 "이렇게 해줘"라는 긍정형이다. Taste Skill은 그 반대다. "이건 안 돼"라는 부정형이 LLM 성능에 결정적이라는 걸 실증한다.
SKILL.md 한 장으로 "센터 정렬"부터 "마수너리 카오스"까지 다 커버하려면 수치 노브 + 구간별 분기 규칙 패턴을 써야 한다. 일반 소프트웨어의 "feature flag"와 같은 발상.
Taste Skill Section 5("Performance Guardrails")는 사실상 "AI에게 알려야 할 모바일 함정 모음"이다. 시니어 프론트엔드 개발자라면 다 아는 것들이지만 LLM은 잊기 쉽다.
h-screen 금지, min-h-[100dvh] 사용 — iOS Safari 점프 방지top/left/width/height 애니메이션 금지 — 레이아웃 트리거. transform/opacity만.fixed inset-0 pointer-events-none 레이어에만useState 쓰지 말고 useMotionValue 사용 — 리렌더 폭주 방지Section 9 "The Motion-Engine Bento Paradigm"이 가장 실용적인 챕터다. 5가지 카드 원형(Intelligent List, Command Input, Live Status, Wide Data Stream, Contextual UI)을 정의해뒀다.
rounded-[2.5rem] + shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] diffusion shadowlayoutId·AnimatePresence·useMotionValue 패턴 익히기.npx skills add는 npm 패키지가 아닌 마크다운 폴더를 패키지로 다룬다. "AI 시대의 .deb 같다"는 말이 어울린다. llms.txt·SKILL.md 프론트매터·폴더 컨벤션이 곧 메타데이터.
npm pack이 만드는 tarball vs. npx skills add가 가져오는 SKILL.md 폴더npx skills add로 설치 가능하게 만들기.하드웨어보다 "어떤 에이전트를 쓰는지"가 더 중요하다.
| 요구사항 | 내용 |
|---|---|
| Node.js | npx skills add를 쓰려면 필요. v18+ 권장. |
| AI 코딩 에이전트 | Cursor / Claude Code / GitHub Copilot / Codex CLI / Windsurf / Antigravity 중 하나. |
| 호스트 OS | macOS·Linux·Windows 무관. Shell 스크립트(skill.sh)는 Bash·Zsh 필요. |
| 디스크 | SKILL.md 13개 합 약 200~500KB. 무시 가능. |
| 인터넷 | 최초 설치 시만. 이후 SKILL.md는 로컬에서 동작. |
package.json 우선 확인.v4에서는 postcss.config.js에 더 이상 tailwindcss를 직접 넣지 않는다. @tailwindcss/postcss 또는 Vite 플러그인(@tailwindcss/vite)을 사용해야 한다.
v3 문법(theme.extend 등)을 v4 프로젝트에 그대로 갖다 쓰면 빌드가 실패한다. @theme 디렉티브 + CSS 변수 방식으로 마이그레이션 필요.
난이도별로.
목적: SKILL.md 유무에 따라 LLM 출력이 얼마나 달라지는지 체감.
npx create-next-app@latest taste-testnpx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"목적: 다이얼 추상화의 효과 확인.
taste-skill/SKILL.md 상단의 DESIGN_VARIANCE를 1로 변경목적: 부정형 규칙 작성 연습.
## 7. AI Tells 섹션 끝에 자신만의 금지 5개 추가 (예: "DM Sans 금지", "고스트 버튼 금지", "이모지 사용 금지", "절대 위치 마진 0 금지", "border-radius 50% 카드 금지")목적: Framer Motion 고급 패턴 익히기.
type: "spring", stiffness: 100, damping: 20 모션 적용layoutId·AnimatePresence·useMotionValue 셋을 최소 1번씩 사용목적: SKILL.md 작성법 완전 습득.
npx skills add로 설치되는지 검증"Taste Skill"을 진짜로 활용할 수 있는 수준까지.
Anthropic 공식 Skills 문서 + Vercel Labs agent-skills 레포 정독. 프론트매터 구조·description 매칭 메커니즘 이해. 10줄짜리 "Hello SKILL.md" 직접 작성.
"few-shot vs anti-pattern" 비교. "Don't"가 "Do"보다 강한 이유 학습. Pre-flight checklist 패턴 적용한 SKILL.md 3개 작성.
Tailwind v4 마이그레이션 가이드 정독. @theme 디렉티브·CSS 변수 시스템. shadcn 컴포넌트 5개 골라 radius·shadow·color 완전 커스텀.
useSpring·useTransform·useMotionValue 3대장 익히기. layoutId 기반 shared element transition 구현. Bento 2.0의 5카드 원형 전부 구현.
GSAP ScrollTrigger로 페이지 전체 스크롤텔링 1개. Three.js로 mesh gradient/particle 배경 1개. useEffect cleanup 강제 적용.
도메인 특화 SKILL.md를 GitHub에 공개. npx skills add로 설치되는지 검증. X·Hacker News에 공유. 사용자 피드백을 받아 v2 개정.
읽다가 막힐 때 돌아오기.
--skill 플래그로 개별 설치.'use client'.@theme 디렉티브 + CSS 변수 + @tailwindcss/postcss 플러그인 구조.motion·AnimatePresence·useMotionValue·layoutId가 주요 API.type: "spring", stiffness: 100, damping: 20 — Taste Skill 기본 트랜지션 공식.backdrop-blur를 넘어 1px inner border + inset shadow로 만든 프리미엄 글래스모피즘.h-screen 대신 사용해야 하는 모바일 안전 viewport 단위. iOS Safari 점프 방지.https://picsum.photos/seed/{string}/800/600.공식·실전·심화 순.
npx skills add CLI 표준 정의hello@tasteskill.devnpx skills add ... 전/후 같은 프롬프트로 랜딩 페이지 생성 → 차이를 스크린샷으로 정리.skills/taste-skill/SKILL.md를 처음부터 끝까지 천천히 읽으며 "내가 평소 어기던 규칙"에 형광펜 긋기.