web-design-guidelines
nexu-io/open-design
Web design guidelines and standards covering layout, typography, color, motion, and accessibility.
What is web-design-guidelines?
A curated set of web design guidelines and standards from the Vercel engineering team for building consistent product UIs. Use this when you need to apply proven design principles for layout, typography, color systems, motion, and accessibility across your product.
- Provides layout standards and grid systems for consistent spacing
- Defines typography guidelines for hierarchy and readability
- Establishes color systems and palette standards
- Documents motion and animation principles
- Covers accessibility requirements and best practices
How to install web-design-guidelines
npx skills add https://github.com/nexu-io/open-design --skill web-design-guidelinesHow to use web-design-guidelines
- 1.Ask the agent to invoke the skill by name 'web-design-guidelines' or use trigger phrases like 'web design guidelines', 'vercel design', 'product ui standards', or 'design checklist'
- 2.Reference the upstream repository at https://github.com/vercel-labs/skills for full assets and scripts
- 3.Consult the guidelines when making design decisions for layout, typography, color, motion, or accessibility
Use cases
- Designing new product UI components with consistent standards
- Reviewing design work against established guidelines
- Creating design documentation for engineering teams
- Ensuring accessibility compliance across product interfaces
- Establishing design system foundations for new projects
- Product designers
- UI/UX engineers
- Design system maintainers
- Product teams building consistent interfaces
- Engineering teams implementing design standards
web-design-guidelines FAQ
It covers layout, typography, color, motion, and accessibility for product UI design.
These guidelines are curated from the Vercel engineering team's design standards.
Yes, these are general web design standards that can be applied to any product UI project.
Visit https://github.com/vercel-labs/skills to access the complete upstream bundle with original assets and scripts.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: web-design-guidelines description: | Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. triggers:
- "web design guidelines"
- "vercel design"
- "product ui standards"
- "design checklist" od: mode: design-system category: design-systems upstream: "https://github.com/vercel-labs/skills"
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/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.
Related skills
More from nexu-io/open-design and the wider catalog.
ui-ux-pro-max
Catalog entry for UI/UX Pro Max design patterns—full workflow requires upstream installation.
frontend-design
Create production-grade frontend interfaces with strong visual direction, polished typography, and working code.
design-brief
Parse design briefs into concrete specs using I-Lang protocol to eliminate ambiguity.
pptx-html-fidelity-audit
Audit python-pptx exports against source HTML decks and fix layout drift with footer-rail discipline.
hatch-pet
Create Codex-compatible animated pet spritesheets from art, screenshots, or references with deterministic assembly and packaging.
creative-director
AI creative director with 20+ methodologies and recursive self-assessment for campaign concepts and design critique.