Web Design Guidelines
Apply Vercel-style layout, typography, color, motion, and accessibility standards when polishing product UI with an agent.
Overview
web-design-guidelines is an agent skill most often used in Build (also Validate prototype, Ship review) that applies Vercel team layout, typography, color, motion, and accessibility standards to product UI.
Install
npx skills add https://github.com/nexu-io/open-design --skill web-design-guidelinesWhat is this skill?
- Curated Vercel engineering team web design guidelines and product UI standards
- Covers layout, typography, color, motion, and accessibility in one design-system mode
- Discoverable via triggers: web design guidelines, Vercel design, product ui standards, design checklist
- Open Design catalogue entry with upstream bundle at vercel-labs/skills for full workflow assets
- Install upstream README paths when you need scripts and references beyond the catalogue stub
Adoption & trust: 712 installs on skills.sh; 61.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping product UI without a shared checklist for layout, typography, color, motion, and accessibility.
Who is it for?
Solo builders on Next.js or Vercel-adjacent stacks who want checklist-driven UI quality without hiring a design systems team.
Skip if: Teams that already enforce a bespoke brand system unrelated to Vercel patterns, or builders who only need backend APIs with no UI.
When should I use this skill?
User mentions web design guidelines, Vercel design, product ui standards, or design checklist.
What do I get? / Deliverables
Your agent applies Vercel-aligned UI standards during implementation so screens feel coherent and accessible before you ship.
- UI recommendations aligned to Vercel guidelines
- Checklist-oriented design review notes
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill encodes product UI standards you implement in screens and components. Frontend subphase matches layout, typography, color, and motion guidance for shipped interfaces.
Where it fits
Tune landing and app shell typography and color before committing to a full build.
Implement dashboards and marketing pages against layout and motion standards.
Run a design checklist pass on accessibility and motion before release.
How it compares
Reference design-system skill for UI standards, not a Figma plugin or component codegen pack.
Common Questions / FAQ
Who is web-design-guidelines for?
Indie and solo builders shipping web product UI who want Vercel-style standards wired into agent planning and implementation reviews.
When should I use web-design-guidelines?
During Validate when refining prototypes, in Build while implementing frontend, and in Ship when doing a last UI and accessibility pass before launch.
Is web-design-guidelines safe to install?
Review the Security Audits panel on this Prism page and inspect the upstream vercel-labs/skills bundle before copying scripts into your agent environment.
SKILL.md
READMESKILL.md - Web Design Guidelines
# web-design-guidelines > Curated from the Vercel engineering team. ## What it does Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. ## Source - Upstream: https://github.com/vercel-labs/skills - Category: `design-systems` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/vercel-labs/skills ``` Then ask the agent to invoke this skill by name (`web-design-guidelines`) or with one of the trigger phrases listed in this skill's frontmatter.