Stats
Actions
Tags
From design-polish
디자인 전면 리뉴얼. 디자인 시스템 교체 수준의 대규모 변경. 색상 팔레트/타이포그래피/컴포넌트/레이아웃 전면 교체. 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합. /design-renewal 명령으로 실행.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-polish:design-renewalThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
디자인 시스템을 전면 교체하는 대규모 리뉴얼 스킬.
디자인 시스템을 전면 교체하는 대규모 리뉴얼 스킬. design-polish와 동일한 0~6단계 분석 인프라를 사용하되, 7단계 코드 적용 범위가 디자인 시스템 전체로 확대됩니다.
--analyze: (옵션) 분석만 수행 (코드 변경 없음)--wcag-only: (옵션) WCAG 접근성 체크만 수행--no-wcag: (옵션) WCAG 체크 생략/design-renewal # 전체 디자인 리뉴얼 (분석 + 적용)
/design-renewal --analyze # 분석만 (코드 변경 없음)
/design-renewal glassmorphism # 글래스모피즘 스타일로 리뉴얼
/design-renewal dark # 다크 테마 중심 리뉴얼
/design-renewal minimal godly # 미니멀 스타일, Godly 레퍼런스
/design-renewal --wcag-only # WCAG 접근성 체크만
/design-renewal brutalist mobbin hero # 브루탈리즘, Mobbin에서 hero 검색
전제조건 확인
|
0단계: 프로젝트 분석 + 서비스 유형 감지 + 스크린샷 캡처 [Glob, Read, Bash]
|
1단계: WCAG 접근성 체크 (axe-core) [Bash, Read]
|
1.5단계: 디자인 지식 로딩 [Read, Bash]
|
2단계: 레퍼런스 사이트 선택
|
3단계: 트렌드 검색 + 레퍼런스 캡처 [WebSearch, Bash]
|
4단계: Gap 분석 (시각 비교 + 지식 기반) [Read]
|
5단계: 리뉴얼 방향 수립 + 개선안 도출
|
6단계: 리뉴얼 계획 출력 + 사용자 확인
|
7단계: 디자인 시스템 전면 적용 [Edit, Bash, Write]
|
Pre-delivery 체크리스트
04단계는 design-polish SKILL.md의 플로우와 동일합니다.
**반드시 design-polish SKILL.md의 04단계를 참조하여 실행하세요:**
Read("${CLAUDE_PLUGIN_ROOT}/skills/design-polish/SKILL.md")
핵심 요약:
style-keyword가 제공된 경우, 1.5단계에서 해당 키워드를 search.cjs 검색에 우선 반영합니다:
# style-keyword가 "glassmorphism"인 경우
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain style "glassmorphism"
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain color "glassmorphism"
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain typography "glassmorphism"
design-polish는 8단계 우선순위로 개별 개선안을 도출하지만, design-renewal은 통합 디자인 시스템을 수립합니다.
| 항목 | 결정 내용 | 근거 |
|---|---|---|
| 디자인 스타일 | 전체 스타일 방향 (예: Glassmorphism) | style-keyword + search.cjs + 트렌드 |
| 색상 팔레트 | Primary, Secondary, Accent, Background, Surface, Text, Error, Success, Warning | search.cjs color 결과 + 트렌드 |
| 타이포그래피 | Heading 폰트 + Body 폰트 + 크기 스케일 | search.cjs typography 결과 |
| 컴포넌트 토큰 | border-radius, shadow, spacing scale | 스타일 방향에 맞춤 |
| 레이아웃 | 그리드 시스템, 간격 체계, 최대 너비 | 트렌드 + UX 규칙 |
| 다크/라이트 모드 | 양 모드 색상 매핑 | 팔레트 기반 자동 생성 |
search.cjs 결과와 트렌드를 기반으로 완전한 팔레트를 설계합니다:
Primary: #XXXXXX — 브랜드 핵심 색상
Secondary: #XXXXXX — 보조 색상
Accent: #XXXXXX — 강조/CTA 색상
Background: #XXXXXX — 배경
Surface: #XXXXXX — 카드/컨테이너 배경
Text: #XXXXXX — 본문 텍스트
TextSecondary: #XXXXXX — 보조 텍스트
Border: #XXXXXX — 테두리
Error: #XXXXXX — 에러 상태
Success: #XXXXXX — 성공 상태
Warning: #XXXXXX — 경고 상태
Heading: [Font Family] — Google Fonts URL
Body: [Font Family] — Google Fonts URL
Scale:
h1: XX px / line-height / weight
h2: XX px / line-height / weight
h3: XX px / line-height / weight
h4: XX px / line-height / weight
body: XX px / line-height / weight
caption: XX px / line-height / weight
border-radius: sm: Xpx, md: Xpx, lg: Xpx, full: 9999px
shadow: sm: ..., md: ..., lg: ...
spacing: xs: Xpx, sm: Xpx, md: Xpx, lg: Xpx, xl: Xpx, 2xl: Xpx
transition: fast: Xms, normal: Xms, slow: Xms
## 리뉴얼 계획
### 디자인 방향
- 스타일: [스타일명]
- 근거: [search.cjs 결과 + 트렌드 요약]
### 색상 팔레트
| 토큰 | 현재 | 변경 후 | 용도 |
|------|------|---------|------|
| Primary | #현재값 | #새값 | 브랜드 핵심 |
| Secondary | #현재값 | #새값 | 보조 |
| ... | ... | ... | ... |
### 타이포그래피
| 용도 | 현재 | 변경 후 |
|------|------|---------|
| Heading | [현재 폰트] | [새 폰트] |
| Body | [현재 폰트] | [새 폰트] |
### 컴포넌트 토큰
| 토큰 | 현재 | 변경 후 |
|------|------|---------|
| border-radius | ... | ... |
| shadow | ... | ... |
| spacing | ... | ... |
### 변경 예정 파일 목록
| 파일 | 변경 범위 |
|------|----------|
| src/styles/variables.css | CSS 변수 전체 교체 |
| src/styles/global.css | 폰트/색상/간격 |
| src/components/Button.tsx | 스타일 전면 변경 |
| ... | ... |
### WCAG 접근성
- 새 팔레트의 대비율 검증 결과
> 위 계획대로 진행할까요? (Y/n)
--analyze 옵션 시: 여기서 종료. 코드 적용하지 않음.
반드시 사용자 확인을 받은 후에만 7단계로 진행합니다.
사용 도구: Edit, Bash, Write
| 영역 | design-polish | design-renewal |
|---|---|---|
| CSS 변수/토큰 | 개별 값 보정 | 전면 교체 |
| 색상 | 대비 보정 | 팔레트 전체 교체 (primary~warning) |
| 타이포그래피 | 크기/행간 조정 | 폰트 페어링 교체 (heading + body) |
| border-radius | 개별 보정 | 통일된 스케일로 교체 |
| shadow | 개별 보정 | 통일된 스케일로 교체 |
| spacing | 여백 보정 | spacing scale 통일 |
| 레이아웃 | 정렬 수정 | 그리드/간격 재구성 |
| 다크/라이트 모드 | 색상 보정 | 테마 전체 재생성 |
| 컴포넌트 | hover/focus 보정 | 스타일 전면 변경 |
프로젝트의 스타일링 방식에 따라 적용:
CSS Variables 방식:
:root {
--color-primary: #새값;
--color-secondary: #새값;
/* ... 5단계에서 설계한 전체 팔레트 */
--font-heading: '새 폰트', sans-serif;
--font-body: '새 폰트', sans-serif;
--radius-sm: Xpx;
--radius-md: Xpx;
--radius-lg: Xpx;
--shadow-sm: ...;
--shadow-md: ...;
--spacing-xs: Xpx;
--spacing-sm: Xpx;
/* ... */
}
Tailwind 방식: tailwind.config.* 의 theme/extend 수정
styled-components/emotion 방식: theme 객체 수정
Flutter 방식: ThemeData, ColorScheme, TextTheme 수정
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #다크모드값;
--color-background: #다크모드값;
--color-surface: #다크모드값;
--color-text: #다크모드값;
/* ... */
}
}
코드 적용 전, 감지된 기술 스택의 가이드라인을 참조합니다:
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain stack --stack react "theming css-variables"
## 리뉴얼 완료
### 디자인 시스템 변경 요약
- 스타일: [이전] -> [이후]
- 색상: [이전 팔레트] -> [이후 팔레트]
- 타이포: [이전 폰트] -> [이후 폰트]
### 변경된 파일
| 파일 | 변경 내용 |
|------|----------|
| src/styles/variables.css | CSS 변수 전면 교체 (색상, 폰트, 토큰) |
| src/styles/global.css | 글로벌 스타일 업데이트 |
| src/components/Button.tsx | 버튼 스타일 전면 변경 |
| ... | ... |
### WCAG 검증
- 새 팔레트 대비율: 모두 4.5:1 이상 통과
- 터치 타겟: 44x44px 충족
### 수동 작업 필요
- [ ] Google Fonts import 추가: `<link href="..." />`
- [ ] 이미지 에셋 교체 (색상 톤 불일치)
- [ ] 아이콘 세트 교체 검토
design-polish SKILL.md의 Pre-delivery 체크리스트를 모두 포함하며, 추가로 다음을 확인합니다:
cursor: pointerprefers-reduced-motion 지원npx claudepluginhub vp-k/design-polishAudits and upgrades the visual design of existing websites and apps—fixes typography, color, spacing, and generic AI patterns without rewriting the stack.
Upgrades design of existing websites and apps to premium quality. Audits typography, colors, surfaces; fixes generic AI patterns with high-end standards on any CSS framework or vanilla CSS.
Audits generic UI patterns like typography, colors, and surfaces in existing websites or apps; applies targeted premium design fixes without rewrites or architecture changes.