# AI-readable design systems and three token layers > Four AI-first principles and primitive, semantic, and component layers - Canonical: https://learning.reopt.ai/en/courses/design-systems/lessons/ds-l1-intro - Language: en - HTML: https://learning.reopt.ai/en/courses/design-systems/lessons/ds-l1-intro --- [Design systems in the AI era](/en/courses/design-systems) 1. Token architecture — start with the atoms 1 / 15 # AI-readable design systems and three token layers Four AI-first principles and primitive, semantic, and component layers Concept 32 XP 7 min 디자인 시스템의 패러다임이 바뀌었습니다. 과거에는 사람 개발자 가 문서를 읽고 컴포넌트를 조합했다면, 이제는 AI 에이전트 가 시스템을 해석하고 코드를 생성합니다. AI에게 “당연히 알겠지”는 통하지 않으므로 모든 규칙을 명시적·구조화된 데이터로 표현해야 합니다. AI-First 디자인 시스템 4대 원칙 명시적 > 암묵적 · 구조화 > 서술형 (AI는 산문보다 JSON/TypeScript를 정확히 해석) · 제약 > 자유도 (유한한 올바른 선택) · 검증 > 신뢰 (출력은 항상 자동 검증) ## 기존 디자인 시스템의 한계 | 문제 | 원인 | AI-First 해결책 | | 문서와 코드 불일치 | 수동 동기화 | 단일 소스 of Truth | | 암묵적 규칙 | 구두 전달, 경험 의존 | 명시적 스키마화 | | 컨텍스트 전환 비용 | 분산된 정보 | 구조화된 컨텍스트 주입 | | 일관성 편차 | 개인 해석 차이 | 기계적 검증 | ## 토큰 3계층 구조 디자인 토큰은 디자인 시스템의 원자적 단위 입니다. AI가 의도를 읽어내려면 세 계층으로 나누고, 컴포넌트가 Primitive를 직접 참조하지 못하게 막아야 합니다. | 계층 | 역할 | 예시 | AI 활용 | | Primitive | 브랜드 독립적 원시값 | colors.blue.500 = #3B82F6 | 팔레트 범위 파악 | | Semantic | 의도와 용도 표현 | colors.primary | 맥락에 맞는 선택 | | Component | 특정 컴포넌트 전용 | button.background | 일관된 스타일 적용 | 안티패턴 컴포넌트가 Primitive 토큰을 직접 참조하면 AI는 의도를 추론하지 못합니다. colors.blue.500 대신 반드시 colors.primary 를 쓰세요. ### AI 친화적 네이밍 네이밍 구조 category.property.variant.state 로 통일합니다. 예: colors.background.surface.hover . default·hover·active·disabled 상태 토큰 패턴을 일관 적용하세요. ### AI가 골라 쓰게 하는 토큰 문서화 AI가 토큰을 제대로 골라 쓰게 하려면 용도와 제약 을 명시해야 합니다. $description (용도), $usage (사용처), $constraints (예: WCAG AA 대비 4.5), $avoid (사용 금지 케이스)를 함께 적으면 AI가 규칙을 지켜 선택합니다. 2025.10 W3C DTCG 1.0 최초 안정판 출시 30~50% 디자인/개발 시간 잘 구조화된 토큰 시스템의 절감 효과 10개+ DTCG 네이티브 지원 Style Dictionary v5, Tokens Studio, Figma 등 핵심 정리 - 토큰은 Primitive → Semantic → Component 3계층으로 참조하고, 컴포넌트의 Primitive 직접 참조를 막는다 - 네이밍은 category.property.variant.state 로 통일하고 상태 토큰 패턴을 일관 적용한다 - W3C DTCG 1.0($ 접두어, .tokens.json)을 Style Dictionary v5가 CSS 변수·Tailwind v4 @theme·TS·Figma로 변환한다 - $description·$usage·$constraints·$avoid 를 명시해야 AI가 용도와 제약을 지켜 토큰을 고른다 Got it · Continue --- Site guide for agents: https://learning.reopt.ai/llms.txt · Sitemap: https://learning.reopt.ai/sitemap.xml · Contact: https://learning.reopt.ai/contact