AI한테 디자인 감각을 가르치는 법 — SKILL.md 디자인 스킬 모음

솔직히 말하면, AI한테 "랜딩페이지 만들어줘"라고 하면 나오는 결과물이 다 비슷하다. 둥근 모서리, 파란 그라데이션, "Get Started" 버튼. 어디서 많이 본 그 느낌.

근데 최근에 "디자인 스킬"이라는 걸 알게 됐다. SKILL.md 파일 하나를 프로젝트에 넣으면, AI가 갑자기 디자인 감각이 생긴 것처럼 코드를 쓴다. 과장이 아니라 실제로 결과물이 확 달라진다.

디자인 스킬이 뭔데

SKILL.md는 AI 코딩 에이전트(Claude Code, Cursor, Codex 등)가 읽는 마크다운 파일이다. 여기에 "이런 스타일로 만들어라"는 규칙을 적어두면 AI가 그 규칙을 따른다.

예를 들어 "비대칭 레이아웃 쓰고, 둥근 모서리 대신 각진 모서리 쓰고, 여백을 넉넉히 잡아라"라고 적으면 진짜 그렇게 만든다. 프롬프트로 매번 설명하는 것보다 훨씬 일관적이다.

써볼 만한 디자인 스킬 모음

taste-skill — 원조, 에이전시급 퀄리티

가장 유명한 디자인 스킬이다. Leonxlnx라는 개발자가 만들었고, "AI한테 좋은 취향을 가르친다"는 콘셉트다. 비대칭 레이아웃, 스프링 기반 애니메이션, 넉넉한 여백이 특징이다. 이걸 적용하면 AI가 만드는 랜딩페이지가 $150K 에이전시 느낌으로 바뀐다.

하위 스킬이 5개 있다. taste-skill(메인), redesign-skill(기존 페이지 업그레이드), minimalist-skill(미니멀), soft-skill(고급 디테일), output-skill(출력 생략 방지). 조합해서 쓰면 된다.

→ github.com/Leonxlnx/taste-skill

supanova — taste-skill의 한국어 포크

taste-skill을 기반으로 한국어 환경에 맞게 수정한 버전이다. Pretendard 폰트, word-break: keep-all, 한국어 CTA 패턴이 기본 적용돼 있다. React/Next.js 없이 Tailwind CDN 단일 HTML로 출력되는 게 특징.

→ github.com/uxjoseph/supanova-design-skill

ui-ux-pro-max-skill — 가장 방대한 디자인 DB

이건 좀 다른 접근이다. 특정 스타일을 강제하는 게 아니라, 50가지 이상의 스타일, 161개 컬러 팔레트, 57개 폰트 페어링, 99개 UX 가이드라인을 AI가 참조할 수 있게 DB처럼 제공한다. React, Next.js, Vue, Svelte, SwiftUI, Flutter까지 10개 스택을 지원한다.

"핀테크 뱅킹 앱 다크 테마로 만들어줘"라고 하면 알아서 적절한 팔레트와 폰트를 골라서 적용한다.

→ github.com/nextlevelbuilder/ui-ux-pro-max-skill

Anthropic 공식 — frontend-design

Anthropic이 직접 만든 공식 디자인 스킬이다. 스타일 톤을 선택할 수 있는데, brutally minimal / maximalist chaos / retro-futuristic / luxury / playful / editorial / brutalist / art deco / soft pastel / industrial 등 다양하다. Claude Code에 바로 적용된다.

→ github.com/anthropics/skills — frontend-design

awesome-design-skills — 스타일별 뷔페

글래스모피즘, 브루탈리즘, 뉴브루탈리즘, 미니멀, 레트로 퓨처 등 스타일별로 개별 SKILL.md가 있다. 원하는 스타일 폴더만 복사해서 쓰면 된다. 글래스모피즘 스킬을 적용하면 반투명 유리 효과의 카드와 모달이 기본으로 나온다.

→ github.com/bergside/awesome-design-skills

Vercel agent-skills — 19,000+ 스타

스타 수 기준으로 가장 인기 있는 스킬이다. 랜딩페이지, 포트폴리오, 마케팅 페이지에 특화되어 있고, Next.js/Vercel 생태계에 최적화되어 있다.

→ github.com/vercel-labs/agent-skills

상황별 뭘 쓰면 좋을까

에이전시급 랜딩페이지가 필요하면 taste-skill이나 supanova. 한국어 사이트면 supanova가 낫다. SaaS 대시보드나 앱 UI는 ui-ux-pro-max-skill이 가장 범용적이다. 특정 분위기(글래스모피즘, 브루탈리즘 등)가 정해져 있으면 awesome-design-skills에서 골라 쓰면 된다.

개인적으로는 taste-skill + output-skill 조합을 가장 많이 쓴다. output-skill이 AI의 코드 생략을 막아주는데, 이게 없으면 AI가 "나머지는 비슷하게 만들면 됩니다" 하고 건너뛰는 경우가 있다.

사용법은 간단하다

원하는 스킬 레포에서 SKILL.md를 다운받고, 프로젝트 루트에 넣으면 끝이다. Claude Code는 자동 인식하고, Cursor에서는 @SKILL.md로 참조하면 된다.

근데 한 가지 주의할 게 있다. 스킬을 여러 개 동시에 적용하면 규칙이 충돌할 수 있다. taste-skill이 "비대칭 레이아웃"이라고 하고 minimalist-skill이 "대칭 그리드"라고 하면 AI가 혼란스러워한다. 보통 메인 스킬 1개 + output-skill 정도가 적당하다.

솔직한 한계

스킬을 쓴다고 디자이너 없이 모든 게 해결되진 않는다. AI는 규칙을 따라가는 건 잘하지만, "이 페이지의 핵심 메시지가 뭔지" 판단하는 건 여전히 사람 몫이다. 레이아웃이 예뻐져도 정보 구조가 엉망이면 소용없다.

그래도 "일단 보기 좋은 프로토타입을 빠르게"라는 목적에는 확실히 효과가 있다. 예전에 반나절 걸리던 랜딩페이지 초안이 10분이면 나온다.

---

📎 참고 자료

• taste-skill — 원본 레포
• supanova — 한국어 포크
• ui-ux-pro-max-skill — 50+ 스타일 DB
• Anthropic 공식 스킬
• awesome-design-skills — 스타일별 스킬 모음