Design and UX skills

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

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

SVG mapmaker

433

1A7432/loreweaver

Skill Claude Code

Enable to let the Keeper draw simple player-visible SVG handout maps: location maps, room hierarchy diagrams, clue-route sketches, and relationship/area structures with labels.

not rated 53 +4 7d ago A SkillSpector: pass 37 tokens original MIT

impeccable

434

MaxQian888/cognia-next

Skill Codex

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…

not rated 53 today A 187 tokens AGPL-3.0

omniverse-ui-apis

435

NVIDIA-Omniverse/ovui

Skill Claude CodeCodex

Use when creating, modifying, inspecting, or reasoning about ovui UI from low-level atomic ovui widgets, including layout, Pixel/Percent/Fraction sizing, model-view widgets, TreeView/stage hierarchy trees, inputs, menus, windows, docking, viewport-like ovrtx panels, styling, or strict UI validation. Use when an agent…

not rated 52 8d ago A 125 tokens

refine-canvas-strokes

436

machaomc/refine-canvas-strokes

Skill Codex

Design, implement, review, or troubleshoot safe refinement of editable 2D canvas strokes. Use for handwriting smoothing, automatic text layout cleanup, optional font-guided handwriting normalization, freehand cleanup, geometric shape snapping, diagram cleanup, stroke-style normalization, semantic stroke replacement…

not rated 51 1mo ago A SkillSpector: pass 108 tokens original Apache-2.0

Design

437

frhscopex/design-skill-os

Skill Cursor

A comprehensive design operating system synthesized from 10 canonical design books. Covers research, typography, color theory, composition, branding, logo design, storytelling, web design, creative process, and professional practice.

not rated 51 +1 4mo ago A 42 tokens original MIT

uiNerd16/aicanvas

Skill Claude CodeCodex

Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Use when reviewing UI animations, transitions, hover states, or any motion design work. Provides per-designer perspectives with context-aware weighting.

not rated 51 6d ago A SkillSpector: pass 60 tokens original MIT

sap-fiori-ios

439

SAP/ai-skills-library

Skill Claude CodeCodex ✓ vendor

SAP Fiori for iOS Design Skill — Converts Figma designs from the Fiori iOS UI Kit into SwiftUI prototypes with animations and interactions. Use this skill when a designer provides a Figma node ID or component name and wants working SwiftUI code, when asking which Fiori iOS component to use, when mapping Figma variants…

not rated 51 +2 1mo ago A SkillSpector: pass 140 tokens original Apache-2.0

pfd-generator

440

ScottDuncanAI/claude-manufacturing-skills

Skill Claude CodeCodex

Generate a conceptual PFD (process flow diagram) as an editable SVG, along with the Python script that produced it. Use when the user describes a process and asks to draw, diagram, sketch, or visualize it; when they mention a P&ID, PFD, control loop drawing, or cascade control; or when they ask to edit an existing…

not rated 51 +1 1mo ago A SkillSpector: warn 106 tokens original MIT

natdexterra/work-with-design-systems

Skill Claude CodeCodex

Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured…

not rated 50 changed 4d ago C 260 tokens original MIT

drawio

442

jonathan-vella/apex-accelerator

Skill Claude CodeCodex

WORKFLOW SKILL — Generate Azure architecture diagrams in .drawio via simonkurtz-MSFT MCP server (full Azure icon set, batch creation, transactional mode). Covers architecture, dependency, runtime-flow, and as-built diagrams. WHEN: 'draw.io diagram', 'Azure architecture diagram', 'as-built diagram', 'runtime flow…

not rated 50 5d ago A SkillSpector: pass 99 tokens original MIT

next-slide

443

codesstar/next-slide

Skill Claude CodeCodex

A tool for creating browser-based presentations as single HTML files, or converting PowerPoint files into them. It includes bilingual English and Chinese support and a library of visual styles.

not rated 50 4mo ago A 260 tokens original MIT

accessibility

444

mwd1234/ios-agentic-skills

Skill Claude CodeCodex

Comprehensive SwiftUI accessibility audit against Apple HIG. Checks VoiceOver labels, Reduce Motion, Dynamic Type, color contrast, and accessible controls. Use before App Store submission or when adding new UI.

not rated 50 7mo ago A 43 tokens original MIT

draw

445

agavra/yuzudraw

Skill Claude Code

Create YuzuDraw diagrams by choosing the right family and following a short reference for architecture, components, flow, bar charts, or ASCII art.

not rated 50 5mo ago C 30 tokens original MIT

ai-to-figma

446

Niall-Young/AItoFigma

Skill Codex

Plan web or iOS mobile interfaces from screenshots, Figma frame references, or a product brief; generate and explicitly approve full-screen visual previews for adaptation and independent design; rebuild approved directions as capture-safe static HTML with official assets; and push editable layers into Figma Design…

not rated 50 21d ago A SkillSpector: pass 94 tokens original MIT

design-taste

447

h3nryprod01/design-taste

Skill Claude CodeCodex

Elite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI — landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states — or asks to make something look better…

not rated 50 +5 1mo ago A 127 tokens original MIT

visual-spec

448

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

449

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

450

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

kevintsai1202/teaching-site-skills

Skill Claude CodeCodex needs its repo

A visual design guide for teaching websites and content-focused single-page apps. It defines choices such as colours, fonts, spacing, cards, badges, hero sections, and dark mode.

not rated 50 +1 3mo ago A 181 tokens original MIT

ui-refactor

452

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

453

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

454

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

455

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 +5 3mo ago A 93 tokens original MIT

building-native-ui

456

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

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: