Design · Article or course
Web Interface Guidelines
Curated engineering and design guidelines for building high-quality web interfaces.
A living checklist created by Vercel covering practical web design, interaction, animation, and performance practices. It details micro-decisions across keyboard accessibility, layout shifts, form behavior, and rendering optimizations. It also includes an AGENTS.md file and an npx review skill to enforce these standards when generating code with AI coding agents.
What it's for
- Audit front-end web components for accessibility and interaction polish
- Provide system prompts and context files to AI coding agents to improve UI code generation
- Establish baseline front-end engineering rules for layout, state, and animations
Features
- Covers interactions, animations, layout, content, forms, performance, and visual design
- Downloadable AGENTS.md file to feed UI rules directly to AI agents
- CLI review command via npx to audit UI code against the guidelines
- Detailed guidance on optical alignment, focus management, and hit targets
- Concrete code examples and CSS property recommendations
Pricing
Free to read and use
Details
- Type
- Article or course
- Category
- Design
- Topic
- UI Guidelines
- Open source
- Yes
- Platforms
- Web
- For
- Front-end developers, product designers, and engineers building AI-assisted web apps.
- Tags
- design, frontend, ui, guidelines, accessibility, webdev
Why it was saved
- @colderoshay: Reference set of guidelines for building quality web interfaces; part of the 'agentic UI trinity'.
Related
A checklist of interface details that indicate high design quality
Fast color palette generator, scheme explorer, and contrast tool for designers.
Quick typography, color palette, and iconography reference for clean product interfaces.
Curated digital product UI and interaction design inspiration gallery
Curated gallery of modern app visual interface design trends
Curated library of real-world mobile and web UX design flows.
Updated