App Structure — Design Companion
Identify what changes are needed for this milestone: which screens, which flows, which shared components.
Three modes
Generate
One-time kick-off
Click Generate to let the AI produce the full diff based on the PRD. The agent reads your existing screen inventory and shared components, then proposes what changes are needed for this milestone.
Refine
Available after generation
Request modifications to the proposed diff. Add a screen, remove one, adjust a nav edge. Repeat until it reflects what you want to build.
Ask
Always available
Ask anything about the structure — before or after generation. What does a screen do? Which screens connect to each other? Which layout components does a page use? Which pages share a given component? The agent answers from your codebase and the proposed changes.
What it produces
Screen Changes
New screens to add and existing screens to modify. Each entry includes the route, a description of the screen's purpose, and the reasoning tied to the PRD requirement that drove the change.
Navigation Changes
New or modified edges between screens — including the trigger that causes the navigation (a button, a tab, a redirect) and the reasoning behind it. These become the user flows that feed directly into wireframe generation.
Layout Changes
Changes to shared components that appear across multiple screens. This is the most important output to understand.
Why Layout Changes matter
Most real milestones don't just add screens — they update shared UI. A header badge, a new tab in a nav bar, an updated chat input component. These elements appear across many screens.
If you scope changes screen-by-screen, you'd regenerate wireframes for every screen that includes the shared component. That's redundant and error-prone.
The App Structure agent identifies these cross-screen components and marks them as a single Layout Change. The Wireframe agent then updates the component definition once — and all screens that reference it automatically reflect the change.
The scope isn't just app-wide components. Any component reused across a subset of screens qualifies — a chat input shared by 4 agent screens, a sidebar used by all authenticated views, a ticket card rendered in both the inbox and the triage dashboard.
App Structure
Activity
Generate or brainstorm
Brainstorm screens and user flows in the chat, or click Generate to let AI propose an app structure
Ask a question about the IA…
▶
Proposed Changes
Confirm before moving on
Once the proposed changes reflect what you want to build, confirm. This locks the app structure as the input for wireframe generation. The wireframe agent uses the screen list, navigation edges, and layout change definitions to produce hi-fi layouts — nothing more, nothing less.