AI BriefingTeaching agents product design at Vercel
Key point
Vercel built a 'product-design' system so agents can understand the design-decision context that doesn't make it into code.
Details
Coding agents can quickly generate UI, but they have limits in understanding the design context behind why a particular pattern or interaction was designed that way. This is because only the implemented result remains in the code, while the design reviews and discussions behind those decisions are not preserved.
To solve this, Vercel, as an agent-native team, manages product decisions like code and has introduced the product-design system so agents can make use of them. This system consists of three core components.
- Agent Skill: An agent skill that provides background information on decisions requiring product and codebase judgment
- Linters: Linters that automatically enforce clear rules
- Review Loop: A review loop that gathers evidence from Slack, Figma, and GitHub to prepare guideline updates
This system is located at .agents/skills/product-design/ within the code repository, with a structure including references/ (judgment criteria, patterns, glossary, etc.), exemplars/ (success and failure cases), and copywriting-eval/ (copywriting tests).
In particular, SKILL.md first identifies the request mode (shape, implement, review, copy, harden) to clearly define the scope of work. It also maintains information consistency by routing to Canonical Sources—such as component APIs or design system rules—managed by each respective owner, instead of duplicating all information.
This summary was generated automatically by AI. Check the original for the author's claims and context. Copyright belongs to the original author.
Our guide explains how the AI works. Report summary errors, attribution issues, or removal requests via Contact.