What is the 9-pass UX analysis?

It is a mandatory evaluation sequence that analyzes Mental Models, Information Architecture, Affordances, Cognitive Load, State Design, Flow Integrity, Accessibility, Responsiveness, and Motion.

How does this skill help with accessibility?

The '/design a11y' command performs a specialized audit of semantic HTML, keyboard navigation, ARIA patterns, and color contrast to ensure WCAG 2.1 AA compliance.

Can I use the Design skill on an existing codebase?

Yes, the '/design audit' command allows you to analyze existing component paths or page structures to generate an actionable UX issues report.

How does it hand off designs to the frontend?

The '/design build' command automatically invokes the frontend-design skill, passing the full context of the UX spec, mental models, and functional requirements for implementation.

Design Thinking Pipeline

Name: Design Thinking Pipeline
Author: Ankurjain1121

byAnkurjain1121

0•

Herramientas de Diseño

Transforms rough product ideas into production-ready UI specifications using a structured 9-pass UX analysis and design thinking framework.

The Design skill is a comprehensive UI/UX orchestration tool for Claude Code that bridges the gap between vague concepts and high-fidelity frontend implementations. It enforces a rigorous 'iron law' of design, requiring structured analysis across nine critical passes—including mental models, information architecture, and cognitive load—before any visual work begins. Whether you are initiating a new project from a 'vibe-level' idea, auditing an existing interface for usability bottlenecks, or iterating on components based on user feedback, this skill ensures that every UI generated is functional, accessible, and user-centric rather than just 'pretty but unusable.'

Características Principales

01Existing UI auditing to identify and prioritize critical usability issues.

020 GitHub stars

03Specialized sub-commands for motion design, design tokens, and iterative feedback loops.

04Mandatory 9-pass UX analysis covering affordances, state design, and flow integrity.

05End-to-end design pipeline from rough MVP ideas to detailed PRDs and UX specs.

06Automated accessibility (a11y) audits with WCAG compliance reporting and fixes.

Casos de Uso

01Converting a one-sentence product concept into a structured PRD and developer-ready UX specification.

02Auditing an existing dashboard or component library to identify and resolve accessibility and navigation issues.

03Refining complex user flows based on specific feedback or analytics to reduce user friction.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankurjain1121/dev-workflow-skills design

For use in Claude.ai and ChatGPT

Download Skill