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.

What your agent can do with design & ui skills installed

  • Identify hierarchy, spacing, contrast, and motion problems with specific feedback
  • Refactor a design toward a chosen aesthetic while preserving function
  • Apply an established design system without drifting from its patterns
  • Extract and document tokens, spacing, and components from an existing codebase
  • Critique interfaces against accessibility and usability standards
  • Generate frontend code that matches a visual specification instead of generic boilerplate

Skills in this category

frontend-designanthropics/skills

frontend-design is published by anthropics/skills. Review its source instructions before using it in an agent workflow.

web-design-guidelinesvercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

vercel-composition-patternsvercel-labs/agent-skills

vercel-composition-patterns is published by vercel-labs/agent-skills. Review its source instructions before using it in an agent workflow.

ui-ux-pro-maxnextlevelbuilder/ui-ux-pro-max-skill

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

sleek-design-mobile-appssleekdotdesign/agent-skills

Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).

canvas-designanthropics/skills

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

polishpbakaus/impeccable

Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.

critiquepbakaus/impeccable

Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.

bolderpbakaus/impeccable

Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.

delightpbakaus/impeccable

Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.

distillpbakaus/impeccable

Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.

quieterpbakaus/impeccable

Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.

extract-design-systemarvindrk/extract-design-system

Extract design primitives from a public website and generate starter token files for your project.

design-taste-frontendleonxlnx/taste-skill

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

high-end-visual-designleonxlnx/taste-skill

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

Works with your agent

Design & UI skills work with Claude Code, Cursor, GitHub Copilot, Windsurf, Cline, Codex, Gemini CLI, and agents that support the skills CLI.

Frequently asked questions

How do the impeccable skills differ from web-design-guidelines?

The guidelines enforce interface correctness. The impeccable skills are stylistic operators that push an interface toward a particular visual direction.

Can my agent apply a design system it has not seen before?

Yes. Use extract-design-system first so the agent can capture the existing tokens and component patterns.

Do these skills work on existing codebases?

Yes. Critique and polish are particularly useful for focused review passes on existing interfaces.

Which skill should I start with?

For a new project, start with web-design-guidelines or frontend-design. For an existing UI, start with critique.