# 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.

Website: https://vercel.com/design/guidelines

## What it is 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](https://xiry.app/topics/design.md)
- 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, 16 January 2026](https://x.com/colderoshay/status/2012202861883441597): Reference set of guidelines for building quality web interfaces; part of the 'agentic UI trinity'.

## Related

- [Signs of Taste in Web UI](https://xiry.app/resources/signs-of-taste-in-web-ui): A checklist of interface details that indicate high design quality (List, Free)
- [Coolors](https://xiry.app/resources/coolors): Fast color palette generator, scheme explorer, and contrast tool for designers. (Web app, Freemium)
- [Minimal Product Design Cheatsheet](https://xiry.app/resources/minimal-product-design-cheatsheet): Quick typography, color palette, and iconography reference for clean product interfaces. (Tip, Free)
- [Viewport UI](https://xiry.app/resources/viewport-ui): Curated digital product UI and interaction design inspiration gallery (Website, Free)
- [Appinspo](https://xiry.app/resources/appinspo): Curated gallery of modern app visual interface design trends (Website, Free)
- [Appshots](https://xiry.app/resources/appshots): Curated library of real-world mobile and web UX design flows. (Web app, Freemium)

Updated 10 October 2026. Page: https://xiry.app/resources/web-interface-guidelines

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.