web-design-guidelines (Vercel)
Vercel's official engineering design guidelines for AI coding agents, enforcing clean layouts, responsive typography, and tactile feedback.
Overview
web-design-guidelines is Vercel's official design system rulebook curated for AI coding agents. It incorporates Vercel's signature design principles: sub-pixel hairline borders, fluid typography scaling, monochromatic palettes with crisp accent highlights, and performance-first responsive layouts.
Key Features
- ▲ Vercel Design DNA: Embodying Vercel's world-renowned clean, minimal, and high-performance design standards.
- 📐 Precision Layouts: Mathematical grid spacing, content max-widths, and optimal line lengths for reading ergonomics.
- 🌓 Perfect Dark Mode Contrast: Fine-tuned neutral grays with balanced contrast ratios.
- ⚡️ Next.js & Tailwind Synergy: Highly optimized for Next.js App Router and Tailwind CSS v4.
Installation & Quick Start
npx skills add vercel-labs/agent-skills@web-design-guidelinesWhen to Choose
- Ideal For: Building modern web applications, developer documentation sites, and SaaS platforms that demand the sleek, clean Vercel aesthetic.
Comments & Discussion
No comments yet. Be the first to share your experience or thoughts!
Related libraries
Curated by category & stack
23rd
An open-source shadcn/ui registry of opinionated, tasteful components by radiumcoders — WebGL shaders, playful 404s, and interactive showpieces you copy, paste, and own.
Duolingo UI (ShadLingo)
A comprehensive Duolingo-inspired design system and component suite built on shadcn/ui v4 and Tailwind CSS, featuring signature 3D buttons, vivid owl-green tokens, and gamified interaction cards.
Rewamp UI
A copy-paste React component library featuring highly interactive, physics-driven Framer Motion and Three.js WebGL components built with Tailwind CSS 4.