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.
- UX DesignFrontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Avoid generic "AI slop" aesthetics with bold typography, color, and spatial composition.
Anthropic45.5k - UX DesignDesign EngineeringEmil Kowalski's design engineering skill: UI polish, animation decisions, component patterns, and the invisible details that make interfaces feel right.
Emil Kowalski1.5k - EngineeringWeb Artifacts BuilderBuild elaborate, multi-component React artifacts with Tailwind CSS and shadcn/ui. Full stack for creating production-ready web components and applications.Anthropic45.5k
- UX DesignWeb Design GuidelinesAudit UI code against Vercel Web Interface Guidelines for design and accessibility compliance. Fetches the latest rules before each review and outputs terse file:line findings.
Vercel28k - UX DesignSleek Design Mobile AppsDesign mobile app screens with Sleek via REST API, describe UIs in plain language, iterate on screens, and deliver screenshots from agent workflows.
sleekdotdesign422 - UX DesignApple HIG DesignerDesign iOS apps to Apple's Human Interface Guidelines: native components, San Francisco typography, semantic colors, spacing, and accessibility.
jamesrochabrun201 - UX DesignApple UI DesignerRedesign mobile UI to feel native iOS: Apple HIG, SF Pro typography, translucency, and system-like components.
heyman33327 - UX DesignAndroid Design GuidelinesMaterial Design 3 and Android platform guidelines for Jetpack Compose or XML: Material You, navigation, dynamic color, and accessibility.
ehmo494 - UX DesignMobile Android DesignMaterial Design 3 and Jetpack Compose patterns for native Android interfaces that follow Google platform guidelines.
wshobson39k - Visual DesignDesign Motion PrinciplesMotion 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.
kylezantos2.9k - Design SystemsUI/UX Pro MaxComprehensive 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.
nextlevelbuilder4.1k - UX DesignDesign an InterfaceGenerate multiple radically different interface designs for a module using parallel exploration, then compare. Based on "Design It Twice" from A Philosophy of Software Design.
mattpocock144.9k - UX DesignDesign Taste FrontendPremium frontend design taste: anti-AI-slop patterns, semantic design language, typography, spacing, and responsive constraints for web UI.
leonxlnx17.4k - Visual DesignHigh-End Visual DesignPremium visual design direction: cinematic layouts, editorial typography, intentional color, and luxury-grade UI aesthetics without generic AI patterns.leonxlnx17.4k
- UX DesignRedesign Existing ProjectsAudit and redesign existing AI-generated or bland UIs in place: hierarchy, typography, color, spacing, and component polish without starting over.leonxlnx17.4k
- UX DesignMinimalist UIMinimalist interface design: restrained typography, generous whitespace, subtle hierarchy, and intentional simplicity for premium product UI.leonxlnx17.4k
- UX DesignIndustrial Brutalist UISwiss industrial print and tactical telemetry UI: rigid grids, extreme type contrast, utilitarian color, and analog degradation effects.leonxlnx17.4k
- UX DesignGPT TasteStrict anti-slop frontend and GSAP motion rules: layout variance, wide editorial type, gapless bento grids, and cinematic scroll.leonxlnx17.4k
- UX DesignImpeccableDesign, critique, audit, and polish frontend UI: hierarchy, accessibility, motion, typography, spacing, theming, and live browser iteration.
pbakaus3.2k - UX DesignBetter UIDesign-engineering polish for interfaces: surfaces, shadows, icons, micro-interactions, and motion restraint that make UI feel intentional.
Jakub Krehel - Visual DesignBetter TypographyWeb typography craft: font choice and pairing, type scales, wrapping, OpenType features, and component text details.Jakub Krehel
- Visual DesignBetter ColorsOKLCH color systems for the web: palette generation, contrast, gamut, semantic tokens, and light/dark theming.Jakub Krehel
- UX DesignBetter LayoutLayout structure for web UI: grouping, spacing, reading order, progressive disclosure, breakpoints, and RTL-aware layout.Jakub Krehel
- Visual DesignAI Image GenerationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, and 50+ models via inference.sh. Text-to-image, inpainting, LoRA, upscaling, and marketing visuals.
halt-catch-fire1.2k - Visual DesignImagegen Frontend WebGenerate web UI visuals and frontend-ready image assets tuned for landing pages, product screens, and marketing surfaces.leonxlnx17.4k
- UX DesignImagegen Frontend MobileGenerate premium mobile app screen concepts and flows as images only—readable type, coherent multi-screen sets, phone mockup framing.leonxlnx17.4k
- ProductPrototypeBuild a throwaway prototype to answer a design question: sanity-check state models, logic, or UI shape before committing to a full spec or implementation.mattpocock144.9k
- UX DesignApple DesignApple's fluid interface approach for the web: gesture-driven UI, spring motion, interruptible transitions, translucent materials, depth, and restrained typography.Emil Kowalski1.5k
- UX DesignBreak UIEmil Kowalski's adversarial skill: feeds a component realistic worst-case data (long names, unbreakable emails, missing fields, counts of 1, empty lists, non-Latin text) behind a Demo / Worst case toggle, then reports every break with its fix.Emil Kowalski
Build design systems
Tokens, DESIGN.md contracts, and Tailwind patterns your agent can reuse.
- Design SystemsStitch DESIGN.mdAnalyze 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.
google-labs-code4k - Design SystemsTailwind Design SystemBuild scalable design systems with Tailwind CSS v4: CSS-first tokens, OKLCH theming, CVA components, dark mode, and v3-to-v4 migration patterns.wshobson35.7k
- Design SystemsTaste DesignGenerate premium, non-generic DESIGN.md guidelines for Stitch with strict anti-pattern bans, semantic design language, and responsive/motion constraints.google-labs-code5.1k
- Design SystemsExtract Design SystemReverse-engineer design tokens from public websites into starter token files, colors, typography, spacing, radius, and shadows via Playwright extraction.
arvindrk65 - UX DesignDesign Taste FrontendPremium frontend design taste: anti-AI-slop patterns, semantic design language, typography, spacing, and responsive constraints for web UI.leonxlnx17.4k
- Design SystemsMaterial 3Google Material Design 3 (Material You): tokens, components, adaptive layout, theming, and accessibility—primarily Jetpack Compose Material3.
hamen1.3k
Hand off to code
Move from design files to implementation with MCP and clear specs.
- UX DesignFigma UseMandatory 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.
Figma3.3k - UX DesignFigma Generate DesignBuild 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.Figma3.3k
- UX DesignDesign HandoffGenerate developer handoff specs from a design: layout, tokens, component props, states, responsive breakpoints, edge cases, animations, and accessibility.Anthropic12.4k
- UX DesignWireframe PrototypingLow-fidelity wireframes and HTML prototypes: layout patterns, component templates, tooling choices, and prototype testing flows for fast UX validation before visual polish.
aj-geddes974 - UX DesignImage to CodeConvert screenshots, mockups, and visual references into production-ready frontend code with design-faithful layout, typography, and component structure.leonxlnx17.4k
Work in Figma Agent
Canvas skills for Figma Agent and Figma Make: critique, polish, responsive, states, type, and shaders.
- UX DesignBetter InterfaceFigma Agent skill that reviews a screen across UI polish, accessibility, layout, typography, and writing, then pins findings as cards beside the frame. Use when critiquing or polishing work on canvas — distinct from the Cursor Better UI skill.Jakub Krehel
- UX DesignSuperfuture Design ReviewPrioritized Figma Agent critique covering hierarchy, type, spacing, contrast, motion, states, responsiveness, and accessibility. Returns blocking / important / polish findings with a specific fix for each.Joey Primiani
- UX DesignDesktop to MobileCreates a 390px mobile version of a selected desktop frame: stacking, nav transforms, type scaling, touch targets, and content priority. Does not shrink the desktop layout.Sianotte
- Design SystemsSpacing AuditAudits a Figma layout against a 4/8pt spacing scale, reports off-grid padding and gaps, then snaps values to the nearest step. Use before handoff or when rhythm looks inconsistent.Tran Mau Tri Tam
- UX DesignUI State ExpanderExpands a happy-path screen into loading, empty, error, disabled, hover/focus, optimistic, partial-data, and recovery states, with transition logic engineers can build from.Figma Community
- Visual DesignMake a Type ScaleBuilds a type scale from selected text: modular ratios, 4/8px grid-snapped scales, or platform presets (Tailwind, Material 3, Apple HIG, IBM Carbon), then can create FLOAT variables and a specimen table on the canvas.Figma Community
- Visual DesignShader StarterGuides Figma Agent through building a shader fill or effect: recommend controls, optionally add a looping Phase slider for Figma Motion, then write main.ts, features.json, and a product brief.Miggi from Figgi
Motion & video
Animation, view transitions, and motion graphics for product UI.
- Visual DesignHyperframesCreate motion graphics, video compositions, and animated UI demos with Hyperframes. Covers GSAP, Lottie, Remotion bridges, and presentation-ready motion.
heygen-com890 - Visual DesignVercel React View TransitionsImplement view transitions in React and Next.js: shared element transitions, page animations, and motion that feels native on the web.Vercel28k
- Visual DesignDesign Motion PrinciplesMotion 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.kylezantos2.9k
- Visual DesignText to LottieGenerate production-ready Lottie (Bodymovin) JSON animations with a coding agent. Includes a Skia player for live preview, scene folder structure, controls/slots, and verification rules for renderable output.
Diffusion Studio3.5k - Visual DesignAnimateBuild animations from scratch in the order that determines craft: whether to animate, purpose, tool, properties, curve, duration, interruptibility, and exit.Emil Kowalski1.5k
- Visual DesignReview AnimationsReview animation and motion code against Emil Kowalski's design-engineering bar. Default to flagging; approval is earned.Emil Kowalski1.5k
- Visual DesignAnimation VocabularyTurn vague motion descriptions into precise animation terms so you can brief designers or prompt agents accurately.Emil Kowalski1.5k
- Visual DesignImprove AnimationsAudit motion in a codebase and produce prioritized, self-contained implementation plans. Read-only on product source.Emil Kowalski1.5k
- Visual DesignFind Animation OpportunitiesFind where motion would help—and reject where it would not. Restraint-first opportunity scan with exact motion recipes.Emil Kowalski1.5k
- UX DesignApple DesignApple's fluid interface approach for the web: gesture-driven UI, spring motion, interruptible transitions, translucent materials, depth, and restrained typography.Emil Kowalski1.5k
- Visual DesignScroll CraftBuilds premium scroll-driven landing pages: picks a page grammar, plans one emotional peak and a bespoke signature move, layers a dimensional hero, art-directs mobile separately, then verifies every scroll frame and contrast in a headless browser.
Nate Herk3k
Validate & critique
Validate with users and run structured design reviews.
- ProductUser ResearchPlan, conduct, and synthesize user research: method selection, interview guide structure, affinity mapping, journey mapping, and deliverables from research plans to synthesis reports.Anthropic1.9k
- ProductUsability TestingPlan and run usability tests with Lenny-style rigor: task design, moderation, synthesis, and guest-insight patterns for turning observations into product recommendations.
refoundai1.4k - UX DesignDesign CritiqueStructured framework for giving and receiving design feedback. Covers critique formats, feedback types, and facilitation guidelines.
Brian5 - ContentUX WritingWrite effective microcopy: button labels, error messages, empty states, onboarding, and tooltips that guide users through your interface.Brian5
- ProductGrillingRelentless multi-round interviewing that maps a plan as a design tree: ask the whole frontier each round with recommended answers, then recompute as decisions settle.mattpocock144.9k
- EngineeringReview LoopIterative worker-reviewer cycle: do the work, spawn a critic subagent to score 1-10, revise until a quality gate is met. First drafts are never final.
2dmurali120
Ship accessible UI
Bake in WCAG checks and design-system thinking from the start.
- AccessibilityAccessibility ExpertBuild inclusive interfaces with WCAG compliance, screen reader support, keyboard navigation, and inclusive design patterns.Brian5
- AccessibilityWCAG AccessibilityAudit 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.
addyosmani2.1k - AccessibilityBetter AccessibilityAccessibility engineering for product UI: focus, keyboard support, ARIA, forms, hit areas, and reduced-motion patterns.Jakub Krehel
- UX DesignApple HIG DesignerDesign iOS apps to Apple's Human Interface Guidelines: native components, San Francisco typography, semantic colors, spacing, and accessibility.jamesrochabrun201
- UX DesignAI Native Product DesignerEnd-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.Brian5
Work in documents
Create and edit Word docs, PDFs, and specs your agent can produce as deliverables.
- ContentDOCXCreate, read, edit, and manipulate Word documents (.docx): formatting, tables of contents, tracked changes, comments, templates, and professional reports.Anthropic52k
- ContentPDFCreate, read, merge, split, and manipulate PDF files: forms, extraction, annotations, and document workflows for reports, contracts, and deliverables.Anthropic52k
- ContentDoc Co-AuthoringCo-author long-form documents with structured workflows: outlines, iterative drafting, stakeholder feedback loops, and polished final deliverables.Anthropic52k
Grow your career
Portfolio, interviews, LinkedIn, and resume polish for design roles.
- CareerResume ATS OptimizerOptimize 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.
paramchoudhary641 - CareerInterview Prep GeneratorGenerate STAR stories, practice questions, and talking points from a resume. Behavioral interview prep with role-specific prompts and answer frameworks.paramchoudhary1.8k
- CareerLeetCode TeacherInteractive technical interview prep: pattern-based coding challenges, progressive difficulty, and multi-language practice (Python, TypeScript, Kotlin, Swift).jamesrochabrun201
- CareerLinkedIn Profile OptimizerOptimize LinkedIn profiles for recruiter search, headline and summary rewrites, keyword placement, and engagement patterns without inflating or misrepresenting experience.paramchoudhary641
- CareerGrill MeRelentless 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.mattpocock144.9k
Beyond skills
Skills install into your agent. These guides, prompts, and frameworks show the rest of the stack.
- Skill vs promptWhen to install a skill vs paste a one-shot prompt.
- How to install an agent skillCursor, Claude Code, Codex, and VS Code folder paths.
- AI prompts for designersCopy-paste journey maps, IA, and critique when a skill is overkill.
- Figma to CursorHand design context to coding agents without losing fidelity.
- ChatGPT composer teardownStudy how a leading product structures tools in the input.
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. Full comparison: /guides/skill-vs-prompt. Install steps: /guides/how-to-install-an-agent-skill.
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.