web-design-guidelines
Spec compliantweb-design-guidelines encodes Vercel design standards for spacing, typography, accessibility, and performance in agent workflows.
Apply Vercel web design guidelines for accessible, performant interfaces.
Copy prompt for your AI
Send this to your agent to install the skill.
First read https://skill123.app/install/skill123.md. Then install the "web-design-guidelines" agent skill by running:
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelinesOther install methods
CLI install
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelinesManual install
~/.cursor/skills/web-design-guidelines/~/.claude/skills/web-design-guidelines/~/.copilot/skills/web-design-guidelines/When to use
- → UI review
- → Design consistency checks
- → Accessibility improvements
Platforms
Resources
Source
https://github.com/vercel-labs/agent-skills/skills/web-design-guidelinesRelated Skills
frontend-design produces polished, non-generic UI with intentional typography, color, and motion. Install with npx skills add vercel-labs/agent-skills --skill frontend-design.
Stageshow helps agents make faux product UI stills, cursor demos, and bento grids (benjitaylor/skills, MIT). Install: `npx skills add benjitaylor/skills --skill stageshow`.
baoyu-cover-image generates 公众号 / article covers across type, palette, rendering, text, and mood (JimLiu/baoyu-skills). Install with `npx skills add jimliu/baoyu-skills --skill baoyu-cover-image`.
Design vocabulary for coding agents (`polish`/`bolder`/`critique`/`audit`); catch AI slop. Install: `npx impeccable install` then `/impeccable init`. Docs: https://impeccable.style/docs
FAQ
How do I install web-design-guidelines?
Send the install prompt to your AI, or run npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines.
Which platforms support web-design-guidelines?
Cursor, Claude Code, GitHub Copilot