Explore Product Directions
Compare multiple interface directions before committing to one solution path.
You have an idea for an application — or a feature — but you are not sure what it should look like. What screens does it need? What goes on each screen? How should the flow work? Instead of guessing, you explore multiple directions and pick the one that works best.
When This Applies
- You are starting a new product and need to figure out the shape of the interface.
- You have a feature idea but no clear picture of how it fits into screens and blocks.
- You want to see multiple approaches before picking a direction.
- You want to validate that an idea actually makes sense as an interface — before writing any code.
The Workflow
1. Start with a rough description
Write a short description of what the app should do. It does not need to be detailed — a few sentences is enough.
"A recipe manager for home cooks. Users can save recipes, organize them into collections, plan weekly meals, and generate a shopping list from selected recipes."
2. Generate a UI Spec
Give this description to an AI agent along with the UI Spec Format. The agent returns a structured spec — screens, blocks, purposes. You can do this through the Spec Canvas wizard (Create with AI) or directly in an AI chat.
At this stage, use L0 or L1 detail level. You are exploring what screens the app needs, not designing pixel-perfect layouts.
3. Browse the result
Look at the screens and blocks the AI generated. Ask yourself:
- Do these screens cover what the app needs?
- Is anything missing?
- Does the flow between screens make sense?
- Are there screens that should be merged or split?
This is the first time the app becomes visible as a structure — not as a vague idea in your head, but as a concrete list of screens with defined purposes.
4. Try a different angle
The first spec is rarely the best one. Try variations:
- Give the same description to a different AI agent and compare what it produces.
- Change the description — emphasize a different core feature and see how it reshapes the screen structure.
- Ask the agent to rethink the spec with a different approach: "Make it mobile-first" or "Organize around a single dashboard instead of separate pages."
Each variation gives you a different take on the same idea. You are not committing to any of them yet — you are collecting options.
5. Generate HTML implementations
Pick one or two specs that look promising. For key screens, generate HTML implementations from multiple agents. This turns abstract block purposes into real visual layouts you can compare side by side.
At this stage you are not looking for a finished design. You are checking whether the screen structure actually works as an interface — whether the blocks make sense spatially, whether the flow feels right, whether anything is awkward or missing.
6. Refine and commit
Based on what you see, update the spec. Add blocks where the structure was too vague, merge screens that turned out redundant, adjust purposes that were misinterpreted. You can do this manually or through AI evolution (evolve the whole spec, a single screen, or a specific block).
When the direction feels right, the spec is ready to use — as a handoff to a coding agent, as documentation, or as a foundation for further detailing.
What You Get
- A structured spec that captures the shape of the application.
- Visual evidence of how different directions look as real interfaces.
- Confidence that you are building the right thing — before writing any code.
Tips
- Do not over-detail early. L0-L1 is enough for exploration. Save L2-L3 for screens you are committed to.
- Try at least two agents. Different agents structure specs differently. Claude might produce fewer, richer screens. GPT might produce more screens with thinner content. Seeing both helps.
- Time-box the exploration. Two or three rounds of generate-compare-refine is usually enough. If you are still unsure after that, the problem is likely the idea, not the spec.
- Save your variants. Use revisions in Spec Canvas or simply keep multiple YAML files. You may want to revisit a discarded direction later.
Related
- First Project — step-by-step walkthrough of the basic flow.
- Patterns & Practices — progressive precision, behavioral specs, and other techniques.
- Prepare Handoff to AI — what to do once you have a direction and want to hand it off for implementation.