Vercel Ui Skills
This is a comprehensive design constraint system for building interfaces that match Vercel's aesthetic. It covers everything from the 4px spacing grid and Inter typography to specific color tokens like #F9F9F9 backgrounds and #000001 accents. The guidelines are opinionated and prescriptive, with lots of MUST and NEVER rules about things like animation (compositor props only, max 200ms), accessibility (4.5:1 contrast ratios, no removing focus indicators), and layout patterns. It's useful if you want Claude to generate UI code that actually looks like Vercel's site without having to specify every detail. The semantic token naming and ready-made component specs make it more practical than just saying "make it look like Vercel."
- skills.sh installs
- 358
- GitHub stars
- 105
- last updated
- Aug 21, 2026
Install
$ npx -y skills add ihlamury/design-skills --skill vercel-ui-skills --agent claude-codeInstalls into .claude/skills of the current project.
Files
Vercel UI Skills
Opinionated constraints for building Vercel-style interfaces with AI agents.
When to Apply
Reference these guidelines when:
- Building light-mode interfaces
- Creating Vercel-inspired design systems
- Implementing UIs with Inter font and 4px grid
Colors
- SHOULD use light backgrounds for primary surfaces
- MUST use
#F9F9F9as page background (surface-base) - MUST use
#000001for primary actions and focus states (accent) - SHOULD reduce color palette (currently 12 colors detected)
- MUST maintain text contrast ratio of at least 4.5:1 for accessibility
Semantic Tokens
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/ihlamury/design-skills
- Categories
- Frontend Development, Cloud & Infrastructure, Design & UI/UX
- First seen
- Jun 3, 2026
More from ihlamury/design-skills
All 10Recommended
More Frontend Development
frontend-design-ultimatekesslerio/frontend-design-ultimate-clawhub-skillfrontend design ultimate331skills.sh installs
widget-generatorf/prompts.chatGenerate customizable widget plugins for the prompts.chat feed system311skills.sh installs
page-layout-builderpatricio0312rev/skillsGenerates complete page layouts and shells for common patterns (dashboard, authentication, settings, CRUD pages) with consistent navigation, layout components, 308skills.sh installs