Design and UX skills

13,328 tagged Design and UX, measured the same way as everything else here.

Browse within: design-system 166agentic-ai 157agentic 152ai-tools 131skills 128ai-design 112byok 106agent 102desktop-app 93coding-agents 91ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87

visual-spec

457

visual-req/visual-spec

Skill Claude CodeCodex

Analyzes raw requirements into visual specs and generates artifacts. Invoke when user runs /vspec:new for analysis or /vspec:verify for models and prototypes.

not rated 49 +1 5d ago A SkillSpector: pass 35 tokens original MIT

ux-wise-agent

458

marvinrez/ux-wise-agent

Skill Claude CodeCodex

Activate this skill for any UX, product design, or interaction design reasoning task. Use whenever the user asks for UX critique, design decisions, pattern recommendations, accessibility reviews, research methodology guidance, stakeholder communication strategy, AI/UX trade-off analysis, or dark pattern…

not rated 49 5mo ago A 164 tokens original MIT

draw-io

459

Sunwood-ai-labs/draw-io-skill

Skill Claude CodeCodex

Create, edit, export, and review draw.io diagrams. Use for native .drawio XML generation, PNG/SVG/PDF export, SVG overlap, border-overlap, label-intrusion, label-rect, short-terminal, text-contrast, text-emphasis, and text-overflow linting, layout adjustment, and AWS icon usage.

not rated 49 3mo ago A 74 tokens original MIT

ui-refactor

460

LovroPodobnik/refactoring-ui-skill

Skill Claude Code

Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.

not rated 49 +1 8mo ago A Socket: passSnyk: pass 61 tokens

getdesign

461

MohtashamMurshid/getdesign

Skill Claude CodeCodex

Turn any public URL into a production-grade 9-section design.md spec (colors, typography, components, layout, depth, motion, responsive, prompt guide) using the agent's own built-in tools — WebFetch, browser/screenshot, and file writes. Use when the user asks to "generate a design system from a URL", "extract brand…

not rated 49 +1 6d ago A Socket: passSnyk: warnSkillSpector: warn 132 tokens original MIT

pencilplaybook

462

stevembarclay/pencilplaybook

Skill Claude CodeCodex

PencilPlaybook is the UI Skills / Taste-Skill for Pencil.dev + Claude Code — a design playbook that gives Claude real perceptual psychology and senior-level guardrails so it stops producing averaged-out AI slop.

not rated 49 +2 5mo ago A 50 tokens original MIT

cad-automation

463

delancy827/cad-skills

Skill Claude CodeCodex

Guidance for automating computer-aided design (CAD), software used to create technical drawings and 3D models. It covers connecting to AutoCAD and compatible CAD programs, creating files offline, and handling drawings, layers, dimensions, blocks, and models.

not rated 49 +4 3mo ago A 93 tokens original MIT

building-native-ui

464

robinebers/skills

Skill Claude CodeCodex

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

not rated 48 +1 2mo ago A 31 tokens

ui-and-theme

465

pinebasedev/svelteflare

Skill Claude CodeCodex

Frontend/design system skill for the svelteflare monorepo. Use this whenever the user wants to build or modify UI — pages, sections, components, layouts, forms, cards, tables, dialogs, dashboards, or landing pages. Also invoke for anything theme-related: light/dark mode, custom colors, design tokens, typography, or…

not rated 47 1mo ago A SkillSpector: pass 159 tokens original MIT

mobile-android-design

466

xxxxxccc/devops-bot

Skill Claude CodeCodex

Build modern Android apps with Material Design 3 and Jetpack Compose, including theming, navigation, adaptive layouts, and accessibility. Use for Android UI tasks.

not rated 47 5mo ago A 37 tokens original MIT

brand-guidelines

467

mujez/claude-skills

Skill Claude CodeCodex

Brand identity and design system expert. Use when creating or enforcing brand consistency across UI, content, marketing materials, or code. Covers logo usage, typography, color systems, voice and tone, component design tokens, and brand governance. Activate when building new pages, writing copy, or reviewing designs…

not rated 47 7mo ago A 66 tokens original MIT

design-audit

468

Kappaemme-git/codex-design-audit-skill

Skill Codex

Evaluate website, web app, landing page, or frontend implementation quality with a structured design audit and scoring grid. Use when Codex is asked to review UI design, visual hierarchy, UX, responsiveness, accessibility, performance perception, copy clarity, frontend polish, or to produce a design/frontend…

not rated 47 4mo ago A 107 tokens original MIT

yub369302-cyber/gathered-scenes-zine-skill

Skill Codex

Transform a user-supplied photo into a vertical 3:5 Gathered Scenes Zine poster that anchors truthful photography inside a spacious source-derived abstract illustration field, aggressively compresses dense foliage and other micro-detail into a few large quiet forms, integrates one high-chroma hue as compositional…

not rated 47 +3 1mo ago A SkillSpector: pass 125 tokens original MIT

variant-design

470

YuqingNicole/variant-design-skill

Skill Claude CodeCodex

AI-driven interactive design generation, style analysis, and UX evaluation with Impeccable design system. Context-aware output — auto-detects React projects (package.json with react dependency) and generates .tsx components; otherwise generates zero-dependency interactive HTML. Seven modes — (0) Design System: tokens…

not rated 46 1mo ago A 607 tokens original MIT

indesign-cli

471

zhanglongxiao111/indesign-cli

Skill Codex

A guide for creating and editing fixed-page HTML layouts, InDesign presentations, architectural reports, and typeset documents. It also covers converting between HTML and InDesign files and filling existing InDesign templates.

not rated 46 +2 7d ago A SkillSpector: pass 55 tokens original MIT

slide-design

472

HarnessRouter/starter-kit

Skill Claude CodeCodex

How to plan and design presentation decks — content architecture first, then a deliberate style system, then slide-by-slide craft. Use for EVERY deck request, before touching any slide tool.

not rated 45 +4 14d ago A 39 tokens

dashboard-design

473

markerikson/opencode-config-example

Skill Claude CodeCodex

Design patterns for data-dense dashboard UIs with dark themes. Use when building tables, charts, status panels, and data visualization components. Focuses on readability, information density, and consistent design systems.

not rated 44 4mo ago A 44 tokens original MIT

streamdeck-designer

474

verygoodplugins/streamdeck-mcp

Skill Claude CodeCodex

Design, theme, and author complete Stream Deck layouts for the user's hardware using the streamdeck-mcp tools. Use whenever the user wants a custom Stream Deck setup, asks for a themed deck (e.g. "hello-kitty Twitch deck", "retrowave music controls", "a dev deck for this repo"), wants buttons or dials configured for…

not rated 43 +2 1mo ago A SkillSpector: warn 167 tokens original MIT

memi-design/memi

Skill Claude CodeCodex

Use when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi capability selected.

not rated 43 +3 changed 3d ago A SkillSpector: warn 51 tokens original MIT

clone-website

476

braxtonROSE4/clone-any-website

Skill Claude CodeCodex

Reverse-engineer and pixel-perfect clone any live website, a single landing page or an entire site. Captures DOM, CSS design tokens, assets, fonts, and compiled-JS config data from the live page, reverse-engineers scroll animations and stateful interactions, rebuilds (raw-HTML mirror for static-export sites like…

not rated 43 +3 1mo ago A 303 tokens

accessibility_testing

477

vuralserhat86/antigravity-agentic-skills

Skill Claude CodeCodex

Guide for conducting comprehensive accessibility audits of code to identify WCAG compliance issues and barriers to inclusive design. This skill should be used when reviewing accessibility, ARIA implementation, keyboard navigation, or screen reader compatibility.

not rated 42 8mo ago A 45 tokens

wuchubuzai2018/expert-skills-hub

Skill Claude CodeCodex

A design tool for creating the image materials used on WeChat red-envelope covers. It produces cover images, decorative attachments, speech-bubble attachments, and cover-story materials designed for WeChat’s submission rules.

not rated 42 12d ago A 97 tokens

motion-lexicon

479

Ryan-yang125/motion-lexicon

Skill Codex

Design, build, compose, implement, review, and contribute polished product interfaces with Motion Lexicon components and motion primitives. Use this skill when a user asks for a complete React page, landing page, dashboard, settings screen, or product surface in the Motion Lexicon visual language; asks what motion…

not rated 42 yesterday A SkillSpector: warn 157 tokens original MIT

hyperweave-verbs

480

InnerAura/hyperweave

Skill Claude CodeCodex

Read, verify, mutate, and round-trip HyperWeave living artifacts via the verb algebra instead of vision-parsing the SVG.

not rated 41 +3 10d ago A SkillSpector: pass 32 tokens original Apache-2.0

At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: