wireframe-to-spec

[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting.

Quick Summary

Goal: Bridge image inputs (wireframes, sketches) to structured UI specifications.

Workflow:

1. Detect Input Type — Hand-drawn, digital wireframe, or screenshot
2. Analyze Image — Use ai-multimodal with wireframe-specific prompts
3. Generate Spec — ASCII wireframe + components + states + responsive per ui-wireframe-protocol.md
4. Output — PBI-compatible ## UI Layout section or standalone spec file

Key Rules:

Frontend/UI Context (if applicable)

When this task involves frontend or UI changes,

UI System Context — For frontend/UI/styling tasks, MUST READ these BEFORE implementing: frontend-patterns-reference.md (component base classes, stores, forms), scss-styling-guide.md (BEM methodology, SCSS vars, responsive), design-system/README.md (design tokens, component inventory, icons). MUST READ .claude/skills/shared/ui-system-context.md for full protocol and checklists.

• Component patterns: docs/project-reference/frontend-patterns-reference.md (content auto-injected by hook — check for [Injected: ...] header before reading)

• Styling/BEM guide: docs/project-reference/scss-styling-guide.md

• Design system tokens: docs/project-reference/design-system/README.md

• UI Wireframe Protocol — Wireframe-to-implementation flow: parse layout structure, map to components, extract design tokens, generate responsive breakpoints. MUST READ .claude/skills/shared/ui-wireframe-protocol.md for full protocol and checklists. before generating output

• Always require human review — wireframe analysis is 70-80% accurate

• Route to other skills when appropriate (Figma URL → figma-design, app screenshot → design-screenshot)

Input Routing

Wireframe Analysis

Use ai-multimodal with these prompts:

Prompt 1: Layout Extraction

"Analyze this wireframe image. Identify: (1) page layout regions (header, sidebar, main, footer), (2) all UI elements with approximate position and type (button, input, table, card, dropdown, modal, tabs), (3) content hierarchy (what is primary vs secondary), (4) interactive elements, (5) any text labels or annotations, (6) navigation patterns."

Prompt 2: Component Identification

"From the wireframe, list every distinct UI component. For each: name it descriptively, classify its complexity (primitive=single element, composite=grouped elements, section=page region), note its purpose."

Output Generation

After image analysis, generate output per ui-wireframe-protocol.md:

1. ASCII Wireframe — Recreate layout using box-drawing characters
2. Component Inventory — List with tier classification (Common/Domain-Shared/Page)
3. States Table — Default, Loading, Empty, Error per view
4. Component Decomposition Tree — If detail level warrants (refine/story)
5. Responsive Suggestions — Based on layout complexity

Output Formats

Format A: PBI Section (default)

Output as ## UI Layout section compatible with PBI/story templates.

Format B: Standalone Spec

Output as team-artifacts/design-specs/{YYMMDD}-wireframe-spec-{slug}.md

Confidence & Review

• Always display confidence level for wireframe interpretation
• Always recommend human review before proceeding to implementation
• If confidence <70%: ask user clarifying questions about ambiguous elements via AskUserQuestion

Closing Reminders

• MUST break work into small todo tasks using TaskCreate BEFORE starting
• MUST search codebase for 3+ similar patterns before creating new code
• MUST cite file:line evidence for every claim (confidence >80% to act)
• MUST add a final review todo task to verify work quality MANDATORY IMPORTANT MUST READ the following files before starting:
• MUST READ .claude/skills/shared/ui-system-context.md before starting
• MUST READ .claude/skills/shared/ui-wireframe-protocol.md before starting