‹ 스킬공유자료실#002 · 9월 6일 꿀팁

클로드 디자인 스킬, 무조건 깔아야 하는 5개

단계 5개
AI 공부방 오픈카카오톡 · 막히면 같이 공부해요
입장하기

한눈에 보기

1어썸 디자인잘 만든 사이트의 디자인 기준서 빌리기›2이미지 투 코드캡처만 주면 그 화면 그대로›3테이스트심심한 디자인을 요즘 감각으로›4에이전트 브라우저클로드가 화면을 직접 보고 고쳐요›5디자인 가이드라인배포 전 디자인 맞춤법 검사›
준비물
  1. 클로드 코드(Claude Code)가 설치되어 있어야 해요. 작업할 프로젝트 폴더에서 열어 두세요.
  2. 각 단계의 문장을 클로드 코드에 그대로 붙여 넣으면 설치는 클로드가 알아서 해요. 필요한 프로그램도 알아서 깔아요.
  3. 설치 후엔 클로드 코드를 껐다 켜야 적용됩니다. 이건 5개 전부 공통이에요.
1

어썸 디자인잘 만든 사이트의 디자인 기준서 빌리기

VoltAgent/awesome-design-md

잘 만든 사이트 73곳의 색·폰트·간격 기준을 문서 한 장(DESIGN.md)으로 뽑아 둔 모음집. 이 문서를 프로젝트에 넣으면 클로드가 그 기준대로 만들어요. "감각 있는 디자이너의 기준서"를 통째로 빌리는 셈이에요.

이건 설치가 아니라 문서 한 장 넣기예요. 클로드 코드에 이렇게 말하세요.

잘 만든 사이트들의 디자인 기준서 모음에서 마음에 드는 걸 골라 이 프로젝트에 넣고 싶어요. 깃허브 주소는 VoltAgent/awesome-design-md 예요. 어떤 브랜드들이 있는지 먼저 보여 주시고, 제가 고르면 그 기준서를 이 폴더에 넣어 주세요.
직접 받고 싶다면

① 저장소 열기 → ② 마음에 드는 브랜드 폴더에 들어가 DESIGN.md 파일을 열고 내려받기 → ③ 내 프로젝트 폴더에 넣기.

넣었으면 이렇게 시켜 보세요.

이 폴더의 DESIGN.md를 기준으로 메인 페이지를 만들어 주세요.
이렇게 되면 성공 — 클로드가 "DESIGN.md 기준을 적용할게요"라며 문서의 색·폰트를 실제로 써서 만들어요.

각 브랜드 폴더의 preview.html을 열면 색·글꼴 미리보기를 볼 수 있어요. 고를 때 이걸 먼저 보세요.

2

이미지 투 코드캡처만 주면 그 화면 그대로

Leonxlnx/taste-skill

마음에 드는 화면을 캡처해서 주면 그대로 코드로 만들어 줘요. "이런 느낌으로"라고 말로 설명하는 것보다 훨씬 정확해요.

캡처한 화면을 그대로 만들어 주는 "이미지 투 코드(image-to-code)" 스킬을 설치해 주세요. 깃허브 주소는 Leonxlnx/taste-skill 이에요. 필요한 건 알아서 다 깔아 주세요.
직접 명령어로 하고 싶다면 
$ npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code"
이렇게 되면 성공 — 클로드 코드를 껐다 켠 뒤 "설치된 스킬을 알려 주세요"라고 물으면 목록에 image-to-code가 보여요.
클로드에게 이렇게
(스크린샷 첨부하고) 이 화면을 그대로 만들어 주세요.
다른 회사 화면을 그대로 베껴 상업 서비스에 쓰면 문제가 될 수 있어요. 배치 참고용으로 쓰고, 색·문구·로고는 내 것으로 바꾸세요.
3

테이스트심심한 디자인을 요즘 감각으로

Leonxlnx/taste-skill

심심한 디자인을 요즘 감각으로 바꿔 주는 스킬. 변주·모션·밀도 3개 다이얼(1~10)로 "어느 정도로 화려하게"를 숫자로 조절해요.

디자인을 세련되게 바꿔 주는 "테이스트(design-taste-frontend)" 스킬을 설치해 주세요. 깃허브 주소는 Leonxlnx/taste-skill 이에요. 필요한 건 알아서 다 깔아 주세요.
직접 명령어로 하고 싶다면 
$ npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
클로드에게 이렇게
테이스트 스킬로 이 페이지를 좀 더 세련되게 바꿔 주세요. 모션은 3, 밀도는 5 정도로요.
이렇게 되면 성공 — 바꾸기 전·후를 비교해 보여 줘요. 숫자를 바꿔 가며 2~3번 시켜 보면 내 취향 값을 찾게 돼요.

2번과 같은 곳에서 나온 스킬이라 둘 다 설치해도 충돌하지 않아요.

4

에이전트 브라우저클로드가 화면을 직접 보고 고쳐요

vercel-labs/agent-browser

클로드에게 진짜 브라우저를 줘요. 화면을 직접 캡처해 보면서 어긋난 부분을 스스로 고칩니다. "만들고 → 눈으로 확인하고 → 고치는" 사람의 작업 방식 그대로예요.

클로드가 직접 브라우저를 열어 화면을 확인할 수 있는 "에이전트 브라우저" 스킬을 설치해 주세요. 깃허브 주소는 vercel-labs/agent-browser 예요. 필요한 건 알아서 다 깔아 주세요.
직접 명령어로 하고 싶다면 
$ npx skills add vercel-labs/agent-browser
클로드에게 이렇게
브라우저로 직접 열어서 화면을 확인하면서 고쳐 주세요.
이렇게 되면 성공 — 클로드가 화면을 캡처해서 "여기가 어긋나서 고쳤어요"라고 스스로 보고해요.
처음 쓸 때 브라우저 도구를 추가로 설치하자고 물어봐요. 그대로 허용하면 됩니다(1회만).
5

디자인 가이드라인배포 전 디자인 맞춤법 검사

vercel-labs/agent-skills

배포(세상에 공개) 전에 최신 디자인 규칙으로 검사해 줘요. 버셀(Vercel) 공식 가이드라인 기준으로 문제를 파일·줄 번호까지 짚어 줍니다. 디자인계의 맞춤법 검사기라고 생각하면 돼요.

버셀의 "디자인 가이드라인(web-design-guidelines)" 스킬을 설치해 주세요. 깃허브 주소는 vercel-labs/agent-skills 예요. 필요한 건 알아서 다 깔아 주세요.
직접 명령어로 하고 싶다면 
$ npx skills add vercel-labs/agent-skills --skill web-design-guidelines
클로드에게 이렇게
배포하기 전에 디자인 가이드라인을 검사해 주세요.
이렇게 되면 성공 — "OO 파일 OO줄: 대비가 낮아요" 식으로 구체적인 지적 목록이 나와요.

배포 직전에 한 번 돌리는 습관만 들여도 완성도가 확 올라가요.

막히면 이렇게

설치가 안 되고 에러가 나요.
설치에 필요한 프로그램(Node.js)이 없을 수 있어요. 클로드에게 이렇게 말하세요. "스킬 설치에 필요한 프로그램이 있는지 확인하고, 없으면 깔고 다시 설치해 주세요."
직접 명령어로 하고 싶다면

터미널(윈도우: 시작 버튼 → "PowerShell" 검색 / 맥: ⌘+스페이스 → "터미널")에 node -v 입력 → v18 이상이면 통과. 없으면 nodejs.org에서 LTS 설치 후 터미널을 새로 열어 보세요. 명령어는 내 프로젝트 폴더에서 연 터미널에 붙여 넣는 게 좋아요(윈도우: 탐색기 주소창에 powershell 입력 + 엔터).

설치했는데 클로드가 스킬을 안 써요.
①클로드 코드 재시작 ②스킬 이름을 말에 넣어 주세요("테이스트 스킬로 ~해 주세요"). 그래도 안 되면 "설치된 스킬을 알려 주세요"로 목록부터 확인.
스킬을 지우고 싶어요.
클로드에게 "OO 스킬을 제거해 주세요"라고 하면 알아서 정리해 줘요.
AI 공부방 오픈카카오톡 · 막히면 같이 공부해요
입장하기 ‹ 다른 자료 보러 가기

트렌드코어 스킬공유자료실 · 무료