Teach your AI agent to design like Vercel: monochrome palette, oversized tight typography, hairline borders, subtle gradient glows and grid textures. Ships with design tokens, copy-paste components, and a complete example landing page.
Design a Vercel-style landing page for my CLI tool that converts YAML to dashboards
What you get
- Vercel's design language distilled into actionable rules
- Copy-paste design tokens (colors, type scale, glows, grid textures)
- 8 production-ready components: nav, hero, feature grid, code window, CTA, footer
- A complete example landing page built with the skill
Good fit
- SaaS / developer-tool landing pages
- Marketing sites that need a minimal black-and-white aesthetic
Not for
- Colorful, playful brand styles
- Name
- Vercel-Style UI Design
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Fix light-mode tokens: page bg is #fafafa (not pure white), text #171717, hairline #ebebeb — per Vercel's actual Geist values
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip vercel-style-ui-v1.0.1.zip -d ~/.claude/skills/vercel-style-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Version history (2)
- v1.0.110/2/2026 · 12.5 KB · 6 files
Fix light-mode tokens: page bg is #fafafa (not pure white), text #171717, hairline #ebebeb — per Vercel's actual Geist values
- v1.0.010/2/2026 · 12.4 KB · 6 files
Initial release: SKILL.md + design tokens + 8 components + example landing page