Design system

Design System Generator

일관된 UI/UX를 위한 디자인 시스템 문서 생성 가이드.

워크플로우

1. 인터뷰 → 2. 팔레트 생성 → 3. 문서 생성 → 4. 검토/보완

컬러 팔레트 생성

Primary 색상 하나로 전체 컬러 시스템을 자동 생성한다.

스크립트 사용

# 기본 (마크다운 출력)
python scripts/generate_palette.py "#3B82F6"

# Tailwind 설정 형식
python scripts/generate_palette.py "#3B82F6" --format tailwind

# CSS 변수 형식
python scripts/generate_palette.py "#3B82F6" --format css

# 시맨틱 컬러 포함
python scripts/generate_palette.py "#3B82F6" --with-semantic

# Secondary 색상 지정 (미지정시 보색 자동 생성)
python scripts/generate_palette.py "#3B82F6" --secondary "#F97316"

출력 예시

## Primary Colors
| Shade | HEX |
|-------|-----|
| 50 | #F0F7FF |
| 100 | #E0EFFF |
| 500 | #3B82F6 |  ← 기준 색상
| 900 | #1E3A5F |

Secondary (보색): #F6B83B
유사색: #3BF682, #823BF6

레퍼런스 파일

파일	용도	언제 참조
references/brand-recommendations.md	브랜드 키워드별 컬러/폰트/스타일 추천	브랜드 성격 파악 후

인터뷰 질문

순차적으로 질문하여 정보 수집. 한 번에 2-3개씩 질문.

필수 질문

브랜드

• "브랜드 가이드라인이 있나요?"
• "브랜드 성격 키워드 3개는? (예: 신뢰, 혁신, 친근, 럭셔리, 에너지)"

UI/UX

• "참고하고 싶은 서비스 UI는?"
• "타겟 디바이스 비율은? (모바일/데스크톱)"
• "다크모드 지원이 필요한가요?"

선택 질문 (필요시)

• "사용할 폰트가 정해져 있나요?"
• "Primary 색상이 정해져 있나요?"
• "아이콘 라이브러리 선호도는?"

Design System 템플릿

# Design System: [서비스명]

## 1. 브랜드 아이덴티티

- **브랜드명**:
- **브랜드 성격**:
- **톤앤매너**:

## 2. 컬러 시스템

### Primary
| Shade | HEX | 용도 |
|-------|-----|------|
| 50 | | 배경 |
| 100 | | 호버 |
| 200 | | |
| 300 | | |
| 400 | | |
| 500 | | 기본 |
| 600 | | 호버 (다크) |
| 700 | | |
| 800 | | |
| 900 | | 텍스트 |

### Secondary
| Shade | HEX | 용도 |
|-------|-----|------|
| 500 | | 기본 |

### Semantic
| 이름 | Light | Main | Dark | 용도 |
|------|-------|------|------|------|
| success | #DCFCE7 | #22C55E | #16A34A | 성공, 완료 |
| warning | #FEF3C7 | #F59E0B | #D97706 | 경고, 주의 |
| error | #FEE2E2 | #EF4444 | #DC2626 | 오류, 실패 |
| info | #DBEAFE | #3B82F6 | #2563EB | 정보, 안내 |

### Neutral (Gray Scale)
| Shade | HEX |
|-------|-----|
| 50 | #F9FAFB |
| 100 | #F3F4F6 |
| 200 | #E5E7EB |
| 300 | #D1D5DB |
| 400 | #9CA3AF |
| 500 | #6B7280 |
| 600 | #4B5563 |
| 700 | #374151 |
| 800 | #1F2937 |
| 900 | #111827 |

### 배경
- **default**: #FFFFFF
- **paper**: #F9FAFB
- **elevated**: #FFFFFF

### 다크모드
- 지원 여부: Yes/No

## 3. 타이포그래피

### 폰트 패밀리
- **한글**: Pretendard
- **영문**: Inter
- **Monospace**: Fira Code

### 사이즈 스케일
| 이름 | Size | Line Height |
|------|------|-------------|
| xs | 12px | 16px |
| sm | 14px | 20px |
| base | 16px | 24px |
| lg | 18px | 28px |
| xl | 20px | 28px |
| 2xl | 24px | 32px |
| 3xl | 30px | 36px |
| 4xl | 36px | 40px |

### 헤딩 스타일
| 레벨 | Size | Weight | Line Height |
|------|------|--------|-------------|
| h1 | 36px | 700 | 40px |
| h2 | 30px | 600 | 36px |
| h3 | 24px | 600 | 32px |
| h4 | 20px | 600 | 28px |

## 4. 스페이싱 및 레이아웃

### 기본 단위
- **Base**: 4px

### 스페이싱 스케일
| 이름 | 값 |
|------|-----|
| 0 | 0px |
| 1 | 4px |
| 2 | 8px |
| 3 | 12px |
| 4 | 16px |
| 6 | 24px |
| 8 | 32px |
| 12 | 48px |
| 16 | 64px |

### Breakpoints
| 이름 | 값 | 설명 |
|------|-----|------|
| sm | 640px | 모바일 |
| md | 768px | 태블릿 |
| lg | 1024px | 데스크톱 |
| xl | 1280px | 와이드 |
| 2xl | 1536px | 울트라와이드 |

### 컨테이너
- **최대 너비**: 1280px
- **패딩**: 모바일 16px, 태블릿 24px, 데스크톱 32px

## 5. 컴포넌트 스타일

### Border Radius
| 이름 | 값 | 용도 |
|------|-----|------|
| none | 0px | 날카로운 |
| sm | 4px | 인풋, 작은 요소 |
| md | 8px | 카드, 버튼 |
| lg | 12px | 모달, 큰 카드 |
| xl | 16px | 컨테이너 |
| full | 9999px | 아바타, 뱃지 |

### 그림자
| 이름 | 값 | 용도 |
|------|-----|------|
| sm | 0 1px 2px rgba(0,0,0,0.05) | 미묘한 |
| base | 0 1px 3px rgba(0,0,0,0.1) | 기본 |
| md | 0 4px 6px rgba(0,0,0,0.1) | 카드 |
| lg | 0 10px 15px rgba(0,0,0,0.1) | 드롭다운 |
| xl | 0 20px 25px rgba(0,0,0,0.1) | 모달 |

### 버튼
- **사이즈**: sm (32px), md (40px), lg (48px)
- **변형**: solid, outline, ghost
- **상태**: default, hover, active, disabled

### 인풋
- **사이즈**: sm (32px), md (40px), lg (48px)
- **변형**: outline, filled
- **상태**: default, focus, error, disabled

## 6. 애니메이션

### 지속시간
| 이름 | 값 | 용도 |
|------|-----|------|
| fast | 150ms | 호버, 토글 |
| normal | 300ms | 페이드, 슬라이드 |
| slow | 500ms | 페이지 전환 |

### 이징
| 이름 | 값 |
|------|-----|
| default | cubic-bezier(0.4, 0, 0.2, 1) |
| enter | cubic-bezier(0, 0, 0.2, 1) |
| exit | cubic-bezier(0.4, 0, 1, 1) |

## 7. 아이콘 및 이미지

### 아이콘
- **라이브러리**: Lucide React
- **기본 사이즈**: 24px
- **Stroke Width**: 2px

### 이미지
| 이름 | Ratio | 용도 |
|------|-------|------|
| square | 1:1 | 아바타, 썸네일 |
| landscape | 16:9 | 히어로, 배너 |
| portrait | 3:4 | 카드 |
| thumbnail | 4:3 | 리스트 |

- **Placeholder**: blur
- **Lazy Loading**: Yes

사용 예시

사용자: "디자인 시스템 만들어줘"

Claude: Design System 문서를 작성하겠습니다. 먼저 몇 가지 질문을 드릴게요.

1. 브랜드 가이드라인이 있나요?
2. 브랜드 성격 키워드 3개를 알려주세요. (예: 신뢰, 혁신, 친근)

사용자: "가이드라인 없어. 모던하고 깔끔하고 전문적인 느낌."

Claude: 좋습니다. "모던, 깔끔, 전문적" 키워드 기반으로
references/brand-recommendations.md를 참고하여 추천드릴게요.

추천 컬러: 블루 계열 (#3B82F6) 또는 퍼플 계열 (#7C3AED)
추천 폰트: Pretendard + Inter

Primary 색상을 정해주시면 팔레트를 생성해드릴게요.

사용자: "#6366F1로 해줘"

Claude: [스크립트 실행]
python scripts/generate_palette.py "#6366F1" --with-semantic --format markdown

생성된 팔레트로 디자인 시스템 문서를 작성하겠습니다.