---
name: Web Interface Guidelines
slug: vercel-web-interface-guidelines
url: "https://dontmakeitugly.com/resources/vercel-web-interface-guidelines"
website: "https://github.com/vercel-labs/web-interface-guidelines"
github: "https://github.com/vercel-labs/web-interface-guidelines"
type: guide
categories:
  - agent-resources
tags:
  - guidelines
  - agents
  - accessibility
  - review
  - claude-code
  - agents-md
  - checklist
frameworks:
  - agnostic
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - github
  - copy_paste
  - cli
difficulty: beginner
staffPick: true
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Web Interface Guidelines

A concise, agent-readable checklist of what a well-built web interface must get right.

- Type: Guide
- Categories: Agent Resources
- Pricing: Free · License: MIT
- Open source: yes
- Works with: Framework agnostic, Markdown

## What it is

Vercel's Web Interface Guidelines is a single Markdown document covering accessibility, focus states, forms, animation, typography, layout, performance and copywriting rules for interfaces, written to be handed to a coding agent or used as a review checklist.

## Why it's here

Drop this into your AGENTS.md or CLAUDE.md and a whole class of ugly mistakes disappears: missing focus rings, disabled-looking inputs, layout shift, orphaned headings. It's the checklist Checklist Design would write for agents.

## Best for

- agent rules files
- design reviews
- accessibility basics
- polish

## Links

- Website: https://github.com/vercel-labs/web-interface-guidelines
- GitHub: https://github.com/vercel-labs/web-interface-guidelines

## Can my agent use this?

Yes, this is written for agents. Paste the guidelines into your rules file, or ask your agent to fetch the raw Markdown and review the current page against it.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: GitHub, Copy/paste, CLI.

## Prompt to hand your agent

```text
Use Web Interface Guidelines as a design and implementation reference for this project.

What it is: A concise, agent-readable checklist of what a well-built web interface must get right.

Website: https://github.com/vercel-labs/web-interface-guidelines
GitHub: https://github.com/vercel-labs/web-interface-guidelines

Use it specifically for:
- agent rules files
- design reviews
- accessibility basics
- polish

How you can access it: GitHub, Copy/paste, CLI.
Works with: Framework agnostic.
License: MIT. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [Vercel Agent Skills](https://dontmakeitugly.com/resources/vercel-agent-skills.md): Installable skills that teach agents React, Next.js and web design best practices.
- [Checklist Design](https://dontmakeitugly.com/resources/checklist-design.md): Checklists of what every common screen and component should include.
- [Vercel Geist](https://dontmakeitugly.com/resources/geist-design-system.md): Vercel's design system: the reference for the modern developer-tool look.
- [Anthropic Skills](https://dontmakeitugly.com/resources/anthropic-skills.md): Anthropic's public skills repository, including skills for front-end and design work.

## In collections

- [Best resources for designing with Claude Code](https://dontmakeitugly.com/collections/building-with-claude-code.md)

Web Interface Guidelines is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.