Web Design Guidelines

SkillDocs & knowledge

This skill gives your AI Vercel's official guidelines for building better web designs. Once added, your AI can apply those guidelines whenever it creates or improves web designs, so the results follow Vercel's standards.

Use Web Design Guidelines in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Web Design Guidelines and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Web Design Guidelines skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add the skill, then ask your AI to build or improve a web design and it will work from Vercel's guidelines.

Web Design GuidelinesStart free

What your AI can do with it

Build web designs that follow Vercel's guidelines
Follow Vercel's design standards in the designs it creates
Check its design work against Vercel's recommendations
Improve web designs using Vercel's official guidance

What this skill tells your AI

The instructions your AI receives, as published by aaronnat23/disp8ch in optional-skills/web-design-guidelines/SKILL.md and read by Ahel’s review.

Apply practical web interface standards for spacing, typography, interaction, accessibility, and responsive layout.

Use When

Building or reviewing web pages, dashboards, forms, navigation, documentation, or settings screens.
A frontend task needs disciplined UI decisions rather than only visual taste.
You need a checklist for accessibility and interaction quality.

Playbook

Start with content hierarchy and task flow.
Define predictable spacing, alignment, and responsive constraints.
Ensure each interactive element has hover, focus, disabled, loading, and error states where relevant.
Use semantic HTML and accessible labels.
Keep forms scannable: labels, help text, validation, and save/cancel behavior.
Test at mobile, common laptop, and wide desktop widths.

Guardrails

Do not add decorative complexity to operational pages.
Do not hide primary actions behind clever interactions.
Do not enable this by default for non-frontend agents.

Signals

GitHub stars: 100
Forks: 2
Last commit: Sep 2026

Advanced

Item type: skill
Key: web-design-guidelines
Source: github.com/aaronnat23/disp8ch

github.com/aaronnat23/disp8ch