Menu
디자인 전면 리뉴얼. 디자인 시스템 교체 수준의 대규모 변경. 색상 팔레트/타이포그래피/컴포넌트/레이아웃 전면 교체. 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합. /design-renewal 명령으로 실행.
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
디자인 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합 폴리싱. 서비스 유형별 UI 추론, 66개 스타일/96개 색상/57개 타이포 검색, 트렌드 분석, Gap 분석, 8단계 우선순위 개선안 도출. /design-polish 명령으로 실행.
스크린샷/이미지에서 UI 코드를 생성. Claude 비전으로 디자인 속성을 추출하고, 디자인 지식 DB(BM25)로 매칭하여 프레임워크별 코드 생성
| name | design-renewal |
| description | 디자인 전면 리뉴얼. 디자인 시스템 교체 수준의 대규모 변경. 색상 팔레트/타이포그래피/컴포넌트/레이아웃 전면 교체. 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합. /design-renewal 명령으로 실행. |
| allowed-tools | Read, Write, Glob, Grep, Bash, WebSearch, Edit |
| version | 1.0.0 |
디자인 시스템을 전면 교체하는 대규모 리뉴얼 스킬. 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 지원