UX Flow Plan

Create a high-level architecture plan that starts from the user experience and only then maps to code-level anchors.

Steps

1. Restate the feature goal in product terms, using the user's language.

1. Build the current-state UX flow as a tree:

``text User action └─ System behavior └─ Existing architectural layer └─ Relevant function/file anchor ``

1. Build the desired-state UX flow as a second tree:

``text User action └─ System behavior └─ New or changed architectural layer └─ Relevant function/file anchor ``

1. Identify the architectural boundary decisions:

- Which layer detects the condition - Which layer owns side effects - Which layer updates UI/status - Which layer persists or mutates state

1. Attach implementation anchors after the trees, not before:

- Function names - File paths - Existing abstractions to reuse - Tests that should cover the flow

1. End with a small decision list:

- Recommended architecture - Alternatives rejected - Open questions or assumptions

Rules

• Start with UX and system flow, not line numbers or code edits.
• Use tree diagrams for flows whenever possible.
• Keep function names and file paths attached as anchors, not as the main narrative.
• Do not over-specify implementation details before the architectural boundary is clear.
• Separate "current flow" from "desired flow".
• Call out whether a feature is coupled to an existing concept or intentionally independent from it.
• Prefer plain product and architecture language over framework-specific jargon unless the jargon names a real boundary.