디자인 폴리싱 스킬

디자인 레퍼런스 사이트에서 트렌드를 검색하고, 현재 프로젝트와 비교하여 개선안을 도출합니다. WCAG 기본 접근성 체크를 포함합니다.

인수

• --apply: (옵션) 개선안을 코드에 직접 적용
• --wcag-only: (옵션) WCAG 접근성 체크만 수행
• --no-wcag: (옵션) WCAG 체크 생략
• $1: (옵션) 레퍼런스 사이트 (미지정시 프로젝트 유형에 맞게 자동 선택)
• $2: (옵션) 기능 키워드 (미지정시 전체 디자인 폴리싱)

사용 예시

/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]
    ↓
1단계: WCAG 접근성 체크 (axe-core) [Bash, Read]
    ↓
2단계: 레퍼런스 사이트 선택
    ↓
3단계: 트렌드 검색 → 레퍼런스 캡처 [WebSearch, Bash]
    ↓
4단계: Gap 분석 (이미지 비교 + 접근성 비교) [Read]
    ↓
5단계: 개선안 도출
    ↓
6단계: 결과 출력
    ↓
7단계: 코드 적용 (--apply 시) [Edit]

전제조건 확인

실행 전 다음 조건을 확인합니다:

1. 개발 서버 실행 확인

# 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)”

2. 플러그인 의존성 확인

# 플러그인 디렉토리에서 npm install 실행 여부 확인
ls ~/.claude/plugins/marketplaces/design-polish/node_modules/puppeteer

없으면 안내:

“플러그인 의존성을 설치해주세요: cd ~/.claude/plugins/marketplaces/design-polish && npm install”

3. Node.js 확인

node --version

0단계: 프로젝트 분석

사용 도구: Glob, Read, Bash

프로젝트 유형 감지

• 디렉토리 구조: src/, components/, pages/, app/ 등
• 프레임워크: React, Vue, Flutter, Next.js, Nuxt 등
• 스타일링: CSS, Tailwind, styled-components, CSS Modules, SCSS 등

디자인 파일 탐지

현재 디자인 스크린샷 캡처

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" /

저장 위치: .design-polish/screenshots/current-*.png

캡처 후 Read로 이미지 분석

Read(".design-polish/screenshots/current-main.png")

분석 항목:

• 레이아웃 구조
• 색상 팔레트
• 타이포그래피
• 컴포넌트 스타일

1단계: WCAG 접근성 체크

사용 도구: Bash, Read

체크 실행

# WCAG 체크 포함 캡처
node "${CLAUDE_PLUGIN_ROOT}/scripts/capture.cjs" --wcag /

체크 항목 (axe-core 기반)

결과 저장

.design-polish/
├── screenshots/
│   └── current-main.png
└── accessibility/
    └── wcag-report.json

결과 확인

Read(".design-polish/accessibility/wcag-report.json")

2단계: 레퍼런스 사이트 선택

사용 도구: 판단 로직

$1 미지정시 자동 선택

3단계: 트렌드 검색

사용 도구: WebSearch, Bash

3-1. WebSearch로 레퍼런스 검색

기능 단위 검색 (업종별 X)

올바른 검색:
- site:mobbin.com onboarding flow
- site:godly.website hero section
- site:dribbble.com dashboard UI 2024

잘못된 검색:
- "금융 앱 디자인"
- "게임 앱 UI"

3-2. 검색 결과에서 URL 추출

WebSearch 결과에서 유용한 레퍼런스 URL을 2-3개 선정.

3-3. Bash로 레퍼런스 캡처

# 단일 레퍼런스 캡처
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

검색 실패시 (자동 처리)

1. 대체 사이트로 재시도: 위 표의 대체 사이트 순서대로
2. site: 제거: 일반 웹 검색으로 전환
3. 키워드 일반화: 예) “checkout” → “ecommerce flow”

4단계: Gap 분석

사용 도구: Read

Read로 이미지 비교 분석

Read(".design-polish/screenshots/current-main.png")
Read(".design-polish/screenshots/reference-hero.png")

분석 영역

플랫폼별 추가 기준

5단계: 개선안 도출

우선순위 분류

6단계: 결과 출력

출력 형식

## 프로젝트 요약

[프레임워크], [스타일링 방식] 기반 [프로젝트 유형]

## WCAG 접근성 체크

| 항목 | 상태 | 세부사항 |
|------|------|----------|
| 색상 대비 | X 3건 위반 | btn-primary: 3.2:1 (필요: 4.5:1) |
| 터치 타겟 | O 통과 | |
| 텍스트 크기 | ! 1건 주의 | caption: 11px |

## 트렌드 요약

- [핵심 트렌드 1]
- [핵심 트렌드 2]
- [핵심 트렌드 3]

## Gap 분석

| 영역 | 현재 | 트렌드 | Gap |
|------|------|--------|-----|
| 레이아웃 | ... | ... | ... |
| 타이포그래피 | ... | ... | ... |
| 색상 | ... | ... | ... |
| 인터랙션 | ... | ... | ... |
| 컴포넌트 | ... | ... | ... |
| 접근성 | 3건 위반 | WCAG AA 준수 | 색상 대비 수정 필요 |

## 개선안

### Critical (접근성)

- [ ] btn-primary 색상 대비 수정 (src/components/Button.tsx)

### High

- [ ] [개선안 + 대상 파일]

### Medium

- [ ] [개선안 + 대상 파일]

### Low

- [ ] [개선안 + 대상 파일]

7단계: 코드 적용 (–apply 옵션시만)

사용 도구: Edit

적용 순서

1. Critical (접근성) 우선순위부터 순차 적용
2. High 우선순위 적용
3. 각 수정 후 파일 저장
4. 적용 결과 요약 출력

적용하지 않는 것

• 새 라이브러리 설치 필요한 변경
• 대규모 구조 변경 (리팩토링 수준)
• 브레이킹 체인지

적용 결과 출력

## 적용 완료

| 파일 | 변경 내용 |
|------|----------|
| src/components/Button.tsx | 색상 대비 수정 (4.5:1 이상) |
| src/components/Button.tsx | hover 스타일 추가 |
| src/styles/global.css | 여백 조정 |

## 미적용 (수동 필요)

- [ ] Framer Motion 설치 필요 (애니메이션)

레퍼런스 사이트 목록

실제 서비스 UX 흐름

모던 웹 트렌드 (Tech & SaaS)

감각적 & 예술적 영감

랜딩 페이지 & 마케팅

UI 디테일