Skills MCP Plugins Subagents

Browse by category

DevOps & CI/CD Skills Productivity & Workflow Skills Other Skills Product & Project Management Skills Documentation & Knowledge Skills Code Review & Refactor Skills Backend & APIs Skills Agent Meta & Communication Skills Research Skills Security Skills UX UI & Design Skills Testing & QA Skills See all →

Every Claude Code skill, MCP server, plugin and subagent in one directory. Searchable, comparable, and one command from installed. Live stats from GitHub, npm and PyPI.

We're on Product HuntYour agent's app storeCheck it out →

Agent Skills MCP Servers Plugins Subagents Coding Agents

Collections Official publishers Glossary FAQ Blog Search Saved Feedback

Privacy Terms llms.txt Sitemap

made with ♥ · © 2026 aaaa.fyi

Independent project · real data from public registries

home/skills/ux ui & design

home/skills/ux ui & design

UX UI & Design Skills

2699 ux ui & design agent skills for Claude Code and AI agents, ranked by real installs from npm, PyPI and skills.sh. web-design-guidelines leads with 498k installs a month.

#Type

1web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…SkillsJul 2026498k29k
2prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a…SkillsJul 2026446k189k
3lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。SkillsJul 2026389k16k
4ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX…SkillsJul 2026290k110k
5design-guidePaperclip UI design system guide for building consistent, reusable frontend components.SkillsJul 2026243k7
6impeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…SkillsJul 2026211k50k
7gpt-tasteskillElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial…SkillsJul 2026190k68k
8design-an-interfaceGenerate multiple radically different interface designs for a module using parallel sub-agents.SkillsJul 2026188k189k
9brandkitPremium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations.SkillsJul 2026181k68k
10emil-design-engThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.SkillsJul 2026169k21k
11extract-design-systemExtract design primitives from a public website and generate starter token files for your project.SkillsJul 2026126k146
12canvas-designCreate beautiful visual art in .png and .pdf documents using design philosophy.SkillsJul 202692k164k
13site-architectureWhen the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking.SkillsJul 202684k42k
14theme-factoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc.SkillsJul 202672k164k
15brand-guidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.SkillsJul 202671k164k
16design-mdAnalyze Stitch projects and synthesize a semantic design system into DESIGN.md filesSkillsJul 202656k7.8k
17animation-vocabularyReverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop…SkillsJul 202653k21k
18enhance-promptTransforms vague UI ideas into polished, Stitch-optimized prompts.SkillsJul 202651k7.8k
19apple-designApple's approach to interface design and fluid, physical motion, translated for the web.SkillsJul 202644k21k
20huashu-design花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web…SkillsJul 202640k22k
21accessibilityAudit and improve web accessibility following WCAG 2.2 guidelines.SkillsJun 202640k2.5k
22improve-animationsSurvey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other…SkillsJul 202637k21k
23valueskill does absolutely nothing, as well as the agent that uses it.SkillsJun 202636k3
24brand-landingpageBrand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing…SkillsJul 202632k38k
25firecrawl-website-design-cloneExtract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence.SkillsJun 202630k100
26hallmarkAnti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots.SkillsJun 202630k19k
27firecrawl-demo-walkthroughWalk through a product's key flows with Firecrawl browser and produce a structured UX/product walkthrough.SkillsJun 202629k100
28landing-page-designLanding page conversion optimization with layout rules, hero section design, and CTA psychology.SkillsJul 202628k656
29app-store-screenshotsApp Store and Google Play screenshot creation with exact platform specs. Covers iOS/Android dimensions, gallery ordering, device mockups, and preview videos.SkillsJul 202628k656
30character-design-sheetCharacter consistency across AI-generated images with reference sheets and LoRA techniques.SkillsJul 202628k656
31youtube-thumbnail-designYouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization.SkillsJul 202628k656
32storyboard-creationFilm and video storyboarding with shot vocabulary, continuity rules, and panel layout.SkillsJul 202628k656
33flutter-add-widget-previewAdds interactive widget previews to the project using the previews.dart system.SkillsJul 202622k2.7k
34baseline-uiQuickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.SkillsJul 202617k6.6k
35fixing-accessibilityAudit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors.SkillsJul 202616k6.6k
36web-access所有联网操作必须通过此 skill 处理，包括：搜索、网页抓取、登录后操作、网络交互等。触发场景：用户要求搜索信息、查看网页内容、访问需要登录的网站、操作网页界面、抓取社交媒体内容（小红书、微博、推特等）、读取动态渲染页面、以及任何需要真实浏览器环境的网络任务。SkillsMay 202615k8.5k
37taste-designSemantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography,…SkillsJul 202615k7.8k
38design-systemToken architecture, component specifications, and slide generation.SkillsJul 202613k110k
39baoyu-diagramCreate professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines,…SkillsJul 202612k24k
40designComprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP…SkillsJul 202612k110k
41wcag-audit-patternsConduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.SkillsJul 20269.7k38k
42expo-uiFramework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in an Expo or React Native…SkillsJul 20269.6k2.3k
43tailwind-4-docsComprehensive Tailwind CSS v4 documentation snapshot and workflow guidance.SkillsApr 20268.5k59
44building-componentsGuide for building modern, accessible, and composable UI components.SkillsJul 20268.4k783
45screen-reader-testingTest web applications with screen readers including VoiceOver, NVDA, and JAWS.SkillsJul 20268.3k38k
46ui-animationDesigns, implements, reviews, debugs, and reverse-engineers UI motion: CSS transitions, keyframes, springs, gestures, drag, easing, timing, framer-motion, and…SkillsJul 20267.6k71
47drawioCreate, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org…SkillsJul 20266.8k264
48motion-designApplies motion design principles to create emotionally-driven, technically sound animations and transitions.SkillsMay 20266.1k807
49archifyCreate polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light…SkillsJul 20265.9k7.8k
50figma-use**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.SkillsJul 20265.6k1.8k
51refactoring-uiAudit and fix visual hierarchy, spacing, color, and depth in web UIs.SkillsJul 20265.5k1.8k
52expo-native-uiFramework (OSS). Build beautiful, native-feeling Expo screens.SkillsJul 20265.3k2.3k
53argent-lensPropose multiple visual design variants for on-screen elements and let the human pick in the Argent Lens window.SkillsJul 20265.1k1.8k
54ios-hig-designDesign native iOS interfaces following Apple Human Interface Guidelines.SkillsJul 20264.6k1.8k
55figma-implement-designTranslates Figma designs into production-ready application code with 1:1 visual fidelity.SkillsJul 20264.5k24k
56top-designCreate award-winning, immersive web experiences at the level of Awwwards-featured agencies.SkillsJul 20264.5k1.8k
57figmaUse the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code.SkillsJul 20264.2k24k
58design-reviewRun a structured design critique against the brief and codebase. Checks visual hierarchy, consistency, responsiveness, accessibility, and aesthetic fidelity.SkillsJul 20264.1k463
59figma-generate-designUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma.SkillsJul 20264.0k1.8k
60grill-meInterview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree.SkillsJul 20264.0k463
61chart-designerDesign effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.SkillsJan 20264.0k339
62hooked-uxDesign habit-forming product loops using the Hook Model (Trigger, Action, Variable Reward, Investment).SkillsJul 20263.9k1.8k
63marp-slideCreate professional Marp presentation slides with 7 beautiful themes (default, minimal, colorful, dark, gradient, tech, business).SkillsMar 20263.9k2.2k
64design-flowRun the full design-to-build workflow as a guided sequence. Orchestrates all designer skills in order, from grilling through review.SkillsJul 20263.9k463
65design-briefCreate a design brief through an interactive interview, codebase exploration, and experience design decisions. Saved as a markdown file in the project.SkillsJul 20263.9k463
66microinteractionsDesign the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones.SkillsJul 20263.9k1.8k
67web-design-engineerBuild or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI…SkillsJul 20263.9k9.9k
68brief-to-tasksBreak a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist.SkillsJul 20263.8k463
693d-web-experienceExpert in building 3D experiences for the web - Three.js, ReactSkillsJul 20263.7k44k
70web-researchSearches multiple web sources, synthesizes findings, and produces cited research reports using delegated subagents.SkillsJul 20263.5k27k
71baoyu-designCreate polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps,…SkillsJul 20263.5k2.9k
72design-critiqueGet structured design feedback on usability, hierarchy, and consistency.SkillsJul 20263.4k23k
73improve-retentionDiagnose and fix retention problems using behavior design (B=MAP).SkillsJul 20263.4k1.8k
74lean-uxApply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables.SkillsJul 20263.4k1.8k
75design-everyday-thingsApply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models.SkillsJul 20263.4k1.8k
76better-uiDesign engineering principles for making interfaces feel polished.SkillsJul 20263.4k960
77architectureCreate layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts.SkillsMay 20263.3k3.1k
78better-typographyWeb typography from choosing fonts to spacing, wrapping and accessibility.SkillsJul 20263.2k960
79better-colorsOKLCH color space and color usage for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, theme with…SkillsJul 20263.1k960
80ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.SkillsJul 20263.0k23k
81frontend-designCreate distinctive, production-grade frontend interfaces with high design quality.SkillsJul 20263.0k78k
82canvasCreate spatial diagrams with free-positioned nodes using JSON format.SkillsMay 20263.0k3.1k
83design-systemAudit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a…SkillsJul 20262.9k23k
84accessibility-reviewRun a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design…SkillsJul 20262.8k23k
85figma-generate-libraryBuild or update a professional-grade design system in Figma from a codebase.SkillsJul 20262.7k1.8k
86color-paletteGenerate complete, accessible colour palettes from a single brand hex.SkillsJul 20262.7k944
87ads-landingAudit paid-ad landing pages for message match, mobile experience, performance, accessibility, trust, forms, consent, tracking, security, and conversion…SkillsJul 20262.6k7.6k
88design-isAudit a design against Dieter Rams' ten "Good design is..." principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine…SkillsJul 20262.5k89k
89design-handoffGenerate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component…SkillsJul 20262.5k23k
90screenshot-optimizationWhen the user wants to design, optimize, or evaluate App Store screenshots and preview videos.SkillsJul 20262.4k1.7k
91wpdsUse when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.SkillsJul 20262.4k1.9k
92kibana-dashboardsCreate and manage Kibana Dashboards and visualizations. Use when you need to define dashboards and visualizations declaratively, version control them, or…SkillsJul 20262.4k542
93figma-create-new-file**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call.SkillsJul 20262.3k1.8k
94design-systems-slds-applyApply SLDS-compliant UI using the correct blueprints, styling hooks, utility classes, and icons.SkillsJul 20262.3k765
95figma-code-connectCreates and maintains Figma Code Connect template files that map Figma components to code snippets.SkillsJul 20262.2k1.8k
96accessibilityPrimary accessibility skill for VS Code. REQUIRED for new feature and contribution work, and also applies to updates of existing UI.SkillsJul 20262.2k188k
97kibana-vegaCreate Vega and Vega-Lite visualizations with ES|QL data sources in Kibana.SkillsJul 20262.1k542
98ui-skills-rootUse before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.SkillsJul 20262.1k6.6k
99ux-auditWalk through a live web app AS a real user to find usability + behavioural bugs that static reviews miss.SkillsJul 20262.1k944
100asc-screenshot-resizeResize and validate App Store screenshots with current asc screenshot-size data and macOS sips.SkillsJul 20262.1k934

More skills categories

DevOps & CI/CD5519 Productivity & Workflow5248 Other4998 Product & Project Management4964 Documentation & Knowledge4545 Code Review & Refactor4435 Backend & APIs4325 Agent Meta & Communication3318 Research3084 Security2954 All Skills →