web-design-guidelines
Has your agent check interface code against design guidelines. Ensures the website's look is consistent and accessible.
What it does
This tool checks if your website's design code follows Vercel's design rules. It looks at layout, typography, color, motion, and accessibility for product interfaces.
When to use it
- ✓When you want to ensure your website looks good and works well.
- ✓Before launching a website to the public.
- ✓If you're getting feedback on your website's design.
Example of what to ask your AI
“Check my design code against Vercel's guidelines.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool compares your code against a set of predefined design rules. It then tells you where your code isn't following these rules.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill web-design-guidelinesOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/web-design-guidelines/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Load the pinned guidelines from
references/guidelines.md— this is the default, reproducible execution path - Optionally, fetch the latest guidelines from the upstream URL below and diff against the pinned snapshot to see if anything has changed
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the guidelines
- Output findings in the terse
file:lineformat
Guidelines Source
Default (pinned): The vendored copy at references/guidelines.md is the default execution path. It is a pinned snapshot of the upstream guidelines and guarantees the skill produces reproducible results in any runtime environment.
Upstream (live): For users who want the very latest rules, the live source is available at:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Fetching the live version is optional — the pinned snapshot is always the baseline.
Usage
When a user provides a file or pattern argument:
- Load
references/guidelines.mdas the default source - Optionally fetch the upstream URL to check for updates
- Read the specified files
- Apply all rules from the guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
FAQ
What are 'design guidelines'?
They are a set of rules and recommendations for creating user interfaces that are visually appealing, easy to use, and accessible.
Why use Vercel's guidelines?
They are created by design experts and help ensure your website looks good and functions well across different devices.
Can the tool fix my code automatically?
No, the tool only points out issues. You will need to make the corrections in your code yourself.
Details
Original description by the author
Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #792
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC