design

Enforce a nine-pass UX design pipeline producing standardized frontend-ready artifacts.

1|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/Ankurjain1121/dev-workflow-skills --skill design-ankurjain1121
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/Ankurjain1121/dev-workflow-skills/tree/main/plugins/ui-factory/skills/design
Command: npx skills add https://github.com/Ankurjain1121/dev-workflow-skills --skill design-ankurjain1121

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enforces a nine-pass UX design pipeline to ensure robust UI foundations before visuals, reducing the risk of "pretty but unusable" interfaces. The nine passes guide from mental model and information architecture through affordances, cognitive load, state design, flow integrity, accessibility, responsive strategy, and motion, ensuring that every design decision is justified and traceable.

Core Features & Use Cases

  • Structured nine-pass workflow covering Pass 1 through Pass 9, with artifacts produced at each stage.
  • Artifact generation and handoff to frontend design (PRD.md, UX-spec.md, audit reports, a11y reports, motion specs, tokens, and component patterns).
  • Reuse and auditing: can be used for new features or to audit and improve existing UIs, improving clarity, accessibility, and responsiveness.

Quick Start

  • Use the /design command to start a full design pipeline for a new UI concept, e.g., "revamp analytics dashboard".
  • If you already have a rough idea or PRD, provide it as input and let the pipeline generate the downstream UX and frontend-ready specs.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn rough ideas into production-ready UI design with a structured workflow?

To turn rough ideas into production-ready UI design, use a nine-pass UX pipeline that builds robust foundations before visuals. It processes concepts from mental models and information architecture through accessibility and motion, outputting standardized artifacts like PRD.md and UX-spec.md.

What is a nine-pass UX pipeline and how does it prevent unusable interfaces?

A nine-pass UX pipeline is a structured design process that enforces robust UI foundations before applying visual layers. It guides decisions through cognitive load, state design, flow integrity, and accessibility audits, ensuring every choice is justified to prevent pretty but unusable interfaces.

How do I audit an existing UI for accessibility and responsive strategy issues?

To audit an existing UI for accessibility and responsive strategy issues, run it through a structured UX pipeline that evaluates affordances, state design, and a11y compliance. This process generates dedicated audit reports and motion specs to identify and resolve usability gaps.

What UX artifacts do I need to generate for frontend handoff?

For frontend handoff, you need to generate standardized artifacts including PRD.md, UX-spec.md, audit reports, a11y reports, motion specs, design tokens, and component patterns. These outputs feed directly into the frontend design and development phase with traceable requirements.

Can I start a UX design pipeline if I already have a rough PRD?

Yes, you can start a UX design pipeline with an existing rough PRD. Providing it as input allows the nine-pass workflow to skip early ideation stages and directly generate downstream UX specifications, accessibility audits, and frontend-ready design artifacts.

Do I need external design tools to enforce a UX specification workflow?

No, you do not need external design tools to enforce this UX specification workflow. It requires no external tooling beyond standard design principles, relying entirely on its internal reasoning to produce artifacts like UX-spec.md and component patterns.