클로드를 디자인 괴물로 — 저장소 5개 설치법과 프롬프트

영상에서 소개한 저장소 다섯 개의 설치 명령과 실제로 쓰는 프롬프트를 정리한 자료입니다. 명령어와 별 수는 전부 2026년 8월 6일에 GitHub 에서 직접 확인한 값입니다.

---

먼저 — 다섯 개가 각각 뭘 고치나

클로드가 만든 화면이 늘 비슷한 이유는 기준이 없어서입니다. 폰트도 색도 여백도 “알아서” 정하니까 늘 같은 곳으로 수렴합니다. 다섯 개는 그 빈자리를 각각 다르게 채웁니다.

저장소	역할	별	한 줄
Taste Skill	안목	72,774 ★	뻔한 AI 디자인을 막는 규칙집
Impeccable	언어	56,000 ★	프로젝트의 디자인 언어를 문서로 고정
Playwright CLI	검증	12,353 ★	만든 화면을 클로드가 직접 눌러 보고 확인
Awesome Design·md	어휘	106,897 ★	진짜 사이트의 디자인 시스템을 통째로 빌려옴
img2threejs	한 방	9,976 ★	사진 한 장 → 코드로 된 3D

다 합치면 258,000 스타. 전부 무료, 오픈소스입니다.

⚠️ 중요 — 저장소마다 설치 방법이 다릅니다. 전부 ~/.claude/skills 에 clone 하는 게 아닙니다. 아래 각 항목의 명령을 그대로 쓰세요.

---

1. Taste Skill — 안목

Leonxlnx/taste-skill · 72,774 ★ · MIT · tasteskill.dev

“안티-슬롭 프론트엔드 프레임워크”. 타이포·색·레이아웃·모션 각각에 대해 “이러면 AI 티 난다”는 규칙을 스킬로 넣어 둔 것입니다.

설치

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

이 한 줄이면 저장소 안의 스킬이 전부 깔립니다. 하나만 골라 깔고 싶으면:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

안에 뭐가 들어 있나

--skill 뒤에 넣는 설치 이름 기준입니다.

설치 이름	쓸 때
design-taste-frontend	기본값. 대부분 이것만 쓰면 됩니다 (현재 v2)
redesign-existing-projects	이미 있는 화면을 뜯어고칠 때
high-end-visual-design	여백 넉넉하고 비싸 보이는 톤
minimalist-ui	노션·리니어 같은 정돈된 제품 UI
industrial-brutalist-ui	강한 대비, 실험적 레이아웃
image-to-code	참고 이미지를 먼저 만들고 그걸 코드로
gpt-taste	GPT/Codex 용 더 엄격한 변형
stitch-design-taste	구글 Stitch 규칙 + DESIGN.md 내보내기

프롬프트

taste-skill 규칙으로 랜딩페이지 만들어줘.
주제는 [무엇]이고, 타깃은 [누구]야.
VARIANCE 높게, MOTION 보통, DENSITY 낮게.

이 페이지에서 AI가 만든 티 나는 부분만 짚어줘.
고치기 전에 뭐가 왜 문제인지 먼저 말해줘.

---

2. Impeccable — 디자인 언어

pbakaus/impeccable · 56,000 ★ · Apache-2.0 · impeccable.style

구글 Stitch 의 DESIGN.md 개념 위에 세운 것. 한 번 설정해 두면 이후 모든 작업이 같은 언어를 씁니다. 브라우저에서 바로 고치는 라이브 에디터가 있어 터미널을 안 써도 됩니다.

설치

프로젝트 폴더 안에서:

npx impeccable install

설치기가 ~/.claude, .cursor 같은 폴더를 찾아 주고, 프로젝트에만 넣을지 전역으로 넣을지 물어봅니다. 끝나면 클로드를 재시작하고:

/impeccable init

이게 PRODUCT.md 와 DESIGN.md 를 씁니다. 마케팅용(브랜드)인지 앱 UI(제품)인지 물어보고, 그 답을 이후 모든 명령이 읽습니다.

업데이트는 npx impeccable update.

주요 명령

명령	하는 일
/impeccable init	최초 1회 — 디자인 맥락을 잡아 문서로
/impeccable craft	설계부터 구현까지 한 번에
/impeccable shape	코드 쓰기 전에 UX/UI 먼저 계획
/impeccable critique	위계·명료성 관점의 디자인 리뷰
/impeccable document	기존 코드에서 DESIGN.md 역으로 뽑기
/impeccable extract	재사용 컴포넌트·토큰을 디자인 시스템으로

프롬프트

/impeccable init
→ 제품 UI. 타깃은 [누구]. 톤은 [어떤 느낌].
  피하고 싶은 레퍼런스는 [무엇].

/impeccable critique
지금 이 화면에서 사용자가 제일 먼저 볼 게 뭔지,
의도한 것과 맞는지 봐줘.

---

3. Playwright CLI — 검증

microsoft/playwright-cli · 12,353 ★ · Apache-2.0 · 마이크로소프트 공식

“테스트 전엔 디자인이 아니다.” 만든 화면을 클로드가 직접 브라우저로 열어 클릭하고 입력하고 확인합니다. 코딩 에이전트용으로 토큰을 아끼게 설계돼 있어서, 큰 코드베이스에서도 컨텍스트가 덜 터집니다.

설치

npm install -g @playwright/cli@latest
playwright-cli install --skills

전역 설치가 막히면 npx playwright cli 로도 됩니다.

프롬프트

playwright skills 로 방금 만든 화면 테스트해줘.
폼 제출, 빈 값, 잘못된 값, 모바일 폭 375px 까지 다 확인하고
깨진 데는 스크린샷 남겨줘.

로그인부터 결제까지 흐름을 끝까지 눌러 보고,
중간에 멈추는 데 있으면 어디서 왜 멈췄는지 알려줘.

---

4. Awesome Design.md — 어휘

VoltAgent/awesome-design-md · 106,897 ★ · MIT

⚠️ 이건 설치하는 게 아닙니다. 파일 하나를 복사해 오는 겁니다.

실제 사이트들의 디자인 시스템을 DESIGN.md 한 장으로 해부해 둔 모음입니다. 현재 73개 — airbnb, apple, bmw, bugatti, claude, coinbase, cursor, linear, notion, nintendo 등.

DESIGN.md 는 구글 Stitch 가 만든 개념으로, AI 가 읽는 디자인 시스템 문서입니다. 피그마도 JSON 스키마도 필요 없는 그냥 마크다운 파일이라, 프로젝트 루트에 두면 어떤 코딩 에이전트든 바로 알아듣습니다.

파일	읽는 쪽	담는 내용
AGENTS.md	코딩 에이전트	어떻게 만들 것인가
DESIGN.md	디자인 에이전트	어떻게 보여야 하는가

쓰는 법

1. github.com/VoltAgent/awesome-design-md → design-md 폴더

2. 마음에 드는 브랜드 폴더에서 DESIGN.md 를 복사

3. 내 프로젝트 루트에 붙여넣기

4. 클로드한테 “이대로 만들어줘”

프롬프트

루트의 DESIGN.md 읽고, 그 팔레트와 서체와 여백 규칙 그대로
[무엇] 페이지 만들어줘. 규칙에서 벗어나는 값은 쓰지 마.

DESIGN.md 를 기준으로 지금 화면을 감사해줘.
어긋난 색·폰트·여백을 표로 뽑아줘.

💡 여러 개를 섞지 마세요. 한 프로젝트에 DESIGN.md 는 하나입니다. 섞으면 다시 “AI가 만든 화면”이 됩니다.

---

5. img2threejs — 한 방

img2threejs/img2threejs · 9,976 ★ · Apache-2.0

사진 한 장을 코드로만 된 Three.js 3D 모델로 다시 만듭니다. 스캔이나 메시 변환이 아니라, 물체를 이해하고 절차적으로 다시 짓는 방식이라 그대로 애니메이션을 붙일 수 있습니다.

의존성이 없습니다 — 파이썬 3.10+ 표준 라이브러리만 씁니다. pip 설치가 필요 없습니다.

설치

여기만 clone 방식입니다.

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

프롬프트

이 사진 속 [물체]를 img2threejs 로 3D 모델로 만들어줘.
히어로 섹션에서 천천히 회전하게 하고, 스크롤에 반응시켜줘.

쓸 데가 좁습니다. 히어로 섹션 하나 살릴 때 쓰는 물건이지, 매일 쓰는 도구는 아닙니다.

---

겹쳐 쓰는 순서

하나씩 써도 되지만, 순서대로 겹칠 때 결과가 제일 다릅니다.

1. Awesome Design.md → DESIGN.md 복사        ... 어휘를 정한다
2. /impeccable init                          ... 제품 맥락을 고정한다
3. taste-skill 로 화면 생성                   ... 안목을 씌운다
4. playwright-cli 로 눌러 본다                ... 진짜 되는지 확인
5. (선택) img2threejs 로 히어로에 3D 하나      ... 한 방

한 번에 시키는 프롬프트:

루트 DESIGN.md 와 PRODUCT.md 를 먼저 읽어.
그 규칙 안에서 taste-skill 로 [무엇] 페이지를 만들고,
다 만들면 playwright skills 로 데스크탑·모바일 둘 다 눌러 보고
깨진 데를 스크린샷으로 보여줘.

---

클로드 데스크탑만 쓴다면

위 명령들은 대부분 터미널이 있는 환경(클로드 코드, 커서, Codex 등) 기준입니다.

클로드 데스크탑 앱만 쓴다면 이렇게 하세요.

1. 코드 실행 켜기 — 설정(Settings) → Capabilities → “Code execution and file creation” 켜기 (무료 요금제에서도 됩니다)

2. 커스텀 스킬 올리기 — Customize → Skills → ”+” → ”+ Create skill” → ZIP 업로드

ZIP 안의 구조가 중요합니다. 스킬 폴더가 최상단에 있어야 합니다.

my-skill.zip
└── my-skill/
    ├── skill.md
    └── resources/

skill.md 맨 위에 YAML 머리말이 있어야 하고, 두 항목이 필수입니다.

---
name: my-skill            (64자 이내)
description: 언제 이 스킬을 쓰는지  (200자 이내)
---

description 이 제일 중요합니다. 클로드는 이 설명을 읽고 언제 이 스킬을 꺼낼지 판단합니다.

3. 위 저장소들 중에서는 — taste-skill 이 제일 잘 맞습니다. 저장소의 skills/ 폴더 안에 각 스킬이 SKILL.md 와 함께 들어 있어서, 원하는 폴더 하나를 ZIP 으로 묶어 올리면 됩니다. Awesome Design.md 는 애초에 설치가 아니라 파일 복사라 데스크탑에서도 그냥 대화에 붙여넣으면 됩니다.

⚠️ 믿을 수 있는 곳에서만 받으세요. 스킬은 코드를 실행할 수 있습니다. 앤트로픽도 공식 문서에서 같은 경고를 합니다.

---

확인한 것 / 솔직한 한계

확인한 것

• 저장소 5개 전부 GitHub API 로 실재·별 수 확인 (2026-08-06)
• 설치 명령은 전부 각 저장소 README 원문에서 가져왔습니다. 지어낸 명령이 없습니다
• 위 스크린샷 5장은 같은 날 실제 페이지를 캡처한 것입니다

한계

• 별 수가 많다고 나한테 맞는다는 뜻은 아닙니다. img2threejs 는 쓸 데가 확실히 좁습니다
• 다섯 개를 다 깔 필요 없습니다. Taste Skill 하나만 깔아도 차이가 보입니다. 나머지는 필요할 때 얹으세요
• 저장소들은 활발히 바뀝니다. 명령이 안 먹으면 각 저장소 README 를 먼저 보세요

---

낭만빌더 김스듴 · 2026.08.06