피드로 돌아가기
Dev.toFrontend
원문 읽기
AI Agent를 위한 DESIGN.md 기반 통합 디자인 시스템 설계
DESIGN.md vs tokens.json vs Figma for AI Agents
AI 요약
Context
AI Agent가 UI/UX를 구현할 때 tokens.json의 값 중심 구조나 README의 규칙 중심 구조가 파편화되어 발생하는 맥락 손실 문제 분석. Figma 링크의 경우 Agent가 직접 해석할 수 없는 비정형 데이터 구조로 인해 설계 의도 전달 불가.
Technical Solution
- 정형 데이터(Values)와 비정형 규칙(Rules)을 단일 파일로 통합한 DESIGN.md 구조 채택
- W3C DTCG 표준 기반 Token Schema 적용을 통한 Machine Readability 확보
- Version Control System에 통합 가능한 단일 파일 설계로 Design Source of Truth 유지
- CLI 도구를 통한 Tailwind CSS 및 DTCG 형식의 다중 Export 파이프라인 구축
- Figma 디자인 소스를 DTCG로 변환 후 DESIGN.md에 통합하여 Rationale 보강
실천 포인트
- AI Agent에게 디자인 가이드를 제공할 때 값(Value)과 규칙(Rule)이 결합된 단일 파일 구조인지 확인 - W3C DTCG 표준 준수 여부를 통해 다양한 툴체인 간의 상호운용성 검토 - Design Source of Truth를 코드 저장소 내에 위치시켜 Agent의 컨텍스트 접근성 최적화