How does it handle hand-offs to frontend development?

The /design build command takes the completed UX specification and passes the full context—including IA, state design, and accessibility rules—to frontend-specific skills for high-fidelity implementation.

Does it support design systems and tokens?

Yes, the /design tokens command can extract existing CSS/Tailwind variables from your project or generate a new set of design system tokens from scratch based on your brand guidelines.

What is the 9-pass UX analysis?

It is a non-negotiable structural review that evaluates a UI's mental model, information architecture, affordances, cognitive load, state design, flow integrity, accessibility, responsiveness, and motion before any visual styling begins.

Can this skill audit my existing React or HTML code?

Yes, the /design audit and /design a11y commands analyze your current codebase to identify critical usability issues and WCAG compliance gaps, providing actionable improvement lists.

UX Design Factory

Name: UX Design Factory
Author: Ankurjain1121

byAnkurjain1121

0•

デザインツール

Transforms rough ideas into high-fidelity UX specifications and production-ready UI code through a structured design thinking pipeline.

The UX Design Factory skill bridges the gap between vague product ideas and professional user interfaces by enforcing a rigorous, 9-pass UX analysis before any code is written. It automates the creation of Product Requirement Documents (PRDs), performs accessibility audits, generates motion specifications, and manages design tokens, ensuring that Claude builds interfaces that are not just visually appealing but also functional and user-centric. This skill prevents 'pretty but unusable' designs by forcing structural and cognitive analysis early in the development lifecycle, providing a clear roadmap from concept to implementation.

主な機能

01Comprehensive UI audits for usability and WCAG accessibility compliance

020 GitHub stars

03Iteration workflows to improve existing UIs based on user feedback and analytics

049-pass UX analysis covering mental models, IA, affordances, and cognitive load

05Automated PRD generation from minimal 'vibe-level' descriptions

06Motion design specifications including timing, easing, and performance budgets

ユースケース

01Refining complex user flows based on specific customer feedback or support tickets

02Generating a detailed UI roadmap for a new MVP from a single sentence idea

03Auditing and fixing accessibility and usability bottlenecks in an existing dashboard

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