Design AI skills, agents & prompts
How it looks, and whether it works when someone uses it. 106 listings — 81 skills, 4 agents and 21 prompts — each free, credited to its author, with the full source on its page. Filter and sort them →
Interface design
Frontend designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps…ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden…Apple designApple's approach to interface design and fluid, physical motion, translated for the web. Use when building…Building AnimationsBuild an animation from scratch, making the decisions in the order that determines whether it feels right…BreakRenders a component you choose in every state and scenario on a temporary page and stress tests it.Change reviewReviews your work across multiple categories like UI, typography, layout, color, writing and accessibility…Design system extraction prompt kitThis prompt instructs Claude to crawl the entire codebase and extract every design-related token, pattern…Excel data to figma presentation designerTransform your weekly Excel data into a sleek, readable, and aesthetically pleasing Figma presentation format.Kickstart Prompt for Web UX & UI DesignA prompt to kick start a web design project. This prompt is the starting point for every design project in…Personal form builder app designDesign a personal form builder app similar to JotForm, focusing on ease of use, modularity, and customization.Website design recreator skillThis skill enables AI agents to recreate website designs based on user-uploaded image inspirations, ensuring…Design EngineeringThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the…Android Mobile DesignMaster Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing…Design system patternsBuild scalable design systems with design tokens, theming infrastructure, and component architecture…Interaction designDesign and implement microinteractions, motion design, transitions, and user feedback patterns. Use when…iOS Mobile DesignMaster iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing…UI design systemUI design system toolkit for Senior UI Designer including design token generation, component documentation…Design bridgeUse this agent when you need to translate a DESIGN.md from the VoltAgent/awesome-design-md repository into…UI designerUse this agent when designing visual interfaces, creating design systems, building component libraries, or…Interface explanationHelps you figure out how something was built on the web.Interface reviewCombines all of the better-* skills into a single review across accessibility, layout, writing, typography…Interface writingFocuses on improving product copy in your project.LayoutHelps with grouping, alignment, reading order, progressive disclosure and other details that make a good…UI polishPolishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface…VariantsBuilds multiple variants of a component you're working on and helps you iterate and pick one.Muapi UI designGenerate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates…Generative UI SkillDesign system and guidelines for Claude's built-in generative UI — the show_widget tool that renders…iOS Human Interface Guidelines Design SkillDesign native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone…Microinteractions FrameworkDesign the small details -- triggers, rules, feedback, loops and modes -- that separate good products from…Refactoring UI Design SystemAudit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI…Design System Audit SkillAudit a design system for consistency, coverage, and quality. Use when asked to audit a design system…Figma Annotation Guide SkillGenerate structured developer handoff annotations for a Figma screen or component. Use when asked to write…Figma Component Audit SkillAudit a Figma component library for consistency, coverage gaps, and naming issues. Use when asked to audit…Figma Design Brief SkillWrite a structured design brief for a Figma design task from a product requirement or feature request. Use…Figma Design QA SkillRuns a pre-handoff QA checklist on a Figma design before it goes to engineering. Use when asked to QA a…Figma Spacing System SkillDesign a spacing and layout token system for a Figma design system. Use when asked to create a spacing…Figma User Flow Planner SkillPlan user flows and screen states for a Figma design before any designing starts. Use when asked to plan a…Figma Variant Matrix SkillDefine component variants and states systematically for Figma. Use when asked to plan component variants…Design standardsApply production-grade design standards when building or reviewing pages, components, or UI. Use this skill…Design systemBuild or audit a design system including component library, design tokens, naming conventions, contribution…
User flows
Make UI/UX better of an already Created ApplicationGenerate a comprehensive, actionable development plan to enhance the existing web application.UX Researcher & DesignerUX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation…UI UX testerUse this agent when you need exhaustive UI and UX functionality testing driven by documented user flows…Improve an AppGuided journey from a shipped app that works but feels rough to a product that fits the job, flows without…Improve code qualityGuided journey from a working-but-untested vibe-coded prototype to a production-ready product with tests…UX Heuristics FrameworkPaste your page and tell us the one thing you want visitors to do. Get back a plain-language list of what's…UX Heuristics FrameworkEvaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability…Design Critique SkillGive structured, constructive feedback on any design using UX frameworks. Use when asked to critique a…Figma Prototype Plan SkillPlan prototype interactions and flows for user testing in Figma. Use when asked to plan a Figma prototype…UX Research Plan SkillCreate a structured UX research plan for any product question or feature. Use when asked to write a research…Usability testingPlan and run usability tests on existing or prototype designs including test design, task scripts…
Accessibility
Accessibility complianceImplement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive…Accessibility testerUse this agent when you need comprehensive accessibility testing, WCAG compliance verification, or…AccessibilityHelps your project comply with accessibility standards and best practices.Accessibility (a11y)Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve…Accessibility auditRun a comprehensive WCAG accessibility audit covering perceivable, operable, understandable, and robust…Web typographyGenerate production-grade CSS typography that follows professional typographic rules. Based on Butterick's…Frontend UI engineeringBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces…Pptx postersCreate and audit editable scientific posters in macro-free PowerPoint (.pptx) from author-approved local…Scientific visualizationCreate and audit truthful, accessible, publication-ready scientific figures with Matplotlib, Seaborn, or…Screen reader testingTest web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen…Visual design foundationsApply typography, color theory, spacing systems, and iconography principles to create cohesive visual…Wcag audit patternsConduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance…Accessibility AuditAccessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across…Apple hig expertAudits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines…Design System — Onboarding + Shared Brand TokensCaptures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading +…ColorsHelps you build a color system and answer anything about color in your project. You can generate palettes…TypographyFocuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other…Accessibility Audit SkillGenerate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when…Color Correction (measure, don't eyeball)Diagnose and fix video/image color OBJECTIVELY with the get_image (action:"analyze_color") tool…
Graphics & banners
Banner Design - Multi-Format Creative Banner SystemTell us what your banner is for and what it should say, and get back polished, ready-to-post cover and ad…Paper Poster (HTML): measurement-gated poster generationDEFAULT poster pipeline — build an academic conference poster (ICML/NeurIPS/ICLR/CVPR/...) as a single…Car poster${primary_text:Megane}{ "category": "STUDIO_RACE_CAR_SIDE_PROFILE", "subject": { "vehicle_type": "GT…Create a cultural superhero movie posterDesigns an ultra-realistic cinematic movie poster featuring a superhero from a specific culture or country…Custom logo design for websiteCreate a custom logo for your website with specific design elements and style preferences.Floating city island photoreal 4k posterSquare 1×1 photoreal poster of a floating island shaped like the city’s silhouette above white clouds. Blend…High contrast stencil vector poster illustrationCreate a high-contrast vector poster illustration from an uploaded portrait, featuring a bold stencil…Hollywood posterA premium theatrical crime-thriller posterInterstellar movie poster illustrationCreate an artistic illustration inspired by the movie Interstellar. The prompt involves designing a…Lost in [Country] with ChatGPT Image 2Create a stylized travel poster / graphic collage for ${country}.Minimalist fisherman illustrationCreate a minimalist vector illustration of a man fishing on the back of a giant whale, emphasizing themes of…Minimalist landscape illustration by ryo takemasaThis prompt guides you to create a minimalist digital illustration inspired by Ryo Takemasa. The…Ocean’s Eleven Movie Poster IllustrationCreate a cinematic and highly detailed illustration of a Las Vegas casino heist at night. The image captures…Travel poster"artstyle": "Modern Flat Vector Illustration",Graphic designerCreate LinkedIn post graphics. Decides between an HTML/CSS structured graphic or an AI-generated infographic…Create Goose Graphics FormatCreates a new graphics format spec (custom canvas dimensions + content rules) and publishes it to the…Social kitEnd-to-end composite that turns a single brief into voice-tuned X post variants, LinkedIn post variants, and…Art directionDirect visual and creative work for campaigns, photography, illustration, video, and branded experiences…
Decks & layouts
AstrologerCustom astrologer built in Gemini Gems. Pulls further data from specific websites for a more tailored…Investor pitch presentationAct as a business founder delivering a live pitch deck presentation to investors. Your goal is to engage the…Markdown and Mermaid WritingComprehensive markdown and Mermaid diagram writing skill. Use when creating any scientific document, report…Scientific slidesBuild slide decks and presentations for research talks. Use this for making PowerPoint slides, conference…/em:board-prep — Board Meeting PreparationBoard meeting preparation for the adversarial scenario, not the friendly one. Forces numbers-cold mastery…Board deck builderAssembles comprehensive board and investor update decks by pulling perspectives from all C-suite roles. Use…md-slides — Markdown deck → single-file HTML presentationConverts a markdown deck (slides separated by --- HR boundaries or by # H1 headings, with optional <!…Board Deck Narrative SkillBuild the storyline and slide structure for a board presentation. Use when asked to create a board deck…Clinical Case Summary SkillWrite a structured clinical case summary or case presentation. Use when asked to write a clinical case…Investor Pitch Deck SkillBuild the narrative and slide structure for an investor pitch deck. Use when asked to create a pitch deck…PPTX Slide Auditor SkillAudit a PowerPoint presentation for layout issues, text overflow, visual hierarchy problems, and consistency…QBR Deck SkillBuild a Quarterly Business Review (QBR) deck structure and narrative for a customer account. Use when asked…Pitch deck creationCreate professional investor pitch decks with structured content and visual design. Use when users need help…
Design critique
Brainstorming Ideas Into DesignsYou MUST use this before any creative work - creating features, building components, adding functionality…Brutal Design Review Of Your ProductDescribe your product or app and how customers use it; get back a blunt verdict with an exact list of what…Steve jobs design reviewReview designs, products, and features with Steve Jobs'' standards: ruthless simplicity, focus, and…Figma Design Critique — PM Perspective SkillRuns a PM-perspective design critique focused on product outcomes and user goals, not aesthetics. Use when…Figma Design Review SkillRuns a structured PM design review against product requirements. Use when asked to review a Figma design…