클로드 코드 디자인 스킬·도구 5가지: 바이브코딩 화면이 아쉬울 때

클로드 코드로 기능은 얼추 만들었는데, 화면을 보면 어딘가 아쉬울 때가 있습니다.

카드마다 여백이 다르고, 중요한 버튼은 눈에 안 들어오고, “조금 더 세련되게”라고 하면 색만 바뀌기도 하죠.

 

이럴 때 살펴볼 만한 것이 디자인 스킬입니다.

AI에게 예쁘게 만들라고만 하는 대신, 무엇을 참고하고 어떤 기준으로 만들지 알려주는 역할을 해요. 다만 이름에 디자인이 들어간다고 전부 같은 일을 하는 건 아닙니다.

 

이번 글에서는 Awesome Design 계열 자료, Image to Code, Taste Skill, agent-browser, Web Design Guidelines에 대해서
어떤 상황에서 꺼내 쓰면 좋은지, 클로드 코드에는 어떻게 요청하면 되는지 중심으로 살펴볼게요.

 

먼저, 어디가 아쉬운지부터 골라보세요

지금 필요한 것	살펴볼 도구·자료
마음에 드는 디자인의 기준 가져오기	Awesome DESIGN.md / Awesome Design Skills
이미지로 방향을 정한 다음 화면 구현하기	Image to Code
평범한 AI 화면에서 벗어나기	Taste Skill
완성한 화면을 실제로 열고 눌러보기	agent-browser
접근성·사용성 관련 코드 점검하기	Web Design Guidelines

쉽게 말하면 참고자료를 고르고, 만들고, 확인하는 도구가 섞여 있는데, 

다섯 개를 한꺼번에 설치하는 것보다 지금 막힌 부분에 맞춰 하나씩 붙이는 편이 이해하기도 쉬워요.

 

참고로 Claude Code의 스킬은 보통 SKILL.md라는 지침 파일을 중심으로 동작하는데,
새로운 디자인 모델이 생기는 것이 아니라, 기존 AI가 따를 작업 방식이 추가되는 거예요.
DESIGN.md는 화면의 색·글꼴·간격 같은 디자인 규칙을 담은 자료이고요.

 

1. Awesome Design, 좋은 디자인을 말이 아닌 규칙으로

“이 사이트 같은 분위기로 만들어줘”라는 요청은 생각보다 모호합니다.

마음에 드는 게 색인지, 넓은 여백인지, 사진 배치인지 서로 다르게 이해할 수 있거든요.

 

이런 상황에서 참고할 만한 자료가 VoltAgent의 Awesome DESIGN.md예요.
실제 웹사이트에서 관찰한 디자인 패턴을 문서로 정리한 모음인데,
색상, 글꼴 크기, 버튼과 카드, 여백, 반응형 규칙 등을 AI가 참고할 수 있게 설명해 둡니다.

 

여기서 한 가지는 구분해야 하는데,
임의의 URL을 넣으면 모든 사이트의 디자인 시스템을 즉석에서 완벽하게 추출하는 도구로 소개하는 건 정확하지 않아요.
이 저장소의 핵심은 이미 분석해 둔 디자인 문서를 골라 쓰는 것입니다. 원래 브랜드가 직접 배포한 공식 디자인 시스템과도 다르고요.

VoltAgent 목록에서 소개하는 getdesign.md의 독립적인 Airbnb 분석 미리보기 일부. Airbnb 공식 가이드는 아닙니다.

이미지 출처 보기

위 예시는 버튼만 봐도 기본 상태, 눌린 상태, 비활성 상태를 나눠 놓았습니다.
단순히 “분홍색 버튼”이라고 하는 것보다 AI에게 전달할 기준이 훨씬 구체적이죠.

사용법은 마음에 드는 DESIGN.md를 프로젝트에 가져온 뒤, 클로드에게 그 파일을 읽고 적용하라고 요청하는 방식입니다. 파일을 넣기만 하고 알아서 읽었을 거라고 생각하지 않는 게 좋아요.

이 프로젝트의 DESIGN.md를 먼저 읽어줘. 색상 역할, 제목과 본문 크기, 여백, 버튼 규칙을 요약한 다음 서비스 소개 페이지에 적용해줘. 참고 브랜드의 이름·로고·문구는 복제하지 말고, 우리 서비스의 내용과 색상에 맞게 조정해줘.

 

이름이 비슷한 bergside의 Awesome Design Skills는 별도 프로젝트입니다.
이쪽은 Minimal, Glassmorphism 같은 디자인 스타일별 SKILL.md와 DESIGN.md를 모아둔 저장소인데,
특정 사이트보다 “이런 분위기”를 고르고 싶을 때 살펴보기 좋습니다.

Awesome Design Skills 저장소의 Minimal 예시. 밝은 배경, 큰 제목, 비교적 절제된 색 사용을 볼 수 있습니다.

이미지 출처 보기

같은 저장소의 Glassmorphism 예시. 반투명 패널과 배경 효과가 두드러집니다. 위 이미지와 성능을 비교한 실험이 아니라 서로 다른 스타일 예시입니다.

이미지 출처 보기

두 이미지만 비교해도 방향이 꽤 다르죠. 어느 쪽이 무조건 더 좋은 것은 아닙니다.
내용을 오래 읽는 페이지와 시각적인 인상을 남겨야 하는 페이지는 필요한 디자인이 다를 테니까요.

이 저장소는 TypeUI CLI로 필요한 스타일을 가져오는 방법도 안내하는데,
예를 들어 아래는 Glassmorphism 스킬을 가져오는 명령입니다.

npx typeui.sh pull glassmorphism

처음에는 스타일 하나만 고르는 편이 낫습니다. 미니멀, 네온, 유리 효과를 동시에 적용하라고 하면 화면의 기준부터 충돌할 수 있어요.

Awesome DESIGN.md · Awesome Design Skills와 설치 안내

GitHub - bergside/awesome-design-skills: List of 67 awesome DESIGN.md and SKILL.md design skill files for agentic tools like Cla

 

2. Image to Code, 화면을 먼저 정하고 코드로 옮기기

말로 설명하면 계속 엇나가는데, 이미지로 보면 “바로 이거야” 싶은 경우가 있습니다.
이럴 때는 디자인 방향을 이미지로 먼저 정하는 접근이 잘 맞아요.

 

여기서 소개하는 것은 Leonxlnx의 Taste Skill 저장소에 들어 있는 image-to-code입니다.
공식 설명의 중심 흐름은 참고 디자인 이미지 생성 → 이미지 상세 분석 → 프런트엔드 구현입니다.
단순히 사진 한 장을 넣으면 완성된 서비스를 자동으로 복원해 준다는 뜻은 아니에요.

AI가 참고 이미지의 글자, 여백, 색, 버튼, 구역 배치를 자세히 보고,
구현하면서 처음 정한 디자인에서 멀어지지 않도록 하는 방식이며,
코드부터 잔뜩 만든 뒤 전체 분위기를 다시 바꾸는 일을 줄이려는 접근으로 보면 이해하기 쉬워요.

image-to-code 방식으로 서비스 소개 페이지를 만들고 싶어. 먼저 이미지 생성 도구를 사용할 수 있는지 확인해줘. 가능하면 첫 화면의 참고 디자인을 만들고, 제목·이미지·버튼 배치를 설명해줘. 내가 방향을 고른 뒤 구현하고, 모바일 배치와 버튼 동작은 별도로 확인해줘.

여기에는 준비 조건이 있습니다.
스킬 설치와 이미지 생성 기능 확보는 별개예요.
Claude Code 환경에서 어떤 이미지 생성 도구를 연결해 사용할지 확인해야 하는데
만약 사용할 수 없는 기능을 있는 것처럼 전제하고 작업을 시작하면 중간에 막히겠죠.

또 이미지 한 장에는 버튼을 눌렀을 때의 동작, 로그인 처리, 오류 메시지, 작은 화면에서의 변화가 전부 담기지 않습니다.
겉모습이 비슷해도 서비스가 완성된 것은 아니라는 점은 기억해 두세요. 이미지 생성과 수정이 늘면 시간과 비용도 더 들 수 있습니다.

Image to Code 공식 스킬

taste-skill/skills/image-to-code-skill at main · Leonxlnx/taste-skill

 

3. Taste Skill, 익숙한 ‘AI 기본 디자인’에서 벗어나고 싶다면

페이지는 멀쩡한데, 어딘가에서 본 듯한 카드와 그라데이션이 반복될 때가 있죠.
Taste Skill은 이런 획일적인 프런트엔드를 줄이려는 디자인 지침 모음입니다.

이 글의 Taste Skill은 Leonxlnx/taste-skill을 기준으로 합니다.
디자인의 방향, 글자의 크기와 위계, 간격, 화면 밀도, 움직임 등을 판단하도록 돕는 스킬이에요.
이름이 비슷하다고 다른 저장소의 기능까지 같은 것으로 보면 안 됩니다.

Taste Skill 공식 README에 “Created with taste-skill”로 공개된 Floria 예시 상단. 큰 사진과 제목, 넓은 여백을 함께 사용한 사례입니다.

이미지 출처 보기

공식 예시를 보면, 기능 카드를 줄줄이 나열하는 대신 사진과 제목의 크기 차이로 시선을 끌고 있습니다.
“세련되게”라는 말보다 이런 구성 중 무엇이 마음에 드는지 짚어 주는 게 훨씬 도움이 됩니다.

design-taste-frontend를 적용해서 제품 소개 페이지를 만들어줘. 처음 방문한 사람이 무엇을 하는 서비스인지 바로 알 수 있어야 해. 제목은 강하게, 본문은 편하게 읽히게 하고, 강조색은 절제해줘. 과한 움직임보다 모바일 가독성과 가입 버튼의 명확함을 우선해줘. 구현 전에 디자인 방향을 짧게 설명해줘.

같은 Floria 예시의 하단. 위 이미지와 한 사례를 이루며, 개선 전후 비교나 Image to Code의 검증 결과는 아닙니다.

이미지 출처 보기

다만 모든 프로젝트에 만능으로 적용하는 도구는 아닙니다. 확인한 기본 스킬은 v2 experimental로 안내되어 있고, 랜딩 페이지·포트폴리오·리디자인이 주 대상입니다. 복잡한 대시보드나 데이터 테이블 중심 서비스라면 이 스킬 하나로 충분하다고 보기 어려워요.

이미 디자인 시스템이 있는 프로젝트라면 그 규칙을 우선한다고 명시하세요. 기존 버튼과 글꼴을 다 바꾸는 것보다, 정해진 범위에서 어색한 간격이나 배치를 다듬는 편이 나을 수 있습니다.

Taste Skill 공식 사이트 · 설치 안내

Documentation | Taste Skill

 

4. agent-browser, 만든 화면은 직접 열어봐야 합니다

코드만 보고 “완료했습니다”라는 답을 받았는데, 실제로 열어보니 모바일 메뉴가 화면 밖으로 나가 있는 경우도 있습니다.
디자인 작업에서 브라우저 확인을 빼기 어려운 이유예요.

 

agent-browser는 AI가 실제 브라우저를 조작할 수 있게 하는 도구입니다. 페이지를 열고, 버튼을 누르고, 입력란을 채우고, 화면을 캡처할 수 있어요. 디자인을 만들어 주는 역할보다는 만든 결과를 확인하는 역할에 가깝습니다.

agent-browser 공식 문서의 녹화 콘택트 시트 예시. 시간대별 화면과 변경 영역 표시를 보여줍니다. 이 글에서 직접 실행한 테스트 화면은 아닙니다.

이미지 출처 보기

디자인 확인용으로는 복잡하게 시작할 필요가 없습니다. 개발 서버를 켠 뒤, 큰 화면과 작은 화면을 각각 확인하고 주요 동작을 눌러보게 하면 됩니다. 아래 요청의 화면 너비는 예시이니 실제 이용 환경에 맞춰 바꾸세요.

agent-browser로 현재 개발 서버를 열어줘. 너비 1440px과 390px에서 제목 줄바꿈, 가로 스크롤, 카드 겹침, 모바일 메뉴를 확인해줘. Tab 키로 주요 버튼과 입력란에 이동해 보고, 문제를 발견하면 재현 방법과 수정 전후 스크린샷을 남겨줘. 실제 결제나 외부 전송은 하지 말아줘.

주의할 점도 있습니다. 사용법을 알려주는 스킬과 실제 브라우저 CLI는 별도입니다.

스킬 파일만 추가했다고 브라우저와 실행 도구까지 모두 준비됐다고 생각하면 안 돼요.

또 브라우저 자동화는 실제 버튼을 누를 수 있으며, 테스트 계정과 가짜 데이터를 사용하고,
결제·삭제·메일 발송 같은 행동은 테스트에서 제외한다고 명확히 적는 편이 안전합니다.
위 이미지의 녹화 기능은 ffmpeg가 추가로 필요하지만, 일반적인 스크린샷부터 시작하는 데 녹화까지 준비할 필요는 없습니다.

agent-browser 설치 안내 · 보안과 권한 안내

Security | agent-browser

 

5. Web Design Guidelines, 예쁜데 쓰기 불편한 화면 막기

화면은 보기 좋은데 키보드로 버튼을 찾기 어렵거나, 입력란에 무엇을 넣어야 하는지 설명이 없다면 사용자는 불편합니다.

디자인은 색과 모양만의 문제는 아니니까요.

 

Vercel의 web-design-guidelines 스킬은 지정한 소스 파일을 웹 인터페이스 가이드라인과 대조해 점검합니다.

접근성, 포커스, 폼, 애니메이션, 타이포그래피, 성능 같은 항목을 확인하고,

문제가 있는 위치를 파일:줄번호 형태로 알려주도록 되어 있습니다.

web-design-guidelines로 이번에 만든 페이지와 관련 컴포넌트를 검토해줘. 폼 라벨, 키보드 포커스, 버튼 의미, 이미지 대체 텍스트, 모션 관련 문제를 우선 확인해줘. 파일과 줄번호, 문제가 되는 이유, 수정안을 정리하고, 소스만으로 판단하기 어려운 항목은 따로 표시해줘.

 

agent-browser와 겹쳐 보이지만 하는 일은 다릅니다.

가이드라인 스킬은 코드 쪽을 검토하고, agent-browser는 실제로 뜬 화면과 동작을 확인합니다.

둘을 함께 쓰면 한쪽만 볼 때 놓치기 쉬운 문제를 찾는 데 도움이 되겠죠.

 

그렇다고 검사 결과가 깨끗하면 접근성 인증을 받은 것은 아닙니다.

자동 점검만으로 모든 사용 상황을 확인할 수는 없어요. 키보드 이동과 실제 읽기 순서, 주요 사용자 흐름은 별도로 확인해야 합니다.

Web Design Guidelines 스킬 · Vercel 웹 인터페이스 가이드라인

Web Interface Guidelines

 

처음 써본다면, 이 순서면 충분합니다

처음부터 모든 스킬을 동원하기보다 디자인 기준 하나 + 결과 확인으로 시작해 보세요.

1. 참고할 디자인이 있다면 Awesome DESIGN.md 같은 자료에서 필요한 규칙을 고릅니다. 색과 간격까지 문서로 정리해 두면 수정할 때도 기준이 흔들리지 않아요.
2. 방향 자체를 잡고 싶다면 Taste Skill로 작업 목적과 대상 독자에 맞는 구성을 요청합니다. 이미지로 먼저 결정하고 싶고 생성 도구도 준비되어 있다면 Image to Code 흐름을 선택할 수 있습니다.
3. 한 화면부터 구현합니다. 마음에 들지 않는 방향으로 여러 페이지를 한꺼번에 만드는 일을 피할 수 있어요.
4. 코드와 실제 화면을 함께 확인합니다. Web Design Guidelines로 검토하고, agent-browser로 모바일 화면과 주요 동작을 확인한 뒤 고칩니다.

 

여러 스킬을 쓴다면 우선순위도 적어두는 게 좋습니다. 예를 들어 “기존 디자인 시스템과 접근성을 먼저 지키고,

그 안에서 Taste Skill의 제안을 적용해줘”처럼요. 스킬이 많아지는 것보다 서로 다른 지침이 싸우지 않는 것이 더 중요합니다.

 

설치는 필요한 것만 골라서

아래는 공식 문서의 설치 방식을 정리한 참고 명령입니다. 작업할 프로젝트 폴더에서 필요한 것만 선택하세요.

npx를 쓰려면 Node.js와 npm이 필요하며, 아래 agent-browser npm 설치까지 함께 진행한다면

확인 시점 패키지 요구사항에 맞춰 Node.js 24 이상을 준비하는 편이 안전합니다.

# Taste Skill 또는 Image to Code 중 필요한 스킬 선택
npx skills add Leonxlnx/taste-skill

# 코드 가이드라인 점검 스킬
npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code

# 실제 브라우저 도구와 브라우저 설치
npm install -g agent-browser
agent-browser install

# Claude Code에 브라우저 사용 스킬 추가
npx skills add vercel-labs/agent-browser --skill agent-browser --agent claude-code

Taste 저장소의 기본 디자인 스킬 설치 이름은 design-taste-frontend,

이미지 우선 스킬은 image-to-code입니다.

 

설치 화면에서 필요한 항목과 Claude Code를 선택하고, 적용 범위가 현재 프로젝트인지 전체 환경인지 확인하세요.

기존 설정이 있다면 변경 전에 버전 관리로 남겨두는 편이 좋습니다.

 

설치 후에는 “이 작업에 사용할 스킬 이름과 적용할 규칙을 먼저 설명해줘”라고 확인해 보세요.

버전에 따라 이름이나 설치 방법이 바뀔 수 있으니 오류가 나면 명령을 반복하기보다 연결한 공식 안내를 먼저 보는 것이 낫습니다.

 

결국, “예쁘게”를 조금 더 구체적으로

디자인 스킬의 장점은 감각을 마법처럼 대신해 준다는 데 있지 않습니다.

말로만 전달하던 취향을 규칙으로 바꾸고, 구현한 결과를 다시 확인하기 쉽게 해준다는 데 있어요.

 

“더 예쁘게 만들어줘” 대신 “제목과 본문의 차이를 분명하게”, “강조색은 가입 버튼에 집중해서”, “모바일에서 한눈에 읽히게”라고 요청해 보세요.

여기에 맞는 스킬과 참고자료를 붙이면 무엇을 고쳐야 할지 대화하기도 훨씬 편해집니다.

 

처음에는 마음에 드는 기준 하나로 작은 화면을 만들고, 직접 열어보는 것부터면 충분합니다.

스킬 개수보다 중요한 건 만들고 싶은 화면을 얼마나 구체적으로 설명하고 확인하느냐니까요.

---

자료 확인: 2026년 9월 28일. 각 프로젝트의 공식 README·스킬 원문·설치 문서를 기준으로 정리했습니다. 본문의 요청문은 활용 예시이며, 직접 설치·실행해 성능이나 결과 재현율을 측정한 후기는 아닙니다. 이미지는 프로젝트가 공개한 예시 또는 해당 프로젝트 미리보기 캡처로, 출처를 함께 표시했습니다. 참고 브랜드의 이미지·로고·글꼴 사용 권리는 별도로 확인해야 합니다.

추가 참고: Claude Code 공식 스킬 문서 · Skills CLI 설치 옵션 · W3C 자동 접근성 점검의 범위와 한계