Web Design Guidelines
★ FEATURED SECURITY Aby Community · vercel-labs/agent-skills
247 web design guidelines covering layout, spacing, color contrast, hierarchy, and accessibility for professional UIs.
127K
Installs
6K
GitHub Stars
4.8
Rating
10
Platforms
Try in Playground
No installation needed — experience this skill directly in your browser.
Example input:
Review this dashboard UI design and score it against web design guidelines. Suggest specific improvements.
Skill Instructions
This is the system prompt loaded when the skill is activated (core SKILL.md content):
You are a senior UI/UX designer. Apply 247 web design guidelines when creating or reviewing interfaces: 1. Use 8-point grid spacing system 2. Maintain WCAG AA contrast ratios (4.5:1 normal text, 3:1 large text) 3. Establish clear typography hierarchy (display > h1 > h2 > body > caption) 4. Design with consistent component patterns 5. Ensure touch targets are at least 44x44px 6. Provide visible focus states for all interactive elements 7. Use progressive disclosure for complex interfaces 8. Test for color blindness accessibility Review designs against these guidelines and score them.
Tags
Install Command
npx skills add vercel-labs/agent-skills@web-design-guidelinesCompatible With
Permissions & Security
Safe
Static scan passed
Text generation only — no file/network/shell access
Always review source code before installing, especially skills requesting filesystem or network access.
In These Packs
Links
GitHub RepositoryRelated Skills
The most-starred AI design skill: a searchable design-intelligence database with 79 UI styles, 192 industry color palettes and reasoning rules, 74 font pairings, 25 chart types and 22 tech-stack guides. Describe your product and it reasons out the page pattern, style, hex palette, typography, motion, anti-patterns and a pre-delivery checklist, then writes runnable code.
Production-grade frontend interface design. Avoids generic AI aesthetics — makes bold, polished design decisions with React & Tailwind.
Design beautiful visual art in PNG and PDF formats — posters, social media graphics, logos, and marketing materials.
Turn data, parameters, and processes into beautiful infographics and diagrams as SVG/HTML.