- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
3.9 KiB
Workshop C: Placeholder Pages
Trigger: User wants to quickly map out a scenario structure without full specifications
WORKSHOP GOAL
Rapidly create placeholder page documents with:
- Navigation structure
- Page names
- Page purposes
- Scenario context
This gives clarity to the overall flow before diving into detailed specifications.
PHASE 1: TRIGGER DETECTION
Let's map out your scenario structure!
Sometimes it helps to create placeholder pages first - just the names, purposes, and navigation - before diving into detailed specifications. This gives you a clear roadmap.
Would you like to:
- Create placeholders for a whole scenario flow
- Add individual placeholder pages as you plan
Let's start! 📋
PHASE 2: SCENARIO CONTEXT
**Determine scenario context:** - Read project structure from wds-workflow-status.yaml - Check existing scenarios - Determine if working with existing or new scenarioWhich scenario are we mapping out?
{{#if existing_scenarios}} Existing scenarios: {{#each scenario in existing_scenarios}}
- {{scenario.number}}: {{scenario.name}} {{/each}}
Type scenario number or "new" for a new scenario: {{else}} This will be your first scenario. What should we call it?
Scenario name: {{/if}}
Store scenario_number and scenario_name
PHASE 3: FLOW MAPPING
Great! Let's map out the pages in this flow.
Think about the user journey through "{{scenario_name}}"
How many pages will be in this scenario?
Think about the steps a user goes through:
- Entry point / first page
- Middle steps (actions, decisions, inputs)
- Completion / exit page
Number of pages:
Store pages_count
PHASE 4: PAGE ENUMERATION
Perfect! Let's name and define each page.
I'll guide you through {{pages_count}} pages...
For each page, gather:
- Page name (examples: "Start Page", "Sign In", "Checkout")
- Page purpose (1-2 sentences: what user accomplishes)
- User situation (what just happened, what they're trying to do)
Store page_name, page_purpose, user_situation for each page
PHASE 5: FLOW REVIEW
Here's your complete scenario flow:
Scenario {{scenario_number}}: {{scenario_name}}
[Display numbered list of all pages with purposes]
Does this flow make sense? Any pages missing or in wrong order?
Review the flow:
- Type "good" to proceed
- Type "add" to insert a page
- Type "remove N" to remove page N
- Type "move N to M" to reorder
Action:
PHASE 6: GENERATE DOCUMENTS
Perfect! Creating your placeholder pages now...
For each page in pages_list: 1. Create folder structure with sketches subfolder 2. Generate placeholder document using template 3. Create scenario overview document 4. Create scenario tracking fileSee: placeholder-templates.md for all templates
PHASE 7: COMPLETION
✅ Placeholder pages created!
Scenario: {{scenario_number}} - {{scenario_name}}
Created:
- {{pages_list.length}} page folders with navigation
- {{pages_list.length}} placeholder documents
- 1 scenario overview document
- 1 scenario tracking file
Next Steps:
- Add sketches - Upload visuals for each page
- Complete specifications - Run Workshop A (Sketch Analysis) for each page
- Add more pages - Come back and add pages to this scenario
- Create another scenario - Start a new user journey
Ready to work on a specific page?
Pick a page to work on: [1-N] Page name [N] Add another scenario [D] Done for now
Choice: