왜 Claude 가 기본적으로 평범한 디자인을 만드는지, 이를 실제로 해결하는 5가지 스킬, 그리고 나만의 브랜드에 맞는 스킬이 없을 때 직접 만드는 단계별 가이드.
이미 알아보는 방법을 알고 있을 것입니다. 흰색 배경에 보라색 그라데이션, Inter 폰트, 카드의 부드러운 그림자, 섹션 중간에 외로운 이모지 하나. 보자마자 생각이 들죠. Claude 가 만들었구나.
모델의 잘못이 아닙니다. 기본 동작의 문제입니다.
별다른 지시 없이 "랜딩 페이지를 만들어줘"라고 요청하면, 모델은 가장 흥미로운 선택을 찾지 않습니다. 가장 확률이 높은 선택을 찾습니다. 그리고 가장 확률이 높은 선택은 학습 중에 본 모든 것의 평균입니다. 수백만 개의 안전하고, 평범하며, 기억에 남지 않는 페이지들의 평균이죠. 그 결과는 AI 디자인처럼 보입니다. 왜냐하면 말 그대로 웹 상에 존재하는 것들의 통계적 중심이기 때문입니다.
Anthropic 은 이 현상을 '분포 수렴(distributional convergence)'이라고 부릅니다. 실제로는 한 가지를 의미합니다. 방향성이 없으면 Claude 는 항상 평범함에 빠진다는 것입니다.
스킬은 바로 그곳에서 Claude 를 꺼내는 방법입니다.
스킬이란 무엇인가, 간단히
Claude 가 작업을 시작하기 전에 읽는 마크다운(텍스트) 파일이라고 생각해보세요. 매 프롬프트마다 선호도, 디자인 시스템, 톤을 반복하는 대신, 한 번만 작성하면 자동으로 로드됩니다. 작업을 전달하기 전에 건네주는 직무 설명서 같은 것입니다.
출력물의 차이는 엄청납니다. 동일한 프롬프트, 동일한 Claude 지만, 올바른 스킬이 로드되면 더 이상 평범한 디자이너가 아니라 여러분의 작업 방식을 아는 협력자가 됩니다.
저는 다양한 스킬을 테스트해보고, 동일한 프롬프트로 전후를 비교하여 실제로 차이를 만드는 것이 무엇인지 확인했습니다. 웹 디자인에서 정말로 지표를 움직이는 5가지를 추려봤습니다.
1. Frontend Design (Anthropic 의 공식 스킬)
이것은 생태계에서 가장 인기 있는 스킬이며, 그럴 만한 이유가 있습니다. Anthropic 자체에서 출시했기 때문입니다. 설치 횟수가 277,000회를 넘었습니다.
이 스킬의 비결은 Claude 에게 아름답게 그리는 방법을 가르치는 것이 아니라, 하지 말아야 할 것을 가르치는 데 있습니다. 파일에는 피해야 할 클리셰들이 명시적으로 나열되어 있습니다. 지나치게 사용된 폰트, 흔한 색상 구성, 모두가 알아보는 그 카드 그림자 구조 등. 모델에 내장된 좋은 취향에 대한 짧은 교훈입니다.
전후 테스트에서 이것은 분명해집니다. 보라색 그라데이션과 이모지가 있던 랜딩 페이지가 우아한 세리프(serif)와 깔끔한 산세리프(sans-serif) 페어링, 스크롤 페이드 인 애니메이션, 세심한 호버 상태를 갖춘 편집적인 무언가로 변합니다. 단 하나의 프롬프트만으로 말이죠.
사용 시기: 처음부터 프로젝트를 시작할 때마다 기본값에서 벗어나고 싶을 때 사용하세요. 기본 스킬입니다.
그리고 이 스킬이 스타일을 강제하지는 않습니다. 나머지 규칙은 유지하되 산세리프 폰트만 사용하고 싶다면, 마크다운을 편집하여 "Geist, Google Sans, DM Sans 만 사용해"라고 지시하면 됩니다. Claude 가 파일을 조정합니다.
2. Impeccable (도구 모음)
Paul Bakaus 가 제작한 이 스킬은 빠른 시간 내에 커뮤니티의 사랑을 받으며 GitHub 에서 45.9k 개의 별을 받았습니다. 그 이유를 이해하는 것은 어렵지 않습니다.
이 스킬의 장점은 명령어에 있습니다. 순수한 /impeccable 도 있지만, 컨텍스트에 따라 호출할 수 있는 약 20개의 하위 명령어가 함께 제공됩니다.
- /impeccable animate 는 페이지에 의미 있는 방식으로 인트로 애니메이션과 움직임을 조화롭게 추가합니다.
- /impeccable quieter 는 디자인에서 "소음" 감사를 실행하고(너무 많은 그라데이션, 모든 제목에 무거운 폰트 두께, 여기저기 흩어진 이모지) 과잉을 다듬어, 과시하는 대신 우아함을 가져옵니다.
- /impeccable audit 은 품질 및 접근성 검사를 수행합니다.
- /impeccable document 는 디자인 시스템 전체를 캡처하여 나중에 어떤 에이전트든 읽을 수 있는 design.md 를 생성합니다.
내부적으로는 모델의 추측에 의존하지 않고 실행되는 46개의 결정론적 규칙(슬롭 탐지용)을 가지고 있습니다. AI 생성 패턴을 정확하게 포착합니다.
사용 시기: 이미 있는 것을 반복 개선할 때 사용하세요. 페이지가 준비되었는데 과장된 부분을 정리하고 싶나요? quieter. 생동감이 부족한가요? animate. 두 번의 프롬프트로 사이트의 수준이 바뀝니다.
도구 이상의 디테일: Impeccable 에는 AI 가 피하도록 가르치는 패턴을 보여주는 "슬롭(slop)" 탭이 있습니다. 이 목록을 직접 살펴보세요. 카드 측면의 악센트 테두리가 AI 클리셰가 되었다는 것을 인식하는 법을 배우면, 수동으로도 더 나은 디자인을 할 수 있게 됩니다.
3. UIUX Pro Max (Claude 가 생각하도록 강제하는 스킬)
이것은 강력한 디자인 데이터베이스이며, 이 목록에서 가장 많은 별을 받았습니다. GitHub 에서 105k 개의 별을 넘겼습니다. 67개의 UI 스타일, 161개의 색상 팔레트, 57개의 폰트 쌍, 99개의 UX 가이드라인, 그리고 각 프레임워크에서 구현하는 방법을 알 수 있도록 16개의 기술 스택이 있습니다.
이 스킬의 요점은 빠르게 코드를 제공하는 것이 아닙니다. 반대입니다. 코드 한 줄을 작성하기 전에 Claude 가 추론하도록 강제합니다. 다섯 가지 도메인(제품, 스타일, 색상, 랜딩, 타이포그래피)을 병렬로 검색하여 레이아웃을 실행하고, 추론 규칙을 적용한 후에야 피해야 할 안티 패턴이 이미 표시된 완전한 디자인 시스템을 반환합니다.
https://x.com/nett0eth/status/2073490435066982554
결과는 장식적인 섹션이 아니라 의도적인 섹션입니다. 테스트에서 KPI 블록 내에서 바로 밝은 색에서 어두운 색으로 전환하는 등의 작업을 수행했는데, 특히 튀어나와야 할 숫자를 강조하기 위한 것이었습니다. 생성기에서가 아니라 사람에게서 기대할 수 있는 종류의 결정입니다.
사용 시기: 콘텐츠에 대한 명확성이 있고 디자인 깊이를 원할 때 사용하세요. 그리고 금과 같은 팁: 각 섹션에서 원하는 것이 무엇인지 구체적일수록 결과가 더 좋습니다. 스킬은 마음을 읽지 않습니다. 방향을 증폭시킬 뿐입니다. "스킬을 사용하고 더 과감한 재디자인을 해봐, 팔레트와 폰트 쌍을 탐색해봐"라고 보내면 돌아오는 결과가 완전히 달라집니다.
4. Web Design Guidelines (Vercel Labs 의 감사 도구)
이것은 프로젝트의 시작이 아닌 끝을 위한 것입니다. Vercel Labs 에서 제공하며, GitHub 에서 29k 개의 별을 가지고 있습니다. Vercel 의 웹 인터페이스 가이드라인 목록(100개 이상의 규칙: 키보드 포커스 작동, 확대/축소 비활성화 금지, 붙여넣기 차단 금지, 버튼의 로딩 표시기, 제목 계층 구조, ARIA 등)에 따라 코드를 감사합니다.
그리고 제가 좋아하는 트릭이 있습니다. Claude 에게 미리보기 화면에서 직접 문제에 주석을 달도록 요청할 수 있습니다. 목록을 읽는 대신, 사이트에서 aria-label 이 누락된 곳, 키보드 탐색이 중단되는 곳, CTA 에 포커스가 없는 곳을 주황색으로 볼 수 있습니다. 시각적으로 변합니다.
사용 시기: 디자인이 이미 좋고, 접근성이 확보되어 키보드나 스크린 리더를 사용하는 사람에게 부끄럽지 않은지 확인하고 싶을 때 사용하세요. 라이브 전 QA 단계입니다.
5. Astryx (Meta 의 에이전트 지원 디자인 시스템)
https://x.com/nett0eth/status/2073826299789889884
다섯 번째는 다른 범주에 속합니다. 취향 스킬이 아니라 완전한 디자인 시스템입니다. 위의 4가지는 Claude 가 한 화면씩 더 나은 디자인을 하도록 가르칩니다. Meta 는 반대 경로에 베팅하여 Astryx 를 공개했습니다. 이 디자인 시스템은 8년 동안 사내에서 성장하여 회사에서 가장 크고 가장 많이 사용되는 시스템이 되었으며, 13,000개 이상의 앱에서 실행됩니다. 이제 오픈 소스가 되었고, 여기서 중요한 디테일은 에이전트 지원(agent ready)이 가능하다는 것입니다.
핵심은 이것입니다. 모델이 모든 구성 요소에 대해 상식 수준의 디자인을 하길 기대하는 대신, 모든 것이 이미 접근 가능하고 일관성 있게 만들어진 시스템을 제공하는 것입니다. 150개 이상의 구성 요소, 7개의 기성 테마, 다크 모드, 사람과 에이전트가 동일한 문서를 읽고 동일한 방식으로 사용하는 CLI 가 있습니다. 심지어 저장소에는 Claude 가 첫 줄을 작성하기 전에 환경을 이해할 수 있도록 CLAUDE.md 도 있습니다.
React 와 StyleX 에서 실행되며, 베타 버전이고 이미 8.2k 개의 별을 받았습니다.
사용 시기: 예쁜 화면 하나가 아니라 시스템 일관성을 원할 때 사용하세요. 스킬은 모델의 취향을 다듬고, Astryx 는 어떤 프롬프트 전에 기초가 이미 탄탄한지 확인합니다. 둘은 서로를 보완합니다.
더 많은 스킬을 찾는 곳
이 5가지는 Claude 에서 웹 디자이너가 하는 작업의 약 90%를 다룹니다. 하지만 더 탐색하고 싶다면 좋은 디렉토리들이 있습니다.
- UI Skills 은 디자인 엔지니어를 대상으로 하지만 웹 디자인에도 유용합니다. 위의 4가지 스킬을 여러 개 나열하고 있으며 접근성 및 Shadcn 관련 자료도 있습니다.
- Type UI 는 시각을 먼저 생각하는 사람들에게 제가 가장 좋아하는 곳입니다. 스크롤하면 각 미학(미니멀리즘, 네오-브루탈리즘, 정교한 기업 스타일)의 미리보기를 볼 수 있고, 지침 문단을 작성하지 않고 원하는 것을 호출할 수 있습니다.
- MCP Market 은 대규모 커뮤니티 저장소입니다. Agent Skills > Categories > Design Tools 로 이동하면 끝없는 목록이 있습니다.
- skills.sh 는 Vercel 및 다른 곳에서 공식적으로 게시하는 곳으로, 출처에서 직접 가져오기에 좋습니다.
나만의 스킬을 만드는 방법
위의 스킬들이 브랜드나 스택에 100% 맞지 않을 때가 있습니다. 바로 그때 직접 만드는 것입니다.
Claude 앱 또는 Claude Code 에서 Customize > Skills > Create Skill > Create with Claude 로 이동합니다. 스킬이 무엇을 해야 하는지 묻는 것으로 시작합니다.
유용한 스킬과 쓸모없는 스킬을 가르는 부분은 여기서 얼마나 구체적이냐입니다. "예쁜 디자인 만들어" 대신 추론 규칙을 제공하세요. 예를 들어:
- 항상 제품 유형(대시보드, 랜딩 페이지, 앱)을 먼저 식별하세요. 디자인은 컨텍스트에 따라 달라지기 때문입니다.
- 그리기 전에 항상 화면의 목표를 추론하세요. 어떤 작업이 가장 중요하고 사용자가 무엇을 먼저 알아차려야 하는지.
- 기본적으로 제한된 팔레트, 더 중립적인 배경과 표면을 사용하세요.
- 기본 본문 폰트 하나, 그리고 필요한 경우 큰 제목을 위한 디스플레이 폰트 하나.
Claude 가 대화를 시작하고 스택(예: Tailwind 토큰), 간격 비율, 레이아웃 제한에 대해 물어볼 것입니다. 자세히 설명하는 것이 스킬의 가치를 높입니다. 마지막에는 참조 폴더와 함께 .md 파일로 패키징되며, 나만의 슬래시 명령어를 통해 액세스할 수 있습니다.
하지만 스킬을 만드는 것은 쉬운 부분입니다. 어려운 부분은 다음 세션에서 스킬이 깨지지 않도록 하는 것이며, 이것이 많은 사람들이 건너뛰는 축입니다. 저는 이미 Matt Pocock 의 지속 가능한 스킬 작성 8단계 프레임워크(트리거, 구조, 방향, 정리)를 별도의 글에서 설명한 적이 있습니다. 이 프레임워크는 설치하는 어떤 디자인 스킬보다 가치가 있습니다.
https://x.com/nett0eth/status/2075976597513830727
함께 읽어볼 가치가 있습니다. "모델에게 올바른 자를 제공한다"는 동일한 추론을 한 단계 위에 적용한 것입니다. Anthropic 의 공식 가이드인 Claude 용 스킬 구축 완벽 가이드(The Complete Guide to Building Skills for Claude)도 원칙을 설명합니다.
남은 것
Claude 는 기본적으로 인상적인 디자이너가 아닙니다. 랜딩 페이지를 요청하고 평소의 보라색 그라데이션을 받은 사람이라면 누구에게나 새로운 소식이 아닙니다.
스킬은 이 격차를 해소하는 방법입니다. 모델이 더 똑똑해졌기 때문이 아니라, 진짜 디자이너가 머릿속에 가지고 다니는 자를 모델에게 주었기 때문입니다. 모델 자체보다는 모델 주변에 구축하는 루프가 더 중요합니다.
한 번만 설정하세요. 출력물의 향상은 너무 커서, 이제는 스킬 없이 작업하고 싶지 않을 것입니다.
여전히 질문이 남습니다. 이전에 스킬을 로드하지 않고 요청했기 때문에, 아직도 평소의 보라색 그라데이션으로 나오는 프로젝트는 얼마나 됩니까? 저장하고 공유해주세요 👍
