클로드 디자인 스킬 5종, 다 설치하지 말고 이렇게 조합하세요
클로드 코드로 화면을 만들어보면 코드는 잘 돌아가는데 디자인이 어딘가 낯익습니다. 보라색 그러데이션 배경, Inter 폰트, 카드 안에 카드가 또 들어간 3열 그리드. 이른바 “AI스러운” 디자인입니다.
이 문제를 겨냥한 클로드 코드 스킬이 최근 여러 개 나왔습니다. 문제는 이걸 소개하는 글 대부분이 스킬을 하나씩 나열하고 설치 명령어만 알려주는 데서 끝난다는 점입니다. 실제로는 5개를 전부 켜둔다고 결과물이 5배 좋아지지 않습니다. 오히려 역할이 겹치는 스킬끼리 충돌하고, 매 요청마다 불필요한 스킬 설명까지 컨텍스트에 끼어들어 응답만 느려집니다.
이 글에서는 각 스킬이 정확히 뭘 하는지, 그리고 랜딩페이지 제작, 기존 화면 개선, 배포 전 점검이라는 세 가지 작업 단계에 어떤 조합으로 붙여야 하는지 정리했습니다. 디자인 말고 메모리 유지나 토큰 절감처럼 다른 목적의 클로드 코드 스킬을 찾고 있다면 클로드 코드에 바로 써볼 만한 스킬 & 플러그인 5가지 글도 참고할 만합니다.
출처 : Wikimedia Commons (Public Domain)
클로드 디자인 스킬 5종 한눈에 정리
각 스킬은 서로 다른 오픈소스 저장소에서 나왔고, 역할도 겹치지 않게 설계돼 있습니다.
| 스킬 | 실제 저장소 | 역할 | 쓸 시점 |
|---|---|---|---|
| 어썸 디자인 | VoltAgent/awesome-design-md | 우수 사이트의 색상, 폰트, 버튼, 간격을 DESIGN.md 문서로 추출해 제공 | 새 화면을 백지에서 시작할 때 |
| 이미지 코드 | Leonxlnx/taste-skill (image-to-code-skill) | 스크린샷이나 목업 이미지를 실제 프론트엔드 코드로 변환 | 이미 있는 시안이나 캡처 화면을 코드로 옮길 때 |
| 테이스트 | Leonxlnx/taste-skill (design-taste-frontend) | 타이포그래피, 모션, 여백 기준으로 밋밋한 UI를 다듬음 | 코드는 나왔는데 스타일이 뻔하고 심심할 때 |
| 에이전트 브라우저 | vercel-labs/agent-browser | 실제 브라우저로 화면을 캡처하고 콘솔 에러, 접근성 위반을 점검 | 화면이 실제로 의도대로 동작하는지 확인할 때 |
| 웹 디자인 가이드라인 | vercel-labs/agent-skills (web-design-guidelines) | 접근성, 성능, UX 100여 개 규칙 기준으로 코드를 감사 | 배포 직전 마지막 점검 단계 |
여기서 눈여겨볼 점은 이미지 코드와 테이스트가 사실 같은 저장소(Leonxlnx/taste-skill) 안에 들어 있는 서로 다른 스킬이라는 사실입니다. 하나의 저장소를 설치하고 상황에 맞는 스킬 이름만 골라 부르면 되는 구조라, “5종”이라고 해도 실제로 관리할 저장소는 3개뿐입니다.
새 랜딩페이지를 만들 때 : 어썸 디자인 → 테이스트
백지에서 새 화면을 시작할 때는 순서가 중요합니다. 방향을 정하지 않은 채 클로드에게 “예쁘게 만들어줘”라고만 하면 결국 무난한 3열 그리드로 돌아옵니다.
- 어썸 디자인으로 레퍼런스부터 고정합니다. VoltAgent/awesome-design-md 저장소에는 55개가 넘는 브랜드의 DESIGN.md 파일이 정리돼 있습니다. 각 파일에는 색상 팔레트(시맨틱 이름과 역할까지 포함), 타이포그래피 위계, 버튼과 카드 같은 컴포넌트 스타일, 그림자와 반응형 규칙이 담겨 있습니다. 이 저장소는 별도 설치 명령이 없고, 원하는 브랜드의 DESIGN.md 파일을 프로젝트 루트에 그대로 복사한 뒤 이걸 기준으로 화면을 짜라고 지시하는 방식으로 씁니다.
- 테이스트로 스타일을 한 번 더 다듬습니다. design-taste-frontend는 브리프를 읽고 디자인 언어를 추론한 뒤 강조(variance), 모션(motion), 밀도(density) 세 개 다이얼을 조정하는 방식으로 동작합니다. 어썸 디자인이 잡아준 색상과 폰트 위에서, 레이아웃의 비대칭이나 애니메이션 같은 디테일을 얹는 역할입니다. 설치는 다음 명령으로 합니다.
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend
이 순서를 바꿔서 테이스트를 먼저 쓰면 스타일 방향이 스킬 자체의 기본값(미니멀, 브루탈리즘 등)에 끌려가고, 나중에 어썸 디자인의 브랜드 색상과 충돌하는 경우가 생깁니다. 레퍼런스를 먼저 고정하고 그 위에서 다듬는 순서가 안전합니다.
출처 : Wikimedia Commons (CC BY 4.0)
기존 화면을 개선할 때 : 이미지 코드 → 웹 디자인 가이드라인
이미 있는 화면이나 캡처 이미지를 손봐야 하는 경우는 시작점이 다릅니다.
-
이미지 코드로 먼저 코드화합니다. 스크린샷, 목업, 참고 이미지를 넣으면 레이아웃과 간격, 타이포그래피를 최대한 맞춘 프론트엔드 코드를 뽑아줍니다. React와 Tailwind처럼 이미 쓰고 있는 스택을 그대로 존중하도록 설계돼 있어서, “이 화면을 반응형 React 컴포넌트로 만들어줘” 같은 요청에 바로 대응합니다.
npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code-skill -
웹 디자인 가이드라인으로 검수합니다. vercel-labs/agent-skills의 web-design-guidelines는 접근성(aria 라벨, 시맨틱 HTML, 키보드 핸들러), 폼, 애니메이션(prefers-reduced-motion 등), 타이포그래피, 성능(가상화, 레이아웃 스래싱) 등 100개가 넘는 규칙을 기준으로 코드를 감사합니다. 다만 이 스킬은 보안 취약점이나 소프트웨어 버그를 찾는 도구는 아닙니다. UI 구현이 웹 인터페이스 모범 사례를 지키고 있는지 점검하는 역할로 한정됩니다.
npx skills add vercel-labs/agent-skills
이미지 코드가 뽑아낸 코드는 시각적으로는 원본과 비슷해 보여도 접근성 속성이 빠져 있거나 키보드 포커스 처리가 안 되는 경우가 흔합니다. 코드화 직후 바로 검수를 붙이는 이유가 여기 있습니다.
agent-skills(web-design-guidelines) 저장소 바로가기
배포 직전 QA 단계 : 에이전트 브라우저 단독, 필요하면 가이드라인 병행
배포 전 마지막 단계는 코드를 읽는 게 아니라 실제로 브라우저에서 돌려보는 단계입니다. vercel-labs/agent-browser는 Rust로 작성된 브라우저 자동화 CLI로, Chrome DevTools Protocol을 통해 실제 브라우저를 직접 제어합니다. 설치는 CLI 설치와 스킬 등록 두 단계로 나뉩니다.
npm install -g agent-browser
agent-browser install
npx skills add vercel-labs/agent-browser
snapshot명령으로 접근성 트리를 참조 번호(@e1,@e2등)와 함께 얻어서 클릭, 입력 같은 조작에 씁니다.- 내장된 axe-core 엔진으로
a11y명령을 실행하면 오프라인 상태에서도 접근성 위반 사항과 심각도, 수정 가이드를 출력합니다. - 콘솔 메시지, 페이지 에러, 네트워크 요청(HAR 기록 포함)을 추적할 수 있어서, 화면은 멀쩡해 보여도 콘솔에 에러가 쌓이는 상황을 잡아낼 수 있습니다.
여기서 짚어야 할 부분은 에이전트 브라우저 자체가 버그를 자동으로 찾아서 고쳐주는 도구는 아니라는 점입니다. 정확히는 스크린샷, 접근성 감사, 콘솔·네트워크 로그 같은 실제 브라우저 관찰 수단을 제공하는 CLI이고, 그 결과를 클로드가 읽고 원인을 추론해 코드를 고치는 방식으로 작동합니다. 화면 자체의 시각적 완성도보다 실제 동작 여부를 확인하는 게 목적이라, QA 단계에서는 이 스킬 하나만 켜두는 편이 컨텍스트 낭비 없이 깔끔합니다. 접근성 규칙 위반이 계속 나온다면 그때 웹 디자인 가이드라인을 병행해서 코드 레벨 원인을 짚어보면 됩니다.
출처 : Wikimedia Commons
왜 5개를 동시에 켜두면 안 되는가
스킬을 전부 설치해두고 필요할 때마다 알아서 골라 쓰겠다는 생각이 들 수 있습니다. 실제로는 두 가지 이유로 이 방식이 손해입니다.
첫째, 역할이 겹칩니다. 테이스트와 웹 디자인 가이드라인 둘 다 결국 “이 UI가 괜찮은가”를 판단하는 스킬인데, 하나는 미학적 완성도를, 다른 하나는 접근성과 성능 규칙 준수를 기준으로 삼습니다. 두 스킬이 동시에 활성화된 상태로 같은 화면을 손보라고 하면, 클로드가 어느 기준을 우선할지 스스로 정해야 하는 상황이 생깁니다.
둘째, 컨텍스트 낭비입니다. 설치된 스킬이 많을수록 클로드가 매 요청마다 어떤 스킬을 쓸지 판단하는 데 쓰는 컨텍스트가 늘어납니다. 단순히 버튼 색상 하나 바꾸는 요청에도 5개 스킬의 설명이 판단 대상에 끼어들면, 정작 필요한 작업 지시에 쓸 수 있는 여유가 줄어듭니다.
원칙은 단순합니다. 5개를 한꺼번에 켜두지 말고, 지금 하려는 작업이 랜딩페이지 제작인지, 기존 화면 개선인지, 배포 전 점검인지부터 정한 뒤 그 단계에 필요한 스킬만 불러오는 편이 낫습니다.
정리
설치는 한 번, 활용은 상황별로 나누는 게 핵심입니다. 어썸 디자인과 테이스트는 새 화면을 만들 때, 이미지 코드와 웹 디자인 가이드라인은 기존 화면을 코드화하고 검수할 때, 에이전트 브라우저는 배포 직전 QA에서 단독으로 씁니다. 5개 저장소 이름을 다 외울 필요 없이, 지금 이 세 단계 중 어디에 있는지만 기억하면 됩니다.
이 글은 VoltAgent/awesome-design-md, Leonxlnx/taste-skill, vercel-labs/agent-browser, vercel-labs/agent-skills 등 각 저장소의 공개된 README와 문서를 확인해 작성한 정보 제공 목적의 글입니다. 오픈소스 스킬은 버전이 자주 바뀌기 때문에, 설치 명령어와 세부 기능은 실제 사용 전 각 GitHub 저장소에서 최신 상태를 다시 확인하시기 바랍니다. 스킬 사용에 따른 결과와 책임은 이용자 본인에게 있습니다.
Leave a comment