피드로 돌아가기
GeekNewsFrontend
원문 읽기
DESIGN.md — AI 코딩 도구를 위한 디자인 시스템 단일 파일 포맷 (한국어 정리)
AI 에이전트 컨텍스트 최적화를 위한 단일 파일 기반 디자인 시스템 포맷
AI 요약
Context
디자인 시스템이 Figma 등 외부 툴에 고립되어 AI 코딩 도구가 브랜드 가이드라인을 정확히 인지하지 못하는 한계 발생. 이에 따라 코드베이스 내에서 AI가 즉시 참조 가능한 표준화된 컨텍스트 제공 필요성 증대.
Technical Solution
- YAML Frontmatter를 통한 기계 가독성(Machine-readable) 토큰 정의로 정밀한 값 추출 구조 설계
- Markdown 본문을 활용한 디자인 판단 근거 및 사용 제약 사항 명시로 AI의 의사결정 논리 보완
- 토큰-본문 간 불일치 발생 시 우선순위를 정의한 Resolver 메커니즘 적용
- 8개 고정 섹션 구성을 통한 디자인 시스템 Mental Model의 표준화 및 일관성 확보
- CLI 도구를 통한 Broken-ref, Contrast, Orphaned Token 검사 등 정적 분석(Linting) 체계 구축
- DTCG 및 Tailwind CSS와의 상호운용 정책 수립을 통한 기존 에코시스템과의 통합 구현
실천 포인트
1. 디자인 시스템을 Notion/PDF가 아닌 코드베이스 내 .md 파일로 관리하여 PR 리뷰 프로세스에 통합
2. AI 에이전트 투입 전, 정량적 토큰(YAML)과 정성적 가이드(Markdown)가 공존하는 단일 진실 공급원(SSOT) 구축
3. 단순 값 정의를 넘어 '사용 금지 패턴'과 '판단 기준'을 명문화하여 AI 생성물의 일관성 확보
4. CLI 기반의 린트 규칙을 도입하여 디자인 토큰의 참조 무결성 상시 검증