에이전트가 디자인 시스템 컴포넌트를 “제대로” 쓰게 만드는 방법

• AI 에이전트 활용의 한계 : Figma MCP 등을 활용해 에이전트에게 화면 코드를 생성을 요청할 때, 복잡하거나 여러 컴포넌트를 조합해야 하는 경우 의도와 다른 코드를 생성하거나 디자인 시스템을 무시하고 직접 구현하는 문제가 발생함.
• 정보 부족 : 에이전트에 제공되는 정보가 단순 prop 매핑에 그쳐, 컴포넌트 간의 상호작용 규칙이나 상태 관리 패턴을 이해하지 못함.

AI 에이전트가 정확하고 일관되게 코드를 작성하도록 두 가지 정보를 제공합니다.

• Code Connect (Figma ↔ 코드 매핑) : Figma 속성과 코드의 prop 대응 관계를 매핑. 단일 컴포넌트의 단순 prop 매핑 및 기본적인 컴포넌트 조합 구조 전달에 유용함.
• Agent Docs (에이전트를 위한 마크다운 문서) :
  • agent/ 디렉터리에 마크다운 형식으로 작성된 에이전트 전용 가이드 문서.
  • Anatomy(구조), Props, 조합 패턴, 상태 관리 가이드(예: 임시 상태와 최종 상태 분리) 등 복잡한 맥락 및 규칙을 제공.
  • agent/README.md를 진입점으로 두어 에이전트가 상황에 맞는 참조 문서(useCalendar.md, DatePicker.md 등)를 스스로 찾아 읽도록 설계.

• 정확도 및 일관성 향상 : Agent Docs 도입 후 에이전트 특유의 결과 편차가 크게 줄어들고, 수동 수정 작업 빈도가 감소함.
• 디자인 시스템의 관점 변화 : 디자인 시스템의 소비자가 '사람'에서 'AI 에이전트'로 확장됨에 따라 에이전트가 가공·소비하기 좋은 형태의 문서 구축이 필요함.