디자인 시스템 설정

“디자인 시스템 셋업을 건너뛴 채 바로 프롬프트를 던지는 것"이 Claude Design 사용자의 가장 흔한 실패 패턴입니다. 결과가 학습 데이터의 평균값에 수렴해 일반적인 “AI 디자인"이 됩니다. 30분만 투자하면 이후 모든 작업의 품질이 한 단계 점프합니다.

Claude Design은 비전 기반 모델(Claude Opus 4.7)이 학습한 일반적 UI 패턴을 기본값으로 사용합니다. 디자인 시스템을 등록하면:

• 색 팔레트가 브랜드 정의로 고정 (primary·secondary·accent + 100-900 스케일)
• 타이포그래피가 브랜드 폰트 패밀리·사이즈·웨이트로 고정
• 컴포넌트가 실제 라이브러리(React·Vue·Tailwind 컴포넌트)와 매칭
• 레이아웃 패턴이 spacing·grid·페이지 구조로 고정
• 모든 신규 프로젝트가 자동 적용 — 매번 다시 업로드할 필요 없음

핸드오프 시점에도 같은 시스템이 그대로 전달되므로 Claude Code가 기존 컴포넌트로 코드를 작성합니다.

Tip

사양서보다 실물 1개가 더 강한 시그널. “톤은 미니멀하고 모던” 같은 문장보다 잘 만든 자사 마케팅 페이지 URL 1개 + 경쟁사 스크린샷 2장이 훨씬 정확한 가이드를 줍니다.

flowchart TD
    A["1. 조직 선택
또는 생성"] --> B["2. 자산 업로드
코드·디자인·실물"]
    B --> C["3. UI 키트 검토
색·타이포·컴포넌트"]
    C --> D["4. 테스트 프롬프트로
검증"]
    D --> E{"브랜드 정합성?"}
    E -->|아니오| F["자산 추가 + Remix"]
    F --> D
    E -->|예| G["5. Published 토글 ON"]
    G --> H["6. 자동 적용 시작"]

    style A fill:#eaeaea,stroke:#6e6e6e,color:#09110f
    style C fill:#fbf0dc,stroke:#c47b2a,color:#09110f
    style D fill:#e6f0ef,stroke:#144a46,stroke-width:2px,color:#09110f
    style G fill:#dceee9,stroke:#2a8a8c,stroke-width:2px,color:#09110f
    style H fill:#d6ebe7,stroke:#1c7c70,color:#09110f

1. claude.ai/design 진입
2. 화면 좌하단의 조직 이름 클릭 → 드롭다운에서 대상 조직 선택
3. 신규 조직이면 “Create organization” → 온보딩 플로우 시작
4. 기존 조직이면 Organization settings > Design systems로 이동

업로드 가능한 만큼 다 올리는 것이 권장됩니다. 한 가지 소스만으로도 시작은 가능하지만, 여러 소스를 함께 주면 Claude가 더 정확한 시스템을 추출합니다.

우선순위 (가장 강한 시그널 → 약한 시그널):

1. 운영 중인 프로덕션 코드 (UI 패키지)
2. 잘 정리된 Figma 파일
3. 실제 운영 사이트 URL
4. PPTX·PDF 스타일 가이드
5. 로고·색 팔레트·타이포 단편 이미지

Pro tip — 사전 합성:

1. Claude Code(또는 Cowork)에 브랜드 자산 폴더를 보여주고
   "DESIGN.md를 만들어 줘. 색·타이포·컴포넌트 패턴·voice·레이아웃을 정리"
   요청.
2. 생성된 DESIGN.md를 Claude Design 온보딩에 업로드.

이 절차는 토큰 비용을 크게 줄여 줍니다.

업로드가 끝나면 Claude가 5-15분 안에 다음을 추출합니다.

브랜드와 어긋난 항목이 보이면 그대로 다음 단계로. 검증 프롬프트에서 다시 잡습니다.

발행(Publish) 전에 반드시 테스트 프로젝트를 만들어 일반 프롬프트를 실행합니다. 시스템의 약점은 일반 프롬프트에서 드러납니다.

권장 검증 프롬프트 4종:

1. "마케팅 랜딩 페이지를 디자인해 줘 — 새 제품 출시용"
2. "사이드바와 3개 콘텐츠 섹션이 있는 설정 페이지"
3. "Hero · Feature grid · CTA로 구성된 SaaS 홈"
4. "어드민 대시보드 — 5개 KPI 카드, 차트 2개, 최근 활동 테이블"

각 결과를 보면서 다음을 확인합니다.

검증이 끝나면:

• 수정이 필요: 디자인 시스템 상세 화면 → Remix 버튼 → 채팅 인터페이스에서 “보조색을 빼” “간격을 더 시원하게” 같은 자연어 지시
• OK: Published 토글 ON → 이후 조직 홈에서 만드는 모든 신규 프로젝트가 자동 적용

Published 이후:

• 조직 홈에서 만드는 모든 프로젝트가 시스템 자동 적용
• 프로젝트 시작 시 시스템 선택 가능 (멀티 시스템 운영 시)
• 기존 프로젝트는 그대로 — 시스템 변경의 영향을 받지 않음 (안전망)

Figma는 한국 디자이너 환경에서 가장 흔한 소스입니다. 권장 절차:

1. Figma에서 공통 스타일·컴포넌트 페이지로 이동
2. 색 스타일·타이포 스타일·컴포넌트 정리되어 있는지 확인 (Auto Layout 권장)
3. File > Export local components 또는 페이지 단위 .fig 익스포트
4. Claude Design 온보딩에 업로드
5. Claude가 5-10분 내 추출 완료

Figma에서 자주 어긋나는 것:

• 색 스타일 이름이 임의(예: Frame 24/Fill)면 Claude가 시맨틱 매핑을 못 함 → 색 이름을 primary/500처럼 정돈
• 컴포넌트가 Auto Layout이 아니면 간격 토큰 추출이 약함
• 텍스트 스타일 이름이 일관되지 않으면 타이포 스케일 추출이 약함

코드베이스 연결은 가장 강력한 시그널입니다. 다만 모노레포 전체는 피하세요.

권장 연결 패턴:

✓  packages/ui/        ← UI 컴포넌트 라이브러리
✓  apps/marketing/src/styles/  ← CSS 토큰
✓  tokens/             ← Style Dictionary 출력
✓  .storybook/         ← Storybook 설정

✗  레포 루트 전체 (.git, node_modules, dist, build 포함)
✗  서버 사이드 코드 (백엔드 라우트, ORM 모델)

연결 후 Claude가 인식하는 것:

• React·Vue·Svelte 컴포넌트 소스
• CSS-in-JS 또는 CSS Modules 토큰
• Tailwind tailwind.config.{ts,js}
• Storybook 스토리(있는 경우)
• 컴포넌트 prop 이름 → 핸드오프 시 그대로 사용

Claude Design은 다음 토큰 형식을 인식합니다.

/* CSS Custom Properties */
:root {
  --color-primary-500: #2a8a8c;
  --color-secondary-500: #c47b2a;
  --font-sans: "Inter", system-ui, sans-serif;
  --space-4: 1rem;
}

// Style Dictionary / Design Tokens W3C draft
{
  "color": {
    "primary": { "500": { "value": "#2a8a8c" } }
  },
  "font": {
    "sans": { "value": "Inter, system-ui, sans-serif" }
  }
}

// Tailwind config
module.exports = {
  theme: {
    colors: {
      primary: { 500: "#2a8a8c" },
    },
    fontFamily: {
      sans: ["Inter", "system-ui", "sans-serif"],
    },
  },
};

세 형식 모두 인식되지만, 일관된 1개 형식만 두는 것이 가장 정확합니다.

팀당 디자인 시스템을 여러 개 운영할 수 있습니다.

프로젝트 생성 시점에 어떤 시스템을 쓸지 선택할 수 있습니다. 시스템 간 컴포넌트 공유는 현재 미지원이므로 공통 토큰(예: 회사 컬러)은 각 시스템에 중복 설정합니다.

Published 이후에도 수정은 항상 가능합니다. 다만 라이브 시스템을 수정하면 직후 생성되는 프로젝트부터 변경 사항이 반영됩니다. 기존 프로젝트는 영향을 받지 않습니다.

브랜드는 변합니다. 라이브 제품에서 색·폰트가 바뀌면:

1. 디자인 시스템 상세 → Remix 버튼
2. 채팅으로 “주 색상을 #2a8a8c → #1c7c70으로” 자연어 지시
3. 또는 변경된 자산 추가 업로드
4. 테스트 프롬프트로 재검증
5. Published 유지 — 라이브로 즉시 반영

브랜드 변경의 빈도가 높다면: 분기에 한 번 정기 점검 일정을 잡는 것을 권장합니다.

• 다음 페이지: 리파인먼트 — 시스템이 셋업된 후 시안을 다듬는 방법
• 참고: 내보내기·핸드오프 — 시스템이 핸드오프 번들에 어떻게 실리는지
• 깊이: 베스트 프랙티스 — 디자인 시스템 셋업 관련 4가지 원칙

• Set up your design system in Claude Design (Anthropic Help)
• Using Claude Design for prototypes and UX (Anthropic Tutorial)
• Claude Design Starter Guide (Claudia + AI)
• How to Use Claude Design for UX/UI (DesignerUp)
• 10 Advanced Prompts for Claude Design