Guide: Designing the Experience
This guide is for Designers and PMs working on the UI/UX stage. By this point, your project has confirmed requirements with acceptance criteria. Now you translate them into tangible user experiences.
What You're Working With
When you enter the UI/UX stage, you have full visibility into the confirmed requirements from the Product Spec stage. Each requirement tells you what needs to happen — your job is to define how it looks and feels.
Not every requirement needs design work. Backend-only requirements (like "session tokens must expire after 24 hours of inactivity") can be marked Not Needed for the design stage.
Defining the UI Structure
Start by organizing the interface:
- Areas — the logical sections of your product's UI (e.g., "Settings," "Login," "Dashboard")
- Screens — the specific pages within each area (e.g., "Login page," "Account security settings," "Two-factor setup modal")
- User Flows — the step-by-step paths users take for complex interactions
The AI helps you map requirements to screens and identify flows that need attention. It also references your existing product's patterns (via the Knowledge Layer) so new designs stay consistent.
Generating Mockups
You can ask the AI to generate interactive HTML mockups directly in chat. These are self-contained HTML files rendered in a sandboxed iframe — not just static images, but clickable prototypes you can interact with.
Mockups are saved as Artefacts in the project. Each gets a unique ID (like art_1) and an explanation of what it shows.
View Modes
A single mockup can show multiple variations without creating separate artefacts. You can define up to 4 View Modes, each with up to 8 options:
| View Mode | Example Options |
|---|---|
| Theme | Light, Dark |
| Data State | Loaded, Loading, Empty, Error |
| User Role | Admin, Member, Guest |
| Layout | Collapsed, Expanded |
This is useful for showing how a screen behaves in different states — like what the login page looks like with social buttons enabled vs. disabled, or how the 2FA setup flow appears for new vs. returning users.
Tracking Design Progress
Each requirement has a Design Status:
| Status | Meaning |
|---|---|
| Not Started | No design work has begun |
| Mockups Created | Initial mockups or wireframes are ready for review |
| Completed | Design is final and approved |
| Not Needed | This requirement has no UI component |
The UI/UX stage is complete when every confirmed requirement has a design status of Completed or Not Needed.
Tips
- Start with the most complex flows. Simple CRUD screens are straightforward — focus your effort on the interactions that need the most thought.
- Use the AI to stress-test edge cases. Ask it what happens when data is empty, when a user doesn't have permissions, or when an operation fails.
- Keep mockups grounded in existing patterns. The AI knows your codebase — ask it to reference your existing component library or UI conventions.
Next: Engineering picks it up — Guide: Building and Shipping.