디자인 시스템

디자인 시스템은(는) 무엇을 하나요?

토큰 아키텍처, 컴포넌트 명세, 체계적인 디자인, 슬라이드 생성.

사용 시기

• 디자인 토큰 생성
• 컴포넌트 상태 정의
• CSS 변수 시스템
• 간격/타이포그래피 스케일
• 디자인-코드 핸드오프
• Tailwind 테마 구성
• 슬라이드/프레젠테이션 생성

토큰 아키텍처

불러오기: references/token-architecture.md

3계층 구조

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

예시:

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);

빠른 시작

토큰 생성:

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

사용 검증:

node scripts/validate-tokens.cjs --dir src/

참조

주제	파일
토큰 아키텍처	references/token-architecture.md
기본 토큰	references/primitive-tokens.md
의미 토큰	references/semantic-tokens.md
컴포넌트 토큰	references/component-tokens.md
컴포넌트 명세	references/component-specs.md
상태 및 변형	references/states-and-variants.md
Tailwind 통합	references/tailwind-integration.md

컴포넌트 명세 패턴

속성	기본	호버	활성	비활성화
배경	primary	primary-dark	primary-darker	muted
텍스트	white	white	white	muted-fg
테두리	none	none	none	muted-border
그림자	sm	md	none	none

스크립트

스크립트	목적
generate-tokens.cjs	JSON 토큰 설정에서 CSS 생성
validate-tokens.cjs	코드 내 하드코딩된 값 확인
search-slides.py	BM25 검색 + 컨텍스트 기반 추천
slide-token-validator.py	슬라이드 HTML의 토큰 준수 검증
fetch-background.py	Pexels/Unsplash에서 이미지 가져오기

템플릿

템플릿	목적
design-tokens-starter.json	3계층 구조 시작 JSON

통합

브랜드와 함께: 브랜드 색상/타이포그래피에서 기본값 추출 ui-styling과 함께: 컴포넌트 토큰 → Tailwind 설정

스킬 의존성: brand, ui-styling 주요 에이전트: ui-ux-designer, frontend-developer

슬라이드 시스템

디자인 토큰 + Chart.js + 컨텍스트 기반 결정 시스템을 사용한 브랜드 준수 프레젠테이션.

진실 공급원

파일	목적
docs/brand-guidelines.md	브랜드 아이덴티티, 어조, 색상
assets/design-tokens.json	토큰 정의 (primitive→semantic→component)
assets/design-tokens.css	CSS 변수 (슬라이드에서 가져오기)
assets/css/slide-animations.css	CSS 애니메이션 라이브러리

슬라이드 검색 (BM25)

# 기본 검색 (도메인 자동 감지)
python scripts/search-slides.py "investor pitch"

# 도메인별 검색
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# 컨텍스트 검색 (프리미엄 시스템)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

결정 시스템 CSV

파일	목적
data/slide-strategies.csv	15가지 덱 구조 + 감정 호 + 스파크라인 비트
data/slide-layouts.csv	25가지 레이아웃 + 컴포넌트 변형 + 애니메이션
data/slide-layout-logic.csv	목표 → 레이아웃 + break_pattern 플래그
data/slide-typography.csv	콘텐츠 유형 → 타이포그래피 스케일
data/slide-color-logic.csv	감정 → 색상 처리
data/slide-backgrounds.csv	슬라이드 유형 → 이미지 카테고리 (Pexels/Unsplash)
data/slide-copy.csv	25가지 카피라이팅 공식 (PAS, AIDA, FAB)
data/slide-charts.csv	Chart.js 설정 포함 25가지 차트 유형

컨텍스트 기반 결정 흐름

1. 목표/컨텍스트 분석
        ↓
2. slide-strategies.csv 검색 → 전략 + 감정 비트 획득
        ↓
3. 각 슬라이드:
   a. slide-layout-logic.csv 조회 → 레이아웃 + break_pattern
   b. slide-typography.csv 조회 → 유형 스케일
   c. slide-color-logic.csv 조회 → 색상 처리
   d. slide-backgrounds.csv 조회 → 필요시 이미지
   e. slide-animations.css에서 애니메이션 클래스 적용
        ↓
4. 디자인 토큰으로 HTML 생성
        ↓
5. slide-token-validator.py로 검증

패턴 분할 (Duarte Sparkline)

프리미엄 덱은 참여도를 높이기 위해 감정을 번갈아 사용합니다:

"현재 상황" (좌절) ↔ "미래 가능성" (희망)

시스템은 1/3 및 2/3 위치에서 패턴 분할을 계산합니다.

슬라이드 요구사항

모든 슬라이드는 다음을 반드시 준수해야 합니다:

1. assets/design-tokens.css 가져오기 - 유일한 진실 공급원
2. CSS 변수 사용: var(--color-primary), var(--slide-bg) 등
3. 차트에는 Chart.js 사용 (CSS 전용 막대 사용 금지)
4. 탐색 포함 (키보드 화살표, 클릭, 진행률 표시줄)
5. 콘텐츠 중앙 정렬
6. 설득/전환에 집중

Chart.js 통합

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['9월', '10월', '11월', '12월'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // 브랜드 코랄 사용
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

토큰 준수

/* 올바름 - 토큰 사용 */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* 오류 - 하드코딩 */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

참조 구현

모든 기능을 갖춘 작동 예시:

assets/designs/slides/claudekit-pitch-251223.html

명령어

/slides:create "ClaudeKit 마케팅을 위한 10슬라이드 투자자 피치"

모범 사례

1. 컴포넌트에서 절대 원시 hex를 사용하지 말고 항상 토큰 참조
2. 의미 계층은 테마 전환(라이트/다크)을 가능하게 함
3. 컴포넌트 토큰은 컴포넌트별 사용자 정의를 가능하게 함
4. 불투명도 제어를 위해 HSL 형식 사용
5. 모든 토큰의 목적 문서화
6. 슬라이드는 design-tokens.css를 가져오고 var()만 사용해야 함