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

Autonomous Development Pipeline

Claude Code skill turning specs into shipped code through adaptive phases with feedforward guides, feedback sensors, and requirement traceability.

0xPuncker
Design Ops

Ibras AI Agent

Claude Code marketplace for building and evaluating AI agents. Install plugins to generate complete Mastra evaluation systems with scorers, datasets, experim...

volfadar
Design Ops

Claude Skills

Production-grade Claude AI skills for stock analysis, prompt engineering, meeting documentation, and UX design with visual-first outputs.

bhrpraju
Design Ops

Propose

Run three parallel design agents with different philosophies to generate ranked approach proposals for any design decision.