30일 챌린지 오픈 알림 받기
← 모든 가이드

개발

Claude 웹디자인 퀄리티를 확 올리는 전체 셋업 가이드

Claude
지금 다 못 읽겠다면 · 이 가이드 링크를 메일로 받기
수집 항목·보유 기간 보기

필수 — 수집 항목: 이메일, 요청한 가이드 · 목적: 요청한 가이드 링크 1회 발송 · 보유 기간: 발송 후 30일, 이후 파기. 이 목적으로 다른 메일은 보내지 않습니다.

선택 — 수집 항목: 이메일 · 목적: 새 가이드 발행 알림 발송 · 보유 기간: 구독 해지 요청 시 즉시 파기, 해지하지 않으면 마지막 발송 후 1년. 선택 항목에 동의하지 않아도 링크를 받을 수 있습니다.

선택 — 광고성 정보 수신 동의 — 목적: 직접 만든 앱의 출시 소식과 할인·이벤트 안내를 새 가이드 알림 메일에 함께 발송 · 수단: 이메일 · 보유 기간: 동의 철회 또는 구독 해지 시까지. 새 가이드 알림을 함께 받을 때만 적용되며, 동의하지 않아도 링크와 알림을 받을 수 있습니다. 메일 하단 링크에서 언제든 무료로 철회할 수 있습니다.

동의를 거부할 권리가 있으며, 필수 항목 거부 시 링크 발송이 제한됩니다. 자세한 내용은 개인정보처리방침을 확인하세요.

목차 · 14개 섹션

Claude Code로 웹사이트를 만들면 구현 자체는 꽤 잘합니다.

문제는 디자인입니다.

아무런 기준 없이 “랜딩페이지 만들어줘”라고 하면 높은 확률로 비슷한 결과물이 나옵니다.

  • 익숙한 SaaS형 Hero
  • 둥근 카드 UI
  • 비슷한 여백과 레이아웃
  • 과한 그라데이션과 Glow
  • 어디서 본 듯한 애니메이션
  • 프로젝트가 달라도 비슷한 분위기

AI가 디자인을 못해서라기보다, 별도의 판단 기준을 주지 않으면 학습 과정에서 익숙해진 안전한 기본값으로 돌아가기 때문입니다.

그래서 이 가이드에서는 Claude에게 두 가지를 추가합니다.

① 좋은 디자인을 판단하는 기준
② 자기가 만든 결과물을 직접 보고 고치는 능력

최종적으로 만들고 싶은 구조는 이것입니다.

요청 → 디자인 판단 → 구현 → 브라우저 확인 → 문제 발견 → 수정 → 다시 확인

0. 우리가 만들 시스템

사용할 도구는 크게 5가지입니다.

도구역할
Emil Kowalski Design Skill타이포·여백·레이아웃·모션 등 디자인 판단 기준
Impeccable디자인 감사, 개선, 폴리싱과 안티패턴 탐지
Taste Skill전형적인 AI 디자인 패턴을 줄이고 스타일 방향 설정
Figma MCPFigma 디자인 구조·컴포넌트·변수 등을 AI가 읽고 다루는 통로
Playwright MCP실제 웹사이트를 브라우저에서 보고 테스트하는 ‘눈’

여기서 중요한 건 스킬을 많이 설치하는 것 자체가 아닙니다.

Skills = 디자인 판단 기준

그리고

MCP = 결과물을 보고 검증할 수 있는 눈과 손

둘이 결합돼야 합니다.

1. Emil Kowalski Design Skill

Emil Kowalski의 디자인 스킬은 Claude에게 단순히 “예쁘게 만들어”라고 말하는 대신 UI를 어떻게 판단해야 하는지 구체적인 기준을 줍니다.

특히 다음 영역에 강합니다.

  • Typography
  • Spacing
  • Layout
  • Interaction
  • Micro-animation
  • UI Polish
  • Component behavior

예를 들어 애니메이션 하나에도 단순히

“부드럽게 만들어.”

라고 하는 게 아니라,

어떤 easing을 사용할지, 얼마나 짧아야 하는지, 어떤 UI에는 애니메이션을 넣지 말아야 하는지 같은 판단 기준을 제공합니다.

emilkowalskiskillsRepository

설치

npx skills add emilkowalski/skills --skill emil-design-eng

같이 알아두면 좋은 Emil Skills

emil-design-eng 하나로 시작해도 충분하지만 필요에 따라 추가할 수 있습니다.

Skill용도
animateUI 애니메이션 설계
review-animations기존 애니메이션 리뷰
improve-animations프로젝트 전체 모션 감사
find-animation-opportunities모션이 필요한/필요 없는 지점 탐색
prototype서로 다른 UI 변형 비교
apple-designApple식 디자인 원칙 적용

이런 식으로 활용합니다

이 페이지를 디자인 엔지니어 관점에서 리뷰해줘.

타이포그래피, spacing, hierarchy,
interaction, animation을 확인하고
문제가 큰 순서대로 수정해줘.

2. Impeccable

두 번째는 Impeccable입니다.

Emil Skill이 디자인에 대한 ‘감각과 판단 기준’을 넣는다면, Impeccable은 이미 만들어진 결과물을 체계적으로 감사하고 개선하는 작업에 유용합니다.

다루는 범위도 넓습니다.

  • Visual hierarchy
  • Information architecture
  • Typography
  • Color
  • Motion
  • Responsive design
  • Accessibility
  • UX copy
  • Empty / Error states
  • Design tokens
  • Anti-patterns
pbakausimpeccableRepository

설치

프로젝트 루트에서:

npx impeccable install

설치 후 Claude Code에서:

/impeccable init

그러면 프로젝트를 분석하고 PRODUCT.md를 만들어 제품의 기본적인 디자인·제품 컨텍스트를 유지할 수 있습니다.

중요한 이유

AI에게 매번 처음부터

“이 서비스는 이런 서비스고 사용자는 이렇고 디자인은…”

이라고 설명하는 것보다,

프로젝트의 변하지 않는 기준을 먼저 잡아놓고 이후 디자인 작업에서 계속 참고하게 만드는 편이 훨씬 안정적입니다.

추천 흐름

새 프로젝트라면 먼저:

/impeccable init

그다음 초기 페이지를 만든 뒤:

현재 페이지를 전체적으로 audit해줘.

특히 hierarchy, spacing, typography,
responsive layout, accessibility,
AI-generated design anti-pattern을 확인해줘.

중요도가 높은 문제부터 수정해.

3. Taste Skill

여기서부터 ‘AI가 만든 티’를 줄이는 작업이 들어갑니다.

Taste Skill은 전형적인 AI식 프론트엔드 패턴을 피하면서 프로젝트에 맞는 디자인 방향을 잡도록 만들어진 스킬입니다.

Leonxlnxtaste-skillRepository

설치

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

⚠️ 예전에 깔아두셨다면 다시 깔아주세요 (2026-09 업데이트)

design-taste-frontend는 최근 v2로 통째로 새로 쓰였습니다. 기존 v1에서 상당 부분이 바뀐 재작성이라, 예전에 설치해두셨다면 지금 깔려 있는 건 구버전입니다.

업그레이드는 같은 명령어를 한 번 더 실행하면 됩니다. 설치 이름이 바뀌지 않았기 때문에 스크립트나 설정을 고칠 필요는 없고, 새 SKILL.md가 기존 파일을 그 자리에서 대체합니다.

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

v1의 동작에 의존하고 있어서 그대로 두고 싶다면 명시적으로 고정할 수 있습니다.

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

v1과 v2가 정확히 무엇이 달라졌는지는 레포의 CHANGELOG에 정리돼 있습니다.

Leonxlnx/taste-skillCHANGELOG.mdmainMarkdown

참고: 설치할 때 쓰는 이름은 폴더명이 아니라 SKILL 프론트매터의 name: 값입니다. 레포 폴더는 taste-skill이지만 설치 이름은 design-taste-frontend입니다. 폴더명으로 치면 설치되지 않습니다.

Taste Skill의 재미있는 부분은 디자인을 단순히 “예쁘게/안 예쁘게”로 보지 않고 몇 가지 값을 조절할 수 있다는 것입니다.

조절할 값 세 개는 스킬 파일 상단에 있습니다.

Leonxlnx/taste-skillSKILL.mdskills/taste-skill · mainMarkdown

핵심 디자인 다이얼

DESIGN_VARIANCE

레이아웃을 얼마나 평범하게 또는 실험적으로 만들지 결정합니다.

낮게 → 정돈된 그리드, 안전한 구성

높게 → 비대칭, 요소 중첩, 과감한 크기 차이와 여백

MOTION_INTENSITY

사이트에서 모션을 얼마나 적극적으로 사용할지 결정합니다.

낮게 → 기본적인 hover 중심

중간 → fade, reveal, smooth interaction

높게 → spring, magnetic interaction, scroll-triggered motion

VISUAL_DENSITY

한 화면에 들어가는 정보의 밀도를 조절합니다.

낮게 → 럭셔리 브랜드·포트폴리오처럼 넓은 여백

중간 → 일반적인 웹서비스

높게 → Dashboard / Data-heavy application

시작값 예시

깔끔한 SaaS 제품이라면:

DESIGN_VARIANCE = 5
MOTION_INTENSITY = 4
VISUAL_DENSITY = 6

비주얼 중심의 제품 소개 페이지라면:

DESIGN_VARIANCE = 7
MOTION_INTENSITY = 6
VISUAL_DENSITY = 3

숫자 자체를 정답처럼 사용할 필요는 없습니다.

핵심은 AI에게 단순히

“좀 더 세련되게.”

라고 지시하는 대신,

어느 방향으로 얼마나 밀어붙일지 명확한 디자인 변수를 주는 것입니다.

4. 여기까지만 하면 아직 절반입니다

여기까지 설치하면 Claude에게 상당히 많은 디자인 규칙이 생깁니다.

하지만 문제가 하나 있습니다.

Claude가 자기가 만든 결과물을 제대로 보지 못한다면?

좋은 디자인 규칙을 100개 알려줘도 실제 페이지에서

  • 제목이 너무 크거나
  • 카드가 이상하게 정렬되거나
  • 모바일에서 요소가 삐져나오거나
  • 여백이 어색하거나
  • 애니메이션이 산만하거나

하는 문제를 직접 확인하기 어렵습니다.

그래서 다음 단계가 중요합니다.

5. Figma MCP — 디자인 소스를 연결하기

Figma를 사용하는 프로젝트라면 Claude와 Figma 사이에 MCP를 연결할 수 있습니다.

이를 통해 AI가 단순히 스크린샷만 참고하는 것이 아니라 디자인에 존재하는

  • Frames
  • Components
  • Variables
  • Auto Layout
  • Design structure

등을 활용할 수 있습니다.

또한 디자인과 실제 코드 사이의 연결을 훨씬 구조적으로 만들 수 있습니다.

언제 유용한가?

Case A — 이미 Figma 디자인이 있는 경우

Figma 디자인을 기준으로 실제 페이지를 구현하고 싶을 때.

Case B — 디자인 시스템이 있는 경우

컴포넌트와 변수의 일관성을 유지하면서 구현하고 싶을 때.

Case C — Design ↔ Code 왕복 작업

구현하면서 발견된 문제를 다시 디자인 시스템과 맞춰나가고 싶을 때.

Figma MCP는 기능과 연결 방식이 변경될 수 있으므로 설치할 때는 Figma 공식 MCP 문서의 최신 절차를 따르는 것을 권장합니다.

6. Playwright MCP — Claude에게 ‘눈’을 달아주기

개인적으로 이 셋업에서 가장 중요한 부분 중 하나입니다.

Playwright MCP를 연결하면 Claude가 실제 브라우저에서 자신이 만든 페이지를 열어볼 수 있습니다.

microsoftplaywright-mcpRepository

설치

claude mcp add playwright npx @playwright/mcp@latest

브라우저가 설치되어 있지 않다면:

npx playwright install chromium

Claude Code에서 연결 확인:

/mcp

이제 Claude가 브라우저를 통해

  • 페이지 열기
  • 버튼 클릭
  • 입력
  • 화면 상태 확인
  • 스크린샷
  • UI 테스트

같은 작업을 수행할 수 있습니다.

7. 진짜 핵심: Visual Feedback Loop

여기서 앞에서 설치한 모든 것이 연결됩니다.

단순히 웹사이트를 한 번 생성하고 끝내지 마세요.

Claude에게 다음 루프를 돌리게 합니다.

BUILD
  ↓
OPEN IN BROWSER
  ↓
SCREENSHOT
  ↓
VISUAL REVIEW
  ↓
FIND PROBLEMS
  ↓
FIX
  ↓
OPEN AGAIN
  ↓
REPEAT

즉,

만들기 → 보기 → 고치기 → 다시 보기

입니다.

사람 디자이너와 개발자도 첫 번째 결과물을 그대로 출시하지 않습니다.

브라우저에서 보고,

“여기 여백 이상한데?”

“Hero가 너무 평범한데?”

“모바일에서는 이게 너무 커.”

“CTA가 안 보이네.”

라고 판단하면서 계속 고칩니다.

AI에게도 같은 루프를 만들어주는 것입니다.

8. 바로 복붙해서 쓸 수 있는 프롬프트

새 랜딩페이지 만들기

이 프로젝트의 랜딩페이지를 만들어줘.

먼저 제품과 타깃 사용자를 분석하고
그에 맞는 visual direction을 결정해.

설치된 design skills의 원칙을 적극적으로 사용하되
전형적인 AI-generated SaaS template처럼 보이지 않게 해줘.

특히 typography, hierarchy, spacing,
layout composition, visual density,
interaction, motion을 신경 써줘.

초기 구현이 끝나면 작업을 종료하지 말고
Playwright로 실제 페이지를 열어 확인해.

스크린샷을 기준으로 시각적 문제를 찾고
직접 수정한 다음 다시 확인해.

최소 2~3번 visual review loop를 반복해.

이미 만든 사이트 개선하기

현재 웹사이트의 기능은 유지하면서
디자인 완성도를 개선해줘.

먼저 기존 페이지를 Playwright로 열어서
현재 상태를 직접 확인해.

다음 기준으로 audit해:

- Visual hierarchy
- Typography
- Spacing
- Layout
- Color
- Component consistency
- Responsive design
- Motion
- AI-generated design patterns

문제를 중요도 순서대로 정리한 다음 수정해.

수정 후 반드시 다시 브라우저에서 확인하고,
아직 어색한 부분이 있다면 한 번 더 수정해.

“AI 티” 집중 제거

이 사이트에서 AI-generated 느낌이 나는 부분을 찾아줘.

특히 반복적인 카드 레이아웃,
과도한 rounded container,
불필요한 gradient,
평범한 centered hero,
획일적인 spacing,
generic typography,
의미 없는 animation을 집중적으로 확인해.

단순히 전부 제거하지 말고
이 제품의 브랜드와 목적에 맞는
더 나은 디자인 선택으로 교체해.

완료 후 Playwright에서 실제 결과물을 보고
시각적으로 다시 평가해.

9. 내가 추천하는 실제 작업 순서

처음부터 모든 도구를 동시에 만질 필요는 없습니다.

STEP 1 — 프로젝트 컨텍스트 정리

제품, 사용자, 목적, 브랜드 방향을 Claude에게 이해시킵니다.

↓

STEP 2 — 디자인 기준 적용

Emil + Impeccable을 이용해 typography, spacing, hierarchy, interaction의 기본 품질을 잡습니다.

↓

STEP 3 — AI 기본값 제거

Taste Skill로 프로젝트에 맞는 variance / motion / density 방향을 설정합니다.

↓

STEP 4 — 구현

Claude가 실제 페이지를 만듭니다.

↓

STEP 5 — Playwright 검증

브라우저에서 실제 결과물을 확인합니다.

↓

STEP 6 — 수정

디자인 규칙과 실제 화면 사이의 차이를 찾아 고칩니다.

↓

STEP 7 — 반복

만들기 → 보기 → 고치기를 반복합니다.

10. 최소 구성만 설치한다면?

처음 테스트하는 사람이라면 모든 것을 한꺼번에 설치하지 않아도 됩니다.

최소 추천 구성

Emil Design Skill
+
Taste Skill
+
Playwright MCP

이 세 개만으로도

디자인 판단 기준 + 안티슬롭 + 시각적 검증

이라는 핵심 구조를 만들 수 있습니다.

기존 프로젝트를 체계적으로 개선하고 싶다면 Impeccable을 추가하고,

Figma 기반 디자인 시스템을 실제 개발 워크플로와 연결하고 싶다면 Figma MCP까지 추가하는 방식이 좋습니다.

11. 가장 중요한 건 ‘스킬 이름’이 아닙니다

이 가이드에서 특정 스킬을 여러 개 소개했지만, 진짜 핵심은 도구 목록이 아닙니다.

AI 웹디자인 품질을 올리려면 세 가지가 필요합니다.

① 기준

무엇이 좋은 디자인인지 알아야 합니다.

→ Design Skills

② 컨텍스트

어떤 제품을 누구를 위해 디자인하는지 알아야 합니다.

→ Product / Brand / Figma Context

③ 피드백

자기가 만든 결과물이 실제로 어떻게 보이는지 확인해야 합니다.

→ Playwright / Browser

그리고 이 세 가지가 연결되면:

판단 → 구현 → 관찰 → 수정

이라는 루프가 만들어집니다.

이게 단순히 프롬프트 한 번 잘 쓰는 것보다 훨씬 중요합니다.

12. 전체 설치 치트시트

Emil Design Skill

npx skills add emilkowalski/skills --skill emil-design-eng

Impeccable

npx impeccable install

프로젝트에서:

/impeccable init

Taste Skill

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

Playwright MCP

claude mcp add playwright npx @playwright/mcp@latest
npx playwright install chromium

연결 확인:

/mcp

Figma MCP

Figma 공식 MCP 문서의 최신 Remote MCP 연결 절차를 사용하세요.

마지막 한 줄 정리

Claude에게 디자인 스킬 몇 개를 설치했다고 갑자기 ‘천재 디자이너’가 되는 것은 아닙니다.

하지만,

좋은 디자인의 기준을 알려주고 →
실제로 만들게 하고 →
자기 결과물을 직접 보게 하고 →
문제를 찾아 다시 고치게 하면

결과는 크게 달라집니다.

프롬프트보다 강력한 건 ‘피드백 루프’입니다.

Skills → Build → See → Fix → Repeat.

FOR TEAMS

이 가이드, 우리 팀에 적용하려면?

회사명과 업무 한 줄만 남겨주시면 널포인터스튜디오가 직접 검토해 회신드립니다.

수집 항목·보유 기간 보기

필수 — 수집 항목: 회사명, 이메일, 문의 내용 · 목적: AX 도입 문의 응대 및 회신 · 보유 기간: 문의 처리 완료 후 1년.

선택 — 수집 항목: 이메일 · 목적: 새 가이드 발행 알림 발송 · 보유 기간: 구독 해지 요청 시 즉시 파기, 해지하지 않으면 마지막 발송 후 1년. 선택 항목에 동의하지 않아도 문의할 수 있습니다.

동의를 거부할 권리가 있으며, 필수 항목 거부 시 문의 등록이 제한됩니다. 자세한 내용은 개인정보처리방침을 확인하세요.