Vercel에서 에이전트에게 제품 디자인 가르치기

코딩 에이전트는 UI를 빠르게 생성할 수 있지만, 특정 패턴이나 인터랙션이 왜 그렇게 설계되었는지에 대한 **디자인 맥락(Context)**을 이해하는 데 한계가 있습니다. 코드에는 구현된 결과물만 남을 뿐, 그 결정의 근거가 되는 디자인 리뷰나 논의 과정은 남지 않기 때문입니다.

Vercel은 이를 해결하기 위해 에이전트 네이티브 팀으로서 제품 결정 사항을 코드처럼 관리하며, 이를 에이전트가 활용할 수 있도록 product-design 시스템을 도입했습니다. 이 시스템은 세 가지 핵심 요소로 구성됩니다.

• Agent Skill: 제품 및 코드베이스 판단이 필요한 결정의 배경 정보를 제공하는 에이전트 기술
• Linters: 명확한 규칙을 자동으로 강제하는 린터
• Review Loop: Slack, Figma, GitHub의 증거를 수집하여 가이드라인 업데이트를 준비하는 리뷰 루프

이 시스템은 코드 저장소 내의 .agents/skills/product-design/ 경로에 위치하며, references/(판단 기준, 패턴, 용어집 등), exemplars/(성공 및 실패 사례), copywriting-eval/(카피라이팅 테스트) 등의 구조를 가집니다.

특히 SKILL.md는 요청 모드(shape, implement, review, copy, harden)를 먼저 식별하여 작업 범위를 명확히 구분합니다. 또한, 모든 정보를 복제하는 대신 컴포넌트 API나 디자인 시스템 규칙 등 각 소유자가 관리하는 Canonical Sources로 라우팅하여 정보의 일관성을 유지합니다.