UX Wireframe

UX Wireframe

Workflow

1. Parse $ARGUMENTS → {subject} + options (--fidelity bw|clean|polished, --screens N, --flow). Missing subject → AskUserQuestion.

2. Discover inputs — Glob in priority order:

   • ux/*-{subject}.md (from /ux-strategize)
   • PRD-*{subject}*-llm.md, analysis/*{subject}*
   • dev/ux/design-conventions.md (optional overrides)
   • Nothing found → AskUserQuestion for: target user, core job, key anxiety.

3. Design brief — See references/design-translation.md:

   • Extract YAML blocks, cross-reference artifacts, build interaction design decisions
   • Identify contradictions (says vs thinks), force imbalances, emotional peaks, opportunity gaps
   • Determine language from artifact content (don't assume locale)

4. Map screens — See references/screen-mapping.md:

   • Engagement: references/patterns.md (entry, result, dashboard, alerts)
   • Functional: references/functional-patterns.md (lists, forms, detail, workflows, settings)
   • Derive from: journey stages → JTBD core job arc → VPC → ask user

5. Design system — Glob dev/ux/design-system.yaml. Missing → create from scripts/design-system-defaults.yaml.

6. Generate HTML per screen — See references/html-template.md + references/ux-principles.md + references/interaction-states.md:

   • Use scripts/boilerplate.html as base skeleton
   • Apply design brief (infer design from insights, don't paste copy)
   • Calibrate complexity to persona tech comfort
   • UX laws: Fitts (CTA size), Hick (limit choices), Jakob (familiar patterns)
   • Trust signals where anxiety forces are strongest; emotional arc pacing
   • All states: loading, success, error, empty — never just happy path
   • Annotations ①②③ with rationale (WHY not WHAT) traceable to artifact source
   • Copy from artifacts in detected language (not lorem ipsum) — promptframe principle

7. Write dual output to dev/ux/wireframes/{subject}/ — See references/output-format.md:

   • Human: index.html (navigator) + NN-{screen-name}.html (wireframes). --flow → linked navigation.
   • LLM: screen-specs-llm.md (component trees, states, transitions) + design-brief.md (rationale)
   • Self-contained HTML: inline CSS/JS, no CDN, mobile-first 375px, CSS custom properties

8. Open — xdg-open / open the index file.

Artifact → Design Translation