wireframe-to-spec

name	wireframe-to-spec
version	1.0.0
description	[Frontend] Use when you need to convert hand-drawn wireframes, digital wireframes, or UI sketches into structured design specifications.

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,

• Component patterns: docs/project-reference/frontend-patterns-reference.md (read directly when relevant; do not rely on hook-injected conversation text)

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

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

• 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

Input	Detection	Action
Hand-drawn sketch photo	Image with rough/organic lines	Analyze with wireframe prompts
Digital wireframe	Image with clean lines/shapes	Analyze with wireframe prompts
Wireframe tool export	Image from Excalidraw/Balsamiq/MockFlow	Analyze with wireframe prompts
Figma URL	figma.com in text	Route to /figma-design instead
App screenshot	Polished UI with real data	Route to /design-screenshot instead

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

---

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

UI System Context — For ANY task touching .ts, .html, .scss, or .css files:

MUST ATTENTION READ before implementing:

1. docs/project-reference/frontend-patterns-reference.md — component base classes, stores, forms
2. docs/project-reference/scss-styling-guide.md — BEM methodology, SCSS variables, mixins, responsive
3. docs/project-reference/design-system/README.md — design tokens, component inventory, icons

Reference docs/project-config.json for project-specific paths.

UI Wireframe Protocol — Wireframe-to-implementation flow: (1) Process design input (Figma/screenshot/sketch via ai-multimodal). (2) Create ASCII wireframe with box-drawing chars. (3) Build component inventory with tier classification (Common/Domain-Shared/Page). (4) Document states (Default/Loading/Empty/Error). (5) Map to design tokens. (6) Define responsive breakpoints. Search existing component libraries before creating new. Progressive detail by skill level (idea=sketch, story=full tree+specs).

Critical Thinking Mindset — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.

AI Mistake Prevention — Failure modes to avoid on every task:

Check downstream references before deleting. Deleting components causes documentation and code staleness cascades. Map all referencing files before removal. Verify AI-generated content against actual code. AI hallucinates APIs, class names, and method signatures. Always grep to confirm existence before documenting or referencing. Trace full dependency chain after edits. Changing a definition misses downstream variables and consumers derived from it. Always trace the full chain. Trace ALL code paths when verifying correctness. Confirming code exists is not confirming it executes. Always trace early exits, error branches, and conditional skips — not just happy path. When debugging, ask "whose responsibility?" before fixing. Trace whether bug is in caller (wrong data) or callee (wrong handling). Fix at responsible layer — never patch symptom site. Assume existing values are intentional — ask WHY before changing. Before changing any constant, limit, flag, or pattern: read comments, check git blame, examine surrounding code. Verify ALL affected outputs, not just the first. Changes touching multiple stacks require verifying EVERY output. One green check is not all green checks. Holistic-first debugging — resist nearest-attention trap. When investigating any failure, list EVERY precondition first (config, env vars, DB names, endpoints, DI registrations, data preconditions), then verify each against evidence before forming any code-layer hypothesis. Surgical changes — apply the diff test. Bug fix: every changed line must trace directly to the bug. Don't restyle or improve adjacent code. Enhancement task: implement improvements AND announce them explicitly. Surface ambiguity before coding — don't pick silently. If request has multiple interpretations, present each with effort estimate and ask. Never assume all-records, file-based, or more complex path.

IMPORTANT MUST ATTENTION read frontend pattern docs, SCSS guide, and design system tokens BEFORE any UI implementation.

IMPORTANT MUST ATTENTION follow wireframe protocol: ASCII wireframe, component inventory with tiers, states table, design tokens, responsive breakpoints.

MUST ATTENTION apply critical thinking — every claim needs traced proof, confidence >80% to act. Anti-hallucination: never present guess as fact.

MUST ATTENTION apply AI mistake prevention — holistic-first debugging, fix at responsible layer, surface ambiguity before coding, re-read files after compaction.

Closing Reminders

IMPORTANT MUST ATTENTION break work into small todo tasks using TaskCreate BEFORE starting IMPORTANT MUST ATTENTION search codebase for 3+ similar patterns before creating new code IMPORTANT MUST ATTENTION cite file:line evidence for every claim (confidence >80% to act) IMPORTANT MUST ATTENTION add a final review todo task to verify work quality MANDATORY IMPORTANT MUST ATTENTION READ the following files before starting:

IMPORTANT MUST ATTENTION READ CLAUDE.md before starting

[TASK-PLANNING] Before acting, analyze task scope and systematically break it into small todo tasks and sub-tasks using TaskCreate.