디자인 레퍼런스 기반 폴리싱. 트렌드 검색, Gap 분석, WCAG 접근성 체크, 개선안 도출. /design-polish 명령으로 실행.
/plugin marketplace add vp-k/flutter-craft/plugin install design-polish@bitlabThis skill is limited to using the following tools:
디자인 레퍼런스 사이트에서 트렌드를 검색하고, 현재 프로젝트와 비교하여 개선안을 도출합니다. WCAG 기본 접근성 체크를 포함합니다.
--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]
↓
1단계: WCAG 접근성 체크 (axe-core) [Bash, Read]
↓
2단계: 레퍼런스 사이트 선택
↓
3단계: 트렌드 검색 → 레퍼런스 캡처 [WebSearch, Bash]
↓
4단계: Gap 분석 (이미지 비교 + 접근성 비교) [Read]
↓
5단계: 개선안 도출
↓
6단계: 결과 출력
↓
7단계: 코드 적용 (--apply 시) [Edit]
실행 전 다음 조건을 확인합니다:
# 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/ 등| 유형 | 패턴 |
|---|---|
| 컴포넌트 | **/*.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" /
저장 위치: .design-polish/screenshots/current-*.png
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")
사용 도구: 판단 로직
| 프로젝트 유형 | 판단 기준 | 우선 사이트 | 대체 사이트 |
|---|---|---|---|
| 앱 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 위치 |
| 타이포그래피 | 폰트, 크기, 행간, 웨이트 |
| 색상 | 팔레트, 대비, 다크모드 지원 |
| 인터랙션 | 호버, 전환, 애니메이션, 로딩 |
| 컴포넌트 | 버튼, 카드, 입력, 모달, 토스트 |
| 상태 | 로딩/성공/실패/빈 상태 처리 |
| 접근성 | WCAG 위반 항목, 터치 타겟, 포커스 표시 |
| 플랫폼 | 핵심 기준 |
|---|---|
| 웹 | 스캔 가능성, 정보 밀도, 반응형 |
| 앱 | 엄지 도달 범위, 제스처, 네이티브 패턴 |
| 우선순위 | 기준 | 예시 |
|---|---|---|
| Critical | WCAG 위반 (심각) | 대비 부족, 터치 타겟 미달 |
| High | 사용성/접근성 문제, 명확한 트렌드 뒤처짐 | CTA 불명확, 네비게이션 |
| Medium | 시각적 개선 기회 | 여백 조정, 애니메이션 추가 |
| Low | 선택적 폴리싱 | 마이크로 인터랙션 |
## 프로젝트 요약
[프레임워크], [스타일링 방식] 기반 [프로젝트 유형]
## 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
- [ ] [개선안 + 대상 파일]
사용 도구: Edit
## 적용 완료
| 파일 | 변경 내용 |
|------|----------|
| 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 | 버튼, 카드 등 디테일 |
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.