Two custom skills that turn Claude from a code generator into a UX strategist and visual craftsperson.

🔄 v3 Update: July 2026

<aside> 🔥

The anti-generic update. Both skills were rebuilt around one goal: stop Claude from designing the same way every time. If you have v2 installed, delete both old skills and re-upload the new files. What changed:

UX Designer:

• New pattern recommendation protocol: Claude resolves mobile vs desktop first, researches how real products solve it, then always gives you two options, the proven path and a bolder path, each with honest pros and cons, both visualized
• Default failure modes table: names Claude's reflexes (modal for everything, spinners, "no data yet" empty states) and forces a considered alternative for each
• Conflict resolution: what to do when principles collide (progressive disclosure vs discoverability, friction vs safety), with a fixed decision order: task frequency, then error cost, then emotional state
• Pattern library rebuilt: every pattern now states when it works, when it fails, and how it gets misused
• Psychology reference rewritten around worked conflicts, same-brief-different-answers examples, and the ethical line on persuasion mechanics

UI Designer:

• Mode detection: greenfield gets full aesthetic derivation, but if you have an existing design system, the system is LAW. Claude reads your actual tokens, never invents values, and relocates uniqueness to composition, scale, and art direction
• The banned AI-look table: centered hero stacks, serif + gradient combos, purple gradients, timid type, glassmorphism. Each is banned as a default and only allowed as an argued-for choice
• Three genuinely different directions before converging, each with one signature element, plus an execution floor so a bold direction never gets rendered timidly
• Iconography discipline: no emoji as UI icons, no hand-drawn SVG paths, one established icon family per product chosen by voice
• Asset sourcing hierarchy: your real assets first, then connected tools (Figma, image generation), then licensed stock and illustration libraries, then self-made work inside Claude's honest capability envelope. Includes base64 embedding for sandbox-proof assets and license hygiene rules
• New character checklist: the brand-swap test (could a competitor ship this unchanged?), the template test, and the derivation test
• In Claude Code: Claude now renders and screenshots its own output and critiques the actual pixels before presenting
• New reference file: references/aesthetic-derivation.md, the uniqueness engine, with typography voices, layout structures beyond the centered stack, material transfer by industry, and the asset library map </aside>

What's Inside

🎯 UX Designer Skill

Makes Claude think about the human first. It asks who the user is before building, applies psychology (cognitive load, Hick's Law, decision architecture), designs flows not just screens, and pushes back on bad UX decisions.

Includes 2 reference guides:

• Psychology Deep Dive — cognitive load, decision architecture, Gestalt principles, animation timing
• Patterns & Flows — onboarding, auth, e-commerce, dashboards, navigation, cross-industry patterns

🎨 UI Designer Skill

Turns Claude into a visual perfectionist. 8pt spacing grid, mathematical type scales, 60-30-10 color rule, consistent component sizing, dark mode done right, and all the polish details that separate amateur from professional.

Includes 4 reference guides:

• Aesthetic Derivation (new in v3) — the uniqueness engine: typography voices, layout structures, color logic, material transfer by industry, asset library map
• Design Tokens — complete CSS custom property scales for spacing, color, type, shadows, radii
• Component Library — specs for every common component with sizing tables and state definitions
• Polish & Craft — advanced CSS techniques, animation code, responsive patterns, accessibility

Both skills activate automatically: no slash command needed. The UX skill handles strategy and psychology, the UI skill handles visual craft. They now hand off to each other and to the new ux-copywriter skill.

💡 Tip: Remind Claude at the start of convos to use its design skills, it helps.