🎨

19 Design Agent Skills

Skills for UI work, design systems, accessibility review, and design documentation.

Agent Skills for Claude Code that support design thinking, design system documentation, accessibility review, and feedback for product teams.

New to Agent Skills? Learn how to install one in under a minute →

Design skills here sit at the intersection of design and documentation — the handoff layer where design decisions get communicated to engineering. Frontend patterns, accessibility review, design system documentation, and user research frameworks. They're not Figma tools; they're workflow tools for designers who also manage specs and stakeholder communication.

Useful for product designers who own the full workflow from concept to dev handoff, and for design leads managing documentation across a growing component library.

🎨

gstack: Design System Consultation

by @garrytan

Builds a complete design system from scratch — aesthetic direction, typography, color palette, layout, spacing, and motion. Researches your product space, proposes creative risks, and writes DESIGN.md.

Claude Code Codex CLI +1
View & install →
👁️

gstack: Visual Design Audit

by @garrytan

Finds visual inconsistency, spacing issues, hierarchy problems, and AI slop patterns on a live site — then fixes them. Commits each fix atomically with before/after screenshots.

Claude Code Codex CLI +1
View & install →
🎯

gstack: Design Variants Explorer

by @garrytan

Generates multiple visual design variants, opens a browser comparison board, collects structured feedback, and iterates toward an approved direction. Taste memory biases future variants toward your preferences.

Claude Code Codex CLI +1
View & install →
🎨

gstack: Design Plan Review

by @garrytan

Designer's eye review of a plan before implementation. Rates each design dimension 0–10, explains what a 10 looks like, then edits the plan to get there.

Claude Code Codex CLI +1
View & install →
🎨

Algorithmic Art

by @anthropics

An Anthropic-authored creative skill for generating algorithmic visuals and structured art experiments with Claude.

Claude Code Claude.ai
View & install →
🖼️

Canvas Design

by @anthropics

An official Anthropic design-oriented skill for structured canvas and layout ideation work.

Claude Code Claude.ai
View & install →
🎨

Design Accessibility Review

by @anthropics

Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.

Claude Code Claude.ai
View & install →
🎨

Design Design Critique

by @anthropics

Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

Claude Code Claude.ai
View & install →
🎨

Design Design Handoff

by @anthropics

Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.

Claude Code Claude.ai
View & install →
🎨

Design Design System

by @anthropics

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

Claude Code Claude.ai
View & install →
🎨

Design Research Synthesis

by @anthropics

Synthesize user research into themes, insights, and recommendations. Use when you have interview transcripts, survey results, usability test notes, support tickets, or NPS responses that need to be distilled into patterns, user segments, and prioritized next steps.

Claude Code Claude.ai
View & install →
🎨

Design User Research

by @anthropics

Plan, conduct, and synthesize user research. Trigger with "user research plan", "interview guide", "usability test", "survey design", "research questions", or when the user needs help with any aspect of understanding their users through research.

Claude Code Claude.ai
View & install →
🎨

Design UX Copy

by @anthropics

Write or review UX copy — microcopy, error messages, empty states, CTAs. Trigger with "write copy for", "what should this button say?", "review this error message", or when naming a CTA, wording a confirmation dialog, filling an empty state, or writing onboarding text.

Claude Code Claude.ai
View & install →

Frontend Design

by @anthropics

Anthropic's official frontend-focused skill for UI exploration, interface thinking, and design execution support.

Claude Code Claude.ai
View & install →
🖼️

Image Enhancer

by @ComposioHQ

A Composio community skill for improving screenshots and images for clearer presentation and documentation.

Claude Code Claude.ai
View & install →
🎞️

Slack GIF Creator

by @anthropics

Anthropic's media skill for creating animated GIFs that fit Slack constraints and team-sharing workflows.

Claude Code Claude.ai
View & install →
🌈

Theme Factory

by @anthropics

Anthropic's official theming and design-oriented skill for exploring visual systems and style directions.

Claude Code Claude.ai
View & install →
🎨

UI Design System Builder

by @alirezarezvani

Generate design tokens, typography scales, spacing grids, and responsive breakpoints — build or document a production-ready design system.

Claude Code Codex CLI +1
View & install →
🗺️

UX Researcher & Designer

by @alirezarezvani

Build user personas, journey maps, testing protocols, and empathy maps — structured UX research and design thinking from an expert researcher.

Claude Code Codex CLI +1
View & install →