Wireframes — Design Companion
Generate hi-fi wireframes for every screen and shared component in the milestone.
Each screen and layout component from the app structure gets its own wireframe, generated individually. The wireframe agent uses your design tokens and UI patterns extracted during codebase analysis — so the output looks like your product, not a generic template.
Three modes
Generate
Per screen / component
Each screen and layout component gets its own generation. Before generating, review and edit the instruction text pre-filled from the app structure. The agent uses your design tokens and UI patterns from codebase analysis to produce the wireframe.
Refine
Available after generation
Describe the change you want — adjust the layout, move a component, change a color treatment. The agent regenerates with your instruction applied.
Ask
Always available
Ask about any design decision — why a component was placed where it is, which token was applied, how a screen handles a specific state. The agent answers from the wireframe and your codebase context.
Key behaviours
Instruction text field
Every screen starts with a pre-filled instruction derived from the app structure. It describes the screen's purpose, what it should contain, and which existing components to reuse. Edit it before generating to guide the output.
Error handling — Ask AI to fix it
Generated code occasionally has rendering errors. When this happens, the preview shows an error banner and an 'Ask AI to fix it' button. The agent self-corrects without you having to describe the problem.
Per-screen confirm
Confirm each screen independently as you go. You don't need to generate all screens before confirming any. When all screens and layout components are confirmed, the 'Next: Tech Plan' button appears.
Wireframes
Activity
Generate to see activity
Ask about the wireframe…
▶
Generation instructions
Pre-filled from app structure…
Pre-filled from your app structure. Edit to guide the AI.