Skip to content
UXClaim
Design Ops

Claude UI/UX Design Consultant

AI-powered design auditing and refactoring skill that analyzes websites, generates improvement strategies, and executes professional redesigns directly in yo...

View source More in Design Ops

What It Does

The Claude UI/UX Design Consultant is an embedded design architect that transforms amateur websites into professional-grade designs through automated analysis, strategic planning, and code-level execution. It works framework-agnostic across React, Next.js, Vue, Nuxt, Svelte, and plain HTML/CSS.

How It Works

The skill follows a structured 6-phase workflow:

  1. Environment Detection — Identifies your tech stack, styling approach, and component structure
  2. Discovery — Asks targeted questions about product, audience, goals, and constraints
  3. Scoring Audit — Runs automated scripts producing a 12-category scorecard with actionable findings
  4. Improvement Strategy — Proposes design direction, color palettes, typography, and implementation plan
  5. Approval Gate — Presents complete plan before any code modifications
  6. Execution & Changelog — Makes incremental or batch changes with detailed before/after documentation

The 12-category rubric evaluates layout, typography, color systems, spacing, components, visual hierarchy, CTAs, accessibility, branding, polish, motion, and responsiveness—each scored 1-10 with specific justification.

Use Cases

  • Design audits for existing websites and applications
  • Refactoring amateur or inconsistent UI to professional standards
  • Design system establishment through token generation and component standardization
  • Accessibility improvements with automated WCAG scanning
  • Multi-framework redesigns without introducing new dependencies

Who Benefits

Design leaders, product managers, and design-minded developers who need rapid, data-driven UI improvements without starting from scratch. Perfect for teams lacking dedicated design resources or needing objective design assessment.

Frequently asked questions

How do I install the Claude UI/UX Design Consultant skill?
Copy the `ui-ux-design-consultant/` folder to your Claude Code skills directory. On macOS/Linux: `cp -r ui-ux-design-consultant ~/.claude/skills/`. On Windows PowerShell: `Copy-Item -Recurse ui-ux-design-consultant $env:USERPROFILE\.claude\skills\`. Requires Python 3.8+, Bash, jq, and Git.
What frameworks does this skill support?
The skill works with React, Next.js, Vue, Nuxt, Svelte, SvelteKit, and plain HTML/CSS. It supports Tailwind CSS, CSS Modules, Styled Components, Scoped Styles, and plain CSS. It's framework-agnostic and respects your existing stack without introducing new dependencies.
How does the 12-category scoring work?
Each category (layout, typography, color, spacing, components, visual hierarchy, CTAs, accessibility, branding, polish, motion, and responsive design) is scored 1-10 with specific justification. Automated scripts analyze your codebase for objective metrics like spacing consistency, color palette bloat, WCAG contrast compliance, and semantic HTML usage.
Will the skill delete or change my content?
No. The skill never deletes content without explicit approval, never changes copy/text unless asked, preserves all functionality (handlers, routing, data flow), and requests approval before any code modifications. It focuses purely on visual design, structure, and accessibility improvements.
What automated audit scripts are included?
The skill includes scripts for stack detection, spacing analysis, color palette auditing, typography consistency, accessibility checking, responsive design validation, and changelog generation. These provide objective data on spacing values, color bloat, font scale adherence, alt text coverage, and contrast ratios.
Can I use this skill incrementally or in batch mode?
Yes, you can choose either mode. Incremental mode makes changes component-by-component for easier review and iteration. Batch mode executes all approved changes at once with complete before/after documentation. The skill generates a detailed changelog tracking every modification.
What design direction options does the skill propose?
When brand guidelines are missing, the skill suggests from six archetypes: Clean Minimal (SaaS tools), Bold & Vibrant (consumer apps), Corporate Premium (enterprise), Startup Fresh (early-stage), Editorial (content), and Dark & Technical (developer tools). You can combine or customize these directions.
How does this skill handle accessibility?
The skill includes automated accessibility auditing that checks alt text presence, semantic HTML structure, heading hierarchy, ARIA usage, and WCAG contrast compliance. It then refactors code to improve accessibility scores and generates specific remediation recommendations with implementation guidance.

Glossary

Design Tokens
Reusable design values (colors, spacing, typography, shadows) stored as centralized variables in CSS, JavaScript, or config files. Ensures consistency across all components and simplifies global design changes.
12-Category Scorecard
A comprehensive design audit rubric evaluating layout, typography, color, spacing, components, hierarchy, CTAs, accessibility, branding, polish, motion, and responsiveness. Each category scored 1-10 with actionable justification.
Visual Hierarchy
The arrangement and emphasis of design elements to guide user attention toward the most important information. Achieved through size, color, contrast, whitespace, and positioning.
WCAG Contrast
Web Content Accessibility Guidelines color contrast standards ensuring text and interactive elements are readable for users with low vision. Level AA requires 4.5:1 for normal text, 3:1 for large text.

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.