Design & UI skills
Design skills give your agent the taste and frameworks to produce polished interfaces, review visual work, and apply design systems consistently across a project. Install once and your agent knows what good looks like without you re-explaining it each session.
What your agent can do with design & ui skills installed
- Review a component and identify specific visual problems — hierarchy, spacing, contrast, motion — with line-level specificity rather than generic feedback
- Refactor a design toward a given aesthetic (more minimal, bolder, more editorial) while preserving function
- Apply a design system consistently across new components without drifting from established patterns
- Extract and document tokens, spacing, and component patterns from an existing codebase
- Critique UI against accessibility and usability standards with specific, actionable fixes
- Generate frontend code that matches a visual spec rather than falling back on generic boilerplate
Skills in this category
frontend-design
anthropics/skills
Comprehensive frontend design patterns and visual polish guidance
web-design-guidelines
vercel-labs/agent-skills
Vercel's Web Interface Guidelines covering spacing, typography, interaction, and accessibility
vercel-composition-patterns
vercel-labs/agent-skills
React composition patterns for flexible, scalable UI component architecture
ui-ux-pro-max
nextlevelbuilder/ui-ux-pro-max-skill
Advanced UI/UX patterns for complex interfaces and interaction design
sleek-design-mobile-apps
sleekdotdesign/agent-skills
Mobile-first design principles for iOS and Android app interfaces
canvas-design
anthropics/skills
Design generation and iteration in canvas-based environments
polish
pbakaus/impeccable
Final-pass visual refinement: tighten spacing, sharpen type, clean edges
critique
pbakaus/impeccable
Structured design critique with specific, actionable feedback
bolder
pbakaus/impeccable
Push a design toward stronger visual weight and presence
delight
pbakaus/impeccable
Add micro-interactions and motion that make interfaces feel alive
distill
pbakaus/impeccable
Strip a design to its essential elements, removing noise and increasing clarity
quieter
pbakaus/impeccable
Reduce visual noise and create calm, focused interfaces
extract-design-system
arvindrk/extract-design-system
Extract tokens, components, and patterns from an existing codebase
design-taste-frontend
leonxlnx/taste-skill
Opinionated frontend design taste with explicit reasoning about visual decisions
high-end-visual-design
leonxlnx/taste-skill
Premium aesthetic sensibility for luxury and editorial interfaces
emil-design-eng
emilkowalski/skill
Emil Kowalski's design engineering principles covering motion, detail, and craftsmanship
Works with your agent
Design & UI skills are compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, Cline, Codex, Gemini CLI, and all agents that support the skills CLI.
Frequently asked questions
What is the difference between the impeccable skills and web-design-guidelines?
web-design-guidelines is prescriptive — it applies Vercel's specific interface standards around spacing, typography, and interaction. The impeccable skills (polish, critique, bolder, and others) are stylistic operators: each one pushes a design in a particular direction. Use web-design-guidelines for correctness, the impeccable skills for taste.
Can my agent apply a design system it hasn't seen before?
Yes, with extract-design-system installed first. The skill reads your existing codebase, extracts design tokens and component patterns, and makes that context available for all subsequent design work in the session.
Do these skills work on existing codebases or only new projects?
Both. The critique and polish skills are built for review passes on existing code. Point your agent at a component file and ask for a critique — it returns specific issues with line-level references rather than general suggestions.
Which skill should I start with?
For a new project, start with web-design-guidelines or frontend-design. For improving existing UI, start with critique to identify what to fix before making changes.