프론트엔드
에이전트도 읽는 디자인 시스템, Clay 개편기
두줄요약
AI 에이전트가 읽는 Clay 디자인 시스템을 위해 Figma·React의 명칭과 구조를 통일했습니다.\n가이드라인과 CLI를 제공해 타입 에러를 없애고 작업 시간·비용을 절반 가까이 낮췄습니다.
구조와 흐름
- 에이전트 사용을 전제로 Clay 디자인 시스템의 컴포넌트 API·명칭·구조 전면 재설계
- Figma 레이어와 React 컴포넌트의 이름, 속성, 값 타입을 동일 규칙으로 정렬
- root.md부터 컴포넌트별 문서까지 79개 가이드라인과 Clay CLI 기반 조회 흐름 구성
선택 이유
- 컴포넌트별 상이한 API와 모호한 컨벤션으로 인한 에이전트의 명칭 추측 및 문서 재조회 비용
- 일관된 규약을 통한 에이전트 컨텍스트 소모와 환각 가능성 축소
- 디자인과 코드 산출물을 오가는 공통 언어로서의 디자인 시스템 역할 강화
성능/운영 포인트
- 동일 화면 과제 5개를 레거시·신규 Clay에서 각 3회 비교
- 명칭 추측 오류 제거에 따른 타입 에러 0건
- 문서 탐색과 수정 반복 감소에 따른 작업 시간·비용 약 절반 수준
적용해볼 점
- 디자인 토큰·컴포넌트 사용법·공통 규칙을 에이전트용 진입 문서와 함께 제공
- 라이브러리 업데이트, 레거시 마이그레이션, 신규 컴포넌트 생성을 같은 규약으로 자동화
- Figma·코드·가이드라인·테스트·도구 변경을 순환 전파하는 구조 지향
