FG-0504 Visual Wireframing
Description
Create visual representations of design intent before building. AI agents can build interfaces, layouts, and visual systems: but they need clear direction on what to build. Visual Wireframing establishes a practice of creating low-fidelity visual representations (ASCII art, rough sketches, text descriptions of layout) before implementation. This aligns human visual intent with agent execution before code is written.
Implementation
Before any visual implementation task, create a wireframe that communicates layout intent. Use the lowest fidelity that communicates clearly: ASCII art for layouts, text descriptions for interactions, rough sketches for visual design. Review the wireframe with the implementing agent. Build only after visual alignment is confirmed.
Success Indicators
- Visual implementations match human intent on first attempt more frequently
- Wireframes remain a working reference throughout implementation
- The gap between intended and delivered visual output decreases over time
- Wireframes are archived for future reference
Failure Modes
- Wireframes too detailed: spending more time wireframing than building
- Wireframes too vague: agent can't extract actionable design intent
- Skipping wireframes for 'simple' visual tasks that turn out to be complex
- Wireframes not shared with the implementing agent