에이전트용 공개 디자인 가이드와 평가 체계
Vercel은 에이전트가 브랜드에 맞는 페이지를 만들도록 design.md, 공개 스타일시트, 평가 루프를 도입했다.
교안에 영향
예전에는 product-design를 저장소 안에서만 읽는다는 안내가 맞았지만, 이제는 저장소 밖 에이전트도 design.md로 같은 지침을 읽을 수 있다.
요약
- design.md를 공개해, 저장소 밖의 에이전트도 브랜드·레이아웃·카피·응답형·정보구조 지침을 읽을 수 있게 했다. - public stylesheet를 추가해 headers, tables, stat strips, chart styles 같은 디자인 시스템 원시 요소를 제한된 클래스와 토큰으로 제공한다. - evaluation loop와 eval harness를 만들어 고정 시나리오, 블라인드 A/B 비교, 결정적 검사를 통해 안내 문구와 규칙을 계속 다듬는다. - @design-agent가 Slack에서 현재 design.md와 stylesheet를 불러 웹페이지를 만들고 스크린샷과 배포 URL을 돌려준다.
바뀐 것
새 기능
- design.md라는 공개 파일을 추가해 어떤 환경의 에이전트도 URL만으로 같은 디자인 지침을 읽을 수 있게 했다.
- brand, layout, copywriting, design system, responsiveness, information architecture를 아우르는 guidance를 제공한다.
- public stylesheet를 추가해 headers, tables, stat strips, chart styles를 공개 URL로 사용할 수 있게 했다.
- evaluation loop를 도입해 반복 피드백, deterministic checks, 인간 검토를 함께 사용한다.
- seven scenarios를 사용해 usage and performance report, renewal proposal, benchmark report, interactive planning page, build-versus-buy brief, security governance brief, presentation deck을 검증한다.
- eval harness가 full-page renders, blind A/B comparisons, screenshots, model configuration, feedback을 저장한다.
개선
- design.md가 class names와 tokens를 문서화해 에이전트가 HTML에서 직접 재사용하도록 했다.
- design.md의 각 correction을 prose, stylesheet, deterministic check 중 가장 좁게 적용되는 위치에 반영한다.
기타
- @design-agent가 Slack에서 design.md와 published stylesheet를 사용해 페이지를 생성하고 결과를 게시한다.