Skip to content
don’t make it ugly
All resources

GuideAgent Resources

Web Interface Guidelines

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

Staff pickUsed by meOpen sourceFree
Visit website (opens in a new tab)View GitHub (opens in a new tab)
Preview of Web Interface Guidelines

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

Can my agent use this?

Agent excellent agent friendliness

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.

Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.

Access methods

  • GitHub
  • Copy/paste
  • CLI

Related resources

  • Vercel Agent Skills
    Preview of Vercel Agent Skills

    Vercel Agent Skills

    Installable skills that teach agents React, Next.js and web design best practices.

    Agent skillFreeOpen sourceexcellent agent friendliness
    Staff pick
  • Checklist Design
    Preview of Checklist Design

    Checklist Design

    Checklists of what every common screen and component should include.

    GuideFreegood agent friendliness
    Staff pick
  • Refactoring UI
    Preview of Refactoring UI

    Refactoring UI

    The book that teaches developers to design, by the creators of Tailwind.

    Guidelimited agent friendliness
    Staff pickUsed by me
  • Vercel Geist
    Preview of Vercel Geist

    Vercel Geist

    Vercel's design system: the reference for the modern developer-tool look.

    Design systemFreegood agent friendliness
    Staff pick