디자인 시스템 생성기

제품을 일관되게 만드는 가장 작은 시스템을 구축하세요. 디자인 시스템은 많은 값의 집합이 아니라 결정의 집합입니다. 아무도 사용하지 않는 방대한 스케일보다, 적고 잘 이름 지어진 토큰이 더 낫습니다.

frontend-design 스킬이 설치되어 있다면, frontend-design/references/tokens.md에 완전한 대비 검증된 스타터 세트가 포함되어 있습니다. 그것을 시작점으로 삼아 적응하세요.

1. 입력

현재 CSS, Tailwind 설정, 테마 파일, 컴포넌트 라이브러리, 브랜드 에셋 등 존재하는 것을 읽습니다. 실제 사용 중인 값(색상, 글꼴 크기, 간격, 둥글기)과 각 값의 발생 빈도를 조사합니다.
제품의 톤, 플랫폼(웹, iOS, Android), 밀도, 다크 모드 및 고대비 모드 필요 여부를 명확히 하거나(또는 추론하여 명시합니다).

원시 토큰: 중립적인 이름을 가진 원시 값입니다. --gray-50 ... --gray-950, --blue-600, --space-4, --radius-md. 컴포넌트에서 직접 사용하지 않습니다.
의미 토큰: 목적 기반 별칭입니다. --bg, --surface, --surface-sunken, --border, --border-strong, --text, --text-muted, --text-subtle, --accent, --accent-fg, --accent-subtle, --focus-ring, --success, --warning, --danger, --info (+ -subtle 변형). 테마는 이를 교체합니다.
컴포넌트 토큰(필요한 경우에만): --button-height-md, --input-border, --card-padding. 컴포넌트가 독립적으로 테마를 지정해야 할 때 추가합니다.

이름 규칙: category-role-variant-state (--text-muted, --accent-hover). 의미 토큰에는 색상 이름을 사용하지 않습니다(--accent이지 --blue가 아닙니다).

간격: 4px 기준. 스케일 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128. (Fluent 2와 Material 모두 4px 기반으로 구축되었으며, Tailwind의 기본 스케일도 4px 기반입니다.)
타이포그래피: 한두 개의 패밀리; 모듈러 스케일(1.2 밀집, 1.25 제품, 1.333+ 편집); 크기보다 역할(display, title, heading, body, label, caption, code); 역할별 줄 높이; display 크기에만 유동 clamp() 사용.
색상: 10~12단계 중립 램프(약간 따뜻하거나 차갑게, 의도적으로 선택), 하나의 악센트 램프, 네 가지 의미 색조. OKLCH로 램프를 생성하여 지각적으로 균일한 단계를 만듭니다.
둥글기: 하나의 패밀리(sharp, soft 또는 round)에 3~4단계 + full.
그림자: 최대 3단계(raised, floating, overlay), 2계층 중립 그림자; 다크 모드에서는 무거운 그림자보다 밝은 표면을 선호합니다.
모션: 3가지 지속 시간(빠름 ~140ms, 기본 ~220ms, 느림 ~320ms), 3가지 이징(out, in, in-out), 그리고 reduced-motion 규칙.
레이어: 작은 z-index 스케일(sticky, dropdown, overlay, dialog, toast, tooltip).
중단점: 콘텐츠 중심; 일반적인 세트는 640, 768, 1024, 1280, 1536입니다.

라이트와 다크를 함께 정의합니다. 다크 모드: 거의 검은색 배경(#000 아님), 약간 흰색 텍스트(#fff 아님), 그림자에 더 밝은 표면, 악센트는 밝게 하고 약간 채도를 낮춥니다.
prefers-contrast: more 변형을 추가하여 테두리와 흐릿한 텍스트를 강화합니다.
모든 텍스트/배경 쌍을 WCAG 2 공식으로 검증하고 비율을 공개합니다: 텍스트 4.5:1, 큰 텍스트와 의미 있는 UI(입력 테두리, 아이콘, 포커스 링) 3:1. 문서에 숫자를 포함하십시오. 계산하지 않고 "AA 준수"라고 명시하지 마십시오.

프로젝트 스택에 맞게 다음을 생성합니다:

tokens.css (CSS 사용자 정의 속성, 라이트 + 다크 + 고대비), 및/또는 Tailwind 테마 매핑(@theme in v4, theme.extend in v3), 및/또는 파이프라인(Style Dictionary)을 사용하는 경우 tokens.json (W3C Design Tokens Community Group 형식).
짧은 DESIGN.md 문서: 원칙(3~5줄), 대비 비율이 포함된 토큰 테이블, 타이포그래피 역할, 간격 사용 규칙, 핵심 컴포넌트(버튼, 입력, 카드, 대화상자, 테이블, 토스트)에 대한 do/don't.
선택적으로 단일 styleguide.html / story 페이지: 두 테마에서 모든 토큰과 컴포넌트 상태를 렌더링하여 시스템을 시각적으로 확인할 수 있습니다.