Design System Architect 스킬 가이드

개요

디자인 시스템을 구조적으로 설계하는 Claude Code 스킬. 기존 Figma 파일 분석, 웹사이트 URL 분석, 또는 처음부터 새로 만들 때 일관된 구조를 유지하도록 가이드한다.

역할 분담

  • design-system-architect = 설계자 (토큰 구조, 컴포넌트 목록, 조합 규칙 설계)
  • figma-component-design = 시공자 (개별 컴포넌트를 Figma에서 생성)

스킬 위치

D:\Works\2026\makeskills\design-system-architect\
├── SKILL.md                              # 메인 스킬 (워크플로우 3종 + 체크리스트)
├── references/
│   ├── token-architecture.md             # 토큰 3계층 구조
│   ├── component-taxonomy.md             # 컴포넌트 분류 + 스펙 패턴
│   └── composition-patterns.md           # 레이아웃 조합 규칙
└── agents/
    └── design-system-planner.md          # 분석→설계 서브에이전트

레퍼런스 출처

D:\Works\2026\designsys\docs\design-system\ 경로의 Simple Design System (SDS) 분석 문서 23개를 기반으로 구조 패턴을 추출.

원본 문서추출된 패턴반영 위치
00-overview.md파일 전체 구조, 카테고리 분류SKILL.md (구조 템플릿)
01-foundations.md6개 Variable Collection, Color 4축, Typography 7단계token-architecture.md
02-icons.md아이콘 시스템 (394개, 6 variant)component-taxonomy.md (아이콘)
03-composition-guide.md7가지 조합 카테고리, Flexbox 규칙composition-patterns.md
05~17 (컴포넌트 13종)Anatomy→Variants→States→Tokens 스펙 패턴component-taxonomy.md
18-forms, 19-sections, 20-textTemplate 조합 패턴composition-patterns.md
21-utilities.mdUtility 토큰 (Scrim/Overlay/Blanket)token-architecture.md
22-component-playground.mdLight/Dark 테마 검증SKILL.md (체크리스트)

핵심 구조 패턴 요약

1. 토큰 아키텍처 (3계층)

Primitive (원시값)
  └──→ Semantic (의미 부여, Light/Dark 모드)
         └──→ Component에서 바인딩 (Primitive 직접 참조 금지)

6개 Variable Collection:

Collection변수 수모드역할
Color Primitives~901 (Value)원색 팔레트 (10단계 스케일)
Color Semantic~1362 (Light/Dark)Background/Text/Icon/Border 4축
Typography Primitives~311Weight, Scale, Family
Typography Semantic~351Hero→Code 7단계 계층
Size~411Space, Radius, Depth, Stroke, Blur, Icon
Responsive~43 (Desktop/Tablet/Mobile)디바이스별 값

2. 컴포넌트 분류 (3단계)

레벨종류예시
Atomic (13종)단일 목적 UI 요소Button, Input, Card, Dialog, Navigation 등
Composed (3종)Atomic 조합 템플릿Forms, Sections, Text
Utility지원 요소Helpers, Slot, Utility Tokens

3. 컴포넌트 스펙 패턴 (4단계)

모든 컴포넌트는 동일한 구조로 문서화:

1. Anatomy   — 구성 요소 목록 (Container, Label, Icon, Badge...)
2. Variants  — 변형 축 (Style, Size, Icon position...)
3. States    — 상호작용 상태 (Default, Hover, Active, Focus, Disabled...)
4. Tokens    — 시각 속성 → Semantic 토큰 매핑

4. 페이지 조합 계층

Page
├── Header (Navigation + Logo + Actions)
├── Hero Section (Title + CTA + Media)
├── Content Section(s)
│   ├── Panel Section
│   ├── Card Grid Section (2~4열)
│   └── Page Section
└── Footer (Links + Copyright + Social)

워크플로우 3종

A. 처음부터 만들기

  1. 브랜드 아이덴티티 정의 (색상, 서체, 스페이싱)
  2. 토큰 아키텍처 설계 (Primitive → Semantic → Light/Dark)
  3. 컴포넌트 라이브러리 계획 (Phase 1~4 우선순위)
  4. 조합 규칙 수립 (섹션 패턴, 간격 토큰)
  5. figma-component-design으로 실행

B. 기존 Figma 파일에서

  1. 현재 파일 감사 (figma_get_variables, figma_search_components)
  2. 갭 분석 (레퍼런스 구조와 비교)
  3. 마이그레이션 계획 수립
  4. 토큰 재구조화 → 컴포넌트 리팩토링

C. 웹사이트 URL에서

  1. WebFetch로 HTML/CSS 분석
  2. 색상/서체/간격/그림자 추출
  3. 토큰 아키텍처에 매핑
  4. 컴포넌트 식별 및 분류
  5. Figma에서 디자인 시스템 생성

컴포넌트 구축 우선순위

Phase컴포넌트이유
1. CoreButton, Input, Text, Card, Navigation모든 UI의 기본
2. EssentialDialog, Notification, Tabs, Tags, Menu인터랙션 필수
3. CompleteAccordion, Avatars, Tooltip, Pagination완성도
4. TemplatesForms, Sections, Text showcase조합 패턴

품질 체크리스트

토큰

  • Primitive → Semantic 계층화 (컴포넌트에서 Primitive 직접 사용 금지)
  • 모든 Semantic Color에 Light/Dark 모드 대응
  • Typography: Hero → Code 7단계 커버
  • Spacing 스케일 일관성 (기본 단위 × 배수)
  • Responsive 모드 정의 (Desktop/Tablet/Mobile)

컴포넌트

  • 모든 컴포넌트: Anatomy + Variants + States + Token 매핑
  • 레이어 네이밍 일관성 (전체 variant 동일)
  • 시각 값 전부 Semantic 토큰 바인딩
  • Auto Layout 적용
  • Properties 올바른 사용 (Boolean/Text/Instance Swap)

조합

  • 페이지 레이아웃 계층 문서화
  • 섹션 패턴 (Header/Footer/Hero/Content/Card Grid)
  • Form 레이아웃 패턴
  • 섹션 간 간격 토큰 일관성

검증

  • Component Playground (Light/Dark 비교)
  • 두 테마에서 모든 컴포넌트 정상 렌더링
  • 반응형 동작 문서화

관련 문서

날짜

  • 스킬 생성: 2026-03-19

그래프 뷰

백링크