<aside> 💡 클로드 코드로 만든 화면이 어딘가 밋밋했다면, 아래 다섯 개만 설치해보세요. 전부 설치해도 10분이면 충분해요.

아래 명령어들은 터미널 명령어예요. 터미널에 붙여넣어도 되고, 더 쉬운 방법은 클로드 코드 채팅창에 명령어를 붙여넣으면서 "이 명령어 실행해서 설치해줘"라고 말하는 것 — 클로드가 대신 설치해줍니다.

이 가이드는 클로드 코드 기준이지만, 커서 같은 다른 AI 코딩 도구에서도 대부분 그대로 쓸 수 있어요.

</aside>

1️⃣ 테이스트 스킬 (Taste Skill)

프리미엄 사이트들의 디자인 감각을 클로드한테 통째로 심어주는 스킬이에요. 설치만 해두면 평소처럼 요청해도 훨씬 세련된 화면이 나옵니다.

설치 명령어 👇🏻

npx skills add <https://github.com/Leonxlnx/taste-skill>

사용 팁: 따로 부를 필요 없이, 화면을 만들어 달라고 요청하면 자동으로 적용돼요.

공식 링크 👇🏻

2️⃣ 웹 디자인 가이드라인 (Web Design Guidelines)

버셀(Vercel)이 공개한 공식 점검 규칙 100여 개로 내 화면을 검사해줘요. 접근성, 정렬, 폼처럼 놓치기 쉬운 약한 부분을 배포 전에 짚어줍니다.

설치 명령어 👇🏻

npx skills add vercel-labs/agent-skills

사용 팁: "내 UI 검토해줘" 또는 "접근성 점검해줘"라고 요청하면 발동돼요.

공식 링크 👇🏻

3️⃣ 어썸 디자인 (Awesome DESIGN.md)

잘 만든 사이트 73곳의 디자인 시스템(색·글꼴·간격 규칙)을 문서로 정리해둔 모음이에요. 설치할 것 없이 복사만 하면 됩니다.

사용 팁: 저장소에서 마음에 드는 DESIGN.md 파일 하나를 골라 프로젝트 폴더에 넣고, "이 디자인 언어에 맞춰 만들어줘"라고 요청하세요.

공식 링크 👇🏻