Redesign Phase 4 navigation: adaptive dashboard, design log, two-option transitions
Replace static activity menu with adaptive dashboard that reads agent dialogs (session plans) and per-page design log to suggest where to continue. Add explicit design log reporting points with exact file paths and formats to all Phase 4 and 5 workflow files. Replace all "Return to activity menu" dead ends with two-option transitions. Rename Conceptualize → Discuss. Implements learnings from Källa Fordonservice project. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
040d5f9101
commit
f0e83fb872
|
|
@ -45,6 +45,22 @@ When you complete a phase milestone, add an entry to the Progress section below.
|
|||
|
||||
---
|
||||
|
||||
## Design Loop Status
|
||||
|
||||
> Per-page design progress. Updated by agents at every design transition.
|
||||
|
||||
| Scenario | Step | Page | Status | Updated |
|
||||
|----------|------|------|--------|---------|
|
||||
|
||||
**Status values:** `discussed` → `wireframed` → `specified` → `explored` → `building` → `built` → `approved` | `removed`
|
||||
|
||||
**How agents use this table:**
|
||||
- **Append a row** when a page reaches a new status (do not overwrite — the latest row per page is the current status)
|
||||
- **Read on startup** to determine where the project stands and what to suggest next
|
||||
- **The latest row per Step** is the current status for that page
|
||||
|
||||
---
|
||||
|
||||
## Key Decisions
|
||||
|
||||
| Date | Decision | Context | Made By |
|
||||
|
|
|
|||
|
|
@ -86,18 +86,18 @@
|
|||
|
||||
---
|
||||
|
||||
## Pages in This Scenario
|
||||
## Scenario Steps
|
||||
|
||||
Page folders are created via [O] Outline (page-by-page dialog) or [D] Design (first page + Phase 4).
|
||||
Steps are outlined one at a time after scenario creation. The first step is processed automatically.
|
||||
|
||||
| Page Number | Folder | Purpose | Exit Action |
|
||||
|-------------|--------|---------|-------------|
|
||||
| [NN].1 | `[NN].1-[page-slug]/` | [Page purpose] | [Interaction that leads to next page] |
|
||||
| [NN].2 | `[NN].2-[page-slug]/` | [Page purpose] | [Interaction that leads to next page] |
|
||||
| [NN].3 | `[NN].3-[page-slug]/` | [Page purpose] | [Final — scenario success] ✓ |
|
||||
| Step | Folder | Purpose | Exit Action |
|
||||
|------|--------|---------|-------------|
|
||||
| [NN].1 | `[NN].1-[page-slug]/` | [Step purpose] | [Interaction that leads to next step] |
|
||||
| [NN].2 | `[NN].2-[page-slug]/` | [Step purpose] | [Interaction that leads to next step] |
|
||||
| [NN].3 | `[NN].3-[page-slug]/` | [Step purpose] | [Final — scenario success] ✓ |
|
||||
|
||||
**First page** ([NN].1) includes full entry context (Q3 + Q4 + Q5 + Q6).
|
||||
**On-page interactions** (that don't leave the page) are documented as storyboard items within each page spec.
|
||||
**First step** ([NN].1) includes full entry context (Q3 + Q4 + Q5 + Q6).
|
||||
**On-step interactions** (that don't leave the step) are documented as storyboard items within each page spec.
|
||||
```
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -178,61 +178,73 @@ Before proceeding, verify the scenario outline:
|
|||
2. Create file: `{output_folder}/C-UX-Scenarios/[NN-slug]/[NN-slug].md`
|
||||
3. Use the template from data/ to structure the content from the 8 answers
|
||||
|
||||
### 7. After Each Scenario — Ask What's Next
|
||||
### 7. After Scenario Creation — Outline Scenario Steps
|
||||
|
||||
After completing a scenario, present the user with a choice:
|
||||
After the scenario file is saved (Q1-Q8 answered, quality gates passed), begin outlining scenario steps from the Q8 shortest path.
|
||||
|
||||
#### Automatic First Step
|
||||
|
||||
Process the first scenario step from Q8 automatically:
|
||||
1. Name it using Q8's first step name
|
||||
2. Create the page folder (see Page Folder Structure below)
|
||||
3. Fill first-step metadata from Q3 (user situation), Q4 (mental state), Q5 (device), Q6 (entry point)
|
||||
4. Present the result to the user
|
||||
|
||||
Then show the Scenario Step Menu.
|
||||
|
||||
#### Scenario Step Menu
|
||||
|
||||
After each scenario step is outlined, present:
|
||||
|
||||
Display:
|
||||
```
|
||||
Scenario [NN] complete! What would you like to do?
|
||||
Step [NN.X] "[step-name]" outlined!
|
||||
|
||||
[N] Define the next scenario — [next transaction from the plan]
|
||||
[O] Outline scenario pages — create page folders with boilerplate specs
|
||||
[D] Start designing — create first page folder and jump to Phase 4
|
||||
[C] Continue to generating the overview (when all scenarios are done)
|
||||
1. Outline next scenario step — [next step name from Q8]
|
||||
2. Start designing — enter the design loop from step 1
|
||||
|
||||
---
|
||||
[N] Define the next scenario
|
||||
[C] Continue to overview (when all scenarios are done)
|
||||
```
|
||||
|
||||
**Adaptive labels:**
|
||||
- Option 1 shows the name of the next step from Q8
|
||||
- When all Q8 steps are outlined: Option 1 becomes unavailable — show "All [X] scenario steps outlined!"
|
||||
- Option 2: **"Start designing"** when only 1 step is outlined. **"Start designing pages"** when 2+ steps are outlined.
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
- IF N: Loop back to instruction 1 for the next transaction and target group. The scenario outline is saved — page folders can be created later.
|
||||
- IF O: Start the Page Outline Dialog (see below). Walk through pages one at a time, starting from the first page. The user can stop at any point and return to this menu.
|
||||
- IF D: Create the first page folder (see Page Folder Structure below), then hand over to Phase 4 (UX Design). The remaining pages can be outlined later.
|
||||
- IF C: Load, read entire file, then execute {nextStepFile} (only when all planned scenarios are complete)
|
||||
- **IF 1 (Outline next):** Ask the two questions for the next step (see Per-Step Dialog below), create the folder, then show this menu again.
|
||||
- **IF 2 (Start designing):** Hand over to Phase 4 (UX Design) → Discuss activity. Phase 4 handles the creative dialog (D1, D2) and all design decisions. The design loop always starts from scenario step 1, regardless of how far the outline has progressed.
|
||||
- **IF N:** Loop back to instruction 1 for the next scenario. The current scenario's remaining steps can be outlined later.
|
||||
- **IF C:** Load, read entire file, then execute {nextStepFile} (only when all planned scenarios are complete).
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- After other menu items execution, return to this menu
|
||||
- User can chat or ask questions — always respond and then display the menu again
|
||||
- Options [O] and [D] are always available — the user decides when to outline pages
|
||||
- User can chat or ask questions — always respond and then redisplay the menu
|
||||
- The first step is processed automatically after scenario creation (no menu prompt first)
|
||||
|
||||
### Page Outline Dialog
|
||||
#### Per-Step Dialog
|
||||
|
||||
When the user selects [O], walk through each page as a conversation. Q8's shortest path gives the rough page sequence — the outline dialog refines it by identifying what happens on each page.
|
||||
For each step after the first, refine Q8's outline into a concrete scenario step:
|
||||
|
||||
**Start from page 1** (already defined by Q6 + Q8 step 1).
|
||||
**1. "What's the point of this step?"**
|
||||
|
||||
#### For each page, ask two questions:
|
||||
|
||||
**1. "What's the point of this page?"**
|
||||
|
||||
What does the user need to accomplish here? This becomes the page purpose.
|
||||
What does the user need to accomplish here? This becomes the step purpose.
|
||||
- e.g., "See a list of news articles" or "Find the phone number and opening hours"
|
||||
|
||||
**2. "What does the user do to move forward?"**
|
||||
|
||||
What interaction takes them to the next step? This defines the exit action.
|
||||
- e.g., "Selects 'News' in the menu" → next page is the News listing
|
||||
- e.g., "Clicks 'Read more' on an article" → next page is the Article detail
|
||||
- e.g., "Selects 'News' in the menu" → next step
|
||||
- e.g., "Clicks 'Read more' on an article" → next step
|
||||
|
||||
#### Two types of interactions:
|
||||
**Two types of interactions:**
|
||||
- **Leaves the step** → new scenario step (new page folder, next number)
|
||||
- **Stays on the step** → storyboard item (documented within the page spec as an on-page interaction)
|
||||
|
||||
- **Leaves the page** → new scenario step (new page folder, next number)
|
||||
- **Stays on the page** → storyboard item (documented within the page spec as an on-page interaction)
|
||||
|
||||
#### After each page, create the folder and continue:
|
||||
|
||||
Create the page folder, then ask about the next page. The user can say "stop" at any point to return to the scenario menu.
|
||||
After answering, create the page folder and return to the Scenario Step Menu.
|
||||
|
||||
### Page Folder Structure
|
||||
|
||||
|
|
@ -271,7 +283,7 @@ Each page folder contains:
|
|||
- {Any interactions that keep the user on this page — storyboard items}
|
||||
```
|
||||
|
||||
The **first page** additionally includes:
|
||||
The **first step** additionally includes:
|
||||
- **User Situation** from Q3
|
||||
- **Mental State** (hope + worry) from Q4
|
||||
- **Discovery Method** from Q6
|
||||
|
|
@ -280,7 +292,7 @@ The **first page** additionally includes:
|
|||
|
||||
When [C] is selected, ALL scenarios from the approved plan must be outlined and pass quality gates. Then load and read fully `{nextStepFile}` to begin generating the overview.
|
||||
|
||||
When [D] is selected, hand over to Phase 4 with the current scenario's first page folder. The user can return to Phase 3 later for remaining scenarios.
|
||||
When **Start designing** is selected, hand over to Phase 4 with the current scenario context. The design loop starts from scenario step 1. The user can return to Phase 3 later for remaining scenarios or steps.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -295,6 +307,9 @@ When [D] is selected, hand over to Phase 4 with the current scenario's first pag
|
|||
- All scenarios from approved plan completed before proceeding
|
||||
- Conversation mode: Dialog felt like a natural conversation, not a form to fill
|
||||
- Suggest mode: All 8 answers grounded in actual Trigger Map/Brief data, presented for user review
|
||||
- First scenario step processed automatically after scenario creation
|
||||
- User presented with clear two-option flow after each step (outline next / start designing)
|
||||
- "Start designing" always begins from scenario step 1
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
|
|
@ -306,5 +321,8 @@ When [D] is selected, hand over to Phase 4 with the current scenario's first pag
|
|||
- Using generic mental states or vague success goals
|
||||
- Creating branching paths instead of linear sunshine paths
|
||||
- Not creating output files
|
||||
- Not automatically processing the first scenario step after scenario creation
|
||||
- Starting the design loop from a step other than step 1
|
||||
- Presenting the old [N]/[O]/[D]/[C] menu instead of the simplified two-option flow
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ Your scenarios are ready for design. How would you like to approach each?
|
|||
|
||||
**Approaches:**
|
||||
[K] Sketch — I will draw it myself, agent interprets later
|
||||
[C] Conceptualize — Let us explore what the design needs together
|
||||
[C] Discuss — Creative dialog for page design
|
||||
[S] Suggest — Agent proposes step by step, I confirm each
|
||||
[D] Dream Up — Agent creates the whole flow, I review the result
|
||||
[L] Later — Decide when I start Phase 4
|
||||
|
|
@ -121,7 +121,7 @@ Explain to user:
|
|||
|
||||
**Phase 4: UX Design** takes each scenario outline and designs it using your chosen approach:
|
||||
- **Sketch** scenarios wait for your drawings
|
||||
- **Conceptualize** scenarios start with collaborative exploration
|
||||
- **Discuss** scenarios start with a creative dialog for each page
|
||||
- **Suggest** scenarios let the agent propose step by step
|
||||
- **Dream Up** scenarios let the agent create autonomously
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
---
|
||||
name: 'step-01-exploration'
|
||||
description: 'Help user think through the concept, flow, and solution before sketching begins'
|
||||
description: 'Creative dialog for page design — discuss what the page needs, then choose how to visualize'
|
||||
|
||||
# File References
|
||||
workflowFile: '../workflow.md'
|
||||
activityWorkflowFile: '../workflow-conceptualize.md'
|
||||
designLoopGuide: '../data/guides/DESIGN-LOOP-GUIDE.md'
|
||||
---
|
||||
|
||||
# Step 1: Scenario Exploration
|
||||
# Step 1: Page Design Dialog
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Help user think through the concept, flow, and solution before sketching begins. This step is OPTIONAL — only use if the user needs conceptual help before creating visuals.
|
||||
Lead the designer through a focused creative dialog for the current page. Two questions establish what the page needs, natural discussion refines it, then the designer chooses how to visualize. Every transition offers two choices: go deeper on this page, or move to the next scenario step.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
|
|
@ -19,7 +20,6 @@ Help user think through the concept, flow, and solution before sketching begins.
|
|||
|
||||
- 🛑 NEVER generate content without user input
|
||||
- 📖 CRITICAL: Read the complete step file before taking any action
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
|
||||
- 📋 YOU ARE A FACILITATOR, not a content generator
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
|
||||
|
||||
|
|
@ -33,160 +33,253 @@ Help user think through the concept, flow, and solution before sketching begins.
|
|||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Focus on helping the user think through concepts — do not create detailed specifications
|
||||
- 🚫 FORBIDDEN to jump to specification details before the concept is explored
|
||||
- 💬 Approach: Ask exploratory questions, reflect back, connect to Trigger Map
|
||||
- 📋 This step is optional — skip if user has sketches ready or knows exactly what they want
|
||||
- 🎯 Focus on the two design questions — do not create detailed specifications
|
||||
- 🚫 FORBIDDEN to jump to specification details before the dialog is complete
|
||||
- 💬 Approach: Set the scene, ask D1 and D2, discuss naturally, then offer visualization options
|
||||
- 📋 After each completed stage, update the design log and present the two-option transition
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Guide user through conceptual exploration of what the design needs
|
||||
- 💾 Save exploration notes when user is ready to sketch
|
||||
- 🎯 Guide user through the page design dialog (D1, D2)
|
||||
- 💾 Save findings to the page specification (fill empty sections, not a separate file)
|
||||
- 📖 Reference Trigger Map for persona driving forces
|
||||
- 📊 Update design log status after each transition
|
||||
- 🚫 FORBIDDEN to skip user confirmation before proceeding
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: Scenario data, Trigger Map, Product Brief
|
||||
- Focus: Conceptual exploration — what, why, and how the page serves users
|
||||
- Limits: Do not create detailed specifications or component lists (that's steps-p/)
|
||||
- Dependencies: Active scenario selected from dashboard
|
||||
- Available context: Scenario data, Trigger Map, Product Brief, page boilerplate from Phase 3
|
||||
- Focus: What the page needs to do and whether it should exist at all
|
||||
- Limits: Do not create detailed component specs (that's steps-p/)
|
||||
- Dependencies: Page folder exists from Phase 3 scenario outline
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. Check Prerequisites
|
||||
### 1. Load Context
|
||||
|
||||
Determine if this step is needed:
|
||||
Read the scenario file and current page boilerplate. Determine:
|
||||
- Which page in the scenario flow this is (first, middle, last)
|
||||
- What the scenario's driving forces are (Q4: hopes and worries)
|
||||
- What the previous page's exit action was (if not first page)
|
||||
- What platform this is (Q5: mobile, desktop, tablet, web, iOS, etc.)
|
||||
|
||||
**Use this step when:**
|
||||
- User has no existing sketches
|
||||
- User is unsure how to approach a feature
|
||||
- User wants to explore the concept together
|
||||
If other pages in this scenario have been designed, read their specs to understand established patterns (navigation, shared components, layout conventions). Do NOT draw from memory.
|
||||
|
||||
**Skip this step when:**
|
||||
- User has sketches ready
|
||||
- User knows exactly what they want
|
||||
### 2. Set the Scene
|
||||
|
||||
### 2. Explore User Goal
|
||||
Present the page context to the designer.
|
||||
|
||||
<output>**Let's explore this concept together before sketching.**
|
||||
**First page in the scenario:**
|
||||
|
||||
I'll help you think through:
|
||||
<output>
|
||||
**[Page name] — Step [NN.X] in [Scenario Name]**
|
||||
|
||||
- What the user is trying to accomplish
|
||||
- What content and features they need
|
||||
- How psychological triggers from your Trigger Map apply
|
||||
- What the interaction flow should be</output>
|
||||
The user arrives: [Q3 situation + Q6 entry point]
|
||||
They're hoping: [Q4 hope]
|
||||
They're worried about: [Q4 worry]
|
||||
Device: [Q5]
|
||||
</output>
|
||||
|
||||
<ask>**What is the user trying to accomplish on this page?**
|
||||
**Subsequent pages:**
|
||||
|
||||
What's their goal? What brought them here?</ask>
|
||||
<output>
|
||||
**[Page name] — Step [NN.X] in [Scenario Name]**
|
||||
|
||||
<action>Listen and reflect back the core user goal</action>
|
||||
In the previous step, the user [exit action from previous page].
|
||||
Now they're on [page name].
|
||||
</output>
|
||||
|
||||
### 3. Explore Page Elements
|
||||
### 3. Design Question D1
|
||||
|
||||
<ask>**What do they need to see or do to accomplish that?**
|
||||
<ask>**What is the main thing the user should do on this page?**</ask>
|
||||
|
||||
Think about:
|
||||
<action>Listen and reflect back. Connect to the scenario's end goal — begin with the end in mind. The primary action should move the user toward the scenario's success outcome (Q7).</action>
|
||||
|
||||
- Information they need
|
||||
- Actions they can take
|
||||
- Choices they need to make</ask>
|
||||
### 4. Design Question D2
|
||||
|
||||
<action>Help structure the page elements</action>
|
||||
<ask>**Can we simplify, remove this step completely, or simplify it?**</ask>
|
||||
|
||||
### 4. Connect to Trigger Map
|
||||
<action>Challenge the page's existence. Can the previous page handle this? Can we combine steps? Every page must justify itself — same philosophy as Q8's "minimum viable steps."</action>
|
||||
|
||||
<ask>**Let's check your Trigger Map - what drives this user?**
|
||||
**If the user decides to eliminate the step:**
|
||||
1. Update the scenario outline (remove/merge the step)
|
||||
2. Remove the page folder
|
||||
3. Append status `removed` to `{output_folder}/_progress/00-progress.md` Design Loop Status table:
|
||||
`| [Scenario slug] | [NN.X] | [Page name] | removed | [YYYY-MM-DD] |`
|
||||
4. Loop back to step 2 (Set the Scene) for the next page
|
||||
|
||||
Looking at your personas and driving forces:
|
||||
### 5. Natural Discussion
|
||||
|
||||
- What positive goals does this page support?
|
||||
- What negative outcomes does it help them avoid?</ask>
|
||||
After D1 and D2, continue the conversation naturally. The agent's job:
|
||||
|
||||
<action>Reference Trigger Map from B-Trigger-Map/ if available</action>
|
||||
<action>Connect design choices to user psychology</action>
|
||||
- **Connect to driving forces** — Reference the Trigger Map. What hopes does this page fulfill? What worries does it address?
|
||||
- **Identify content needs** — What information, actions, and choices belong on this page?
|
||||
- **Surface on-page interactions** — Are there interactions that keep the user on this page? (storyboard items: filters, accordions, modals, form steps)
|
||||
- **Note complexity signals** — Are there storyboard items? Complex functionality? If web: responsive content decisions will be needed later.
|
||||
- **Default device** — The scenario's Q5 prescribes the primary device. All design work (wireframe, spec, discussion) targets this device first. Other viewports are explored as responsive diffs after the base spec is complete.
|
||||
|
||||
### 5. Map Interaction Flow
|
||||
Do NOT rush this. Let the designer think. Ask follow-up questions. Reflect back what you hear.
|
||||
|
||||
<ask>**How does the interaction flow?**
|
||||
### 6. Present Discussion Summary
|
||||
|
||||
Walk me through:
|
||||
When the discussion feels complete, summarize:
|
||||
|
||||
1. User arrives (from where?)
|
||||
2. User sees... (what catches attention?)
|
||||
3. User does... (main actions?)
|
||||
4. User goes... (where next?)</ask>
|
||||
<output>
|
||||
**Here's what we've established for [page name]:**
|
||||
|
||||
<action>Sketch out the interaction flow verbally</action>
|
||||
**Primary Action:** {{primary_action}}
|
||||
**Default Device:** {{device_from_Q5}} (base spec targets this viewport)
|
||||
**Content Needs:** {{content_list}}
|
||||
**Driving Forces Addressed:** {{trigger_connections}}
|
||||
**On-Page Interactions:** {{storyboard_items_if_any}}
|
||||
**Complexity Notes:** {{responsive_needs_storyboard_functionality}}
|
||||
</output>
|
||||
|
||||
### 6. Present Exploration Summary
|
||||
<action>Update the page specification with discussion findings (fill empty sections in the existing page spec file)</action>
|
||||
<action>Update design log: append row with status `discussed` to `{output_folder}/_progress/00-progress.md` (see section 9 for exact format)</action>
|
||||
|
||||
<output>**Great! Here's what we've explored:**
|
||||
### 7. Visualization Question
|
||||
|
||||
**User Goal:** {{user_goal}}
|
||||
<ask>
|
||||
**Ready to visualize. How would you like to proceed?**
|
||||
|
||||
**Key Elements:**
|
||||
{{key_elements_list}}
|
||||
1. **Should I wireframe it for you?** — I'll create an Excalidraw wireframe based on our discussion
|
||||
2. **Do you want to provide a sketch?** — Bring your own sketch and I'll analyze it
|
||||
3. **Add specification without a sketch** — Go directly to detailed specification
|
||||
</ask>
|
||||
|
||||
**Psychological Triggers:**
|
||||
{{trigger_connections}}
|
||||
#### IF 1 (Wireframe):
|
||||
|
||||
**Flow:**
|
||||
{{interaction_flow}}
|
||||
<action>BEFORE drawing: Read existing completed page specs AND their sketches to understand established patterns — navigation, shared components, layout conventions. Do NOT draw from memory.</action>
|
||||
<action>Create wireframe in Excalidraw at page folder `Sketches/{page-slug}-wireframe.excalidraw`</action>
|
||||
<action>Wireframe must be CLEAN — no annotations, no labels outside the page area. Design decisions belong in the page specification, not on the sketch.</action>
|
||||
<action>Present wireframe for review. The user can open the same .excalidraw file in VS Code and edit visually — both agent and user can modify the same artifact.</action>
|
||||
<action>ITERATE: When user gives feedback, update the wireframe. This loop is fast — JSON manipulation, seconds per change. Repeat until agreed.</action>
|
||||
<action>SYNC SPEC: When wireframe is agreed, update the page specification to match. The spec is the source of truth — never implement from wireframe directly.</action>
|
||||
<action>Update design log: append row with status `wireframed` to `{output_folder}/_progress/00-progress.md` (see section 9)</action>
|
||||
<output>See `{designLoopGuide}` for the full design loop reference.</output>
|
||||
|
||||
You're ready to visualize! Would you like to:
|
||||
Then proceed to the **Page Transition** (step 8).
|
||||
|
||||
1. **Wireframe it** (recommended) — I create an Excalidraw wireframe, we iterate together
|
||||
2. **I have a sketch** — You provide a sketch, I'll analyze it
|
||||
3. **Skip to spec** — Go directly to specification (for pages following established patterns)
|
||||
4. **Explore more** — Refine the concept further</output>
|
||||
#### IF 2 (User provides sketch):
|
||||
|
||||
<check if="choice == 1">
|
||||
<action>Update the page specification with exploration findings (fill empty sections, not a separate file)</action>
|
||||
<action>BEFORE drawing: Read existing completed page specs AND their sketches to understand the established page structure — navigation, service menus, footer, card patterns, shared components. Do NOT draw from memory.</action>
|
||||
<action>Create wireframe in Excalidraw at page folder `Sketches/{page-slug}-wireframe.excalidraw`</action>
|
||||
<action>Wireframe must be CLEAN — no annotations, no labels outside the page area. Design decisions belong in the page specification, not on the sketch.</action>
|
||||
<action>Present wireframe for review. The user can open the same .excalidraw file in VS Code and edit visually — both agent and user can modify the same artifact.</action>
|
||||
<action>ITERATE: When user gives feedback, update the wireframe. This loop is fast — JSON manipulation, seconds per change. Repeat until agreed.</action>
|
||||
<action>SYNC SPEC: When wireframe is agreed, update the page specification to match. The spec is the source of truth — never implement from wireframe directly.</action>
|
||||
<output>See `data/guides/DESIGN-LOOP-GUIDE.md` for the full design loop reference.</output>
|
||||
</check>
|
||||
<output>Go sketch your concept and come back when ready. I'll analyze it.</output>
|
||||
<action>Pause workflow — user will return with a sketch</action>
|
||||
<action>When user returns: Load sketch analysis workflow (steps-k/step-01-sketch-analysis.md)</action>
|
||||
|
||||
<check if="choice == 2">
|
||||
<output>Go sketch your concept and come back when ready. I'll analyze it with [K].</output>
|
||||
<action>Update the page specification with exploration findings (fill empty sections, not a separate file)</action>
|
||||
<action>Pause workflow - user will return to sketch analysis</action>
|
||||
</check>
|
||||
#### IF 3 (Specification without sketch):
|
||||
|
||||
<check if="choice == 3">
|
||||
<action>Update the page specification with exploration findings (fill empty sections, not a separate file)</action>
|
||||
<action>Proceed directly to specification activity</action>
|
||||
</check>
|
||||
<action>Proceed to specification activity (steps-p/) with the discussion findings</action>
|
||||
<action>Update design log: append row with status `specified` to `{output_folder}/_progress/00-progress.md` (see section 9)</action>
|
||||
|
||||
<check if="choice == 4">
|
||||
<action>Ask what aspect to explore more deeply</action>
|
||||
<action>Continue exploration dialog</action>
|
||||
</check>
|
||||
Then proceed to the **Page Transition** (step 8).
|
||||
|
||||
### 7. Present MENU OPTIONS
|
||||
### 8. Page Transition
|
||||
|
||||
Display: "**Select an Option:** [M] Return to Activity Menu"
|
||||
After each completed stage, present the two-option transition. The "next logical step" adapts based on where the page is in the design loop:
|
||||
|
||||
#### Menu Handling Logic:
|
||||
**After wireframe agreed + spec synced:**
|
||||
|
||||
- IF M: Return to {workflowFile} or {activityWorkflowFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#7-present-menu-options)
|
||||
<output>
|
||||
**Spec for "[page name]" is synced with the wireframe.**
|
||||
|
||||
1. **Write the detailed specification** — content, interactions, states
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
**After specification complete:**
|
||||
|
||||
The agent checks what was identified during discussion and specification:
|
||||
- **Web platform?** → Responsive content decisions are needed
|
||||
- **Storyboard items identified?** → On-page interactions need exploring
|
||||
- **Complex functionality?** → Forms, validation, dynamic content need detail
|
||||
|
||||
If any of the above exist:
|
||||
|
||||
<output>
|
||||
**Specification for "[page name]" is complete.**
|
||||
|
||||
This page has [responsive states / storyboard items / complex functionality] that need exploring.
|
||||
|
||||
1. **Explore [responsive states / storyboard / functionality]** — define the details
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
If none exist (simple page, single-device platform):
|
||||
|
||||
<output>
|
||||
**Specification for "[page name]" is complete. Ready to build.**
|
||||
|
||||
1. **Build it** — start agentic development
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
**After responsive/storyboard/functionality exploration:**
|
||||
|
||||
<output>
|
||||
**"[page name]" is fully specified. Ready to build.**
|
||||
|
||||
1. **Build it** — start agentic development
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
#### Transition Handling:
|
||||
|
||||
- **Next logical step:** Proceed to the appropriate activity (specification → steps-p/, responsive → diff file, build → Phase 5 prototyping)
|
||||
- **Explore next scenario step:** Loop back to step 2 (Set the Scene) for the next page in the scenario's shortest path. If no more pages, show "All pages in this scenario are designed!"
|
||||
- **Design log:** Always append a status row to `{output_folder}/_progress/00-progress.md` before presenting transition options (see section 9)
|
||||
- **Session plan:** Check off the completed item in the active agent dialog. If all plan items are done, note it in the transition: "That's everything we planned! Want to continue or wrap up?"
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- User can chat or ask questions — always respond and then redisplay menu options
|
||||
- ALWAYS halt and wait for user input after presenting transition options
|
||||
- User can chat or ask questions — always respond and then redisplay the transition
|
||||
- The user can always say "stop" to pause and return later — update the design log with current status AND set the agent dialog to `status: paused`
|
||||
|
||||
### 9. Design Log Updates
|
||||
|
||||
At every transition, append a row to the **Design Loop Status** table in `{output_folder}/_progress/00-progress.md`.
|
||||
|
||||
**How to update (exact procedure):**
|
||||
|
||||
1. Open `{output_folder}/_progress/00-progress.md`
|
||||
2. Find the `## Design Loop Status` section
|
||||
3. Append a new row to the table:
|
||||
|
||||
```
|
||||
| [Scenario slug] | [NN.X] | [Page name] | [status] | [YYYY-MM-DD] |
|
||||
```
|
||||
|
||||
**Example:**
|
||||
```
|
||||
| 01-hasses-emergency-search | 1.1 | Start Page | discussed | 2026-02-26 |
|
||||
| 01-hasses-emergency-search | 1.1 | Start Page | wireframed | 2026-02-26 |
|
||||
| 01-hasses-emergency-search | 1.2 | Service Page | discussed | 2026-02-26 |
|
||||
```
|
||||
|
||||
**Status values and when to log:**
|
||||
|
||||
| Status | When logged |
|
||||
|--------|------------|
|
||||
| `discussed` | D1 + D2 complete, discussion findings saved to spec |
|
||||
| `wireframed` | Wireframe created and agreed, spec synced |
|
||||
| `specified` | Detailed specification complete |
|
||||
| `explored` | Responsive states / storyboard / functionality mapped |
|
||||
| `building` | Handed to Phase 5 for implementation |
|
||||
| `built` | Implementation complete |
|
||||
| `approved` | User approved after browser review |
|
||||
| `removed` | Step eliminated during D2 challenge |
|
||||
|
||||
**Rules:**
|
||||
- Do NOT overwrite previous rows — append only. The latest row per page is the current status.
|
||||
- Do NOT skip this step. The design log drives the adaptive dashboard when Freya starts up. Without it, the agent has no memory of where things stand.
|
||||
- Update BEFORE presenting the transition options to the user.
|
||||
|
||||
---
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN the user has completed their exploration and chosen a next action (sketch, specify, or return to menu) will you proceed accordingly. This is the only step in the Conceptualize activity.
|
||||
This step is the core of Phase 4's creative work. It runs once per page in the scenario, looping through D1 → D2 → discuss → visualize → transition for each page. The two-option transition pattern ensures the designer always knows where they are and what comes next.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -194,26 +287,29 @@ ONLY WHEN the user has completed their exploration and chosen a next action (ske
|
|||
|
||||
### ✅ SUCCESS:
|
||||
|
||||
- User goal clearly identified through collaborative exploration
|
||||
- Page elements structured from user input
|
||||
- Trigger Map connections identified
|
||||
- Interaction flow mapped verbally
|
||||
- Exploration findings saved to the page specification (not a separate file)
|
||||
- User chose next action with clear understanding
|
||||
- Agent set the scene with context from the scenario (arrival, driving forces, previous action)
|
||||
- D1 answered: primary action clearly identified
|
||||
- D2 asked: page's existence challenged — simplified or justified
|
||||
- Discussion connected to Trigger Map driving forces
|
||||
- Findings saved to the page specification (not a separate file)
|
||||
- Visualization choice offered after discussion (wireframe / sketch / spec)
|
||||
- When wireframing: iterated with user until agreed, then synced spec to match
|
||||
- Two-option transition presented after each stage (next logical step + explore next scenario step)
|
||||
- Design log updated at every transition
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
- Generating page concepts without user input
|
||||
- Jumping to specification details before exploration is complete
|
||||
- Skipping D1 or D2
|
||||
- Not challenging the page's existence (D2)
|
||||
- Not connecting design choices to user psychology / Trigger Map
|
||||
- Skipping the interaction flow mapping
|
||||
- Proceeding without user confirmation of exploration summary
|
||||
- Creating detailed component specifications (wrong activity)
|
||||
- Jumping to specification before discussion is complete
|
||||
- Saving exploration findings to a separate notes file instead of updating the page spec
|
||||
- Drawing wireframes with annotations or labels outside the page area
|
||||
- Drawing shared elements (nav, footer) from memory instead of reading existing specs
|
||||
- Implementing from wireframe without updating the spec first
|
||||
- Using AI image generators (Nano Banana) for wireframes instead of Excalidraw
|
||||
- Presenting the old activity menu instead of the two-option transition
|
||||
- Not updating the design log at transitions
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
|
|
|
|||
|
|
@ -92,34 +92,25 @@ Fill in all sections with data collected:
|
|||
- {{validation_count}} validation rules
|
||||
- {{error_count}} error messages
|
||||
|
||||
**Your specification is development-ready!**
|
||||
**Your specification is development-ready!**</output>
|
||||
|
||||
The specification document includes:
|
||||
### 2. Update Design Log
|
||||
|
||||
- Clear Object IDs for every element
|
||||
- Complete multilingual content
|
||||
- Detailed interaction behaviors
|
||||
- All possible states defined
|
||||
- Validation rules and error messages
|
||||
- Technical notes and data requirements</output>
|
||||
<action>Append a row with status `specified` to the Design Loop Status table in `{output_folder}/_progress/00-progress.md`:
|
||||
|
||||
### 2. Present MENU OPTIONS
|
||||
```
|
||||
| [Scenario slug] | [NN.X] | [Page name] | specified | [YYYY-MM-DD] |
|
||||
```
|
||||
|
||||
Display: "**Select an Option:** [M] Return to Activity Menu"
|
||||
Do NOT skip this. The design log drives the adaptive dashboard.</action>
|
||||
|
||||
#### Menu Handling Logic:
|
||||
### 3. Return to Calling Step
|
||||
|
||||
- IF M: Return to {workflowFile} or {activityWorkflowFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#2-present-menu-options)
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- User can chat or ask questions — always respond and then redisplay menu options
|
||||
This step is called from either step-01-exploration.md (Discuss) or workflow-suggest.md (Suggest). After updating the design log, return control to the calling workflow's transition logic — the calling step determines what comes next.
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN the user selects an option from the menu and the specification has been generated and saved will you proceed accordingly. This is the last step in the Specify activity.
|
||||
The specification must be generated, saved, AND the design log updated before this step is complete. This is the last step in the Specify activity.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
name: 'workflow-conceptualize'
|
||||
description: 'Collaboratively explore what a scenario's design should achieve before committing to specific pages or layouts.'
|
||||
name: 'workflow-discuss'
|
||||
description: 'Creative dialog for page design — discuss what each page needs, then visualize and specify.'
|
||||
---
|
||||
|
||||
# [C] Conceptualize — Explore What the Design Needs
|
||||
# [C] Discuss — Creative Dialog for Page Design
|
||||
|
||||
**Goal:** Collaboratively explore what a scenario's design should achieve before committing to specific pages or layouts.
|
||||
**Goal:** Lead a focused creative dialog for each page — what does it need, can we simplify it, then visualize and specify.
|
||||
|
||||
**When to use:** When the user isn't sure what pages are needed, wants to think through the user journey, or needs to explore design options before building.
|
||||
**When to use:** The default design activity. Start here for any page that needs design thinking before building.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -41,6 +41,4 @@ Execute steps in `./steps-c/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
Step 01's two-option transitions handle all navigation. The design log is updated at every transition within the step itself. There is no separate "after completion" — the step loops through pages until the user stops or all pages are designed.
|
||||
|
|
|
|||
|
|
@ -43,6 +43,6 @@ Execute steps in `./steps-m/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Design System: [components extracted/updated]`
|
||||
2. Suggest next action based on the adaptive dashboard
|
||||
|
|
|
|||
|
|
@ -77,46 +77,73 @@ In Dream mode:
|
|||
|
||||
---
|
||||
|
||||
## DESIGN LOG REPORTING
|
||||
|
||||
In Dream mode, the agent updates the design log autonomously at each page completion. Append to the Design Loop Status table in `{output_folder}/_progress/00-progress.md`:
|
||||
|
||||
```
|
||||
| [Scenario slug] | [NN.X] | [Page name] | specified | [YYYY-MM-DD] |
|
||||
```
|
||||
|
||||
Do NOT skip this — even in autonomous mode, the design log must be updated per page.
|
||||
|
||||
## AFTER COMPLETION
|
||||
|
||||
After finishing a page specification (or all pages in Dream mode), present the user with a choice:
|
||||
### Autonomous Mode (all pages at once)
|
||||
|
||||
```
|
||||
Page [NN.step] complete! What would you like to do?
|
||||
When Dream mode completes all pages in the scenario, present a summary for review:
|
||||
|
||||
[N] Next page — outline and design the next step in this scenario
|
||||
[R] Return to Scenario Dashboard — pick a different scenario or activity
|
||||
[V] Validate — audit this page specification
|
||||
```
|
||||
<output>
|
||||
**Dream complete! Here's what I created for [Scenario Name]:**
|
||||
|
||||
### Menu Handling Logic:
|
||||
| Step | Page | Status | Key Decisions |
|
||||
|------|------|--------|---------------|
|
||||
| [NN.1] | [page name] | specified | [brief summary] |
|
||||
| [NN.2] | [page name] | specified | [brief summary] |
|
||||
| ... | ... | ... | ... |
|
||||
|
||||
- IF N: Check the scenario's shortest path (Q8) for the next page. If the next page doesn't have a folder yet, run the Page Outline Dialog from Phase 3 (ask the two questions: page purpose + exit action), create the page folder, then design it. In Dream mode, the agent outlines AND designs autonomously, then presents the result.
|
||||
- IF R: Return to the Phase 4 Scenario Dashboard
|
||||
- IF V: Load and execute `./workflow-validate.md`
|
||||
**Shared components extracted:** [list if any]
|
||||
|
||||
### The Outline → Design Loop
|
||||
Review the pages and let me know what to adjust. When you're happy:
|
||||
|
||||
When the user chooses [N], the flow is:
|
||||
1. **Start building** — hand the first page to agentic development
|
||||
2. **Explore responsive states / storyboard** — if any pages need detail work
|
||||
</output>
|
||||
|
||||
1. **Outline the next page** — Ask: "What's the point of this page?" and "What does the user do to move forward?" (same as Phase 3's [O] dialog)
|
||||
2. **Component Extraction Check** (2nd+ page only) — see below
|
||||
3. **Create the page folder** with boilerplate spec and Sketches/ subfolder
|
||||
4. **Design the page** — run steps 08-15 for this page
|
||||
5. **After completion** — present this menu again
|
||||
### Per-Page Mode (user interrupted or reviewing one at a time)
|
||||
|
||||
This loop continues until all pages in the scenario are designed or the user chooses to stop.
|
||||
Present the same two-option transition as Discuss and Suggest:
|
||||
|
||||
### Component Extraction Check (2nd+ Page)
|
||||
**If complexity exists on this page:**
|
||||
|
||||
**Trigger:** Automatically runs when starting the 2nd or later page in a scenario.
|
||||
<output>
|
||||
**Specification for "[page name]" is complete.**
|
||||
|
||||
**Purpose:** Identify repeating elements across pages and suggest extracting them as shared components before they multiply.
|
||||
This page has [responsive states / storyboard items / complex functionality] that need exploring.
|
||||
|
||||
**Dream mode behavior:**
|
||||
1. Scan completed page specs silently
|
||||
2. If shared elements found, auto-extract them as shared components (log decisions)
|
||||
3. Reference shared components in subsequent page specs instead of duplicating definitions
|
||||
1. **Explore [responsive states / storyboard / functionality]** — define the details
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
**If simple page:**
|
||||
|
||||
<output>
|
||||
**Specification for "[page name]" is complete. Ready to build.**
|
||||
|
||||
1. **Build it** — start agentic development
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
### Component Extraction (Dream Mode)
|
||||
|
||||
In Dream mode, component extraction runs automatically:
|
||||
1. Scan completed page specs silently after each page
|
||||
2. If shared elements found, auto-extract as shared components (log decisions)
|
||||
3. Reference shared components in subsequent page specs instead of duplicating
|
||||
4. Include extraction summary in the final review presentation
|
||||
|
||||
**Key principle:** In Dream mode, extract automatically and report in the summary. The user reviews component decisions alongside page decisions.
|
||||
### Execution Rules
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting review/transition
|
||||
- User can type "stop" or "pause" to interrupt autonomous mode
|
||||
- The user can always say "stop" to pause and return later — log current status
|
||||
|
|
|
|||
|
|
@ -43,6 +43,6 @@ Execute steps in `./steps-h/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next agent dialog action
|
||||
3. Return to scenario dashboard
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Design Delivery: [what was packaged]`
|
||||
2. Suggest next action: Phase 5 prototyping or next scenario
|
||||
|
|
|
|||
|
|
@ -41,6 +41,4 @@ Execute steps in `./steps-k/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
After sketch analysis, the page returns to step-01-exploration.md's flow. The sketch analysis feeds into the wireframe/spec sync step — the calling step handles design log updates and transition options.
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ description: 'Create a complete, implementation-ready page specification with la
|
|||
|
||||
## Entry
|
||||
|
||||
Load page context from existing page structure in `{output_folder}/D-UX-Design/`.
|
||||
Load page context from the existing page specification in the scenario's page folder (`{output_folder}/C-UX-Scenarios/[NN-slug]/pages/[NN].[step]-[page-slug]/`).
|
||||
|
||||
## Steps
|
||||
|
||||
|
|
@ -49,6 +49,5 @@ Execute steps in `./steps-p/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
1. Update design log: status → `specified`
|
||||
2. Return to the two-option transition from step-01-exploration.md (the calling step determines what comes next based on what was identified during specification)
|
||||
|
|
|
|||
|
|
@ -71,58 +71,52 @@ Execute steps in `./steps-s/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
After finishing a page specification, present the user with a choice:
|
||||
### Design Log Update
|
||||
|
||||
After finishing a page specification, append to the Design Loop Status table in `{output_folder}/_progress/00-progress.md`:
|
||||
```
|
||||
Page [NN.step] complete! What would you like to do?
|
||||
|
||||
[N] Next page — outline and design the next step in this scenario
|
||||
[R] Return to Scenario Dashboard — pick a different scenario or activity
|
||||
[V] Validate — audit this page specification
|
||||
| [Scenario slug] | [NN.X] | [Page name] | specified | [YYYY-MM-DD] |
|
||||
```
|
||||
Do NOT skip this — the design log drives the adaptive dashboard.
|
||||
|
||||
### Menu Handling Logic:
|
||||
### Two-Option Transition
|
||||
|
||||
- IF N: Check the scenario's shortest path (Q8) for the next page. If the next page doesn't have a folder yet, run the Page Outline Dialog from Phase 3 (ask the two questions: page purpose + exit action), create the page folder, then design it using steps 08-15. This is the **outline → design loop**.
|
||||
- IF R: Return to the Phase 4 Scenario Dashboard
|
||||
- IF V: Load and execute `./workflow-validate.md`
|
||||
After specification is complete, check what was identified during the design:
|
||||
- **Web platform?** → Responsive content decisions are needed
|
||||
- **Storyboard items identified?** → On-page interactions need exploring
|
||||
- **Complex functionality?** → Forms, validation, dynamic content need detail
|
||||
|
||||
### The Outline → Design Loop
|
||||
**If complexity exists:**
|
||||
|
||||
When the user chooses [N], the flow is:
|
||||
<output>
|
||||
**Specification for "[page name]" is complete.**
|
||||
|
||||
1. **Outline the next page** — Ask: "What's the point of this page?" and "What does the user do to move forward?" (same as Phase 3's [O] dialog)
|
||||
2. **Component Extraction Check** (2nd+ page only) — see below
|
||||
3. **Create the page folder** with boilerplate spec and Sketches/ subfolder
|
||||
4. **Design the page** — run steps 08-15 for this page
|
||||
5. **After completion** — present this menu again
|
||||
This page has [responsive states / storyboard items / complex functionality] that need exploring.
|
||||
|
||||
This loop continues until all pages in the scenario are designed or the user chooses to stop.
|
||||
1. **Explore [responsive states / storyboard / functionality]** — define the details
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
### Component Extraction Check (2nd+ Page)
|
||||
**If simple page (no complexity identified):**
|
||||
|
||||
**Trigger:** Automatically runs when starting the 2nd or later page in a scenario.
|
||||
<output>
|
||||
**Specification for "[page name]" is complete. Ready to build.**
|
||||
|
||||
**Purpose:** Identify repeating elements across pages and suggest extracting them as shared components before they multiply.
|
||||
1. **Build it** — start agentic development
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
**Process:**
|
||||
**If no more pages in scenario:**
|
||||
Replace option 2 with: "All pages in this scenario are designed!"
|
||||
|
||||
1. **Scan completed page specs** in the current scenario's `pages/` folder
|
||||
2. **Identify common patterns** across completed pages:
|
||||
- Navigation headers / footers
|
||||
- Repeated form fields or input patterns
|
||||
- Shared section layouts (e.g., hero, card grids)
|
||||
- Identical UI elements (buttons, modals, alerts)
|
||||
3. **If shared elements found**, present briefly:
|
||||
```
|
||||
I noticed these elements appear across your completed pages:
|
||||
- [element] — used in [page 1], [page 2]
|
||||
- [element] — used in [page 1], [page 2]
|
||||
### Transition Handling
|
||||
|
||||
Want me to extract these as shared components now, or continue and handle it later?
|
||||
[E] Extract now → routes to [M] Manage Design System
|
||||
[L] Later — continue with page design
|
||||
```
|
||||
4. **If no shared elements found** (or this is only the 2nd page with minimal overlap), skip silently and continue to page design.
|
||||
- **Option 1 (next logical step):** Proceed to the appropriate activity (explore → responsive diffs, build → Phase 5 prototyping)
|
||||
- **Option 2 (next scenario step):** Check Q8 for the next page. If the next page doesn't have a folder yet, ask the two outline questions (page purpose + exit action), create the page folder, then design it using steps 08-15.
|
||||
- **Component Extraction Check** (2nd+ page only): Before designing the next page, scan completed specs for shared elements. If found, briefly suggest extraction. Don't block the flow — the user can defer.
|
||||
|
||||
**Key principle:** Don't block the design flow. This is a brief check, not a deep audit. The user can always choose [L] to defer.
|
||||
### Execution Rules
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting transition options
|
||||
- User can chat or ask questions — always respond and then redisplay the transition
|
||||
- The user can always say "stop" to pause and return later — log current status
|
||||
|
|
|
|||
|
|
@ -59,6 +59,6 @@ Save validation report to `{output_folder}/D-UX-Design/validation-report.md`
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Validation: [N] pages audited, [results summary]`
|
||||
2. If issues found, suggest fixing them. If all pass, suggest next logical step from the adaptive dashboard
|
||||
|
|
|
|||
|
|
@ -49,6 +49,6 @@ Execute steps in `./steps-w/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Visual Design: [what was generated]`
|
||||
2. Suggest next action based on the adaptive dashboard (read Design Loop Status to find what needs attention next)
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@ web_bundle: true
|
|||
|
||||
## WORKFLOW ARCHITECTURE
|
||||
|
||||
Phase 4 is **menu-driven**, not linear. The user picks scenarios and activities from a dashboard.
|
||||
Phase 4 is **adaptive** — Freya reads the design log on startup, shows the project's design status, and suggests the next logical step. The user can follow the suggestion or switch to any activity.
|
||||
|
||||
### Core Principles
|
||||
|
||||
- **Adaptive**: Freya reads the design log and suggests where to continue
|
||||
- **Scenario-Driven**: Each scenario (from Phase 3) gets its own design approach
|
||||
- **Activity-Based**: Pick the right activity for the current need
|
||||
- **Non-Linear**: Start anywhere, switch between activities freely
|
||||
- **Design Intent**: Phase 3 handover specifies preferred approach per scenario
|
||||
- **Two-Option Transitions**: Every completed stage offers: next logical step + explore next scenario step
|
||||
- **Design Log as Memory**: Per-page status tracking drives the adaptive dashboard across sessions
|
||||
|
||||
### Step Processing Rules
|
||||
|
||||
|
|
@ -42,44 +42,125 @@ Load and read full config from `{project-root}/_bmad/wds/config.yaml` and resolv
|
|||
|
||||
### 2. Agent Dialog Gate
|
||||
|
||||
1. Check `{output_folder}/_progress/agent-dialogs/` for pending UX design dialogs
|
||||
2. If pending, present with status
|
||||
3. If none, suggest creating one
|
||||
Check `{output_folder}/_progress/agent-dialogs/` for agent dialogs with `status: active` and `agent: Freya`.
|
||||
|
||||
**If an active dialog exists:** Read it. The dialog contains the session plan — what pages the user intended to work on and how far they got. Use this to drive the dashboard.
|
||||
|
||||
**If no active dialog exists:** You'll create one after the user chooses what to work on (see step 4c).
|
||||
|
||||
### 3. Mode Determination
|
||||
|
||||
**Check invocation:**
|
||||
- "validate" / -v → Load and execute `./workflow-validate.md`
|
||||
- Default → Continue to Scenario Dashboard
|
||||
- Default → Continue to Adaptive Dashboard
|
||||
|
||||
### 4. Scenario Dashboard
|
||||
### 4. Adaptive Dashboard
|
||||
|
||||
Read all scenario files from `{output_folder}/C-UX-Scenarios/` and display:
|
||||
Read both sources:
|
||||
1. **Agent dialog** (the plan) — what was the user working on?
|
||||
2. **Design log** (`{output_folder}/_progress/00-progress.md`) — what status did each page reach?
|
||||
3. **Scenario files** from `{output_folder}/C-UX-Scenarios/` — full page inventory
|
||||
|
||||
```
|
||||
Your scenarios and their design status:
|
||||
#### 4a. Build Status Overview
|
||||
|
||||
1. [Scenario Name] → [Approach] — [Status]
|
||||
2. [Scenario Name] → [Approach] — [Status]
|
||||
3. [Scenario Name] → [Approach] — [Status]
|
||||
For each scenario, determine per-page status from the Design Loop Status table in the design log. The **latest row per page** is the current status.
|
||||
|
||||
Pick a scenario to work on, or choose a scenario-independent activity:
|
||||
#### 4b. Suggest Where to Continue
|
||||
|
||||
**If an active dialog with a session plan exists:**
|
||||
|
||||
Read the plan's checklist. Compare against the design log. Present what's done and what's left:
|
||||
|
||||
<output>
|
||||
**Welcome back! Here's where we left off:**
|
||||
|
||||
**Session plan:** [topic from dialog]
|
||||
|
||||
| Step | Page | Plan | Status |
|
||||
|------|------|------|--------|
|
||||
| [NN.1] | [page name] | [target] | [current] ✓ |
|
||||
| [NN.2] | [page name] | [target] | [current] ← next |
|
||||
| [NN.3] | [page name] | [target] | — |
|
||||
|
||||
I'd suggest we continue with **[next unchecked item from the plan]**.
|
||||
Pick up there, or change plans?
|
||||
</output>
|
||||
|
||||
**If the session plan is complete** (all items checked):
|
||||
|
||||
<output>
|
||||
**Session plan complete!**
|
||||
|
||||
Everything we planned is done. What would you like to do next?
|
||||
|
||||
1. **Continue with [next scenario step / next scenario]** — keep the momentum
|
||||
2. **Start a new session plan** — pick different pages to work on
|
||||
</output>
|
||||
|
||||
**If no active dialog exists** (fresh start):
|
||||
|
||||
<output>
|
||||
**Ready to start designing!**
|
||||
|
||||
Your scenarios:
|
||||
| # | Scenario | Pages | Designed |
|
||||
|---|----------|-------|----------|
|
||||
| 01 | [Name] | [total] | [done] |
|
||||
| 02 | [Name] | [total] | [done] |
|
||||
|
||||
Which scenario shall we work on? I'll set up a session plan.
|
||||
</output>
|
||||
|
||||
#### 4c. Create or Update Session Plan
|
||||
|
||||
**When starting a new session**, create an agent dialog file:
|
||||
|
||||
**File:** `{output_folder}/_progress/agent-dialogs/YYYY-MM-DD-freya-[topic].md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
status: active
|
||||
agent: Freya
|
||||
topic: [what the user wants to work on]
|
||||
created: [date]
|
||||
last_updated: [date]
|
||||
---
|
||||
|
||||
# [Topic]
|
||||
|
||||
## Session Plan
|
||||
|
||||
| # | Page | Target Status | Done |
|
||||
|---|------|---------------|------|
|
||||
| 1 | [NN.X page name] | [discussed/wireframed/specified/etc.] | [ ] |
|
||||
| 2 | [NN.X page name] | [discussed/wireframed/specified/etc.] | [ ] |
|
||||
|
||||
## Decisions Made
|
||||
|
||||
| # | Decision | Rationale |
|
||||
|---|----------|-----------|
|
||||
```
|
||||
|
||||
**Status values:** not started / in progress / completed
|
||||
**Approach values:** [K] Sketch, [C] Conceptualize, [S] Suggest, [D] Dream Up, [L] Not chosen
|
||||
**At each transition:** Update the dialog — check off completed items, add decisions, update `last_updated`.
|
||||
|
||||
**When the plan is complete or user stops:** Set `status: complete` or `status: paused`. The next session will find no active dialog and offer to start fresh or resume.
|
||||
|
||||
#### 4d. User Response Handling
|
||||
|
||||
- **User accepts suggestion** → Load the appropriate activity workflow and continue
|
||||
- **User picks a different page or scenario** → Update the session plan and continue
|
||||
- **User asks for the full activity menu** → Show the Activity Reference below
|
||||
- **User wants scenario-independent work** (design system, validation, delivery) → Route to that activity
|
||||
|
||||
---
|
||||
|
||||
## ACTIVITY MENU
|
||||
## ACTIVITY REFERENCE
|
||||
|
||||
When a scenario is selected (or for scenario-independent work), present:
|
||||
The primary navigation is the adaptive dashboard above — Freya suggests the next logical step based on the design log. The activities below are available when the user wants to switch to a specific workflow or asks for the full menu.
|
||||
|
||||
```
|
||||
What would you like to do?
|
||||
|
||||
── Design ──────────────────────────────────────
|
||||
[C] Conceptualize — Explore what the design needs
|
||||
[C] Discuss — Creative dialog (D1, D2), wireframe, iterate
|
||||
[K] Analyse Sketches — I'll interpret your sketch
|
||||
[S] Suggest Design — I'll propose a design, you confirm each step
|
||||
[D] Dream Up Design — I'll create it all, you review
|
||||
|
|
@ -135,5 +216,4 @@ If the scenario has a `design_intent` from Phase 3 handover, pre-select that act
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action or return to Scenario Dashboard
|
||||
When the user returns to Phase 4 (or starts a new session), the Adaptive Dashboard (section 4) reads the design log and suggests where to continue. No separate "after completion" action is needed — the design log IS the memory.
|
||||
|
|
|
|||
|
|
@ -40,8 +40,36 @@ Execute steps in `./steps-t/`:
|
|||
|
||||
---
|
||||
|
||||
## DESIGN LOG REPORTING POINT
|
||||
|
||||
When all tests pass and the user approves, append to the Design Loop Status table in `{output_folder}/_progress/00-progress.md`:
|
||||
|
||||
```
|
||||
| [Scenario slug] | [NN.X] | [Page name] | approved | [YYYY-MM-DD] |
|
||||
```
|
||||
|
||||
Do NOT skip this. The design log drives Phase 4's adaptive dashboard.
|
||||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. If approved, suggest handover (Phase 4 [H]) or next iteration
|
||||
3. Return to activity menu
|
||||
**If all tests pass:**
|
||||
|
||||
Design log updated with `approved` status (see above). Present the transition:
|
||||
|
||||
<output>
|
||||
**"[page name]" is approved!**
|
||||
|
||||
1. **Explore the next scenario step** — [next page name]
|
||||
2. **Design delivery** — package for development handoff (Phase 4 [H])
|
||||
</output>
|
||||
|
||||
**If issues found:**
|
||||
|
||||
Status stays `built`. Present:
|
||||
|
||||
<output>
|
||||
**"[page name]" has [N] issues to fix.**
|
||||
|
||||
1. **Fix the issues** — route to bugfixing
|
||||
2. **Explore the next scenario step** — fix later, continue designing
|
||||
</output>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,6 @@ Execute steps in `./steps-a/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log with analysis artifacts
|
||||
2. Suggest next action (feed into development? reverse engineer further? start prototyping?)
|
||||
3. Return to activity menu
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Analysis: [what was analyzed, key findings]`
|
||||
2. Suggest next action: feed into development, reverse engineer further, or start prototyping
|
||||
|
|
|
|||
|
|
@ -62,6 +62,6 @@ Execute steps in `./steps-f/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Bugfix: [what was fixed]`
|
||||
2. Suggest re-running acceptance testing (Phase 5 [T]) to verify the fix
|
||||
|
|
|
|||
|
|
@ -73,8 +73,20 @@ Execute steps in `./steps-d/`:
|
|||
|
||||
---
|
||||
|
||||
## DESIGN LOG REPORTING POINTS
|
||||
|
||||
Append to the Design Loop Status table in `{output_folder}/_progress/00-progress.md`:
|
||||
|
||||
**On entry (step 01 complete):** `| [Scenario slug] | [NN.X] | [Page name] | building | [YYYY-MM-DD] |`
|
||||
**On completion (step 05 approved):** `| [Scenario slug] | [NN.X] | [Page name] | built | [YYYY-MM-DD] |`
|
||||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action (acceptance testing? handover?)
|
||||
3. Return to activity menu
|
||||
Design log updated with `built` status (see above). Present the transition:
|
||||
|
||||
<output>
|
||||
**"[page name]" is built!**
|
||||
|
||||
1. **Run acceptance testing** — validate against the specification
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,6 @@ Execute steps in `./steps-e/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action
|
||||
3. Return to activity menu
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Evolution: [what was evolved/added]`
|
||||
2. Suggest acceptance testing (Phase 5 [T]) to validate the changes
|
||||
|
|
|
|||
|
|
@ -59,8 +59,29 @@ Execute steps in `./steps-p/`:
|
|||
|
||||
---
|
||||
|
||||
## DESIGN LOG REPORTING POINTS
|
||||
|
||||
This workflow has TWO reporting points. Both append to the Design Loop Status table in `{output_folder}/_progress/00-progress.md`:
|
||||
|
||||
**1. On entry (step 1 complete):** Append status `building`
|
||||
```
|
||||
| [Scenario slug] | [NN.X] | [Page name] | building | [YYYY-MM-DD] |
|
||||
```
|
||||
|
||||
**2. On completion (step 5 approved):** Append status `built`
|
||||
```
|
||||
| [Scenario slug] | [NN.X] | [Page name] | built | [YYYY-MM-DD] |
|
||||
```
|
||||
|
||||
Do NOT skip these updates. The design log drives Phase 4's adaptive dashboard.
|
||||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action (handover? next scenario?)
|
||||
3. Return to activity menu
|
||||
Design log already updated with `built` status (see above). Present the transition:
|
||||
|
||||
<output>
|
||||
**"[page name]" is built!**
|
||||
|
||||
1. **Run acceptance testing** — validate against the specification
|
||||
2. **Explore the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,6 @@ Execute steps in `./steps-r/`:
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log with extracted artifacts
|
||||
2. Suggest next action (feed specs into prototyping? analyze further? start development?)
|
||||
3. Return to activity menu
|
||||
1. Append a progress entry to `{output_folder}/_progress/00-progress.md` under `## Progress`:
|
||||
`### [date] — Reverse Engineering: [what was extracted]`
|
||||
2. Suggest next action: feed specs into prototyping, analyze further, or start development
|
||||
|
|
|
|||
|
|
@ -96,5 +96,4 @@ Activity-specific output in project structure.
|
|||
|
||||
## AFTER COMPLETION
|
||||
|
||||
1. Update design log
|
||||
2. Suggest next action or return to Activity Menu
|
||||
Each activity workflow has its own explicit design log reporting points. See the individual workflow files for details on what to log and where.
|
||||
|
|
|
|||
Loading…
Reference in New Issue