AI 슬롭 디자인을 탈출하는 12가지 무료 스킬

Inter 폰트, 보라색 그라데이션, 드롭 섀도우가 들어간 둥근 카드. 처음 바이브 코딩을 시작했을 때 진짜 병목은 코드가 아니었습니다. 디자인이었습니다. AI가 생성하는 인터페이스는 전부 같은 템플릿 공장에서 나온 것처럼 보였습니다.

SKILL.md 파일 하나만으로 에이전트의 디자인 사고방식이 달라집니다. 지난 몇 달간 디자인 스킬을 수십 개 설치하고 테스트해 봤습니다. 대부분은 서로 충돌하거나 개선 효과가 미미해서 일주일 안에 삭제했습니다. 아래 12개가 실제로 살아남은 것들입니다.

시작점

Anthropic 공식 frontend-design 플러그인이 기본 베이스라인입니다. Claude Code에 내장되어 있으며, 레이아웃·타이포그래피·색상 선택에 대한 기초 규칙을 설정합니다. 이 플러그인 없이는 에이전트가 매번 Inter + 보라색 그라데이션 조합을 기본값으로 사용합니다. 천장이 아니라 바닥이라고 생각하시면 됩니다.

Impeccable은 공식 플러그인 위에 /polish, /audit, /distill, /bolder, /quieter 등 20개의 슬래시 커맨드를 추가합니다. 각 커맨드는 특정 디자인 문제를 타겟으로 합니다. /audit는 접근성, 테마, 반응형 브레이크포인트 전반에 걸친 종합 품질 검사를 실행합니다. /distill은 컴포넌트를 핵심 요소만 남기고 정리합니다. 저는 배포 전 최종 점검으로 매번 /polish를 사용합니다.

디자인 강도 조절

Taste Skill은 다른 접근 방식을 취합니다. 슬래시 커맨드 대신 DESIGN_VARIANCE 같은 세 가지 숫자 변수를 사용하여 에이전트가 기본값에서 얼마나 벗어날지 제어합니다. 보수적인 기업용 인터페이스에는 낮게 설정하고, 실험적인 랜딩 페이지에는 높게 올리면 됩니다. 세밀한 조절이 가능하지만, 적정값을 찾으려면 시행착오가 필요합니다. 처음 높은 분산값을 적용했을 때 2006년 MySpace 페이지 같은 결과물이 나왔습니다.

아이콘 및 시각 자산

Better Icons는 200,000개 이상의 아이콘이 포함된 150개 이상의 아이콘 컬렉션을 연결합니다. 키워드로 검색하면 SVG를 프로젝트에 바로 동기화해 줍니다. 이전에는 다섯 개 사이트에서 아이콘을 직접 다운로드했습니다. 컬렉션에 따라 검색 품질이 다르지만, 일반적인 UI 아이콘은 빠르게 찾아줍니다.

컴포넌트 수준의 디자인 인텔리전스

UI Design Brain은 5가지 디자인 스타일에 걸쳐 60개 이상의 컴포넌트에 대한 디자인 원칙을 담고 있습니다. 미니멀리스트 시스템에서 모달이 어떻게 동작해야 하는지, 글래스모피즘 시스템에서는 어떻게 달라지는지를 에이전트에게 알려줍니다. 이 수준의 구체성이 중요합니다. “보기 좋게 만들어줘”라는 포괄적인 지시는 포괄적인 결과만 만들어내기 때문입니다.

UI UX Pro Max는 범위가 더 넓습니다. 50개 이상의 디자인 스타일, 97가지 색상 팔레트 조합, 57가지 폰트 페어링, 그리고 160개 이상의 제품 유형에 대한 산업별 추론을 제공합니다. 범위가 야심적입니다. 솔직히 선택지가 너무 많으면 컨텍스트를 제한하지 않을 경우 생성 속도가 느려질 수 있습니다. 저는 보통 에이전트에게 선택을 맡기기보다 스타일과 팔레트를 명시적으로 지정합니다.

리뷰 및 품질 게이트

Vercel의 agent-skills에는 100개 이상의 체크포인트를 갖춘 UI 리뷰 규칙 세트가 포함되어 있습니다. 간격 일관성, 색상 대비, 인터랙션 상태, 반응형 동작을 평가합니다. 디자인 단계 후 이것을 실행하면, 노트북에서는 괜찮아 보이지만 모바일에서 깨지는 문제를 잡아줍니다.

UI Skills는 Tailwind 전용 품질 검사를 추가합니다. /baseline-ui 같은 커맨드로 유틸리티 클래스 사용의 일관성을 강제하고, /fixing-accessibility로 집중적인 접근성 감사를 실행합니다. Tailwind 기반 스택이라면, 범용 디자인 스킬이 놓치는 부분을 채워줍니다.

전체 워크플로우 커버리지

Designer Skills Collection은 이 목록에서 가장 포괄적인 패키지입니다. 와이어프레임부터 프로덕션까지 전체 디자인 워크플로우를 아우르는 63개 스킬과 27개 커맨드를 제공합니다. 의견이 강한 편이라 다른 스킬과 가끔 충돌합니다. 에이전트에게 모순되는 지시가 전달되지 않도록 겹치는 규칙 몇 개를 비활성화해야 했습니다.

Design Plugin은 코드 수준에서 디자인 원칙을 강제합니다. 개선 사항을 제안하는 대신, 설정된 디자인 시스템을 위반하는 패턴을 차단합니다. 여러 사람이 같은 에이전트에 프롬프트를 보내는 팀 환경에서 유용합니다.

프리미엄 룩

Super Design은 프리미엄 타이포그래피와 넉넉한 여백에 집중합니다. 더 큰 폰트 크기, 더 넓은 마진, 절제된 색상 팔레트 등 고급스러운 느낌을 주는 선택으로 에이전트를 유도합니다. 결과물이 눈에 띄게 세련되지만, 콘텐츠가 많은 페이지에서는 여백이 과할 수 있습니다.

Make Interfaces Feel Better는 마이크로 인터랙션에 특화되어 있습니다. 호버 상태, 로딩 트랜지션, 스크롤 동작, 버튼 피드백을 다룹니다. 이런 작은 디테일이 “괜찮아 보이는” 것과 “좋은 느낌이 드는” 것을 구분합니다. 이 목록의 다른 어떤 스킬보다 체감 품질 향상이 가장 컸습니다.

효과가 없었던 조합

모든 조합이 잘 맞는 것은 아닙니다. 12개를 동시에 전부 설치하면 서로 충돌하는 지시가 생겨 에이전트가 혼란스러워합니다. 실용적인 구성은 서로 다른 영역을 담당하는 서너 개의 스킬을 겹겹이 쌓는 것입니다. 기초 규칙 하나, 컴포넌트 수준 가이드 하나, 리뷰 하나, 그리고 프로젝트의 특정 심미적 공백을 채우는 것 하나면 충분합니다.

같은 레이어를 타겟으로 하는 스킬(예: 경쟁하는 두 개의 색상 팔레트 시스템)은 서로 상쇄된다는 점도 확인했습니다. 관심사별로 하나만 선택하고 그것에 집중하는 것이 좋습니다.

12개 전부 무료입니다. 공식 frontend-design 플러그인과 Impeccable부터 시작하고, 결과물이 아직 평범해 보이는 부분에 맞춰 추가하시면 됩니다. 그리고 폰트 스택에서 Inter를 삭제하십시오.