UI/UX Design Skills for Claude Code, Codex & AI Agents

Refactoring UI Design System

wondelai

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

• ui design
• frontend

Improving Animations

Emil Kowalski

Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.

• web animation
• ui review

Design Critique

Brian (slb2248)

Structure a design critique around context, questions, observations, impact and actionable feedback.

• design critique
• product design

Prototyping Variants

Emil Kowalski

Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.

• prototyping
• ui design

AccessLint: Accessibility Fix

AccessLint

Apply accessibility worklists through a baseline, scoped source changes and verification loop, while deferring contextual judgments.

• ux-design
• accessibility
• ui-design

EGM Review

Google

Review a design document for clarity, design risks and implementation readiness.

• design-review
• software-architecture

AccessLint: Accessibility Scan

AccessLint

Locate mechanically detectable accessibility issues on one rendered page, with DOM selectors, evidence and source locations when available.

• ux-design
• accessibility
• wcag

Apple Design

Emil Kowalski

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

• ui design
• interaction design

Component Family Consistency

Dembrandt

Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.

• design systems
• ui design

AccessLint: Accessibility Audit

AccessLint

Plan a sampled site accessibility assessment, combine automated and interaction checks, and report pass, fail or undetermined per criterion.

• ux-design
• accessibility
• ux-audit

Design Rules Companion

Sergey

Turn vague UI feedback into focused changes using practical heuristics for spacing, typography, color, hierarchy, icons and interaction.

• ui-design
• ux-design
• design-review

AI Native Product Designer

Brian (slb2248)

Assess an AI-assisted product design role with a competency rubric covering problem framing, prototyping, research and design handoff.

• product design
• ai workflow

Design Review

pproenca

Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table. Covers visual hierarchy, spacing, typography, colour & contrast, component states, motion, responsiveness, accessibility, multi-page flow & navigation, and interaction continuity — grounded in Refactoring UI and Emil Kowalski's principles. For animation/jank/FPS, focus order, and cross-page UX it can drive Chrome via chrome-devtools-mcp to capture what a screenshot can't. Trigger when the user asks to "review this UI", "design review", "critique this component/screen/page or multi-page flow", asks why something "looks off", "looks AI-generated", or "looks like a wireframe", or wants to raise visual polish. For building UI from scratch use web-taste; for the full animation set see emilkowal-animations.

• ui review
• ux

Sleek Mobile App Design

Sleek

Design mobile app screens with Sleek and implement selected designs in React Native or HTML.

• mobile design
• react native
• ui design

Interface Design

Oyindamola Akinleye

Design and refine dashboards, SaaS apps and admin interfaces with deliberate hierarchy, shared tokens, complete states and reusable design memory.

• interface-design
• ui-design
• design-systems

Apple Design

Hamster

Apply Apple-inspired physical motion and interface design concepts to web interactions.

• ui-design

UI Audit

Ken Scott

Diagnose interface issues, make scoped visual improvements, and verify regressions through a three-phase workflow with persistent Markdown reports.

• ui-audit
• ux-audit
• design-review

Apple Design Skill

dickwu

Review mobile and desktop interfaces against topic-routed Apple Human Interface Guidelines, with findings and fixes adapted to the application's framework.

• ui
• ux
• ui-design

Agentation Skills

Benji Taylor, Dennis Jin, Alex Vanderzon

Two workflows for visual UI feedback: connect the Agentation toolbar to a React or Next.js project, then add specific design-review annotations in a visible desktop browser.

• ui-design
• design-review
• annotations

Make Interfaces Feel Better

Jakub Krehel

Polish frontend interfaces with concrete rules for typography, nested corners, shadows, icons, hit areas and restrained motion, plus structured quick or full reviews.

• ui-design
• ux-design
• interaction-design

UI Craft

educlopez

Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.

• ui design
• frontend

UIZZE UI Skills

UIZZE

UIZZE workflows for improving interfaces, converting screenshots to UI, and finding relevant design references.

• ui design

AccessLint: Accessibility Diff

AccessLint

Compare a rendered page with a change baseline and report newly introduced, resolved and pre-existing accessibility issues.

• ux-design
• accessibility
• ux-audit

Audit AI Design Slop

Meng To

Audit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults, and established UI defects. Use when the user wants evidence-backed design feedback, an anti-slop review, or a removal-first cleanup plan without a speculative redesign.

• ui review
• design quality

Anti-slop check

Gesso

Deterministic design critique for HTML/CSS screens. Runs 73 slop guards extracted from the set of rules professional designers use in production-grade designs to catch the tells that make UI read as AI-generated (gradient-clipped headlines, the default indigo accent, puffy shadows, emoji icons, fake dot charts and decorated gauges, badges floated over the hero, eyebrow kickers above the H1, fake magazine mastheads, colored edge-stripe rails, two-tone headlines, over-designed list rows, layout-collapse bugs, em-dash copy, placeholder imagery), auto-fixes what can be safely rewritten, and reports the rest with concrete edits. Use whenever generated or hand-written HTML/CSS is about to be shown, exported, shipped, or committed, or when asked to critique a design, check it for slop, or give a second opinion on a generated screen.

• ui review
• design quality

UI Design

mblode

Designs and builds React/Next/Tailwind UI, audits visual and interaction defects, and stress-tests components with worst-case data. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", "audit this component", "stress-test this component", "break this UI", or "show me the worst case".

• react
• ui design

AccessLint: Accessibility Inspect

AccessLint

Inspect keyboard behavior, focus, widget states, reflow and other checks that an automated accessibility scanner cannot settle.

• ux-design
• accessibility
• ux-audit