What is the 8-phase IxD workflow?

The workflow follows a logical progression: 1. Context, 2. Architecture, 3. User Flows, 4. Page Specs, 5. Components, 6. Visual Design, 7. Interactive Prototype, and 8. Final Delivery.

Does it support mobile and desktop platforms?

Yes, it is designed to handle apps, websites, mini-programs, and desktop clients (Electron/Tauri), with specific logic for cross-platform prototype generation.

Does this skill generate code or just designs?

It generates both detailed design documentation (Markdown) and functional, interactive high-fidelity prototypes in HTML/CSS, which can be used for demonstration and testing.

Where are the design deliverables saved?

All deliverables are automatically saved to a standardized 'docs/ixd/' folder in your project directory to ensure organized version control and easy access.

Can I pick up a design project where I left off?

Yes. The skill includes a 'Quick-Start & Resume System' that uses a progress.json file to track completed phases and pages, allowing for seamless resumption of work.

Professional IxD Design Workflow

Name: Professional IxD Design Workflow
Author: weiping

byweiping

•

Design Tools

Executes a comprehensive 8-phase interaction and visual design workflow for apps, websites, and desktop clients.

This skill transforms Claude into an obsessive, high-end interaction designer capable of managing the entire design lifecycle. It follows a rigorous 8-phase methodology—ranging from product context and information architecture to interactive HTML prototyping and developer handoff. By enforcing pixel-perfect precision and state completeness, it ensures that every edge case is covered. The skill automatically maintains a structured 'docs/ixd/' directory and a progress tracker, allowing teams to seamlessly resume complex design tasks and generate professional-grade documentation directly within their repository.

Key Features

01Built-in design principles based on Rams-style functional purism and Gestalt proximity

02Automated directory management and progress tracking via progress.json

03Generation of interactive HTML prototypes for mobile and desktop platforms

04Comprehensive page-level interaction specifications and component library documentation

052 GitHub stars

06Standardized 8-phase workflow: context, architecture, flows, specs, components, visual, prototype, and delivery

Use Cases

01Transforming a raw PRD into detailed user flows and a navigable information architecture

02Building high-fidelity interactive HTML prototypes for rapid user testing and stakeholder feedback

03Creating standardized developer handoff documents including design tokens and component states

Key Features

01Built-in design principles based on Rams-style functional purism and Gestalt proximity

02Automated directory management and progress tracking via progress.json

03Generation of interactive HTML prototypes for mobile and desktop platforms

04Comprehensive page-level interaction specifications and component library documentation

052 GitHub stars

06Standardized 8-phase workflow: context, architecture, flows, specs, components, visual, prototype, and delivery

Use Cases

01Transforming a raw PRD into detailed user flows and a navigable information architecture

02Building high-fidelity interactive HTML prototypes for rapid user testing and stakeholder feedback

03Creating standardized developer handoff documents including design tokens and component states