Topic · Image, Art and Design

UI and UX Design skills for Claude Code and Codex

Skills for interface and experience design: heuristics, wireframes, user flows, prototyping, visual hierarchy, usability tests and design critique.

Highest-scoring UI and UX design skills in the October 22, 2026 snapshot: impeccable from pbakaus/impeccable (86/100), ui-design from mblode/agent-skills (84/100) and ux-researcher-designer from infrasity-labs/dev-gtm-claude-skills (79/100). Scores come from the Suede Skill Check.

24 listed skills
8 repositories
4 with full pages

1 from official publishers. 3 bundle scripts. 1 connect to an outside service. Listed in Frontend and Design (18), Product Management (5), Writing and Editing (1).

All 24 UI and UX design skills

Skill	Repository	What it does
design 77/100 · C	ohad6k/emulo	Guides UI, UX, visual hierarchy, redesign, and design critique work so that it follows the user's Emulo taste.
impeccable 86/100 · B	pbakaus/impeccable	Guides frontend and native interface design through focused playbooks for hierarchy, typography, accessibility, responsive layouts, motion and UX copy.
ui-design 84/100 · B	mblode/agent-skills	Designs and builds React, Next, and Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data.
ux-researcher-designer 79/100 · C	infrasity-labs/dev-gtm-claude-skills	Supports UX research and design work, including persona generation, journey mapping, usability testing frameworks, and research synthesis.
aesthetic-usability 61/100 · D	infrasity-labs/dev-gtm-claude-skills	Apply the Aesthetic-Usability Effect — visually consistent, polished interfaces are perceived as more usable.
critique-visual-hierarchy 59/100 · D	infrasity-labs/dev-gtm-claude-skills	Critique a screen's visual hierarchy — entry point, eye flow, weight distribution, and emphasis.
design-critique 59/100 · D	infrasity-labs/dev-gtm-claude-skills	Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.
error-handling-ux 59/100 · D	infrasity-labs/dev-gtm-claude-skills	Design error prevention, detection, and recovery experiences.
hooked-ux 83/100 · B	wondelai/skills	Design habit-forming product loops using the Hook Model (Trigger, Action, Variable Reward, Investment). Use when the user mentions "users arent…
interface-design 75/100 · C	infrasity-labs/dev-gtm-claude-skills	Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when…
lean-ux 81/100 · B	wondelai/skills	Apply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user…
lean-ux-canvas 68/100 · D	deanpeters/Product-Manager-Skills	Guide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.
penpot-uiux-design 81/100 · B	github/awesome-copilot	Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web…
prototype-strategy 56/100 · D	infrasity-labs/dev-gtm-claude-skills	Choose the right prototyping fidelity and method for the design question.
refactoring-ui 81/100 · B	wondelai/skills	Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix…
search-ux 72/100 · C	infrasity-labs/dev-gtm-claude-skills	Design search experiences that help users find what they need, recover from failure, and refine results.
test-scenario 60/100 · D	infrasity-labs/dev-gtm-claude-skills	Generates structured usability test scenarios with realistic tasks, success criteria, and facilitation notes — ready to run with real participants…
ui-ux-pro-max 83/100 · B	nextlevelbuilder/ui-ux-pro-max-skill	UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces…
usability-test-plan 68/100 · D	infrasity-labs/dev-gtm-claude-skills	Design a usability test plan with tasks, success metrics, participant criteria, and facilitation guide. Use when planning moderated or unmoderated…
user-flow-diagram 59/100 · D	infrasity-labs/dev-gtm-claude-skills	Create user flow diagrams showing paths, decisions, and branch logic.
ux-heuristics 83/100 · B	wondelai/skills	Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form…
ux-writing 59/100 · D	infrasity-labs/dev-gtm-claude-skills	Write effective UI copy including microcopy, error messages, empty states, and CTAs.
visual-hierarchy 59/100 · D	infrasity-labs/dev-gtm-claude-skills	Establish clear visual hierarchy through size, weight, color, spacing, and positioning.
wireframe-spec 56/100 · D	infrasity-labs/dev-gtm-claude-skills	Specify wireframe layouts with content priority, component placement, and annotation.

How to choose UI and UX design skills

Use evaluation skills (heuristics, hierarchy and critique) on screens you have; use planning skills (wireframes, flows and prototyping strategy) before you build.

Taste-driven skills such as Impeccable and Emulo set a visual standard for every UI task, so choose one rather than stacking several.

Most are markdown-only guidance with no keys or scripts, which makes them easy to try.