Back to Skills Library
UX CopyGuidelinesVercelAI Agent Skill

web-design-guidelines

UX microcopy, state feedback, and concise human copywriting standards from Vercel Engineering.

vercel-labs/agent-skills
568.9k stars
568.9k installs
Updated: 2026-07-28

Install Options

Install into Claude Code, Cursor, Codex, or Antigravity with:

$ npx skills add vercel-labs/agent-skills@web-design-guidelines

Real Work Situation Solved

Calibrate AI response voice and tone to match your brand identity

The AI swings between overly formal, excessively verbose, and too casual - how do you enforce a consistent tone?

5-Step Action Framework

  1. 1Define a 3-pair Tone of Voice rubric ('Is X, but Not Y' - e.g. Helpful but Not Verbose, Empathetic but Not Over-apologetic).
  2. 2Set strict length boundaries (e.g. max 3 sentences for direct answers, max 150 words for explanations).
  3. 3Provide 5 curated Good vs. Bad input/output pairs directly in the system prompt.
  4. 4Maintain a negative lexicon: ban generic corporate cliches and robotic filler phrases.
  5. 5Stress-test against 10 frustrated user scenarios to verify measured empathy without excessive apologies.
Before

"I am terribly sorry for this immense inconvenience, please allow me to assist you with... (3 paragraphs)"

After

"Order #1234 is scheduled for redelivery by 5 PM today. Would you like to update your delivery address?"

Related Course Lesson

AI LiteracyLesson 5

Go to Lesson

SKILL.md Source Instructions

SKILL.md • Read-only preview
# Web Design Guidelines Skill

Enforce active voice, cut robotic filler words, and write direct action-oriented user feedback messages.