Claude Design System Prep

claude-design-system-prep — 디자인 시스템 자산 합성

개요

docs-site 디자인 시스템 페이지에서 정리한 대로, Claude Design 결과 품질을 가장 크게 좌우하는 것은 디자인 시스템 셋업입니다. 이 스킬은 흩어진 브랜드 자산을 분석해 Claude Design이 한 번에 흡수할 수 있는 DESIGN.md로 합성합니다.

트리거 키워드

Claude Design 디자인 시스템, 디자인 시스템 자산, DESIGN.md, 브랜드 자산 합성, 디자인 시스템 셋업, claude.ai/design 시스템

입력 — 자산 5종

다음 중 가능한 만큼 제공합니다 (한 가지만 있어도 시작 가능).

| 자산 유형 | 형태 | Claude가 추출하는 것 |

|---|---|---|

| 코드 | GitHub repo URL · 로컬 UI 패키지 디렉토리 | React·Vue·Svelte 컴포넌트, CSS 토큰, Tailwind 설정 |

| 디자인 파일 | Figma .fig, Sketch, 컴포넌트 스크린샷 PNG | 색 팔레트, 타이포 스케일, 컴포넌트 라이브러리 |

| 브랜드 자산 | 로고 SVG·PNG, 색 팔레트 이미지, 스타일 가이드 PDF | 색·타이포·로고 사용 규칙 |

| 실물 | 운영 중 웹사이트 URL, PPTX 덱, 잘 만든 마케팅 페이지 | 실제 컴포넌트·간격·voice |

| 사전 빌트인 | Apple · Linear · Stripe 시스템 (오픈 라이선스) | 시작점 |

| 디자인 시스템 라이브러리 | moai-design:design-system-library의 75개 시스템 (claude · clickhouse · clay 등) | 토큰(색·타이포·radius·spacing) + 컴포넌트 매핑 — DESIGN.md 합성의 즉시 소스 |

> 우선 순위 (v2.21.0+): 사용자가 특정 브랜드 무드를 지정하거나 결과물 성격에 맞는 시스템이 필요하면, 별도 자산 수집 전 design-system-library의 75개 시스템에서 먼저 선택합니다. claude-design-system-prep는 선택된 systems/<name>.md 토큰을 DESIGN.md 합성의 1차 소스로 사용합니다. 외부 자산(웹사이트 URL·Figma 등)은 라이브러리 시스템에 대한 보강 자료로만 활용합니다.

워크플로우

1단계 — 자산 수집

사용자에게 자산 유형을 묻고 입력을 받습니다. AskUserQuestion 1라운드.

가지고 있는 자산을 모두 알려 주세요 (복수 선택):
- 우리 웹사이트 URL
- 로고·이미지 파일
- 잘 만든 자사 페이지 (PPTX·PDF·캡처)
- GitHub repo (UI 컴포넌트)
- Figma 파일
- 사전 빌트인에서 시작

선택 후 각 자산의 경로·URL을 차례로 수집합니다.

2단계 — 자산 분석

| 자산 | 처리 방법 |

|---|---|

| 웹사이트 URL | WebFetch로 라이브 페이지 분석 — 색·폰트·컴포넌트 패턴 추출 |

| 이미지 파일 | 비전 분석으로 색 팔레트·로고 형태 추출 |

| PPTX·PDF | 텍스트·이미지·배경 색 분석 |

| GitHub repo URL | package.json · tailwind.config.* · UI 디렉토리 분석 |

| 로컬 폴더 | ls · Read로 파일 구조 분석 |

3단계 — DESIGN.md 합성

라이브러리 시스템 선택 우선 경로 (v2.21.0+): 1단계에서 브랜드 무드만 지정된 경우, moai-design:design-system-library의 systems/registry.md에서 매칭되는 시스템을 선택하고 systems/<name>.md의 YAML 토큰을 DESIGN.md의 Color palette · Typography · Spacing 섹션에 직접 반영합니다. 이 경로는 자산 분석(2단계)을 생략하거나 보강으로만 사용하므로 가장 빠릅니다.

다음 구조로 DESIGN.md를 작성합니다.

# [브랜드명] Design System

## Brand voice & personality

[추출한 voice — 형용사 5-7개, 한 문단 요약]

## Color palette

### Primary
- primary/500: #[hex] — [의미]
- primary/600 ~ 100/900 스케일

### Secondary · Accent
[보조·강조색]

### Semantic
- success · warning · error · info

## Typography

- Display: [폰트 이름] [weight] [사이즈 범위]
- Heading: [폰트 이름]
- Body: [폰트 이름]
- Mono: [폰트 이름]

## Spacing scale

[Tailwind 또는 디자인 토큰 기반 — 4·8·12·16·24·32·48·64 등]

## Components

### Existing in our codebase
- Button (variants: primary, secondary, ghost)
- Card (variants: default, elevated, bordered)
- ...

### Layout patterns
- Hero with [구조]
- Feature grid (3-col, 6-card)
- ...

## Voice & copy patterns

- 어조: [존댓말·반말 정책]
- 금기어: [회피할 표현 — AI 슬롭, 진부 표현]
- 권장 패턴: [회사 고유 표현]

## Reference

- 자사 잘 만든 페이지: [URL]
- 경쟁사 참고: [URL]
- 디자인 영감: [Dribbble/Behance]

## Constraints

- [모바일·데스크톱 정책]
- [접근성 기준 — WCAG 등]
- [폰트 라이선스 메모]
- [회피 톤·콘셉트]

4단계 — 자산 정리 가이드 동봉

DESIGN.md와 함께 claude.ai/design에 무엇을 어떻게 올릴지 가이드를 제공합니다.

## Claude Design 업로드 가이드

### 업로드 우선순위

1. `DESIGN.md` (이 파일) — 가장 먼저
2. [GitHub repo 또는 UI 패키지 디렉토리]
3. [잘 만든 자사 사이트 URL] — 웹 캡처 도구로
4. [경쟁사 참고 URL] — 톤 비교용
5. 로고 파일 (SVG 우선)

### 업로드 시 주의

- 모노레포 전체 X → UI 패키지 디렉토리만
- 고객 데이터·매출 박힌 PPTX는 익명화 후 업로드
- 폰트 파일은 라이선스 확인 후 업로드

### Published 토글

1. 위 자산 업로드 후 5-15분 대기 (분석 시간)
2. UI 키트 검토 후 테스트 프롬프트 실행:
   - "마케팅 랜딩 페이지를 디자인해 줘"
   - "사이드바와 3개 콘텐츠 섹션이 있는 설정 페이지"
3. 결과가 브랜드와 일치하면 → Published 토글 ON
4. 어긋나면 → Remix 또는 자산 추가 업로드 후 재시도

5단계 — 결과 저장

• 사용자가 지정한 경로 또는 기본 ./design-system-prep/ 디렉토리에 저장
• DESIGN.md + UPLOAD-GUIDE.md + 정리된 자산 사본
• 사용자가 그대로 폴더를 Claude Design에 업로드 가능

출력 형식

## 디자인 시스템 자산 합성 완료

### 분석한 자산
- [URL 또는 파일 경로 목록]

### 생성된 파일
- ./design-system-prep/DESIGN.md  (XX줄)
- ./design-system-prep/UPLOAD-GUIDE.md

### 추출 요약
- Primary: #[hex] (출처: [자산])
- Typography: [폰트] (출처: [자산])
- Components 인식: N개
- Voice: [한 문단]

### 다음 단계
1. claude.ai/design 진입 → Organization settings → Design systems
2. 위 폴더 업로드 → 5-15분 대기
3. 테스트 프롬프트로 검증
4. Published 토글 ON

사용 예시

예시 1 — 운영 중 SaaS 회사

입력 자산:
- 자사 웹사이트: https://example.com
- GitHub repo: github.com/example/web-ui
- 로고: ./brand/logo.svg
- 잘 만든 PPTX 덱: ./decks/q4-report.pptx

결과:
- DESIGN.md (자동 합성, 6섹션)
- 자산 정리 폴더
- 추출된 색 5개, 폰트 3개, 컴포넌트 12개

예시 2 — 초기 스타트업 (자산 적음)

입력 자산:
- 로고: ./logo.png
- 색 팔레트 이미지: ./colors.png
- 영감 사이트: linear.app

결과:
- DESIGN.md (Linear 기반 + 로고·색 커스터마이즈)
- UPLOAD-GUIDE.md
- 후속 권장: Linear 사전 빌트인에서 시작 → 우리 색·로고로 Remix

예시 3 — 자산 없음 (사전 빌트인 활용)

입력: "자산 없음 — Linear 톤으로 시작하고 싶다"

결과:
- DESIGN.md (Linear 시스템 기반 시작점)
- 자체 브랜드 점진 정의 가이드
- 권장: Claude Design에서 사전 빌트인 Linear 선택 후
  3-5개 프로젝트 진행하며 자사 시스템 점진 추출

주의사항

Do

• 자산이 부족해도 시작 — 사전 빌트인 + 부분 자산 조합 가능
• DESIGN.md를 사람이 읽을 수 있는 형식으로 — Claude도 사람도 이해
• 폰트는 이름 + 라이선스 메모 함께 — 핸드오프 시 분쟁 방지
• WebFetch로 라이브 사이트 분석 시 robots.txt·이용 약관 확인

Don't

• 모노레포 전체 분석 시도 금지 — 5분+ 지연 + 시스템 추출 어긋남
• 민감 자산(고객 데이터·매출이 박힌 PPTX) 그대로 업로드 금지 → 익명화
• "AI가 알아서" 추측만으로 DESIGN.md 채우기 금지 — 사용자 확인 필요
• 폰트 라이선스 모른 채 자산에 포함 금지

관련 스킬

| 스킬 | 사용 시점 |

|---|---|

| moai-design:claude-design-brief | 후속: 시스템 셋업 후 첫 시안 작성 |

| moai-design:claude-design-prompt-builder | 후속: 특정 영역 디자인 |

| moai-marketing:brand-identity | 선행: 브랜드 정체성이 모호할 때 |

| moai-content:copywriting | 보조: voice·copy 패턴 정리 |

| moai-office:pptx-designer | 보조: 잘 만든 자사 PPTX가 없으면 |