Claude Skills for Product Designers

A/B Test Design

Design rigorous A/B tests with hypotheses, variants, metrics, and sample size calculations. Produces a complete experiment plan with pre-committed success criteria so your results are statistically valid from the start.

Accessibility Audit

Conduct a comprehensive accessibility audit against WCAG guidelines with a four-tier severity classification system. Each finding includes its location, relevant WCAG criterion, user impact, and step-by-step remediation instructions.

Works best with Design Specs, HTML, Component Library

Accessibility Test Plan

Create structured accessibility testing plans that cover the full range of assistive technologies and WCAG 2.1 criteria. Outputs a test plan with scenarios, tools, participant requirements, and a pass/fail grading rubric.

Aesthetic-Usability Effect

Apply the Aesthetic-Usability Effect: visually consistent, polished interfaces are perceived as more usable and receive more tolerance for minor friction. Audit and improve screens for the visual qualities that drive perceived quality.

Affinity Diagram

Organize qualitative research data — interview notes, survey responses, observations — into themed clusters and distilled insight statements. Produces a structured affinity map ready for design decision-making.

Works best with Notion, Google Docs, Transcripts

Animation Principles

Apply the 12 animation principles to UI motion design — ensuring every transition, micro-interaction, and state change feels purposeful, physics-grounded, and polished rather than arbitrary.

AnyDesign

Analyze images, websites, and Figma files to extract their design system and generate a design.md with token system, component inventory, and reconstruction notes — giving you a portable, editable design spec from any existing interface.

Works best with Figma, Screenshots, URLs

Business Design

A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value, not aesthetics.

Card Sort Analysis

Analyze card sorting results — open, closed, or hybrid — to surface mental model patterns that should inform your information architecture, navigation groupings, and labelling decisions.

Case Study

Craft portfolio-ready case studies that tell the complete story of a design project — from problem framing and process to decisions made, outcomes achieved, and lessons learned — in a format that impresses hiring managers and clients alike.

Click Test Plan

Design click and first-click tests to evaluate navigation clarity and information findability. Outputs a structured test plan with tasks, target areas, success criteria, and analysis framework.

Color System

Build a comprehensive color system with palette generation, semantic role mapping, accessibility compliance (contrast ratios), and implementation guidance. Covers brand, neutral, semantic, and surface colour scales.

Works best with Figma, Tokens JSON, Style Dictionary

Competitive Analysis

Conduct a structured competitive analysis comparing UX patterns, interaction conventions, onboarding flows, feature coverage, and positioning across rival products. Outputs a benchmark report with actionable differentiation opportunities.

Works best with URLs, Screenshots

Component Spec

Write detailed component specifications covering props, all required states, variants, accessibility requirements, usage guidelines, and dos/don'ts. Produces a handoff-ready spec that engineers can build from without design questions.

Works best with Figma, Storybook

Content Strategy

Define what content a product needs, how it should be structured, who owns it, and how it flows through the experience. Covers content modelling, governance, voice, and the relationship between content and UI structure.

Critique Affordance

Critique a screen's interactive affordances — evaluating what looks clickable, whether states are visible, whether CTAs are clear and discoverable, and whether the interaction model is learnable without instruction.

Works best with Screenshots, Figma

Critique Brand Consistency

Critique a screen's brand consistency against your mood board, voice guidelines, and design tokens — surfacing where the design drifts from brand expression through typography, colour, imagery, and tone of voice.

Works best with Screenshots, Figma, Brand Guidelines

Critique Color

Audit all colour decisions on a screen — contrast ratios against WCAG AA, palette coherence with your design system, semantic colour meaning, and accessibility for colour-blind users.

Works best with Screenshots, Figma, Tokens JSON

Critique Composition

Analyse the spatial and structural qualities of a screen — how elements are balanced across the canvas, how whitespace creates breathing room and focus, how rhythmic repetition creates coherence, and whether gestalt principles are applied correctly.

Works best with Screenshots, Figma

Critique Information Density

Critique a screen's information density — evaluating cognitive load, content prioritisation, scanning pattern support, and whether progressive disclosure is used to show complexity only when needed.

Works best with Screenshots, Figma

Critique Typography

Audit all typographic decisions on a screen — whether the type scale is applied correctly, whether text is readable in context, whether choices are consistent across the view, and whether design tokens are used in place of raw values.

Works best with Screenshots, Figma, Tokens JSON

Critique Visual Hierarchy

Critique a screen's visual hierarchy — evaluating the entry point, eye flow path, weight distribution between elements, and whether emphasis is placed correctly on what matters most to the user.

Works best with Screenshots, Figma

Dark Mode Design

Design effective dark mode interfaces with proper colour adaptation, contrast preservation, surface elevation handling, and shadow-to-overlay translation. Produces a dark mode token map and implementation guidance.

Works best with Figma, Tokens JSON

Data Visualization

Design clear, accessible data visualizations — selecting the right chart type for the data relationship, applying colour and typography for legibility, and ensuring the visualization is accessible to colour-blind users and screen reader users.

Works best with Figma

Design Brief

Write a comprehensive design brief that defines the problem space, constraints, target audience, success criteria, and scope — giving a project a shared foundation before any design work begins.

Design Critique

Facilitate structured design critiques using established feedback frameworks — ensuring feedback is specific, principle-grounded, and actionable rather than subjective, and that the session produces clear next steps.

Works best with Screenshots, Figma

Design Debt Audit

Identify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product — surfacing where component drift, visual inconsistency, and missing patterns are creating engineering and UX debt.

Works best with Figma, Storybook

Design Impact Reporting

Communicate design's contribution to business and user outcomes in the language stakeholders speak — connecting UX improvements to retention, conversion, support volume, and NPS in formats that resonate in executive reviews.

Works best with Mixpanel, Google Analytics

Design Negotiation

Advocate for design quality, scope, and time with cross-functional partners and leadership using evidence, shared goals, and principled trade-off framing — without losing the room or the relationship.

Design Principles

Define a set of actionable design principles that guide decision-making and resolve trade-offs — principles grounded in your product's specific context, not generic platitudes that could apply to any product.

Design QA Checklist

Create comprehensive QA checklists for verifying design implementation accuracy — covering spacing, colour, typography, states, interactions, responsiveness, and accessibility — so nothing slips between design and production.

Works best with Figma, Browser Dev Tools

Design Rationale

Write clear design rationale that connects every significant design decision to user needs, business goals, and design principles — building a durable record of why the design is the way it is.

Design Review Process

Establish design review gates with clear criteria, checklists, and approval workflows — ensuring design is reviewed by the right people at the right level of fidelity at each stage of the product development cycle.

Design Sprint Plan

Plan and facilitate design sprints from challenge framing through prototype testing — structuring each day, exercises, outputs, and decisions so the week produces a validated direction rather than a pile of sticky notes.

Works best with Miro

Design System Adoption

Create adoption strategies and materials that drive consistent design system usage across design and engineering teams — covering awareness, education, enablement, incentives, and measuring adoption over time.

Works best with Figma, Storybook

Design System Governance

Define how a design system evolves over time — establishing contribution models, versioning conventions, change management processes, and deprecation policies that keep the system coherent as it scales.

Design Token Audit

Audit design token usage across a product — identifying naming inconsistencies, tokens defined but unused, raw values used instead of tokens, and coverage gaps relative to your design system's intended scope.

Works best with Figma, Tokens JSON, Storybook

Design Token

Define and organize design tokens across colour, spacing, typography, and elevation — with clear naming conventions, semantic grouping, platform export guidance, and usage rules that keep the system coherent as it grows.

Works best with Style Dictionary, Figma, Tokens JSON

Diary Study Plan

Design a longitudinal diary study to capture user behaviour in context over time — structuring prompts, entry cadence, participant criteria, and analysis framework to surface patterns that lab-based research misses.

Documentation Template

Generate structured documentation templates for components, patterns, or guidelines — ensuring your design system documentation is consistent, complete, and written to a standard that makes the system actually usable.

Works best with Notion, Confluence

Doherty Threshold

Apply the Doherty Threshold: keep system response times under 400ms to maintain user flow and perceived performance. Audit your product's response patterns and design appropriate loading states and optimistic UI where latency is unavoidable.

Empathy Map

Build a 4-quadrant empathy map (Says, Thinks, Does, Feels) that synthesizes user research into a shared understanding of the user — creating alignment across design, product, and engineering on who you're designing for.

Error Handling UX

Design error prevention, detection, and recovery experiences — covering validation patterns, error message copy, recovery paths, and the hierarchy of error types from inline validation to system-level failures.

Experience Map

Create a holistic experience map showing the full ecosystem of user touchpoints, channels, actors, and relationships across a product or service — revealing systemic opportunities that screen-level design can't surface.

Feedback Patterns

Design system feedback patterns for user actions — covering confirmations, status updates, progress indicators, notifications, toasts, and alerts with appropriate timing, placement, and dismissal behaviour.

Fitts's Law

Apply Fitts's Law to size and position interactive targets for fast, accurate interaction — auditing touch targets, click zones, CTA placement, and navigation elements against the formula that predicts interaction time.

Form Design

Design forms that minimize friction, prevent errors, and guide users to successful completion — covering field order, label placement, validation timing, error recovery, input types, and progressive disclosure for complex forms.

Gesture Patterns

Design gesture-based interactions for touch and pointer devices — covering swipe, pinch, drag, and long-press patterns with appropriate discoverability affordances, conflict resolution, and non-gesture fallbacks.

Handoff Spec

Create developer handoff specifications covering measurements, interaction behaviour, asset requirements, and edge cases — so engineers can build components to spec without follow-up design questions.

Works best with Figma, Zeplin

Heuristic Evaluation

Conduct expert heuristic evaluations using Nielsen's 10 heuristics and domain-specific criteria — systematically identifying usability issues without user testing, with each finding rated by severity and tied to a heuristic violation.

Works best with Screenshots, Figma

Hick's Law

Apply Hick's Law to reduce decision time by limiting the number of simultaneous choices presented to users — auditing menus, settings, onboarding, and navigation for choice overload and recommending progressive disclosure strategies.

Icon System

Create an icon system specification covering grid rules, sizing scales, naming conventions, category taxonomy, optical correction principles, and implementation guidance for both design and engineering teams.

Works best with Figma

Illustration Style

Define an illustration style guide that specifies visual language characteristics, colour usage rules, subject matter guidelines, and application rules — ensuring illustrations across your product feel cohesive and on-brand.

Information Architecture

Design the structure, hierarchy, and navigation model for a product's content and features — creating an IA that matches user mental models, supports task completion, and scales as the product grows.

Interface Design

Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products — applying visual craft, density, and information design principles to complex UI.

Works best with Figma

Interfaces That Feel

Apply an emotional resonance lens to any UI — use when a design is technically correct but flat, to identify what's missing and prescribe specific changes at the copy, motion, colour, and micro-interaction layer.

Works best with Screenshots, Figma

Interview Script

Create structured user interview scripts with warm-up questions, core exploration probes, and wrap-up sections — designed to elicit honest, detailed responses while avoiding leading questions and confirmation bias.

Jobs-to-Be-Done

Map user Jobs-to-Be-Done with functional, emotional, and social dimensions plus outcome expectations — creating a JTBD framework that reveals the real progress users are trying to make and the moments that drive adoption.

Journey Map

Create an end-to-end user journey map with stages, touchpoints, emotional highs and lows, pain points, and opportunity areas — making the full user experience visible so the team can align on where to focus improvement.

Law of Common Region

Apply the Law of Common Region to group elements using containers, backgrounds, and boundaries — creating clear visual groupings that communicate relationships without relying on spacing alone.

Law of Proximity

Apply the Law of Proximity to group related elements through spatial relationships — auditing layouts for proximity violations where unrelated elements appear close and related elements appear separated.

Layout Grid

Define responsive layout grid systems with columns, gutters, margins, and breakpoint behaviour — creating a grid that provides consistent structure across screen sizes while remaining flexible enough to support diverse content.

Works best with Figma

Loading States

Design loading, skeleton, and progressive content reveal patterns that maintain perceived performance and reduce user anxiety during wait times — with guidance on when to use spinners, skeletons, and optimistic UI.

Localization Design

Design interfaces that adapt gracefully to multiple languages, writing directions (LTR/RTL), date/number formats, and cultural contexts — with layout flexibility, text expansion accommodation, and cultural sensitivity guidelines.

Metrics Definition

Define UX metrics and KPIs that connect design decisions to measurable business and user outcomes — covering task success, time-on-task, error rate, satisfaction scores, and how to instrument them for reliable measurement.

Works best with Mixpanel, Amplitude, Google Analytics

Micro-Interaction Spec

Specify micro-interactions with trigger, rules, feedback, and loop/mode definitions — producing handoff-ready specs that capture the full behaviour of every button hover, form validation, and state transition.

Miller's Law

Apply Miller's Law to chunk information into groups of approximately four to work within working memory limits — auditing navigation, settings, onboarding, and data-dense screens for cognitive overload.

Motion System

Define a motion system with duration tokens, easing vocabulary, and reduced-motion handling — creating consistent, purposeful animation across a product that respects user preferences and accessibility requirements.

Works best with Figma

Naming Convention

Establish a naming convention system for design elements, components, and tokens with clear rules, examples, and anti-patterns — reducing ambiguity and making your design system navigable by anyone on the team.

Navigation Patterns

Select and design navigation patterns that match product structure, user tasks, and platform conventions — choosing between tab bars, sidebars, breadcrumbs, and progressive navigation based on content hierarchy and usage frequency.

North Star Vision

Articulate a compelling north-star product vision that aligns teams and inspires strategic design decisions — grounding the vision in user needs, business goals, and a vivid picture of the future state you're working toward.

Onboarding Design

Design first-run experiences that get users to their first moment of value quickly — minimizing premature asks, reducing cognitive overload, and ensuring the empty state experience guides rather than confuses.

Works best with Figma, Mixpanel

Opportunity Framework

Identify, evaluate, and prioritize design opportunities using impact-effort frameworks and strategic criteria — producing a ranked opportunity backlog that connects design investment to user and business value.

Pattern Library

Structure a pattern library entry with problem context, solution pattern, usage examples, variants, anti-patterns, and related patterns — creating documentation that teaches the pattern rather than just showing it.

Presentation Deck

Structure compelling design presentations for stakeholders, reviews, and showcases — creating a narrative arc from problem context through design decisions to outcomes that lands with both design peers and business audiences.

Prototype Strategy

Choose the right prototyping fidelity and method for the design question you're trying to answer — matching paper, clickable, or coded prototypes to the research goal so you learn quickly without over-building.

Works best with Figma, Framer

Readable Measure

Set optimal line lengths for readability across typography scales and responsive layouts — applying the 45-75 character measure rule and adjusting for type size, line height, and reading context.

Research Repository

Build and maintain a research repository that makes findings findable, reusable, and cumulative across the organization — preventing the common pattern where valuable research sits in a drive folder and is never referenced again.

Works best with Notion, Airtable

Responsive Design

Design adaptive layouts and interactions that work across all screen sizes and input methods — establishing breakpoints, fluid grid behaviour, component adaptation rules, and interaction pattern shifts between desktop and mobile.

Works best with Figma

Search UX

Design search experiences that help users find what they need, recover gracefully from zero-result states, and refine results through filters and facets — covering query input, results display, and the full failure recovery flow.

Service Blueprint

Map the end-to-end service delivery system — frontstage user actions, frontstage staff actions, backstage processes, and supporting infrastructure — revealing where service failures occur and where systemic improvements have the most impact.

Spacing System

Create a consistent spacing system based on a base unit with a defined scale and contextual application rules — covering intra-component spacing, inter-component spacing, section spacing, and responsive behaviour.

Works best with Figma, Tokens JSON

Stakeholder Alignment

Create stakeholder alignment artifacts — responsibility matrices, decision frameworks, and communication plans — that prevent design work from stalling on unclear ownership or misaligned expectations across product, engineering, and leadership.

State Machine

Model complex UI behaviour as finite state machines with states, events, guards, and transitions — making implicit UI logic explicit so both designers and engineers share a precise understanding of how components behave.

Summarize Interview

Summarize a user interview transcript into structured insights with key themes, representative quotes, participant sentiment, and action items — turning hours of raw transcript into a shareable research artifact in minutes.

Survey Design

Design surveys that collect reliable, unbiased quantitative data — covering question framing, scale selection, order effects, screening criteria, and distribution strategy to validate hypotheses and measure user attitudes at scale.

Works best with Typeform, Google Forms

Team Workflow

Design team workflows covering task management, collaboration rituals, file naming, design review cadence, and tooling — creating a shared operating system that reduces friction and keeps design and product moving in sync.

Test Scenario

Generate structured usability test scenarios with realistic tasks, success criteria, and facilitation notes — ready to run with real participants in a moderated or unmoderated session.

Theming System

Design a theming architecture that supports brand variants, dark mode, and high-contrast modes — with token mapping, override strategies, and build-time configuration so themes are applied systematically rather than manually.

Works best with Style Dictionary, Figma

Typography Scale

Create a modular typography scale with size, weight, and line-height relationships — establishing a type hierarchy that works across all contexts from display headings to body text to labels.

Works best with Figma, Tokens JSON

Usability Test Plan

Design a usability test plan with tasks, success metrics, participant screening criteria, session structure, and a facilitation guide — producing a complete test plan that any facilitator can run consistently.

User Flow Diagram

Create user flow diagrams showing paths, decisions, branch logic, and error recovery flows — mapping every route a user can take through a feature or product so friction points and missing states are visible before design begins.

Works best with Figma, Miro

User Persona

Create refined user personas from research data with demographics, goals, frustrations, behavioral patterns, and technology context — grounded in real data rather than assumptions, with a format teams will actually reference.

UX Researcher and Designer

A full UX research and design toolkit for senior practitioners — covering data-driven persona generation, journey mapping, usability testing frameworks, research synthesis, and the full workflow from discovery to validated design.

UX Writing

Write effective UI copy including microcopy, error messages, empty states, onboarding prompts, and CTAs — applying a 'clear over clever' and 'concise over comprehensive' discipline across every string in your interface.

Version Control Strategy

Define version control strategies for design files, components, and libraries — covering branching conventions, naming, release tagging, and the workflow that keeps design and engineering in sync across a multi-contributor system.

Works best with Figma, Abstract

Visual Hierarchy

Establish clear visual hierarchy through size, weight, colour, spacing, and positioning — creating layouts where the user's eye is naturally drawn through content in the order that serves their goals and the design's intent.

Works best with Screenshots, Figma

Von Restorff Effect

Apply the Von Restorff Effect to make the most important element distinctly different from its surroundings — auditing CTAs, alerts, and key actions for sufficient visual contrast against their context to drive attention and action.

Wireframe Spec

Specify wireframe layouts with content priority, component placement, interaction notes, and annotation — creating wireframe documentation that communicates intent clearly to both design collaborators and engineering partners.

Works best with Figma, Balsamiq, Excalidraw