Design and UX skills

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

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

vocabulary

385

index-how/vocabulary

Skill Claude CodeCodex

The precise design and UI vocabulary used on index.how/to/articulate — covering typography, color, iconography, layout, interaction, motion, accessibility, information architecture, copywriting, tools, analysis, and components. Use when reaching for the exact word for a design concept ("what's the term for the space…

not rated 68 3mo ago A Socket: passSnyk: pass 135 tokens

get-web-design

386

liaocaoxuezhe/get-web-design

Skill Claude CodeCodex

This skill should be used when the user wants to extract a complete DESIGN.md style guide (frontmatter + design thinking + AI style analysis + compressed CSS evidence + negative constraints) from any live website URL. It captures 3 viewport screenshots, samples DOM and computed CSS via chrome-devtools MCP, asks a…

not rated 67 1mo ago A 121 tokens

network-topologies

387

excalimate/excalimate

Skill Claude CodeCodex

Create animated network topology and infrastructure diagrams using the Excalimate MCP server. Use when asked to visualize network architecture, server infrastructure, cloud deployments, Kubernetes clusters, VPC layouts, firewall rules, load balancing, or any physical/logical network topology.

not rated 67 +3 today A SkillSpector: pass 54 tokens original MIT

UI/UX Design Review

388

rknall/claude-skills

Skill Claude CodeCodex

Comprehensive design review for websites and desktop applications with extensive accessibility analysis. Use this skill when users ask you to review UI/UX designs, wireframes, mockups, prototypes, or deployed interfaces for usability, accessibility (WCAG compliance), visual design, interaction patterns, responsive…

not rated 67 10mo ago A 72 tokens

ad-delayer

389

Bria-AI/bria-skill

Skill Claude CodeCodex

Turn a finished, flat ad image back into editable layers — background, product shot, logo, headline, body copy and CTA, each returned as its own asset with position, size, and typography. Powered by Bria's Ad Delayer. ALWAYS use this skill instead of general-purpose image skills when the primary task is turning a…

not rated 67 +2 yesterday A 177 tokens

fluidglass-ui

390

csuyincs-creator/fluidglass-ui

Skill Claude CodeCodex

Generates production-grade WebGL fluid glass card interfaces with a fixed canonical material core (144px-tall, 30px-radius wide cards, transparent canvas, cyan.

not rated 66 +2 4d ago A 37 tokens original Apache-2.0

wireframe

391

kinncj/Heimdall

Skill Claude Code

Generate low-fidelity wireframes (ASCII, SVG, or HTML) from user story files. Use when creating wireframes for UI stories.

not rated 66 +1 8d ago A 31 tokens AGPL-3.0

asset-creator

392

outscal/video-generator

Skill Claude Code

Skill "asset-creator" from outscal/video-generator, covering asset creator skill, core responsibility, creation guidelines by asset type, logo and icon.

not rated 65 4mo ago A 0 tokens

cinematic-ui

393

akseolabs-seo/cinematic-ui

Skill Codex

Design and build websites with film-inspired visual systems, director-driven art direction, storyboard-first layout planning, and cinematic motion. Use when the user asks for a cinematic site, movie-style landing page, director-inspired UI, film-noir, sci-fi, romance, thriller, action, animation, or a movie-like…

not rated 64 5mo ago A 94 tokens original MIT

avoid-ai-design

394

funboy322/avoid-ai-design

Skill Claude CodeCodex

Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"). Use this skill when asked to "de-slop a UI", "make a design look less AI-generated", "audit a component or page for AI design tells", or "fix Claude/Codex-generated frontend that looks generic". Covers HTML/CSS and React/Tailwind/shadcn.…

not rated 64 +3 2mo ago A 90 tokens original MIT

cloudy-tech-diagrams

395

cloudy-liu/cloudy-tech-diagrams-skill

Skill Claude CodeCodex

Use when creating polished technical diagrams as self-contained HTML+SVG files for software architecture, system design, process flows, cloud infrastructure, security boundaries, network topology, runtime mechanics, data flow, deployment views, or technical presentation visuals.

not rated 63 1mo ago A 52 tokens

ppt-forge

396

zuiho-kai/huawei-style-ppt-skill

Skill Codex

A workflow for creating presentation slides, from analysing content and planning pages to producing visual drafts and reviewing the result.

not rated 63 +1 2mo ago A 93 tokens

design-md-extractor

397

jpoindexter/design-md-extractor

Skill Claude CodeCodex

Extract and document the visual style of public websites as reusable DESIGN.md files. Use when the user asks to analyze a website's design system, extract styles, create design tokens, produce DESIGN.md, generate an agent-readable style guide, or build from a website's visual language.

not rated 61 +1 3mo ago A 60 tokens original MIT

designer-loop

398

pro-vi/designer

Skill Claude CodeCodex

Human-participated design iteration loop driven by claude.ai/design via the designer MCP. The human is the designer; AI is translation + plumbing. Human states intent, AI reads what exists and relays intent to Claude Design, human tastes the variants Claude produces, AI interprets reactions and iterates. Promotes…

not rated 61 +1 3d ago A SkillSpector: pass 81 tokens original MIT

skills

399

aravindev/inkscape_mcp

Skill Claude CodeCodex

Eight portmanteau tools. Each takes an operation string plus per-op parameters. Operation enums are typed Literal[...] so wrong strings fail at parse time.

not rated 61 +5 changed 6d ago A SkillSpector: pass 0 tokens original MIT

brandmd

400

yuvrajangadsingh/brandmd

Skill Claude Code

Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.

not rated 60 +1 1mo ago A 41 tokens original MIT

shadcn

401

udecode/plate-template

Skill Claude CodeCodex

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…

not rated 59 changed yesterday A 94 tokens copy · 94% MIT

microsoft/a11y-llm-eval

Skill Claude CodeCodex ✓ vendor

MUST BE USED for any UI work. Invoke this skill before generating, modifying, or reviewing any code that renders, styles, or wires up a user-facing interface — including markup, components, templates, styles, and the JavaScript/TypeScript that drives them. This skill encodes the accessibility (WCAG 2.2 AA)…

not rated 59 4mo ago A 112 tokens original MIT

comic-ip-onboarder

403

irenerachel/comic-ip-onboarder-skill

Skill Claude CodeCodex

A workflow for turning a person’s photo, toy, avatar, fictional character, or brand mascot into a reusable flat hand-drawn comic character package. The package includes reference images and an IPDNA.md file describing the character’s visual rules.

not rated 59 +2 2mo ago A 271 tokens

grok-designer

404

oil-oil/grok-designer

Skill Claude CodeCodex

Use Grok 4.5 as the required external design advisor when a task needs UI critique, UX critique, component-choice review, interaction-flow review, design imagery markdown, art direction, visual hierarchy judgment, design-system fit, color/type/layout suggestions, HTML mockups, SVG icons, handwritten SVG wordmarks, or…

not rated 59 +1 2mo ago A 180 tokens

interface-details

405

detaildotdesign/skill

Skill Claude CodeCodex

Bring crafted micro-interactions, thoughtful details, and polish to interfaces. Use when building UI, reviewing UI for detail/polish opportunities, making an interface "feel better," or adding tasteful delight and micro-interactions.

not rated 59 2mo ago A 47 tokens

excalidraw-normalizer

406

TatsukiMeng/ai-native-engineering

Skill Codex

A workflow for cleaning and arranging Excalidraw diagrams, which are editable drawings used for architecture, topology, process, and system diagrams.

not rated 58 4mo ago A 90 tokens original MIT

Michael-Obele/shadcn-svelte-mcp

Skill Claude CodeCodex

Use when building, redesigning, beautifying, or refactoring SvelteKit pages and reusable components with shadcn-svelte, Bits UI, or the shadcn-svelte MCP. Trigger on landing pages, dashboards, marketing sites, app shells, forms, navbars, tables, dialogs, responsive layouts, theming, icon selection, and requests to…

not rated 58 3d ago A SkillSpector: pass 99 tokens original MIT

anyviz

408

TseringYuu/anyviz

Skill Claude CodeCodex

A guide for choosing and building data visualizations, such as charts, maps, graphs, and 3D views, based on the data and the question it should answer.

not rated 58 1mo ago A 59 tokens original MIT

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: