SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsclaude-design-system-prep

claude-design-system-prep

Design & creation

View repository

Updated 10-15 21:02

About this skill

claude-design-system-prep — design system asset synthesis

Overview

docs-site design system pageAs laid out in, what most heavily determines Claude Design result quality is design system setup. This skill analyzes scattered brand assets and synthesizes them into DESIGN.mdthat Claude Design can absorb in one go.

Trigger keywords

Claude Design design system, design system assets, DESIGN.md, brand asset synthesis, design system setup, claude.ai/design system

Input — 5 asset types

Provide as many of the following as possible (you can start with just one).

Asset type Form What Claude extracts
Code GitHub repo URL · local UI package directory React·Vue·Svelte components, CSS tokens, Tailwind config
Design files Figma .fig, Sketch, component screenshot PNGs Color palette, typography scale, component library
Brand assets Logo SVG·PNG, color palette images, style guide PDF Color·typography·logo usage rules
Real-world Live website URL, PPTX deck, well-made marketing page Actual components·spacing·voice
Pre-built-in Apple · Linear · Stripe systems (open license) Starting point
Design system library moai-design:design-system-library75 systems (claude · clickhouse · clay, etc.) Tokens (color·typography·radius·spacing) + component mapping — an immediate source for DESIGN.md synthesis

Priority (v2.21.0+): If the user specifies a particular brand mood or needs a system matching the nature of the output, before collecting separate assets, design-system-libraryfirst select from the 75 systems. claude-design-system-prepuses the selected systems/<name>.md tokens as the primary source for DESIGN.md synthesis. External assets (website URL·Figma, etc.) are used only as supplementary material for the library system.

Workflow

Step 1 — Asset collection

Ask the user for the asset type and receive input. 1 round of AskUserQuestion.

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

After selection, collect the path·URL of each asset in turn.

Step 2 — Asset analysis

Asset Processing method
Website URL Analyze live pages with WebFetch — extract color·font·component patterns
Image files Extract color palette and logo shape via vision analysis
PPTX·PDF Analyze text, images, and background colors
GitHub repo URL package.json · tailwind.config.* · UI directory analysis
Local folder ls · ReadAnalyze file structure with

Step 3 — DESIGN.md synthesis

Library system selection preferred path (v2.21.0+): If only the brand mood was specified in Step 1, moai-design:design-system-library의 systems/registry.mdselect a matching system from systems/<name>.mdand directly reflect the YAML tokens into the Color palette · Typography · Spacing sections of DESIGN.md. This path skips asset analysis (Step 2) or uses it only as reinforcement, so it is the fastest.

Write DESIGN.md with the following structure.

# [브랜드명] 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 등]
- [폰트 라이선스 메모]
- [회피 톤·콘셉트]

Step 4 — Include asset organization guide

Along with DESIGN.md, what and how to upload to claude.ai/design provide a guide.

## 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 또는 자산 추가 업로드 후 재시도

Step 5 — Save results

  • Save to the path specified by the user or the default ./design-system-prep/ directory
  • DESIGN.md + UPLOAD-GUIDE.md + organized asset copies
  • User can upload the folder as-is to Claude Design

Output format

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

### 분석한 자산
- [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

Usage examples

Example 1 — Operating SaaS company

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

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

Example 2 — Early-stage startup (few assets)

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

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

Example 3 — No assets (using pre-built-in)

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

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

Precautions

Do

  • Start even with insufficient assets — pre-built-in + partial asset combinations possible
  • DESIGN.md를 Human-readable formatwith — understandable by both Claude and humans
  • Fonts: name + license note together — prevent disputes during handoff
  • When analyzing live sites with WebFetch, check robots.txt and terms of service

Don't

  • Do not attempt to analyze the entire monorepo — 5+ min delay + system extraction mismatch
  • Do not upload sensitive assets (customer data, PPTX with revenue figures) as-is → anonymize
  • Do not fill DESIGN.md with only "AI will figure it out" guesses — user confirmation required
  • Do not include fonts in assets without knowing the license

Related skills

Skill When to use
moai-design:claude-design-brief Follow-up: Create first draft after system setup
moai-design:claude-design-prompt-builder Follow-up: Design a specific area
moai-marketing:brand-identity Preceding: When brand identity is ambiguous
moai-content:copywriting Auxiliary: Organize voice and copy patterns
moai-office:pptx-designer Auxiliary: When there is no well-made in-house PPTX