Web Design Guidelines
- 2.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
web-design-guidelines advertises Vercel team UI standards for layout, typography, color, motion, and accessibility via Open Design discovery.
About
Web Design Guidelines is a catalogue entry advertising Vercel engineering team standards for product UI covering layout, typography, color, motion, and accessibility. The Open Design listing helps agents discover the skill during planning with trigger phrases like web design guidelines, Vercel design, product UI standards, and design checklist. The upstream source lives in the vercel-labs skills repository on GitHub under the design-systems category. To run the full upstream workflow with original assets, scripts, and references, install the upstream bundle into the active agent skills directory and invoke by skill name or frontmatter triggers. This local SKILL.md describes what the guideline set covers and how to locate the complete upstream implementation rather than duplicating every rule inline. Developers use it as a routing skill when aligning interface work to Vercel product UI conventions before pulling the full reference package.
- Vercel engineering layout, typography, color, and motion standards.
- Accessibility guidance for product UI design decisions.
- Open Design catalogue discovery with named trigger phrases.
- Upstream vercel-labs skills repository as authoritative source.
- Install upstream bundle for full assets, scripts, and references.
Web Design Guidelines by the numbers
- 2,760 all-time installs (skills.sh)
- +137 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #116 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
web-design-guidelines capabilities & compatibility
- Capabilities
- catalogue discovery for vercel ui guideline skil · layout typography color motion scope description · accessibility standards routing to upstream bund · trigger phrase identification from frontmatter · upstream github install instructions
- Use cases
- ui design · web design
- Pricing
- Free
What web-design-guidelines says it does
Covers layout, typography, color, motion, and accessibility for product UI.
Upstream: https://github.com/vercel-labs/skills
install the upstream bundle into your active agent's skills directory
npx skills add https://github.com/nexu-io/open-design --skill web-design-guidelinesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 2.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
Where do I find Vercel product UI design standards for layout, typography, and accessibility?
Apply Vercel engineering web design guidelines for layout, typography, color, motion, and accessibility in product UI.
Who is it for?
Developers aligning product UI to Vercel engineering design conventions during planning.
Skip if: Skip when full upstream assets are already installed or non-web design systems are required.
When should I use this skill?
User mentions web design guidelines, Vercel design, product UI standards, or design checklist triggers.
What you get
Skill discovery with upstream install path to the full vercel-labs guidelines bundle and trigger phrases.
- Design checklist findings
- Accessibility and layout fix recommendations
By the numbers
- Covers 5 UI domains: layout, typography, color, motion, and accessibility
- Defines 4 trigger phrases including web design guidelines and design checklist
Files
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:
# Inspect the upstream README for exact paths
open https://github.com/vercel-labs/skillsThen 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.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick web-design-guidelines over generic UI critique skills when you need Vercel engineering conventions rather than subjective visual opinions.
FAQ
Does this file contain all rules?
No. Install the upstream vercel-labs skills bundle for the complete workflow, assets, and references.
What areas does it cover?
Layout, typography, color, motion, and accessibility for product UI per the catalogue description.
How invoke the skill?
Use the skill name web-design-guidelines or frontmatter trigger phrases after installing upstream if needed.
Is Web Design Guidelines safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.