Stats
Actions
Tags
From design-polish
디자인 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합 폴리싱. 서비스 유형별 UI 추론, 66개 스타일/96개 색상/57개 타이포 검색, 트렌드 분석, Gap 분석, 8단계 우선순위 개선안 도출. /design-polish 명령으로 실행.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-polish:design-polishThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
디자인 지식 기반(서비스 유형별 규칙, 컴포넌트 체크리스트, UX 규칙) + 실시간 시각 비교(Puppeteer 스크린샷) + WCAG 자동 검사(axe-core) + 트렌드 검색(WebSearch) 통합 폴리싱.
디자인 지식 기반(서비스 유형별 규칙, 컴포넌트 체크리스트, UX 규칙) + 실시간 시각 비교(Puppeteer 스크린샷) + WCAG 자동 검사(axe-core) + 트렌드 검색(WebSearch) 통합 폴리싱.
--apply: (옵션) 개선안을 코드에 직접 적용--wcag-only: (옵션) WCAG 접근성 체크만 수행--no-wcag: (옵션) WCAG 체크 생략/design-polish # 전체 자동 폴리싱 + WCAG 체크
/design-polish --apply # 폴리싱 + 코드 적용
/design-polish --wcag-only # WCAG 접근성 체크만
/design-polish mobbin # Mobbin에서 검색
/design-polish godly hero # Godly에서 hero 검색
/design-polish --apply godly hero # hero 폴리싱 + 코드 적용
전제조건 확인
↓
0단계: 프로젝트 분석 + 서비스 유형 감지 + 스크린샷 캡처 [Glob, Read, Bash]
↓
0.5단계: Console Error 캡처 + Responsive Viewport [Bash]
↓
1단계: WCAG 접근성 체크 (axe-core) [Bash, Read]
↓
1.5단계: 디자인 지식 로딩 [Read, Bash]
↓
1.8단계: Design Health Score 산출 + Regression 비교 [Read]
↓
1.9단계: Pivot vs Refine 전략 판단 [판단 로직]
↓ (Pivot 권고 시 → 사용자 확인 → /design-renewal 전환 가능)
2단계: 레퍼런스 사이트 선택
↓
3단계: 트렌드 검색 → 레퍼런스 캡처 [WebSearch, Bash]
↓
4단계: Gap 분석 (시각 비교 + 지식 기반) [Read]
↓
5단계: 개선안 도출 (8단계 우선순위)
↓
6단계: 결과 출력
↓
7단계: 코드 적용 (--apply 시) [Edit, Bash]
↓
Pre-delivery 체크리스트
실행 전 다음 조건을 확인합니다:
# Mac/Linux - 서버 상태 확인
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
# Windows PowerShell - 서버 상태 확인
try { (Invoke-WebRequest -Uri http://localhost:3000 -UseBasicParsing -TimeoutSec 5).StatusCode } catch { 0 }
자동 포트 감지 (서버가 3000이 아닐 수 있음):
# Mac/Linux - 실행 중인 개발 서버 포트 탐지
lsof -i -P | grep LISTEN | grep -E ':(3000|5173|8080|4200)'
# Windows PowerShell - 실행 중인 개발 서버 포트 탐지
Get-NetTCPConnection -State Listen | Where-Object { $_.LocalPort -in 3000,5173,8080,4200 }
서버가 실행 중이 아니면 사용자에게 안내:
"개발 서버를 먼저 실행해주세요. (예: npm run dev)"
# 플러그인 디렉토리에서 npm install 실행 여부 확인
ls ~/.claude/plugins/marketplaces/design-polish/node_modules/puppeteer
없으면 안내:
"플러그인 의존성을 설치해주세요: cd ~/.claude/plugins/marketplaces/design-polish && npm install"
node --version
사용 도구: Glob, Read, Bash
src/, components/, pages/, app/ 등프로젝트 코드에서 서비스 유형 신호를 자동 감지합니다:
| 감지 신호 | 서비스 유형 |
|---|---|
| 결제/장바구니/상품/checkout 코드 | Online Shop |
| 인증+대시보드+subscription | SaaS Platform |
| 의료 용어, HIPAA, patient | Healthcare Service |
| 차트+거래+지갑+crypto | Finance & Trading |
| 학습+퀴즈+진도+course | Education & Learning |
| 포트폴리오+작품+projects | Portfolio |
| .gov, 접근성 중심 | Government Service |
| chat+AI+prompt+stream | AI & Chatbot |
| 메뉴+예약+food | Food & Restaurant |
| booking+destination+travel | Travel & Booking |
| property+listing+map | Real Estate |
| game+score+level+player | Gaming |
| article+news+breaking | News & Media |
| feed+like+share+follow | Social Media |
| workout+fitness+health | Fitness & Gym |
| 럭셔리+프리미엄+브랜드+high-end | Luxury Brand |
| 에이전시+케이스스터디+creative+팀 | Creative Agency |
| 웰니스+명상+마음챙김+calm | Wellness & Health |
| admin+대시보드+analytics+지표 | Admin Dashboard |
| IDE+터미널+코드에디터+syntax+CLI | Developer Tool |
감지 방법: Grep으로 주요 코드 파일에서 키워드 빈도 분석, 가장 높은 점수의 서비스 유형을 선택합니다.
| 유형 | 패턴 |
|---|---|
| 컴포넌트 | **/*.tsx, **/*.jsx, **/*.js, **/*.vue, **/*.svelte, **/*.dart |
| 스타일 | **/*.css, **/*.scss, **/tailwind.config.* |
| 레이아웃 | **/layout.*, **/App.*, **/page.*, **/_app.* |
Bash로 캡처 스크립트 실행:
# 캡처 스크립트 실행 (${CLAUDE_PLUGIN_ROOT}는 플러그인 설치 경로로 자동 치환됨)
node "${CLAUDE_PLUGIN_ROOT}/scripts/capture.cjs" / /about /pricing
# 포트 변경시
BASE_URL=http://localhost:5173 node "${CLAUDE_PLUGIN_ROOT}/scripts/capture.cjs" /
# Responsive 뷰포트 (모바일 + 태블릿 + 데스크톱) 캡처
node "${CLAUDE_PLUGIN_ROOT}/scripts/capture.cjs" --responsive / /about
저장 위치: .design-polish/screenshots/current-*.png
current-mobile-*.png, current-tablet-*.png, current-desktop-*.png자동 부산물:
.design-polish/accessibility/console-errors.json — JS 콘솔 에러/경고 캡처.design-polish/health-score.json — Design Health Score (0-100) + regression 비교참고: WCAG 접근성 체크는 desktop 뷰포트(1280×720)에서만 실행됩니다. --wcag-only 모드도 동일하게 desktop 뷰포트만 사용합니다. 모바일 전용 접근성 이슈(터치 타겟 크기 등)는 수동 점검이 필요합니다.
Read(".design-polish/screenshots/current-main.png")
분석 항목:
사용 도구: Bash, Read
# WCAG 체크 포함 캡처
node "${CLAUDE_PLUGIN_ROOT}/scripts/capture.cjs" --wcag /
| 카테고리 | 체크 항목 | WCAG 기준 |
|---|---|---|
| 색상 대비 | 텍스트-배경 대비 | 4.5:1 (AA) |
| 색상 대비 | 대형 텍스트 대비 | 3:1 (AA) |
| 색상 대비 | UI 컴포넌트 대비 | 3:1 |
| 텍스트 크기 | 최소 텍스트 크기 | 12px 이상 권장 |
| 터치 타겟 | 최소 타겟 크기 | 44x44px (수동 점검 필요) |
| 링크 | 링크 구분 | 밑줄 또는 3:1 대비 |
.design-polish/
├── screenshots/
│ └── current-main.png
└── accessibility/
└── wcag-report.json
Read(".design-polish/accessibility/wcag-report.json")
사용 도구: Read, Bash
0단계에서 감지된 서비스 유형/기술 스택 정보를 기반으로 디자인 지식을 로딩합니다.
Read("${CLAUDE_PLUGIN_ROOT}/knowledge/industry-rules.md")
Read("${CLAUDE_PLUGIN_ROOT}/knowledge/component-checklist.md")
Read("${CLAUDE_PLUGIN_ROOT}/knowledge/ux-rules.md")
# 0단계에서 감지된 서비스 유형 키워드를 사용
# 예: SaaS Platform 감지 시
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain style "saas dashboard minimal"
# 예: Online Shop 감지 시
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain color "ecommerce shopping"
# 예: Healthcare Service 감지 시
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain typography "medical clean accessible"
# 기술 스택 가이드 (코드 적용 시에만)
# 예: React 프로젝트 감지 시
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain stack --stack react "accessibility aria"
| 감지된 서비스 유형 | 스타일 검색 | 색상 검색 | 타이포 검색 |
|---|---|---|---|
| SaaS Platform | "saas dashboard minimal" | "saas professional trust" | "modern professional clean" |
| Online Shop | "ecommerce vibrant card" | "ecommerce shopping" | "ecommerce clean shopping" |
| Healthcare Service | "healthcare accessible calm" | "healthcare calm" | "medical clean accessible" |
| Finance & Trading | "fintech dark glass" | "fintech crypto" | "financial trust" |
| Education & Learning | "education playful friendly" | "education playful" | "playful friendly" |
| Wellness & Health | "wellness organic biophilic" | "wellness nature calm" | "calming soft rounded" |
사용 도구: Read
0단계 캡처 시 자동으로 산출된 Health Score를 확인하고 보고합니다.
| 카테고리 | 가중치 | 산출 방법 |
|---|---|---|
| WCAG Critical | 30% | critical 위반 1건당 -10 |
| WCAG Serious | 20% | serious 위반 1건당 -5 |
| Console Errors | 20% | JS 에러 1건당 -5 |
| Style Fit | 15% | (현재 기본값, 향후 지식 기반 분석으로 확장) |
| Performance | 15% | (현재 기본값, 향후 Lighthouse 연동으로 확장) |
Read(".design-polish/health-score.json")
출력 예시:
{
"score": 75,
"breakdown": { "wcagCritical": 20, "wcagSerious": 15, "consoleErrors": 20, "styleFit": 15, "performance": 15 },
"regression": { "previousScore": 80, "currentScore": 75, "diff": -5, "status": "regression" }
}
Regression 감지: 이전 점수 대비 하락 시 경고 표시. 개선안 도출 (5단계)에서 regression 원인 분석 우선 처리.
사용 도구: 판단 로직 (도구 호출 없음)
Health Score와 점수 추세를 기반으로 현재 방향 개선(Refine) vs 전면 리뉴얼(Pivot) 을 자동 판단합니다.
참고: Anthropic Engineering — Harness Design for Long-Running Apps "각 evaluation 후 generator는 전략적 결정을 내린다: 점수가 좋은 추세이면 현재 방향을 개선(Refine), 접근법이 작동하지 않으면 완전히 다른 미학으로 전환(Pivot)."
| 조건 | 결정 | 행동 |
|---|---|---|
| Score ≥ 60 AND (첫 실행 또는 이전 대비 상승) | Refine | 현재 design-polish 플로우 계속 (2~7단계) |
| Score < 40 OR P1+P2 위반 합계 ≥ 5건 | Pivot 권고 | 사용자에게 /design-renewal 전환 제안 |
| 40 ≤ Score < 60 | 조건부 판단 | Gap 분석(4단계) 결과까지 확인 후 결정 |
| 2회 이상 연속 실행 AND 점수 변화 ≤ ±3 (정체) | Pivot 권고 | 점수 정체 → 방향 전환 필요 알림 |
health-score.json 읽기
↓
Score ≥ 60 + 상승/첫 실행?
├─ YES → ✅ Refine — "현재 디자인 방향이 양호합니다. 세부 개선을 진행합니다."
│ → 2단계로 진행
└─ NO
↓
Score < 40 OR P1+P2 ≥ 5건?
├─ YES → 🔄 Pivot 권고
│ → "Health Score [X]점, 핵심 위반 [N]건 — 현재 디자인 방향의 근본적 한계가 감지됩니다."
│ → "💡 `/design-renewal`로 전면 리뉴얼을 권장합니다. 계속 polish하시겠습니까?"
│ → 사용자 확인 대기
└─ NO (40~60 구간)
↓
2회+ 연속 AND 정체 (diff ≤ ±3)?
├─ YES → 🔄 Pivot 권고
│ → "2회 이상 polish 후 점수 정체 ([이전]→[현재]) — 개선 한계에 도달한 것으로 보입니다."
│ → "💡 `/design-renewal`로 방향 전환을 권장합니다."
│ → 사용자 확인 대기
└─ NO → ⚠️ 조건부 Refine
→ "Score [X]점 — 개선 여지가 있지만 제한적입니다. Gap 분석 후 최종 판단합니다."
→ 2단계로 진행, 4단계 완료 후 재평가
사용자에게 다음 3가지 선택지를 제시합니다:
/design-renewal 스킬로 전환 (현재 분석 결과를 인계)4단계(Gap 분석) 완료 후, Gap이 다음 조건을 만족하면 Pivot으로 전환 권고:
사용 도구: 판단 로직
| 프로젝트 유형 | 판단 기준 | 우선 사이트 | 대체 사이트 |
|---|---|---|---|
| 앱 UI/UX | Flutter, React Native, 모바일 우선 | Mobbin | Page Flows, Refero |
| 모던 웹/SaaS | Next.js, Nuxt, 대시보드 | Godly | Dark Mode Design, Awwwards |
| 감각적/예술적 | 포트폴리오, 갤러리, 아트 키워드 | SiteInspire | Savee, Behance |
| 랜딩페이지 | 단일 페이지, 마케팅 중심 | Lapa Ninja | Httpster |
| UI 디테일 | 컴포넌트 중심, 버튼/카드 등 | Dribbble | - |
사용 도구: WebSearch, Bash
기능 단위 검색 (업종별 X)
올바른 검색:
- site:mobbin.com onboarding flow
- site:godly.website hero section
- site:dribbble.com dashboard UI 2024
잘못된 검색:
- "금융 앱 디자인"
- "게임 앱 UI"
WebSearch 결과에서 유용한 레퍼런스 URL을 2-3개 선정.
# 단일 레퍼런스 캡처
node "${CLAUDE_PLUGIN_ROOT}/scripts/capture.cjs" ref "https://dribbble.com/shots/..." hero
# 여러 개 캡처 (브라우저 재사용으로 효율적)
node "${CLAUDE_PLUGIN_ROOT}/scripts/capture.cjs" ref "https://site1.com" ref1 "https://site2.com" ref2
저장 위치: .design-polish/screenshots/reference-*.png
사용 도구: Read
Read(".design-polish/screenshots/current-main.png")
Read(".design-polish/screenshots/reference-hero.png")
| 영역 | 분석 항목 | 지식 기반 참조 |
|---|---|---|
| 레이아웃 | 그리드, 여백, 정보 계층, CTA 위치 | ux-rules.md → Layout |
| 타이포그래피 | 폰트, 크기, 행간, 웨이트 | search.cjs typography 검색 결과 |
| 색상 | 팔레트, 대비, 다크모드 지원 | search.cjs color 검색 결과 |
| 인터랙션 | 호버, 전환, 애니메이션, 로딩 | ux-rules.md → Animation |
| 컴포넌트 | 버튼, 카드, 입력, 모달, 토스트 | component-checklist.md |
| 상태 | 로딩/성공/실패/빈 상태 처리 | ux-rules.md → Loading & Error |
| 접근성 | WCAG 위반 항목, 터치 타겟, 포커스 표시 | ux-rules.md → Accessibility |
| 서비스 유형 적합성 | industry-rules.md 기준 스타일/색상 일치 여부 | industry-rules.md |
| 스타일 매칭 | search.cjs 검색 결과와 현재 디자인 비교 | search.cjs style 검색 결과 |
| 플랫폼 | 핵심 기준 |
|---|---|
| 웹 | 스캔 가능성, 정보 밀도, 반응형 |
| 앱 | 엄지 도달 범위, 제스처, 네이티브 패턴 |
| 우선순위 | 카테고리 | 영향 | 예시 |
|---|---|---|---|
| P1 | 접근성 (WCAG 위반) | CRITICAL | 대비 부족, 터치 타겟 미달, 포커스 미표시 |
| P2 | 터치/인터랙션 | CRITICAL | cursor 미지정, 타겟 크기 미달, hover 없음 |
| P3 | 성능 | HIGH | 이미지 미최적화, reduced-motion 미지원 |
| P4 | 레이아웃/반응형 | HIGH | CLS, 모바일 깨짐, 뷰포트 이슈 |
| P5 | 타이포/색상 | MEDIUM | 행간 부족, 서비스 유형 부적합 색상, 폰트 미매칭 |
| P6 | 애니메이션 | MEDIUM | 트랜지션 누락, 과도한 모션, 타이밍 이슈 |
| P7 | 스타일 적합성 | MEDIUM | 서비스 유형별 추천 스타일과 불일치 |
| P8 | 차트/데이터 | LOW | 차트 접근성, 데이터 시각화 개선 |
각 개선안에는 다음 정보를 포함합니다:
## 프로젝트 요약
[프레임워크], [스타일링 방식] 기반 [프로젝트 유형]
감지된 서비스 유형: [서비스 유형명]
## WCAG 접근성 체크
| 항목 | 상태 | 세부사항 |
|------|------|----------|
| 색상 대비 | X 3건 위반 | btn-primary: 3.2:1 (필요: 4.5:1) |
| 터치 타겟 | O 통과 | |
| 텍스트 크기 | ! 1건 주의 | caption: 11px |
## 서비스 유형별 적합성
| 항목 | 추천 (industry-rules) | 현재 | 일치 |
|------|----------------------|------|------|
| 스타일 | Glassmorphism + Flat | Flat Design | 부분 일치 |
| 색상 무드 | Trust blue + Accent contrast | Blue + Grey | 일치 |
| 타이포 | Professional + Hierarchy | ... | ... |
| 핵심 효과 | Subtle hover (200-250ms) | 호버 없음 | 불일치 |
## 컴포넌트 체크 결과
| 컴포넌트 | 위반 항목 | 심각도 |
|---------|----------|--------|
| Button | 터치 타겟 38px (최소 44px) | HIGH |
| Card | 호버 효과 없음 | MEDIUM |
| Input | placeholder만 사용, label 없음 | HIGH |
## 트렌드 요약
- [핵심 트렌드 1]
- [핵심 트렌드 2]
- [핵심 트렌드 3]
## Gap 분석
| 영역 | 현재 | 추천 (지식 기반 + 트렌드) | Gap |
|------|------|--------------------------|-----|
| 레이아웃 | ... | ... | ... |
| 타이포그래피 | ... | [추천 폰트 페어링 + URL] | ... |
| 색상 | ... | [추천 팔레트 HEX 코드] | ... |
| 인터랙션 | ... | ... | ... |
| 컴포넌트 | ... | ... | ... |
| 접근성 | 3건 위반 | WCAG AA 준수 | 색상 대비 수정 필요 |
| 스타일 적합성 | ... | [추천 스타일명] | ... |
## 추천 리소스 (search.cjs 결과)
- **추천 스타일**: [스타일명] — [cssHints]
- **추천 색상**: Primary [HEX], Secondary [HEX], CTA [HEX], BG [HEX]
- **추천 폰트**: [Heading Font] + [Body Font] — [Google Fonts URL]
## 개선안 (8단계 우선순위)
### P1: 접근성 (CRITICAL)
- [ ] btn-primary 색상 대비 수정 (src/components/Button.tsx)
### P2: 터치/인터랙션 (CRITICAL)
- [ ] [개선안 + 대상 파일]
### P3: 성능 (HIGH)
- [ ] [개선안 + 대상 파일]
### P4: 레이아웃/반응형 (HIGH)
- [ ] [개선안 + 대상 파일]
### P5: 타이포/색상 (MEDIUM)
- [ ] [개선안 + 대상 파일]
### P6: 애니메이션 (MEDIUM)
- [ ] [개선안 + 대상 파일]
### P7: 스타일 적합성 (MEDIUM)
- [ ] [개선안 + 대상 파일]
### P8: 차트/데이터 (LOW)
- [ ] [개선안 + 대상 파일]
사용 도구: Edit, Bash
코드 적용 전, 감지된 기술 스택의 가이드라인을 참조합니다:
# 기술 스택 가이드 검색 (적용할 영역 키워드로)
# 예: React 프로젝트 감지 시
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain stack --stack react "accessibility aria"
## 적용 완료
| 파일 | 변경 내용 |
|------|----------|
| src/components/Button.tsx | 색상 대비 수정 (4.5:1 이상) |
| src/components/Button.tsx | hover 스타일 추가 |
| src/styles/global.css | 여백 조정 |
## 미적용 (수동 필요)
- [ ] Framer Motion 설치 필요 (애니메이션)
| 사이트 | URL | 특징 |
|---|---|---|
| Mobbin | mobbin.com | 실 서비스 스크린샷, 플로우별 정리 |
| Page Flows | pageflows.com | 영상 기반 플로우, 인터랙션 참고 |
| Refero | refero.design | 실제 서비스 UI 요소 모음 |
| 사이트 | URL | 특징 |
|---|---|---|
| Godly | godly.website | 다크 모드, 마이크로 인터랙션 |
| Dark Mode Design | darkmodedesign.com | 다크 모드 UI 큐레이션 |
| Awwwards | awwwards.com | 창의적/기술적 웹사이트 |
| 사이트 | URL | 특징 |
|---|---|---|
| SiteInspire | siteinspire.com | 레이아웃, 색감, 분위기 |
| Savee | savee.it | 무드보드용 시각적 자극 |
| Behance | behance.net | 브랜딩, Case Study |
| 사이트 | URL | 특징 |
|---|---|---|
| Lapa Ninja | lapa.ninja | 랜딩 페이지 레퍼런스 최다 |
| Httpster | httpster.net | 심플한 타이포그래피 |
| 사이트 | URL | 특징 |
|---|---|---|
| Dribbble | dribbble.com | 버튼, 카드 등 디테일 |
코드 적용 후 (--apply 시) 또는 최종 결과 보고 전에 다음을 확인합니다:
cursor: pointerprefers-reduced-motion 지원Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub vp-k/design-polish