SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsdesign-polish

design-polish

Design & creation

View repository

Updated 10-16 08:52

About this skill

Design Polishing Skill v2.0

Integrated polishing of design knowledge base (service-type-specific rules, component checklists, UX rules) + real-time visual comparison (Puppeteer screenshots) + WCAG automated checks (axe-core) + trend search (WebSearch).

Knowledge Base Resources

  • knowledge/: Service-type-specific UI rules, component checklists, UX rules (read markdown directly)
  • data/: 66 design styles, 96 color palettes, 57 typography, 13 tech stack guides (JSON + BM25 search)
  • scripts/search.cjs: Node.js BM25 search engine

Arguments

  • --apply: (optional) Apply improvements directly to code
  • --wcag-only: (optional) Perform WCAG accessibility checks only
  • --no-wcag: (optional) Skip WCAG checks
  • $1: (optional) Reference site (if unspecified, automatically selected to match the project type)
  • $2: (optional) Feature keywords (if unspecified, full design polishing)

Usage Examples

/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 폴리싱 + 코드 적용

Execution Flow Overview

전제조건 확인
    ↓
0단계: 프로젝트 분석 + 서비스 유형 감지 + 스크린샷 캡처 [Glob, Read, Bash]
    ↓
1단계: WCAG 접근성 체크 (axe-core) [Bash, Read]
    ↓
1.5단계: 디자인 지식 로딩 [Read, Bash]
    ↓
2단계: 레퍼런스 사이트 선택
    ↓
3단계: 트렌드 검색 → 레퍼런스 캡처 [WebSearch, Bash]
    ↓
4단계: Gap 분석 (시각 비교 + 지식 기반) [Read]
    ↓
5단계: 개선안 도출 (8단계 우선순위)
    ↓
6단계: 결과 출력
    ↓
7단계: 코드 적용 (--apply 시) [Edit, Bash]
    ↓
Pre-delivery 체크리스트

Prerequisite Checks

Before execution, check the following conditions:

1. Check Development Server Running

# 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 }

Automatic port detection (the server may not be on 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 }

If the server is not running, notify the user:

"Please run the development server first. (e.g., npm run dev)"

2. Check Plugin Dependencies

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

If not present, notify:

"Please install the plugin dependencies: cd ~/.claude/plugins/marketplaces/design-polish && npm install"

3. Check Node.js

node --version

Step 0: Project Analysis + Service Type Detection

Tools Used: Glob, Read, Bash

Project Type Detection

  • Directory structure: src/, components/, pages/, app/ 등
  • Framework: React, Vue, Flutter, Next.js, Nuxt, etc.
  • Styling: CSS, Tailwind, styled-components, CSS Modules, SCSS, etc.

Service Type Detection

Automatically detect service type signals from the project code:

Detection Signal Service Type
Payment/cart/product/checkout code Online Shop
Auth+dashboard+subscription SaaS Platform
Medical terminology, HIPAA, patient Healthcare Service
Chart+trading+wallet+crypto Finance & Trading
Learning+quiz+progress+course Education & Learning
Portfolio+works+projects Portfolio
.gov, accessibility-focused Government Service
chat+AI+prompt+stream AI & Chatbot
Menu+reservation+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
Luxury+premium+brand+high-end Luxury Brand
Agency+case study+creative+team Creative Agency
Wellness+meditation+mindfulness+calm Wellness & Health
admin+dashboard+analytics+metrics Admin Dashboard
IDE+terminal+code editor+syntax+CLI Developer Tool

Detection Method: GrepPerform keyword frequency analysis on key code files, and select the service type with the highest score.

Design file detection

Type Pattern
Component **/*.tsx, **/*.jsx, **/*.js, **/*.vue, **/*.svelte, **/*.dart
Style **/*.css, **/*.scss, **/tailwind.config.*
Layout **/layout.*, **/App.*, **/page.*, **/_app.*

Capture current design screenshot

Run capture script with 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" /

Save location: .design-polish/screenshots/current-*.png

Analyze image with Read after capture

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

Analysis items:

  • Layout structure
  • Color palette
  • Typography
  • Component style

Step 1: WCAG accessibility check

Tool used: Bash, Read

Run check

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

Check items (axe-core based)

Category Check item WCAG criteria
Color contrast Text-background contrast 4.5:1 (AA)
Color contrast Large text contrast 3:1 (AA)
Color contrast UI component contrast 3:1
Text size Minimum text size 12px or more recommended
Touch target Minimum target size 44x44px (mobile)
Link Link distinction Underline or 3:1 contrast

Save results

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

Check results

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

Step 1.5: Load design knowledge

Tool used: Read, Bash

Load design knowledge based on the service type/tech stack information detected in Step 0.

Load markdown directly (required — every run)

Read("${CLAUDE_PLUGIN_ROOT}/knowledge/industry-rules.md")
Read("${CLAUDE_PLUGIN_ROOT}/knowledge/component-checklist.md")
Read("${CLAUDE_PLUGIN_ROOT}/knowledge/ux-rules.md")

Script search (based on detected service type/keywords)

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

Search examples

Detected service type Style search Color search Typography search
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"

Step 2: Select reference site

Tool used: Decision logic

Auto-select when $1 is unspecified

Project type Decision criteria Preferred site Alternative site
앱 UI/UX Flutter, React Native, mobile-first Mobbin Page Flows, Refero
Modern web/SaaS Next.js, Nuxt, dashboard Godly Dark Mode Design, Awwwards
Sensual/artistic Portfolio, gallery, art keywords SiteInspire Savee, Behance
Landing page Single page, marketing-focused Lapa Ninja Httpster
UI detail Component-focused, buttons/cards, etc. Dribbble -

Step 3: Trend search

Tool used: WebSearch, Bash

3-1. Search references with WebSearch

Function-based search (not by industry)

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

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

3-2. Extract URLs from search results

Select 2-3 useful reference URLs from WebSearch results.

3-3. Capture references with 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

Save location: .design-polish/screenshots/reference-*.png

On search failure (automatic handling)

  1. Retry with alternative site: In the order of the alternative sites in the table above
  2. site: remove: switch to general web search
  3. keyword generalization: 예) "checkout" → "ecommerce flow"

Step 4: Gap Analysis (Visual Comparison + Knowledge-Based)

Tools Used: Read

Image comparison analysis with Read

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

Analysis Areas

Area Analysis Item Knowledge-Based Reference
Layout Grid, spacing, information hierarchy, CTA placement ux-rules.md → Layout
Typography Font, size, line height, weight search.cjs typography search results
Color Palette, contrast, dark mode support search.cjs color search results
Interaction Hover, transition, animation, loading ux-rules.md → Animation
Components Button, card, input, modal, toast component-checklist.md
States Loading/success/failure/empty state handling ux-rules.md → Loading & Error
Accessibility WCAG violations, touch targets, focus indicators ux-rules.md → Accessibility
Service type suitability Whether style/color matches industry-rules.md criteria industry-rules.md
Style matching Compare search.cjs search results with current design search.cjs style search results

Knowledge-Based Analysis (Additional)

  1. Service type suitability: Compare the recommended style/color for the service type in industry-rules.md with the current design
  2. Component quality: Do/Don't check from component-checklist.md — check violations per component in use
  3. UX rule compliance: Check patterns for each category in ux-rules.md
  4. Style matching: Compare the recommended style from search.cjs search results with the current design
  5. Color/typography matching: Compare the searched palette/font pairing vs the values currently in use

Additional Criteria by Platform

Platform Core Criteria
웹 Scannability, information density, responsiveness
앱 Thumb reach range, gestures, native patterns

Step 5: Deriving Improvements (8-Level Priority)

Priority Classification

Priority Category Impact Example
P1 Accessibility (WCAG violations) CRITICAL Insufficient contrast, touch target below minimum, no focus indicator
P2 Touch/Interaction CRITICAL cursor not specified, target size below minimum, no hover
P3 Performance HIGH Unoptimized images, reduced-motion not supported
P4 Layout/Responsive HIGH CLS, mobile breakage, viewport issues
P5 Typography/Color MEDIUM Insufficient line height, colors unsuitable for service type, font not matched
P6 Animation MEDIUM Missing transitions, excessive motion, timing issues
P7 Style suitability MEDIUM Mismatch with recommended styles by service type
P8 Charts/Data LOW Chart accessibility, data visualization improvements

Each improvement includes the following information:

  • Target file path
  • Specific changes
  • Reference basis (knowledge files, search.cjs results, WCAG criteria, etc.)

Step 6: Output results

Output format

## 프로젝트 요약

[프레임워크], [스타일링 방식] 기반 [프로젝트 유형]
감지된 서비스 유형: [서비스 유형명]

## 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)
- [ ] [개선안 + 대상 파일]

Step 7: Apply code (only with --apply option)

Tools used: Edit, Bash

Reference stack guide

Before applying code, refer to the guidelines for the detected tech stack:

# 기술 스택 가이드 검색 (적용할 영역 키워드로)
# 예: React 프로젝트 감지 시
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain stack --stack react "accessibility aria"

Application order

  1. Apply sequentially starting with P1 (accessibility CRITICAL) priority
  2. Apply P2~P4 (CRITICAL/HIGH)
  3. P5~P7 (MEDIUM) — apply after user confirmation
  4. Save the file after each fix
  5. Output application results summary

What not to apply

  • Changes requiring new library installation
  • Large-scale structural changes (refactoring level)
  • Breaking changes

Output application results

## 적용 완료

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

## 미적용 (수동 필요)

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

Reference site list

Real service UX flows

Site URL Features
Mobbin mobbin.com Real service screenshots, organized by flow
Page Flows pageflows.com Video-based flows, interaction reference
Refero refero.design Collection of real service UI elements

Modern web trends (Tech & SaaS)

Site URL Features
Godly godly.website Dark mode, micro-interactions
Dark Mode Design darkmodedesign.com Dark mode UI curation
Awwwards awwwards.com Creative/technical websites

Sensory & artistic inspiration

Site URL Features
SiteInspire siteinspire.com Layout, colors, atmosphere
Savee savee.it Visual stimulation for moodboards
Behance behance.net Branding, Case Study

Landing pages & marketing

Site URL Features
Lapa Ninja lapa.ninja Most landing page references
Httpster httpster.net Simple typography

UI details

Site URL Features
Dribbble dribbble.com Details such as buttons, cards

Pre-delivery checklist

After applying code (with --apply) or before reporting final results, check the following:

Visual quality

  • Color contrast 4.5:1 or higher (WCAG AA)
  • Consistent border-radius (choose one of 8px/12px/16px)
  • Consistent spacing scale (e.g., 4/8/12/16/24/32px)
  • Clear font hierarchy (h1 > h2 > h3 > body > caption)

Interaction

  • On all clickable elements: cursor: pointer
  • Hover state (150-200ms transition)
  • Focus ring (2-3px, keyboard users)
  • Loading state (skeleton or spinner)
  • Error state (inline message + icon)

Light/dark mode

  • No elements break when switching to dark mode
  • Dark mode color contrast maintained

Layout

  • Mobile (320px~) does not break
  • Tablet (768px) appropriate arrangement
  • Desktop (1024px+) maximum width limited

Final accessibility check

  • 0 axe-core violations (or justified)
  • Keyboard navigation possible
  • Screen reader compatible (ARIA labels)
  • prefers-reduced-motion Supported