Menu
디자인 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합 폴리싱. 서비스 유형별 UI 추론, 66개 스타일/96개 색상/57개 타이포 검색, 트렌드 분석, Gap 분석, 8단계 우선순위 개선안 도출. /design-polish 명령으로 실행.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | design-polish |
| description | 디자인 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합 폴리싱. 서비스 유형별 UI 추론, 66개 스타일/96개 색상/57개 타이포 검색, 트렌드 분석, Gap 분석, 8단계 우선순위 개선안 도출. /design-polish 명령으로 실행. |
| allowed-tools | Read, Write, Glob, Grep, Bash, WebSearch, Edit |
| version | 2.1.0 |
디자인 지식 기반(서비스 유형별 규칙, 컴포넌트 체크리스트, 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 지원