Agent skills for designers
Teach Cursor and Claude Code your design standards once: accessibility, critique, UX writing, Figma MCP, motion, and polish. These skills cover the designer work that repeats every sprint, and pair with our prompts when you need a one-shot starting point in chat.
Prototype & polish UI
Polish interfaces and keep agents from defaulting to AI-slop patterns.
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Avoid generic "AI slop" aesthetics with bold typography, color, and spatial composition.
Design Engineering
Emil Kowalski's design engineering skill: UI polish, animation decisions, component patterns, and the invisible details that make interfaces feel right.
Web Artifacts Builder
Build elaborate, multi-component React artifacts with Tailwind CSS and shadcn/ui. Full stack for creating production-ready web components and applications.
Web Interface Guidelines
Review UI code for accessibility, focus states, forms, animation, typography, and performance. Comprehensive checklist from Vercel's design team.
Design Motion Principles
Motion and interaction design through Emil Kowalski, Jakub Krehel, and Jhey Tompkins lenses. Create purposeful animations or audit for AI-slop motion. Includes frequency gates, context weighting, cookbooks, and accessibility rules.
UI/UX Pro Max
Comprehensive design guide for web and mobile: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types. Searchable database with priority-based recommendations.
Build design systems
Tokens, DESIGN.md contracts, and Tailwind patterns your agent can reuse.
Stitch DESIGN.md
Analyze Stitch projects and generate semantic DESIGN.md files from screen metadata, HTML/CSS, and assets. Produces atmosphere, color roles, typography, component styling, and layout principles.
Tailwind Design System
Build scalable design systems with Tailwind CSS v4: CSS-first tokens, OKLCH theming, CVA components, dark mode, and v3-to-v4 migration patterns.
Taste Design
Generate premium, non-generic DESIGN.md guidelines for Stitch with strict anti-pattern bans, semantic design language, and responsive/motion constraints.
Hand off to code
Move from design files to implementation with MCP and clear specs.
Figma Use
Mandatory prerequisite for Figma MCP: execute Plugin API scripts to create, edit, and inspect nodes, variables, components, and auto-layout. Pairs with design-system screen workflows for implementing designs in Figma.
Figma Generate Design
Build full pages, modals, and multi-section views in Figma from code or descriptions using design system components, variables, and styles. Pairs with Figma Use and Figma MCP.
Design Handoff
Generate developer handoff specs from a design: layout, tokens, component props, states, responsive breakpoints, edge cases, animations, and accessibility.
Wireframe Prototyping
Low-fidelity wireframes and HTML prototypes: layout patterns, component templates, tooling choices, and prototype testing flows for fast UX validation before visual polish.
Validate & critique
Validate with users and run structured design reviews.
User Research
Plan, conduct, and synthesize user research: method selection, interview guide structure, affinity mapping, journey mapping, and deliverables from research plans to synthesis reports.
Usability Testing
Plan and run usability tests with Lenny-style rigor: task design, moderation, synthesis, and guest-insight patterns for turning observations into product recommendations.
Design Critique
Structured framework for giving and receiving design feedback. Covers critique formats, feedback types, and facilitation guidelines.
UX Writing
Write effective microcopy: button labels, error messages, empty states, onboarding, and tooltips that guide users through your interface.
Ship accessible UI
Bake in WCAG checks and design-system thinking from the start.
Accessibility Expert
Build inclusive interfaces with WCAG compliance, screen reader support, keyboard navigation, and inclusive design patterns.
WCAG Accessibility
Audit and improve web accessibility with WCAG 2.2 POUR principles, contrast tables, keyboard and focus guidance, form labels, ARIA patterns, and Lighthouse or axe testing checklists.
AI Native Product Designer
End-to-end product design with LLMs first, AI code tools for interactive prototypes, and Figma for systems and polish. Includes when to use it, default response shape, terminology (Native level vs AI native role), quick reference, self-check, and a full appendix rubric (clusters, cross-functional, frontier, role comparison). Example hiring bar: Ramp Product Designer.
Grow your career
Portfolio, interviews, LinkedIn, and resume polish for design roles.
Resume ATS Optimizer
Optimize resumes for Applicant Tracking Systems: parse formatting issues, extract job-description keywords, calculate match scores, and suggest placements with before/after examples. Includes industry guidance for tech, finance, healthcare, and marketing, plus career changers and recent graduates.
Interview Prep Generator
Generate STAR stories, practice questions, and talking points from a resume. Behavioral interview prep with role-specific prompts and answer frameworks.
LinkedIn Profile Optimizer
Optimize LinkedIn profiles for recruiter search, headline and summary rewrites, keyword placement, and engagement patterns without inflating or misrepresenting experience.
Grill Me
Relentless interviewing skill that stress-tests plans and designs through systematic questioning. Walks each branch of the design tree one decision at a time, with recommended answers and codebase exploration when context is available.
Related on AI UX Playground
Frequently asked questions
What are agent skills for designers?
Agent skills are SKILL.md files that encode design workflows (accessibility checks, UX writing rules, critique frameworks, Figma MCP patterns, and UI polish) so your coding agent applies them when building or reviewing interfaces.
Best agent skills for UX designers in Cursor?
Start with Accessibility Expert, Frontend Design, and Web Interface Guidelines for shipped UI. Add Figma Use and Figma Generate Design if you work across Figma and code. UX Writing and Design Critique help on copy and review loops.
Skills vs prompts: which should designers use?
Use skills in Cursor or Claude Code for work that repeats in your codebase. Use prompts from our catalog for one-off tasks in ChatGPT or Claude chat, like research synthesis, workshop plans, or stakeholder emails.
Do these skills work with Claude Code and VS Code?
Yes. SKILL.md is an open standard. Install paths differ by tool (.cursor/skills/, .claude/skills/, or npx skills add). Each skill page includes source links and install guidance.