Vercel's AI Design Spec: A Textbook Example
This article deeply analyzes Vercel's DESIGN.md, showcasing how to write an efficient and executable design specification for AI. It breaks down Vercel's approach across color, spacing, typography, motion, copy, and accessibility, revealing the thinking behind it. The color system uses a 100-1000 scale where each number corresponds to a fixed UI state (default, hover, click), eliminating AI guesswork. Spacing is limited to 9 values based on 4px increments, enforcing rhythmic consistency. Typography adopts role-based thinking (heading/label/copy/button) instead of pixel-based thinking. Motion design advocates 'no animation is often best' and gives precise durations per scenario. This piece is valuable for product managers, front-end engineers, and AI tool developers aiming to improve AI-generated UI consistency or build their own design specs.