핵심 요약
여기어때가 Code Connect와 Agent Docs를 도입해 에이전트가 디자인 시스템 컴포넌트를 더 정확하고 일관되게 활용하도록 만든 방법과 실험 결과를 공유합니다.
구현 방법
- Figma MCP를 활용한 디자인 분석과 코드 생성 파이프라인 구성
- 컴포넌트 속성과 코드 프로퍼티 매핑 정의(예: Large→lg) 및 예시 반영
- 에이전트용 문서(Agent Docs)로 조합 규칙과 상황별 예제 제공
- DatePicker 계열의 실제 사례로 매핑·패턴 검증
- Code Connect 단독 vs 두 요소 결합 실험을 3회 반복해 일관성 차이를 확인
주요 결과
- 세 실험에서 동일한 변수명/구조/로직으로 코드가 생성되며 일관성 확보
- Agent Docs 도입으로 수동 수정 감소와 불일치 축소
- 에이전트가 디자인 시스템을 정확하게 활용하는 쪽으로 구현 품질이 향상
