ixd-design-skill

🎨 IxD Design Skill

中文版

An AgentSkills-compatible skill that guides AI assistants through a structured 8-phase interaction design workflow — from product context to developer handoff.

No external tools required. Pure instruction skill. Works with any LLM that supports markdown instructions.

✨ Features

• 8-phase structured workflow — Context → Architecture → Flows → Page Specs → Components → Visual → Prototype → Delivery
• Socratic discovery — Adaptive 0–8 question pre-interview that analyzes user input and only asks what's missing
• Bilingual output — Source code in English; dialogue and deliverables follow user's input language (Chinese → Chinese, English → English)
• 22-type page taxonomy — Exhaustive page classification including 4 desktop-specific types
• 10-section per-page specs — Developer-ready interaction specifications with mandatory walkthrough
• Cross-platform dual prototypes — Separate mobile (390×844) + desktop (1280×800) HTML prototypes sharing design tokens
• PC desktop client support — Hover states, right-click menus, keyboard shortcuts, drag & drop, window management
• Slot pattern for device frames — PhoneFrame accepts a tabBar slot; WindowFrame accepts a sidebar slot — custom components, not data arrays
• TDD-first prototype workflow — Vitest + Testing Library pre-installed; data-testid built into PhoneFrame/WindowFrame for automated smoke tests before walkthrough
• Word-style desktop layout — flex flex-col h-full pattern for fixed MenuBar + Toolbar above scrollable content inside WindowFrame
• 47-item heuristic walkthrough — Automated interaction quality check across 10 categories
• Unified batch review report — All batch reviews append to phase7-review-master.md (single incremental file, no per-batch files)
• 6 auxiliary tools — Competitor analysis, heuristic review, A/B comparison, visual style exploration, multi-perspective review, micro-interaction design
• Final review gate — Mandatory walkthrough + multi-perspective review with fix cycle (max 3 rounds) before delivery
• Smart phase resumption — Dependency-aware context loading, not "load everything"
• Phase scope enforcement — Each phase has a strict boundary (MAY/MUST NOT produce table); no phase can produce content belonging to a later phase
• Token forward-reference rule — Phases 1–4 reference visual attributes via named design tokens (e.g., var(--color-surface)), never raw values; actual hex/px values are assigned only in Phases 5–6
• px-only unit standard — All measurement values across every phase and prototype code must use px; no rem, em, vw, or other units

📋 Workflow Overview

P1              P2               P3           P4              P5           P6       P7          P8
Product       → Information    → User       → Page          → Component → Visual → Prototype → Delivery
Context         Architecture     Flows        Interaction      Specs       Design               & Review
                                              Specs

All outputs are saved to docs/ixd/ in the working project directory.

🚀 Quick Start

Installation

# Add the marketplace repository
/plugin marketplace add weiping/ixd-design-skill

# Install the skill
/plugin install ixd-design

cp -r skills/ixd-design ~/.claude/skills/ixd-design

git clone https://github.com/weiping/ixd-design-skill.git
/plugin install /path/to/ixd-design-skill