AI 에이전트가 읽을 수 있는 디자인 시스템 만들기

AI 에이전트가 제품 디자인 시스템을 정확히 이해하고 UI/코드를 생성할 수 있도록 가이드라인을 구조화하는 방안을 다룹니다.

Figma MCP나 AI 도구를 활용해 디자인에서 프런트엔드 코드를 즉시 생성할 수 있지만, 호버 상태 오류, 부적절한 색상/간격 사용 등 디자인 시스템의 세부 의도와 규칙을 놓치는 한계가 발생합니다.
스타일 파일(`tokens.json`)은 시각적 요소만 전달할 뿐, 구성 요소 간의 동작 규칙이나 상호작용 계층 구조를 설명해주지 못합니다.

작성: Figma를 통해 디자인 기초, 구성 요소, 패턴, 템플릿의 시각적 요소를 정의합니다.
명세화: AI 에이전트가 읽고 해석할 수 있는 분할된 Markdown 구조를 구축합니다.
- tokens.json: 시각적 기초 정의
- design.md: 전역 규칙 및 컨벤션
- components.md / patterns.md / templates.md : 각 요소의 레지스트리(목록) 역할
- *.md 파일들: 단일 파일에 모든 내용을 담지 않고, 개별 사양 파일(예: `wizard.template.md`)로 나누어 상호 참조함으로써 에이전트의 컨텍스트 소모를 줄이고 정확도를 높입니다.
전달: 에이전트가 이 명세와 제품 코드베이스에 접근하여 디자인 시스템 준수 여부를 검토하고, Pull Request 형태로 개선안을 제안하도록 합니다.