Teaching agents product design at Vercel
By Steven Van ·
Vercel's product-design skill stores product decisions in the repo so coding agents can follow the reasoning behind shipped UI, not just its code.
Vercel has built a system called product-design to give its coding agents the context behind product decisions that isn't captured in code, things that normally live in design reviews, PR comments and Slack threads. The system has three parts: an agent skill that supplies context for decisions requiring product or codebase judgment, linters that enforce clear rules automatically, and a review loop that gathers evidence from Slack, Figma and GitHub to prepare guideline updates for review.
The skill sits inside the repository next to the code it governs, with a top-level AGENTS.md telling agents when to load it, a SKILL.md defining the runtime workflow, a references folder covering product judgment, interface quality, resilience, copy and interaction patterns, and an exemplars folder documenting decisions worth repeating from shipped pull requests.
SKILL.md first resolves which of five modes a request falls into: shape, implement, review, copy or harden, so that an audit doesn't turn into an edit and a copy pass doesn't expand into a redesign. It skips backend-only work, telemetry, console errors, generated files and tests with no shipped UI impact, and routes each task to a focused reference rather than duplicating guidance, for example loading destructive-action patterns for a modal or accessible-name guidance for a settings form.
Vercel says any team can build the same structure around its own standards, and its blog post includes a simplified version of the skill files as a starting point.
