Vercel Design Guidelines
Review web interfaces against Vercel's comprehensive design guidelines and propose fixes.
How It Works
- Read the user's code (components, CSS, HTML)
- Check against Vercel design guidelines (interactions, animations, layout, content, forms, performance, design, copywriting)
- Report violations with specific line references
- Propose concrete fixes with code examples
Usage
When a user asks to review their UI or check against design guidelines:
- Fetch the live guidelines from
https://vercel.com/design/guidelines
- Read the relevant source files (components, styles, HTML)
- Analyze the code against each applicable guideline category
- Report findings grouped by category with severity
Guidelines URL: https://vercel.com/design/guidelines
Always fetch fresh guidelines to ensure you're checking against the latest standards.
Audit Categories
- Interactions: Keyboard accessibility, focus management, hit targets, loading states, URL persistence
- Animations: Reduced motion, GPU acceleration, easing, interruptibility
- Layout: Optical adjustment, alignment, responsive testing, safe areas
- Content: Inline help, skeletons, empty states, typography, accessibility
- Forms: Labels, validation, autocomplete, error handling, submit behavior
- Performance: Re-renders, layout thrashing, virtualization, preloading
- Design: Shadows, borders, radii, contrast, color accessibility
- Copywriting: Active voice, title case, clarity, error messaging
Output Format
Present findings as:
## {Category} Issues
### {Severity}: {Guideline Name}
**File:** `path/to/file.tsx:42`
**Issue:** {Description of the violation}
**Guideline:** {Brief guideline reference}
**Fix:**
```{language}
{Proposed code fix}
Severity levels:
- **Critical**: Accessibility violations, broken functionality
- **Warning**: UX issues, performance concerns
- **Suggestion**: Polish, best practices
## Example Review
Interactions Issues
Critical: Keyboard Accessibility
File: components/Modal.tsx:28
Issue: Modal lacks focus trap - keyboard users can tab outside
Guideline: Implement focus traps per WAI-ARIA patterns
Fix:
// Add focus trap using @radix-ui/react-focus-guards or similar
import { FocusScope } from '@radix-ui/react-focus-scope';
<FocusScope trapped>
<ModalContent>{children}</ModalContent>
</FocusScope>
Warning: Loading State Duration
File: components/Button.tsx:15
Issue: No minimum loading duration - causes flicker on fast responses
Guideline: Add 150-300ms delay and 300-500ms minimum visibility
Fix:
const [isLoading, setIsLoading] = useState(false);
const minimumLoadingTime = 300;
async function handleClick() {
setIsLoading(true);
const start = Date.now();
await action();
const elapsed = Date.now() - start;
if (elapsed < minimumLoadingTime) {
await new Promise(r => setTimeout(r, minimumLoadingTime - elapsed));
}
setIsLoading(false);
}
## Quick Checklist
For rapid reviews, check these high-impact items first:
- [ ] All interactive elements keyboard accessible
- [ ] Visible focus rings on focusable elements
- [ ] Hit targets ≥24px (44px on mobile)
- [ ] Form inputs have associated labels
- [ ] Loading states don't flicker
- [ ] `prefers-reduced-motion` respected
- [ ] No `transition: all`
- [ ] Errors show how to fix, not just what's wrong
- [ ] Color contrast meets APCA standards
- [ ] No zoom disabled
## Present Results to User
After reviewing:
Design Guidelines Audit
Reviewed {N} files against Vercel design guidelines.
Summary
- Critical: {N} issues
- Warning: {N} issues
- Suggestions: {N} items
{Detailed findings by category}
Recommended Priority
- {First critical fix}
- {Second critical fix}
...
1---2name: vercel-design-guidelines3description: Check web interfaces against Vercel's design guidelines. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "apply Vercel design guidelines".4---5
6# Vercel Design Guidelines
7
8Review web interfaces against Vercel's comprehensive design guidelines and propose fixes.
9
10## How It Works
11
121. Read the user's code (components, CSS, HTML)
132. Check against Vercel design guidelines (interactions, animations, layout, content, forms, performance, design, copywriting)
143. Report violations with specific line references
154. Propose concrete fixes with code examples
16
17## Usage
18
19When a user asks to review their UI or check against design guidelines:
20
211. Fetch the live guidelines from `https://vercel.com/design/guidelines`
222. Read the relevant source files (components, styles, HTML)
233. Analyze the code against each applicable guideline category
244. Report findings grouped by category with severity
25
26**Guidelines URL:** https://vercel.com/design/guidelines
27
28Always fetch fresh guidelines to ensure you're checking against the latest standards.
29
30## Audit Categories
31
32- **Interactions**: Keyboard accessibility, focus management, hit targets, loading states, URL persistence
33- **Animations**: Reduced motion, GPU acceleration, easing, interruptibility
34- **Layout**: Optical adjustment, alignment, responsive testing, safe areas
35- **Content**: Inline help, skeletons, empty states, typography, accessibility
36- **Forms**: Labels, validation, autocomplete, error handling, submit behavior
37- **Performance**: Re-renders, layout thrashing, virtualization, preloading
38- **Design**: Shadows, borders, radii, contrast, color accessibility
39- **Copywriting**: Active voice, title case, clarity, error messaging
40
41## Output Format
42
43Present findings as:
44
45```
46## {Category} Issues
47
48### {Severity}: {Guideline Name}
49**File:** `path/to/file.tsx:42`
50**Issue:** {Description of the violation}
51**Guideline:** {Brief guideline reference}
52**Fix:**
53```{language}
54{Proposed code fix}
55```
56```
57
58Severity levels:
59- **Critical**: Accessibility violations, broken functionality
60- **Warning**: UX issues, performance concerns
61- **Suggestion**: Polish, best practices
62
63## Example Review
64
65```
66## Interactions Issues
67
68### Critical: Keyboard Accessibility
69**File:** `components/Modal.tsx:28`
70**Issue:** Modal lacks focus trap - keyboard users can tab outside
71**Guideline:** Implement focus traps per WAI-ARIA patterns
72**Fix:**
73```tsx
74// Add focus trap using @radix-ui/react-focus-guards or similar
75import { FocusScope } from '@radix-ui/react-focus-scope';
76
77<FocusScope trapped>
78 <ModalContent>{children}</ModalContent>
79</FocusScope>
80```
81
82### Warning: Loading State Duration
83**File:** `components/Button.tsx:15`
84**Issue:** No minimum loading duration - causes flicker on fast responses
85**Guideline:** Add 150-300ms delay and 300-500ms minimum visibility
86**Fix:**
87```tsx
88const [isLoading, setIsLoading] = useState(false);
89const minimumLoadingTime = 300;
90
91async function handleClick() {
92 setIsLoading(true);
93 const start = Date.now();
94 await action();
95 const elapsed = Date.now() - start;
96 if (elapsed < minimumLoadingTime) {
97 await new Promise(r => setTimeout(r, minimumLoadingTime - elapsed));
98 }
99 setIsLoading(false);
100}
101```
102```
103
104## Quick Checklist
105
106For rapid reviews, check these high-impact items first:
107
108- [ ] All interactive elements keyboard accessible
109- [ ] Visible focus rings on focusable elements
110- [ ] Hit targets ≥24px (44px on mobile)
111- [ ] Form inputs have associated labels
112- [ ] Loading states don't flicker
113- [ ] `prefers-reduced-motion` respected
114- [ ] No `transition: all`
115- [ ] Errors show how to fix, not just what's wrong
116- [ ] Color contrast meets APCA standards
117- [ ] No zoom disabled
118
119## Present Results to User
120
121After reviewing:
122
123```
124# Design Guidelines Audit
125
126Reviewed {N} files against Vercel design guidelines.
127
128## Summary
129- Critical: {N} issues
130- Warning: {N} issues
131- Suggestions: {N} items
132
133{Detailed findings by category}
134
135## Recommended Priority
1361. {First critical fix}
1372. {Second critical fix}
138...
139```
majiayu000