피드로 돌아가기
Dev.toFrontend
원문 읽기
Tokens와 Prose 결합을 통한 AI Agent용 Design System 최적화 설계
DESIGN.md Anatomy: How Tokens and Prose Work Together
AI 요약
Context
기존 Design System 문서가 단순 Data 중심의 Token 리스트 혹은 정성적 설명 중심의 Prose로 분리되어 운영됨. 이로 인해 AI Agent가 정밀한 수치 값과 설계 의도(Rationale)를 동시에 파악하지 못해 발생하는 시스템 적용 오류가 한계점으로 작용함.
Technical Solution
- YAML Front Matter를 통한 Machine-readable Design Token의 정밀한 값 제공
- Markdown Body를 활용한 Human-readable Rationale 정의로 설계 규칙 및 제약 사항 명시
- '값(Value)'과 '의미(Meaning)'를 단일 파일 내에 결합하여 Agent의 컨텍스트 이해도 향상
- Overview, Colors, Typography 등 Canonical Section 표준화를 통한 일관된 정보 구조 설계
- Do's and Don'ts 섹션을 통한 Hard Guardrail 설정으로 Agent의 잘못된 스타일 적용 방지
- Token Schema와 Prose의 상호 보완적 구조를 통한 Design System의 정합성 유지
실천 포인트
1. AI Agent 연동을 위한 디자인 문서 작성 시 YAML 기반의 정량적 토큰 정의 포함 여부 확인
2. 단순 색상 값 제공을 넘어 해당 색상의 사용 목적과 금지 사례를 명시한 Rationale 작성
3. AI가 해석 가능한 정형 데이터(Tokens)와 비정형 데이터(Prose)의 단일 파일 통합 구조 검토