Vercel, AI 에이전트용 브랜드 디자인 가이드 'design.md' 공개

Vercel은 자사 코딩 에이전트가 브랜드 정체성을 유지하며 페이지를 제작하도록 돕는 design.md 파일을 공개했다. 기존에는 리포지토리 내부의 product-design 스킬을 통해 디자인 시스템과 가이드라인을 전달했으나, 외부 도구에서 작동하는 에이전트들도 동일한 품질의 결과물을 생성할 수 있도록 단일 공개 URL로 접근성을 확장했다.

단순 프롬프트의 한계와 해결

처음에는 product-design의 내용을 하나의 프롬프트로 변환하는 방식을 시도했으나, 모델마다 '깔끔한 레이아웃' 같은 주관적 지시를 다르게 해석해 일관성 없는 페이지가 생성되는 문제가 발생했다. 이를 해결하기 위해 실제 컴포넌트와 예시 코드가 없는 환경에서도 정확한 스타일을 재현할 수 있도록 파일을 처음부터 다시 작성했다.

평가 기반의 반복 개발

Vercel은 실제 사용 사례를 기반으로 한 7가지 평가 프롬프트(사용량 보고서, 갱신 제안서, 벤치마크 보고서 등)를 고정하고, design.md의 변경 사항이 출력물에 미치는 영향을 반복적으로 테스트했다. 이를 통해 모델이 디자인 지시를 일관되게 따르도록 유도했으며, design.md를 적용했을 때 일반 SaaS 대시보드 대신 Vercel의 브랜드 가이드라인에 부합하는 페이지가 생성됨을 확인했다.