initial commit
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
# Flow A: Sketch Path
|
||||
|
||||
**Activates when:** User chooses to draw a sketch (physical/digital)
|
||||
|
||||
---
|
||||
|
||||
## Process
|
||||
|
||||
<output>**Perfect! Let's set up for your sketch.**
|
||||
|
||||
I'll create:
|
||||
1. Page placeholder with navigation
|
||||
2. Sketches folder ready for upload
|
||||
3. Basic page structure
|
||||
|
||||
When you're ready, upload your sketch and we'll analyze it together using the Page Process Workshop.</output>
|
||||
|
||||
---
|
||||
|
||||
## Actions
|
||||
|
||||
1. Run `page-init-lightweight.md` to create structure
|
||||
2. User uploads sketch when ready
|
||||
3. Return to `workshop-page-process.md` for analysis
|
||||
|
||||
---
|
||||
|
||||
**This is the preferred path - sketches capture design intent best.**
|
||||
@@ -0,0 +1,138 @@
|
||||
# Flow B: Verbal Specification
|
||||
|
||||
**Activates when:** User chooses to describe the page through discussion
|
||||
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
<output>**Great! Let's build the page concept through conversation.**
|
||||
|
||||
We'll define:
|
||||
- Page sections (what areas exist?)
|
||||
- Section purposes (why does each section exist?)
|
||||
- Key objects (what interactive elements?)
|
||||
- User flow (how do they move through the page?)
|
||||
|
||||
This creates a conceptual specification - the page where concept meets description.</output>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP B1: Identify Sections
|
||||
|
||||
<ask>**What are the main SECTIONS of this page?**
|
||||
|
||||
Think about areas/blocks, like:
|
||||
- Header/Navigation
|
||||
- Hero/Banner
|
||||
- Content areas
|
||||
- Forms
|
||||
- Footer
|
||||
|
||||
List the sections from top to bottom:</ask>
|
||||
|
||||
<action>Store sections_list</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP B2: Section Purposes
|
||||
|
||||
<output>**Now let's define each section's purpose:**</output>
|
||||
|
||||
<action>
|
||||
For each section in sections_list:
|
||||
<ask>
|
||||
**{{section.name}}**
|
||||
|
||||
What is the PURPOSE of this section?
|
||||
- What should the user understand/do here?
|
||||
- Why does this section exist?
|
||||
|
||||
Purpose:
|
||||
</ask>
|
||||
|
||||
Store section.purpose
|
||||
End
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP B3: Key Objects
|
||||
|
||||
<ask>**What are the KEY INTERACTIVE OBJECTS on this page?**
|
||||
|
||||
Think about:
|
||||
- Buttons (CTAs, actions)
|
||||
- Forms (inputs, selectors)
|
||||
- Links (navigation, external)
|
||||
- Media (images, videos)
|
||||
|
||||
List the most important interactive elements:</ask>
|
||||
|
||||
<action>Store key_objects</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP B4: User Flow
|
||||
|
||||
<ask>**How does the user move through this page?**
|
||||
|
||||
- Where do they enter?
|
||||
- What's their first action?
|
||||
- What's the desired outcome?
|
||||
- Where do they go next?
|
||||
|
||||
Describe the flow:</ask>
|
||||
|
||||
<action>Store user_flow</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP B5: Generate Specification
|
||||
|
||||
<output>**Creating conceptual specification...**</output>
|
||||
|
||||
<action>
|
||||
Generate page specification document:
|
||||
- Page name and purpose
|
||||
- Navigation (prev/next)
|
||||
- For each section:
|
||||
- Section name
|
||||
- Section purpose
|
||||
- Status: "CONCEPTUAL - Needs visualization"
|
||||
- For each key object:
|
||||
- Object name
|
||||
- Object type
|
||||
- Object purpose
|
||||
- Status: "CONCEPTUAL - Needs specification"
|
||||
- User flow description
|
||||
- Next steps: "Create visualization (sketch/wireframe)"
|
||||
|
||||
Save to: C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## Completion
|
||||
|
||||
<output>✅ **Conceptual page specification created!**
|
||||
|
||||
**What we defined:**
|
||||
- {{sections_list.length}} sections with purposes
|
||||
- {{key_objects.length}} key interactive objects
|
||||
- Complete user flow
|
||||
|
||||
**Status:** CONCEPTUAL - Ready for visualization
|
||||
|
||||
**Next steps:**
|
||||
1. Create sketch/wireframe based on this concept
|
||||
2. Upload visualization
|
||||
3. Run Page Process Workshop to enhance specification
|
||||
|
||||
Or:
|
||||
|
||||
[A] Create ASCII layout now (quick visual)
|
||||
[B] Done - I'll create sketch later
|
||||
[C] Actually, let's refine the concept more
|
||||
|
||||
Choice:</output>
|
||||
@@ -0,0 +1,92 @@
|
||||
# Flow C: ASCII Layout
|
||||
|
||||
**Activates when:** User chooses to create an ASCII layout
|
||||
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
<output>**Let's create a simple ASCII layout together.**
|
||||
|
||||
⚠️ **Note:** ASCII is a last resort - sketches are much better for capturing design intent!
|
||||
|
||||
We'll create a basic box-and-text layout to show structure.</output>
|
||||
|
||||
---
|
||||
|
||||
## Gather Sections
|
||||
|
||||
<ask>**What are the main sections from top to bottom?**
|
||||
|
||||
Example:
|
||||
- Header
|
||||
- Hero
|
||||
- Features (3 columns)
|
||||
- CTA
|
||||
- Footer
|
||||
|
||||
List sections:</ask>
|
||||
|
||||
<action>Store sections_for_ascii</action>
|
||||
|
||||
---
|
||||
|
||||
## Generate ASCII
|
||||
|
||||
<action>
|
||||
Generate ASCII layout:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ [HEADER] │
|
||||
│ Logo | Nav | Contact │
|
||||
└─────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────┐
|
||||
│ │
|
||||
│ [HERO SECTION] │
|
||||
│ │
|
||||
│ Headline Goes Here │
|
||||
│ Subheadline text here │
|
||||
│ │
|
||||
│ [CTA Button] │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
|
||||
┌───────────┬───────────┬───────────┐
|
||||
│ │ │ │
|
||||
│ [Feature] │ [Feature] │ [Feature] │
|
||||
│ 1 │ 2 │ 3 │
|
||||
│ │ │ │
|
||||
│ Icon │ Icon │ Icon │
|
||||
│ Text │ Text │ Text │
|
||||
│ │ │ │
|
||||
└───────────┴───────────┴───────────┘
|
||||
|
||||
... (for each section)
|
||||
```
|
||||
|
||||
Save as conceptual specification with ASCII visualization
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## Completion
|
||||
|
||||
<output>✅ **ASCII layout created!**
|
||||
|
||||
⚠️ **Remember:** This is a rough structural guide.
|
||||
|
||||
**Recommended next steps:**
|
||||
1. Use this ASCII as a reference
|
||||
2. Create a proper sketch/wireframe
|
||||
3. Upload and run Page Process Workshop
|
||||
|
||||
**ASCII is helpful for structure, but lacks:**
|
||||
- Visual hierarchy
|
||||
- Spacing and proportions
|
||||
- Typography details
|
||||
- Color and visual design
|
||||
- Actual content flow
|
||||
|
||||
Ready to move forward?</output>
|
||||
@@ -0,0 +1,69 @@
|
||||
# Flow D: Reference Page
|
||||
|
||||
**Activates when:** User has a similar page to reference
|
||||
|
||||
---
|
||||
|
||||
## Gather Reference
|
||||
|
||||
<ask>**Which page is this similar to?**
|
||||
|
||||
Provide:
|
||||
- Page name or URL
|
||||
- What file path (if internal project)
|
||||
- Or description of reference page
|
||||
|
||||
Reference:</ask>
|
||||
|
||||
<action>Store reference_page</action>
|
||||
|
||||
---
|
||||
|
||||
## Identify Differences
|
||||
|
||||
<ask>**What are the KEY DIFFERENCES from the reference?**
|
||||
|
||||
What changes from the reference page?
|
||||
|
||||
Differences:</ask>
|
||||
|
||||
<action>Store differences</action>
|
||||
|
||||
---
|
||||
|
||||
## Generate Specification
|
||||
|
||||
<output>**Creating page based on reference...**</output>
|
||||
|
||||
<action>
|
||||
If internal reference exists:
|
||||
1. Copy reference specification structure
|
||||
2. Update with differences
|
||||
3. Mark sections that need updates
|
||||
4. Preserve navigation pattern
|
||||
|
||||
If external reference:
|
||||
1. Describe reference structure
|
||||
2. Note differences
|
||||
3. Create conceptual specification
|
||||
4. Recommend creating sketch showing changes
|
||||
|
||||
Generate specification document
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## Completion
|
||||
|
||||
<output>✅ **Reference-based page specification created!**
|
||||
|
||||
**Based on:** {{reference_page}}
|
||||
|
||||
**Key differences noted:** {{differences}}
|
||||
|
||||
**Next steps:**
|
||||
- Review generated specification
|
||||
- Create sketch showing unique elements
|
||||
- Run Page Process Workshop to refine
|
||||
|
||||
Ready?</output>
|
||||
@@ -0,0 +1,131 @@
|
||||
# Flow E: Generate HTML Prototype
|
||||
|
||||
**Activates when:** User chooses to generate HTML and screenshot it
|
||||
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
<output>**Perfect! Let's generate an HTML prototype based on your concept.**
|
||||
|
||||
This creates a working page that you can:
|
||||
- View in browser
|
||||
- Screenshot for documentation
|
||||
- Test responsive behavior
|
||||
- Use as starting point for development
|
||||
|
||||
The screenshot becomes your "sketch" for the specification.</output>
|
||||
|
||||
---
|
||||
|
||||
## Benefits
|
||||
|
||||
- ✅ Professional, pixel-perfect visualization
|
||||
- ✅ Tests actual layout behavior
|
||||
- ✅ Responsive/mobile preview available
|
||||
- ✅ Can iterate quickly
|
||||
- ✅ Screenshot becomes the "sketch"
|
||||
- ✅ Prototype is already built!
|
||||
|
||||
**Perfect for:**
|
||||
- Users who can describe but can't draw
|
||||
- Testing responsive layouts
|
||||
- Quick professional mockups
|
||||
- When prototype comes before final design
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E1: Define Basic Structure
|
||||
|
||||
<output>**Based on your page concept:**
|
||||
|
||||
**Page:** {{page_name}}
|
||||
**Sections:** {{sections_list}}
|
||||
**Key Objects:** {{key_objects}}
|
||||
|
||||
I'll generate a clean HTML prototype with:
|
||||
- Semantic HTML structure
|
||||
- Basic Tailwind CSS styling (or vanilla CSS)
|
||||
- Placeholder content based on your descriptions
|
||||
- Responsive layout
|
||||
- Interactive elements (buttons, forms, etc.)</output>
|
||||
|
||||
<ask>**Any specific styling preferences?**
|
||||
|
||||
[A] Clean, minimal (default)
|
||||
[B] Modern SaaS style
|
||||
[C] Professional/corporate
|
||||
[D] Creative/bold
|
||||
[E] Match an existing site (describe)
|
||||
|
||||
Styling:</ask>
|
||||
|
||||
<action>Store styling_preference</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E2: Generate HTML
|
||||
|
||||
<action>
|
||||
**Generate HTML prototype:**
|
||||
|
||||
1. Create semantic HTML structure for each section
|
||||
2. Add Tailwind CSS classes (or vanilla CSS)
|
||||
3. Include placeholder content from user's descriptions
|
||||
4. Add interactive elements with proper attributes
|
||||
5. Make responsive (mobile-first)
|
||||
6. Include basic states (hover, focus, etc.)
|
||||
|
||||
File: `prototypes/{{page_slug}}-prototype.html`
|
||||
|
||||
Save to: `C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/`
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E3: View and Capture
|
||||
|
||||
<output>**Prototype generated!** 🎉
|
||||
|
||||
**File location:**
|
||||
`C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/{{page_slug}}-prototype.html`
|
||||
|
||||
**Next steps:**
|
||||
|
||||
1. **Open in browser** - Double-click the HTML file
|
||||
2. **Review the layout** - Does it match your vision?
|
||||
3. **Test responsive** - Resize browser window
|
||||
4. **Take screenshots:**
|
||||
- Desktop view (full page)
|
||||
- Mobile view (if needed)
|
||||
- Key sections (close-ups)
|
||||
5. **Save screenshots** to `sketches/` folder
|
||||
|
||||
**Screenshot naming:**
|
||||
- `{{page_slug}}-desktop.jpg` - Full desktop view
|
||||
- `{{page_slug}}-mobile.jpg` - Mobile view
|
||||
- `{{page_slug}}-section-name.jpg` - Section close-ups</output>
|
||||
|
||||
<ask>**Ready to capture screenshots?**
|
||||
|
||||
Once you've saved the screenshots, type "done" and I'll analyze them:
|
||||
|
||||
Status:</ask>
|
||||
|
||||
<action>Wait for user confirmation</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E4: Iterate If Needed
|
||||
|
||||
<ask>**How does the prototype look?**
|
||||
|
||||
[A] Perfect - I've captured screenshots
|
||||
[B] Need adjustments - let me describe changes
|
||||
[C] Completely different direction - let's revise
|
||||
|
||||
Choice:</ask>
|
||||
|
||||
**If A:** Route to `workshop-page-process.md` for analysis
|
||||
**If B:** Update HTML based on feedback, return to E3
|
||||
**If C:** Return to main workshop STEP 1 to redefine concept
|
||||
@@ -0,0 +1,135 @@
|
||||
# Lightweight Page Template
|
||||
|
||||
Template for generating page placeholder documents in page-init-lightweight workflow.
|
||||
|
||||
---
|
||||
|
||||
## File Location
|
||||
|
||||
`C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md`
|
||||
|
||||
---
|
||||
|
||||
## Template
|
||||
|
||||
```markdown
|
||||
{{#if previous_page != "none"}}
|
||||
← [{{previous_page}}](../{{previous_page_slug}}/{{previous_page_slug}}.md)
|
||||
{{/if}}
|
||||
{{#if next_page != "none" and next_page != "TBD"}}
|
||||
| [{{next_page}}](../{{next_page_slug}}/{{next_page_slug}}.md) →
|
||||
{{/if}}
|
||||
{{#if next_page == "TBD"}}
|
||||
| Next: TBD
|
||||
{{/if}}
|
||||
|
||||
|
||||
|
||||
{{#if previous_page != "none"}}
|
||||
← [{{previous_page}}](../{{previous_page_slug}}/{{previous_page_slug}}.md)
|
||||
{{/if}}
|
||||
{{#if next_page != "none" and next_page != "TBD"}}
|
||||
| [{{next_page}}](../{{next_page_slug}}/{{next_page_slug}}.md) →
|
||||
{{/if}}
|
||||
|
||||
# {{page_number}} {{page_name}}
|
||||
|
||||
**User Situation:** {{user_situation}}
|
||||
|
||||
**Page Purpose:** {{page_purpose}}
|
||||
|
||||
---
|
||||
|
||||
## Status
|
||||
|
||||
⚠️ **PLACEHOLDER** - This page needs:
|
||||
- [ ] Sketch or screenshot
|
||||
- [ ] Section breakdown
|
||||
- [ ] Object specifications
|
||||
- [ ] Component links
|
||||
- [ ] Interaction definitions
|
||||
- [ ] States and variants
|
||||
|
||||
---
|
||||
|
||||
## Navigation Context
|
||||
|
||||
{{#if previous_page != "none"}}
|
||||
**Previous:** {{previous_page}}
|
||||
{{else}}
|
||||
**This is the first page in the scenario**
|
||||
{{/if}}
|
||||
|
||||
{{#if next_page == "TBD"}}
|
||||
**Next:** TBD (to be defined)
|
||||
{{else if next_page != "none"}}
|
||||
**Next:** {{next_page}}
|
||||
{{else}}
|
||||
**This is the last page in the scenario**
|
||||
{{/if}}
|
||||
|
||||
---
|
||||
|
||||
## Open Questions
|
||||
|
||||
<!--
|
||||
Auto-populate questions based on page characteristics.
|
||||
Reference: instructions/open-questions.instructions.md
|
||||
|
||||
Check for:
|
||||
- Responsive breakpoints
|
||||
- Loading/Error/Empty states
|
||||
- SEO (if public)
|
||||
- Accessibility
|
||||
- User permissions
|
||||
- Time-sensitive behaviors
|
||||
- Form validation
|
||||
- Navigation/back behavior
|
||||
-->
|
||||
|
||||
_No open questions at this time._
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
To complete this page specification:
|
||||
|
||||
1. **Add a sketch**: Place your sketch in `sketches/` folder
|
||||
2. **Run Page Process Workshop**: Analyze your sketch
|
||||
3. **Specify sections**: Define all page sections
|
||||
4. **Specify objects**: Define all interactive elements with Object IDs
|
||||
5. **Link components**: Connect to design system components
|
||||
6. **Document states**: Define loading, error, success, empty states
|
||||
7. **Review open-questions.instructions.md**: Add relevant questions to Open Questions section
|
||||
8. **Generate prototype**: Create interactive HTML preview
|
||||
|
||||
---
|
||||
|
||||
{{#if previous_page != "none"}}
|
||||
**Previous Step**: ← [{{previous_page}}](../{{previous_page_slug}}/{{previous_page_slug}}.md)
|
||||
{{/if}}
|
||||
{{#if next_page != "none" and next_page != "TBD"}}
|
||||
**Next Step**: → [{{next_page}}](../{{next_page_slug}}/{{next_page_slug}}.md)
|
||||
{{/if}}
|
||||
|
||||
---
|
||||
|
||||
_Placeholder created using Whiteport Design Studio (WDS) methodology_
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Key Principles
|
||||
|
||||
### ✅ **Navigation is Critical**
|
||||
- Appears three times (above sketch, below sketch, document bottom)
|
||||
- Links to previous/next pages
|
||||
- Creates navigable flow
|
||||
- Essential for comprehension
|
||||
|
||||
### ✅ **Open Questions Ready**
|
||||
- Section included from start
|
||||
- Reference `open-questions.instructions.md` during spec creation
|
||||
- Auto-populate based on page characteristics
|
||||
- Ensures no edge cases are missed
|
||||
@@ -0,0 +1,196 @@
|
||||
# Page Init (Lightweight)
|
||||
|
||||
**Purpose:** Quick page setup - establish context, create structure, ready for iteration
|
||||
|
||||
---
|
||||
|
||||
## CONTEXT
|
||||
|
||||
**This workflow activates when:** User wants quick page setup without full specification yet.
|
||||
|
||||
**Creates:** Minimal structure (name, purpose, navigation, folders) ready for iteration.
|
||||
|
||||
**Critical:** Navigation links must be established for page comprehension.
|
||||
|
||||
---
|
||||
|
||||
## STEP 1: PAGE BASICS
|
||||
|
||||
<ask>**What's the name of this page?**
|
||||
|
||||
Examples:
|
||||
- "Start Page"
|
||||
- "Sign In"
|
||||
- "Dashboard"
|
||||
- "User Profile"
|
||||
|
||||
Page name:</ask>
|
||||
|
||||
<action>
|
||||
Store page_name
|
||||
Generate page_slug from page_name (lowercase, hyphenated)
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## STEP 2: PURPOSE & SITUATION
|
||||
|
||||
<ask>**What's the PURPOSE of this page?**
|
||||
|
||||
What should this page accomplish?
|
||||
|
||||
Purpose:</ask>
|
||||
|
||||
<action>Store page_purpose</action>
|
||||
|
||||
<ask>**What's the USER'S SITUATION when they arrive?**
|
||||
|
||||
What just happened? What are they trying to do?
|
||||
|
||||
User situation:</ask>
|
||||
|
||||
<action>Store user_situation</action>
|
||||
|
||||
---
|
||||
|
||||
## STEP 3: SCENARIO CONTEXT
|
||||
|
||||
<action>
|
||||
**Determine scenario context:**
|
||||
- Read project structure from wds-workflow-status.yaml
|
||||
- Check existing scenarios
|
||||
- Determine page placement
|
||||
</action>
|
||||
|
||||
<check if="multiple_scenarios_exist">
|
||||
<ask>**Which scenario does this page belong to?**
|
||||
|
||||
Existing scenarios:
|
||||
{{#each scenario in existing_scenarios}}
|
||||
- {{scenario.number}}: {{scenario.name}}
|
||||
{{/each}}
|
||||
|
||||
Choose scenario [number] or "new" for a new scenario:</ask>
|
||||
|
||||
<action>Store scenario_number</action>
|
||||
</check>
|
||||
|
||||
<check if="single_scenario or no_scenarios">
|
||||
<output>This page will be in your main user flow.</output>
|
||||
<action>Set scenario_number = 1</action>
|
||||
</check>
|
||||
|
||||
---
|
||||
|
||||
## STEP 4: NAVIGATION FLOW (CRITICAL!)
|
||||
|
||||
<output>**Now let's establish navigation - this is crucial for comprehension!**</output>
|
||||
|
||||
<action>
|
||||
**Determine page number:**
|
||||
- Count existing pages in scenario
|
||||
- Calculate next page number
|
||||
- Store page_number (e.g., "1.1", "1.2", "2.1")
|
||||
</action>
|
||||
|
||||
<ask>**What page comes BEFORE this one?**
|
||||
|
||||
Type page number, or "none" if this is the first page:
|
||||
|
||||
Previous page:</ask>
|
||||
|
||||
<action>Store previous_page</action>
|
||||
|
||||
<ask>**What page comes AFTER this one?**
|
||||
|
||||
- If you know: Type the page name (we'll create it next)
|
||||
- If unsure: Type "TBD"
|
||||
- If last page: Type "none"
|
||||
|
||||
Next page:</ask>
|
||||
|
||||
<action>Store next_page</action>
|
||||
|
||||
---
|
||||
|
||||
## STEP 5: CREATE STRUCTURE
|
||||
|
||||
<output>**Creating page structure...**</output>
|
||||
|
||||
<action>
|
||||
**Create folder structure:**
|
||||
|
||||
Path: `C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/`
|
||||
|
||||
Create:
|
||||
1. Page folder: `{{page_number}}-{{page_slug}}/`
|
||||
2. Sketches folder: `{{page_number}}-{{page_slug}}/sketches/`
|
||||
3. Placeholder document using template
|
||||
|
||||
**See:** [lightweight-page-template.md](lightweight-page-template.md)
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## STEP 6: UPDATE NAVIGATION
|
||||
|
||||
<check if="previous_page != 'none'">
|
||||
<action>
|
||||
**Update previous page document:**
|
||||
- Open previous page .md file
|
||||
- Update "Next" link to point to this page
|
||||
- Save
|
||||
</action>
|
||||
</check>
|
||||
|
||||
---
|
||||
|
||||
## STEP 7: COMPLETION
|
||||
|
||||
<output>✅ **Page initialized!**
|
||||
|
||||
**Created:**
|
||||
- Folder: `{{page_number}}-{{page_slug}}/`
|
||||
- Document: `{{page_number}}-{{page_slug}}.md`
|
||||
- Sketches folder: `sketches/`
|
||||
|
||||
**Page details:**
|
||||
- **Number:** {{page_number}}
|
||||
- **Name:** {{page_name}}
|
||||
- **Purpose:** {{page_purpose}}
|
||||
|
||||
**Navigation:**
|
||||
- Previous: {{previous_page}} {{#if linked}}✅ linked{{/if}}
|
||||
- Next: {{next_page}}
|
||||
|
||||
---
|
||||
|
||||
**Next steps:**
|
||||
|
||||
1. **Add your sketch** to `sketches/` folder
|
||||
2. **Run Page Process Workshop** to analyze it
|
||||
|
||||
Or:
|
||||
|
||||
[A] Add sketch now and analyze
|
||||
[B] Create another page first
|
||||
[C] Back to scenario overview
|
||||
|
||||
Choice:</output>
|
||||
|
||||
---
|
||||
|
||||
## ROUTING
|
||||
|
||||
<action>
|
||||
Based on user choice:
|
||||
- [A] → workshop-page-process.md (with this page context)
|
||||
- [B] → Repeat page-init for next page
|
||||
- [C] → Return to scenario overview / main menu
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
**Created:** December 28, 2025
|
||||
**Purpose:** Quick page initialization with navigation
|
||||
**Status:** Ready for WDS Presentation page
|
||||
@@ -0,0 +1,130 @@
|
||||
# Page Process Workshop Templates
|
||||
|
||||
Templates for comparison output and change detection displays.
|
||||
|
||||
---
|
||||
|
||||
## Change Detection Output Template
|
||||
|
||||
```handlebars
|
||||
{{#if has_changes}}
|
||||
🔍 **Changes detected:**
|
||||
|
||||
{{#if unchanged_sections.length > 0}}
|
||||
✅ **Unchanged sections** ({{unchanged_sections.length}}):
|
||||
{{#each section in unchanged_sections}}
|
||||
- {{section.name}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#if modified_sections.length > 0}}
|
||||
✏️ **Modified sections** ({{modified_sections.length}}):
|
||||
{{#each section in modified_sections}}
|
||||
- {{section.name}}: {{section.change_description}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#if new_sections.length > 0}}
|
||||
➕ **New sections added** ({{new_sections.length}}):
|
||||
{{#each section in new_sections}}
|
||||
- {{section.name}}: {{section.description}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#if completed_sections.length > 0}}
|
||||
✨ **TBD sections now complete** ({{completed_sections.length}}):
|
||||
{{#each section in completed_sections}}
|
||||
- {{section.name}}: Ready to specify
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#if removed_sections.length > 0}}
|
||||
⚠️ **Sections removed** ({{removed_sections.length}}):
|
||||
{{#each section in removed_sections}}
|
||||
- {{section.name}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{else}}
|
||||
✅ **No changes detected**
|
||||
|
||||
This sketch appears identical to the existing specification.
|
||||
{{/if}}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Detailed Comparison Template
|
||||
|
||||
```handlebars
|
||||
**Detailed Section-by-Section Comparison:**
|
||||
|
||||
{{#each section in modified_sections}}
|
||||
|
||||
---
|
||||
|
||||
### {{section.name}}
|
||||
|
||||
**Current specification:**
|
||||
{{section.current_spec_summary}}
|
||||
|
||||
**New sketch shows:**
|
||||
{{section.new_sketch_summary}}
|
||||
|
||||
**Detected changes:**
|
||||
{{#each change in section.changes}}
|
||||
- {{change.description}}
|
||||
{{/each}}
|
||||
|
||||
**Confidence:** {{section.confidence}}%
|
||||
|
||||
---
|
||||
{{/each}}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Update Summary Template
|
||||
|
||||
```handlebars
|
||||
✅ **Page specification updated!**
|
||||
|
||||
**Summary:**
|
||||
{{#if updated_count > 0}}
|
||||
- {{updated_count}} sections updated
|
||||
{{/if}}
|
||||
{{#if added_count > 0}}
|
||||
- {{added_count}} sections added
|
||||
{{/if}}
|
||||
{{#if preserved_count > 0}}
|
||||
- {{preserved_count}} sections preserved (unchanged)
|
||||
{{/if}}
|
||||
{{#if removed_count > 0}}
|
||||
- {{removed_count}} sections removed
|
||||
{{/if}}
|
||||
|
||||
**Updated file:** `{{page_spec_path}}`
|
||||
|
||||
**Sketch saved to:** `{{sketch_path}}`
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Menu Options
|
||||
|
||||
**Update Strategy Menu (with changes):**
|
||||
- [A] Update all changed/new/completed sections
|
||||
- [B] Pick specific sections to update
|
||||
- [C] Show me detailed comparison first
|
||||
- [D] Actually, this is the same - cancel
|
||||
|
||||
**Update Strategy Menu (only removals):**
|
||||
- [A] Remove deleted sections from spec
|
||||
- [B] Keep them marked as "removed from design"
|
||||
- [C] Cancel - I'll fix the sketch
|
||||
|
||||
**Completion Menu:**
|
||||
- [A] Generate HTML prototype
|
||||
- [B] Add another page
|
||||
- [C] Update another section
|
||||
- [D] Done with this page
|
||||
@@ -0,0 +1,153 @@
|
||||
# Placeholder Page Templates
|
||||
|
||||
Templates for generating placeholder page documents.
|
||||
|
||||
---
|
||||
|
||||
## Page Placeholder Document Template
|
||||
|
||||
File: `C-UX-Scenarios/{{scenario_path}}/{{page.number}}-{{page.slug}}/{{page.number}}-{{page.slug}}.md`
|
||||
|
||||
```markdown
|
||||
{{#if @index > 0}}
|
||||
← [{{pages_list[@index - 1].number}}-{{pages_list[@index - 1].slug}}](../{{pages_list[@index - 1].number}}-{{pages_list[@index - 1].slug}}/{{pages_list[@index - 1].number}}-{{pages_list[@index - 1].slug}}.md)
|
||||
{{/if}}
|
||||
{{#if @index < pages_list.length - 1}}
|
||||
| [{{pages_list[@index + 1].number}}-{{pages_list[@index + 1].slug}}](../{{pages_list[@index + 1].number}}-{{pages_list[@index + 1].slug}}/{{pages_list[@index + 1].number}}-{{pages_list[@index + 1].slug}}.md) →
|
||||
{{/if}}
|
||||
|
||||
# {{page.number}} {{page.name}}
|
||||
|
||||
**User Situation:** {{page.situation}}
|
||||
|
||||
**Page Purpose:** {{page.purpose}}
|
||||
|
||||
---
|
||||
|
||||
## Status
|
||||
|
||||
⚠️ **PLACEHOLDER** - This page needs:
|
||||
- [ ] Sketch or screenshot
|
||||
- [ ] Section breakdown
|
||||
- [ ] Object specifications
|
||||
- [ ] Component links
|
||||
- [ ] Interaction definitions
|
||||
- [ ] States and variants
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
To complete this page specification:
|
||||
|
||||
1. **Add a sketch**: Place sketch in `sketches/` folder
|
||||
2. **Run Workshop A**: Sketch Analysis Workshop to break down the visual
|
||||
3. **Specify objects**: Define all interactive elements with Object IDs
|
||||
4. **Link components**: Connect to design system components
|
||||
5. **Document states**: Define loading, error, success, empty states
|
||||
|
||||
---
|
||||
|
||||
{{#if @index > 0}}
|
||||
**Previous Step**: ← [{{pages_list[@index - 1].number}}-{{pages_list[@index - 1].slug}}](../{{pages_list[@index - 1].number}}-{{pages_list[@index - 1].slug}}/{{pages_list[@index - 1].number}}-{{pages_list[@index - 1].slug}}.md)
|
||||
{{/if}}
|
||||
{{#if @index < pages_list.length - 1}}
|
||||
**Next Step**: → [{{pages_list[@index + 1].number}}-{{pages_list[@index + 1].slug}}](../{{pages_list[@index + 1].number}}-{{pages_list[@index + 1].slug}}/{{pages_list[@index + 1].number}}-{{pages_list[@index + 1].slug}}.md)
|
||||
{{/if}}
|
||||
|
||||
---
|
||||
|
||||
_Placeholder created using Whiteport Design Studio (WDS) methodology_
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Scenario Overview Template
|
||||
|
||||
File: `C-UX-Scenarios/{{scenario_path}}/00-{{scenario_slug}}-scenario.md`
|
||||
|
||||
```markdown
|
||||
# {{scenario_number}} {{scenario_name}} - Scenario Overview
|
||||
|
||||
**Project**: {{project_name}}
|
||||
**Date Created**: {{date}}
|
||||
**Last Updated**: {{date}}
|
||||
|
||||
## Scenario Overview
|
||||
|
||||
[Brief description of this scenario - to be filled in]
|
||||
|
||||
## Scenario Steps
|
||||
|
||||
{{#each page in pages_list}}
|
||||
### **{{page.number}} {{page.name}}**
|
||||
**Purpose**: {{page.purpose}}
|
||||
**Status**: ⚠️ Placeholder
|
||||
**Files**: [{{page.number}}-{{page.slug}}.md]({{page.number}}-{{page.slug}}/{{page.number}}-{{page.slug}}.md)
|
||||
|
||||
{{/each}}
|
||||
|
||||
## User Journey Flow
|
||||
|
||||
```
|
||||
{{#each page in pages_list}}
|
||||
{{page.number}}-{{page.slug}}{{#unless @last}} → {{/unless}}
|
||||
{{/each}}
|
||||
```
|
||||
|
||||
## Status
|
||||
|
||||
{{pages_list.length}} placeholder pages created. Each page needs:
|
||||
- Sketch or visual concept
|
||||
- Detailed specifications
|
||||
- Object definitions
|
||||
- Component links
|
||||
|
||||
---
|
||||
|
||||
_Created using Whiteport Design Studio (WDS) methodology_
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Scenario Tracking Template
|
||||
|
||||
File: `C-UX-Scenarios/{{scenario_path}}/scenario-tracking.yaml`
|
||||
|
||||
```yaml
|
||||
scenario_number: {{scenario_number}}
|
||||
scenario_name: "{{scenario_name}}"
|
||||
pages_list:
|
||||
{{#each page in pages_list}}
|
||||
- name: "{{page.name}}"
|
||||
slug: "{{page.slug}}"
|
||||
page_number: "{{page.number}}"
|
||||
purpose: "{{page.purpose}}"
|
||||
status: "placeholder"
|
||||
{{/each}}
|
||||
current_page_index: 0
|
||||
total_pages: {{pages_list.length}}
|
||||
created_date: "{{date}}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## When to Use Placeholders
|
||||
|
||||
**Advantages:**
|
||||
- Quick mapping of entire flow
|
||||
- Clear navigation before details
|
||||
- Easy to see gaps or redundancies
|
||||
- Can be reviewed by stakeholders early
|
||||
- Team can work on different pages in parallel
|
||||
|
||||
**Use when:**
|
||||
- New projects starting from scratch
|
||||
- Complex multi-page scenarios
|
||||
- When need for early stakeholder review
|
||||
- Before diving into visual design
|
||||
|
||||
**Don't use when:**
|
||||
- Single page projects
|
||||
- When sketch already exists (use Workshop A)
|
||||
- Small modifications to existing flow
|
||||
@@ -0,0 +1,168 @@
|
||||
# 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
|
||||
|
||||
<output>**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! 📋</output>
|
||||
|
||||
---
|
||||
|
||||
## PHASE 2: SCENARIO CONTEXT
|
||||
|
||||
<action>
|
||||
**Determine scenario context:**
|
||||
- Read project structure from wds-workflow-status.yaml
|
||||
- Check existing scenarios
|
||||
- Determine if working with existing or new scenario
|
||||
</action>
|
||||
|
||||
<ask>**Which 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}}</ask>
|
||||
|
||||
<action>Store scenario_number and scenario_name</action>
|
||||
|
||||
---
|
||||
|
||||
## PHASE 3: FLOW MAPPING
|
||||
|
||||
<output>**Great! Let's map out the pages in this flow.**
|
||||
|
||||
Think about the user journey through "{{scenario_name}}"</output>
|
||||
|
||||
<ask>**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:</ask>
|
||||
|
||||
<action>Store pages_count</action>
|
||||
|
||||
---
|
||||
|
||||
## PHASE 4: PAGE ENUMERATION
|
||||
|
||||
<output>**Perfect! Let's name and define each page.**
|
||||
|
||||
I'll guide you through {{pages_count}} pages...</output>
|
||||
|
||||
For each page, gather:
|
||||
1. **Page name** (examples: "Start Page", "Sign In", "Checkout")
|
||||
2. **Page purpose** (1-2 sentences: what user accomplishes)
|
||||
3. **User situation** (what just happened, what they're trying to do)
|
||||
|
||||
<action>Store page_name, page_purpose, user_situation for each page</action>
|
||||
|
||||
---
|
||||
|
||||
## PHASE 5: FLOW REVIEW
|
||||
|
||||
<output>**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?</output>
|
||||
|
||||
<ask>**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:</ask>
|
||||
|
||||
---
|
||||
|
||||
## PHASE 6: GENERATE DOCUMENTS
|
||||
|
||||
<output>**Perfect! Creating your placeholder pages now...**</output>
|
||||
|
||||
<action>
|
||||
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 file
|
||||
|
||||
**See:** [placeholder-templates.md](placeholder-templates.md) for all templates
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## PHASE 7: COMPLETION
|
||||
|
||||
<output>✅ **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:**
|
||||
1. **Add sketches** - Upload visuals for each page
|
||||
2. **Complete specifications** - Run Workshop A (Sketch Analysis) for each page
|
||||
3. **Add more pages** - Come back and add pages to this scenario
|
||||
4. **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:</output>
|
||||
|
||||
---
|
||||
|
||||
## ROUTING
|
||||
|
||||
<action>
|
||||
**Based on user choice:**
|
||||
- If user picks a page number → Route to Workshop B (Sketch Creation) for that page
|
||||
- If user selects [N] → Route to scenario-init workshop
|
||||
- If user selects [D] → Return to main UX design menu
|
||||
</action>
|
||||
@@ -0,0 +1,134 @@
|
||||
# Workshop: Page Creation (Discussion-Based)
|
||||
|
||||
**Purpose:** Define a page concept through conversation, create visualization method based on need
|
||||
|
||||
---
|
||||
|
||||
## CONTEXT
|
||||
|
||||
**This workflow activates when:** User needs to define a page concept but doesn't have a visualization yet.
|
||||
|
||||
**Goal:** Define what the page IS, then choose how to visualize it.
|
||||
|
||||
**Philosophy:** The page (concept) comes first. Visualization (method) follows.
|
||||
|
||||
---
|
||||
|
||||
## STEP 1: PAGE CONCEPT
|
||||
|
||||
<ask>**What is this page about?**
|
||||
|
||||
Tell me in your own words:
|
||||
- What is this page called?
|
||||
- What should it accomplish?
|
||||
- Who uses it and why?
|
||||
|
||||
Describe the page concept:</ask>
|
||||
|
||||
<action>Store page_concept</action>
|
||||
|
||||
---
|
||||
|
||||
## STEP 2: VISUALIZATION PREFERENCE
|
||||
|
||||
<ask>**How would you like to visualize this page?**
|
||||
|
||||
[A] I'll draw a sketch (physical/digital) and upload it
|
||||
[B] Let's describe it verbally - I'll specify sections through discussion
|
||||
[C] Create a simple ASCII layout together
|
||||
[D] It's similar to another page I can reference
|
||||
[E] Generate HTML prototype - I'll screenshot it for documentation
|
||||
|
||||
Choice:</ask>
|
||||
|
||||
<action>Store visualization_method</action>
|
||||
|
||||
---
|
||||
|
||||
## FLOW ROUTING
|
||||
|
||||
Based on user choice, load the appropriate flow:
|
||||
|
||||
| Choice | Flow | File |
|
||||
|--------|------|------|
|
||||
| **A** | Sketch Path | [flow-a-sketch.md](flow-a-sketch.md) |
|
||||
| **B** | Verbal Specification | [flow-b-verbal.md](flow-b-verbal.md) |
|
||||
| **C** | ASCII Layout | [flow-c-ascii.md](flow-c-ascii.md) |
|
||||
| **D** | Reference Page | [flow-d-reference.md](flow-d-reference.md) |
|
||||
| **E** | HTML Prototype | [flow-e-html.md](flow-e-html.md) |
|
||||
|
||||
<action>Load and execute the selected flow substep</action>
|
||||
|
||||
---
|
||||
|
||||
## COMPLETION
|
||||
|
||||
<output>**Page concept defined!** 🎯
|
||||
|
||||
**Page:** {{page_name}}
|
||||
**Method:** {{visualization_method_description}}
|
||||
**Status:** Conceptual specification complete
|
||||
|
||||
**The page is the place where visualization meets specification.**
|
||||
|
||||
**What would you like to do next?**
|
||||
|
||||
[A] Create/upload sketch for this page
|
||||
[B] Create another page
|
||||
[C] Review what we've created
|
||||
[D] Back to scenario overview
|
||||
|
||||
Choice:</output>
|
||||
|
||||
---
|
||||
|
||||
## KEY PHILOSOPHY
|
||||
|
||||
### ✅ **Page-Centric Thinking**
|
||||
|
||||
The **page** is the conceptual entity:
|
||||
- Has a purpose
|
||||
- Serves users
|
||||
- Contains sections
|
||||
- Has interactive objects
|
||||
- Exists in a flow
|
||||
|
||||
The **visualization** is one representation:
|
||||
- Sketch (preferred)
|
||||
- Wireframe
|
||||
- ASCII (last resort)
|
||||
- Verbal description
|
||||
- Reference to similar page
|
||||
|
||||
**The page comes first. Visualization follows.**
|
||||
|
||||
### ✅ **Flexible Methods**
|
||||
|
||||
Different projects need different approaches:
|
||||
- Early concept → Verbal/ASCII → Sketch later
|
||||
- Clear vision → Sketch directly
|
||||
- Existing patterns → Reference + differences
|
||||
- Iterative → Mix of methods
|
||||
|
||||
**The workshop adapts to YOUR process.**
|
||||
|
||||
---
|
||||
|
||||
## INTEGRATION
|
||||
|
||||
This workshop creates:
|
||||
1. **Conceptual page specification** (always)
|
||||
2. **Placeholder for visualization** (always)
|
||||
3. **Guidance for next steps** (always)
|
||||
|
||||
Next workshops use:
|
||||
- **workshop-page-process.md** - When sketch is ready
|
||||
- **page-init-lightweight.md** - For quick structure
|
||||
- **4b-sketch-analysis.md** - For detailed analysis
|
||||
|
||||
---
|
||||
|
||||
**Created:** December 28, 2025
|
||||
**Purpose:** Define page concept, choose visualization method
|
||||
**Philosophy:** Page first, visualization second
|
||||
**Status:** Ready for use
|
||||
@@ -0,0 +1,235 @@
|
||||
# Page Process Workshop
|
||||
|
||||
**Purpose:** Intelligent sketch analysis with context detection - handles both new and updated sketches
|
||||
|
||||
---
|
||||
|
||||
## CONTEXT
|
||||
|
||||
**This workflow activates when:** User has a sketch/visualization ready to analyze.
|
||||
|
||||
**Intelligence:** Detects if this is a new page or update to existing specification.
|
||||
|
||||
**Behavior:**
|
||||
- New page → Full analysis
|
||||
- Updated page → Change detection, incremental update
|
||||
- Partial completion → Specify ready sections, mark TBD
|
||||
|
||||
---
|
||||
|
||||
## STEP 1: CONTEXT DETECTION
|
||||
|
||||
<action>
|
||||
**Determine page context:**
|
||||
|
||||
1. Read current page specification (if exists)
|
||||
2. Check for existing sketch versions
|
||||
3. Identify project structure (scenarios, pages)
|
||||
4. Store context information
|
||||
</action>
|
||||
|
||||
<check if="!page_spec_exists">
|
||||
<output>**This is the first sketch for this page!**
|
||||
|
||||
Let me analyze what you've drawn and create the initial specification.</output>
|
||||
|
||||
<action>Route to: `../../steps-k/step-01-sketch-analysis.md` (existing workflow)</action>
|
||||
</check>
|
||||
|
||||
<check if="page_spec_exists">
|
||||
<output>**I see we already have specifications for this page.**
|
||||
|
||||
Let me compare this sketch to what we have...</output>
|
||||
|
||||
<action>Proceed to STEP 2: Change Detection</action>
|
||||
</check>
|
||||
|
||||
---
|
||||
|
||||
## STEP 2: CHANGE DETECTION (For Existing Pages)
|
||||
|
||||
<action>
|
||||
**Compare new sketch to existing specifications:**
|
||||
|
||||
1. Load existing specification document
|
||||
2. Identify which sections are already specified
|
||||
3. Analyze new sketch for:
|
||||
- Unchanged sections
|
||||
- Modified sections
|
||||
- New sections added
|
||||
- Removed sections
|
||||
- TBD sections now complete
|
||||
- Complete sections now TBD
|
||||
4. Calculate confidence for each comparison
|
||||
</action>
|
||||
|
||||
<output>**Comparison Results:**
|
||||
|
||||
**See:** [page-process-templates.md](page-process-templates.md) for output templates
|
||||
|
||||
Display:
|
||||
- Unchanged sections (✅)
|
||||
- Modified sections (✏️)
|
||||
- New sections added (➕)
|
||||
- TBD sections now complete (✨)
|
||||
- Sections removed (⚠️)
|
||||
</output>
|
||||
|
||||
---
|
||||
|
||||
## STEP 3: UPDATE STRATEGY
|
||||
|
||||
<check if="has_changes">
|
||||
|
||||
<ask>**How would you like to proceed?**
|
||||
|
||||
[A] Update all changed/new/completed sections
|
||||
[B] Pick specific sections to update
|
||||
[C] Show me detailed comparison first
|
||||
[D] Actually, this is the same - cancel
|
||||
|
||||
Choice:</ask>
|
||||
|
||||
<action>Store user_choice</action>
|
||||
|
||||
</check>
|
||||
|
||||
---
|
||||
|
||||
## STEP 4A: UPDATE ALL (If user chose A)
|
||||
|
||||
<check if="user_choice == 'A'">
|
||||
|
||||
<output>**Updating all changed sections:**
|
||||
|
||||
I'll process all modified, new, and completed sections while preserving unchanged sections.
|
||||
|
||||
Ready to analyze sections?</output>
|
||||
|
||||
<action>
|
||||
For each section in (modified_sections + new_sections + completed_sections):
|
||||
Run 4b-sketch-analysis.md workflow for that section only
|
||||
Update specification document
|
||||
Preserve unchanged sections
|
||||
End
|
||||
</action>
|
||||
|
||||
</check>
|
||||
|
||||
---
|
||||
|
||||
## STEP 4B: SELECTIVE UPDATE (If user chose B)
|
||||
|
||||
<check if="user_choice == 'B'">
|
||||
|
||||
<ask>**Which sections should I update?**
|
||||
|
||||
[List numbered sections with change type]
|
||||
|
||||
Enter numbers separated by commas (e.g., 1,3,5):</ask>
|
||||
|
||||
<action>
|
||||
Parse selected_sections
|
||||
For each selected section:
|
||||
Run 4b-sketch-analysis.md workflow for that section
|
||||
Update specification document
|
||||
End
|
||||
</action>
|
||||
|
||||
</check>
|
||||
|
||||
---
|
||||
|
||||
## STEP 4C: DETAILED COMPARISON (If user chose C)
|
||||
|
||||
<check if="user_choice == 'C'">
|
||||
|
||||
<output>**Detailed Section-by-Section Comparison:**
|
||||
|
||||
**See:** [page-process-templates.md](page-process-templates.md) for comparison template
|
||||
|
||||
Display for each modified section:
|
||||
- Current specification summary
|
||||
- New sketch interpretation
|
||||
- Detected changes
|
||||
- Confidence level
|
||||
|
||||
After reviewing, what would you like to do?
|
||||
|
||||
[A] Update all
|
||||
[B] Pick specific sections
|
||||
[C] Cancel</output>
|
||||
|
||||
<action>Return to STEP 3 with user's choice</action>
|
||||
|
||||
</check>
|
||||
|
||||
---
|
||||
|
||||
## STEP 5: COMPLETION
|
||||
|
||||
<output>✅ **Page specification updated!**
|
||||
|
||||
**Summary:**
|
||||
- [X] sections updated
|
||||
- [X] sections added
|
||||
- [X] sections preserved (unchanged)
|
||||
- [X] sections removed
|
||||
|
||||
**Updated file:** `{{page_spec_path}}`
|
||||
**Sketch saved to:** `{{sketch_path}}`
|
||||
|
||||
Would you like to:
|
||||
[A] Generate HTML prototype
|
||||
[B] Add another page
|
||||
[C] Update another section
|
||||
[D] Done with this page
|
||||
|
||||
Choice:</output>
|
||||
|
||||
---
|
||||
|
||||
## ROUTING
|
||||
|
||||
<action>
|
||||
Based on user choice:
|
||||
- [A] → Load prototype generation workflow
|
||||
- [B] → Return to page-init/step-01-page-context.md
|
||||
- [C] → Return to STEP 3 (pick sections)
|
||||
- [D] → Return to main UX design menu
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## KEY FEATURES
|
||||
|
||||
### ✅ **Intelligent Context Detection**
|
||||
- Automatically knows if new or update
|
||||
- Compares sketches to existing specs
|
||||
- Identifies unchanged sections
|
||||
|
||||
### ✅ **Incremental Updates**
|
||||
- Only updates what changed
|
||||
- Preserves existing work
|
||||
- No data loss
|
||||
|
||||
### ✅ **Flexible Control**
|
||||
- Update all or select specific
|
||||
- See detailed comparison
|
||||
- Cancel anytime
|
||||
|
||||
---
|
||||
|
||||
## INTEGRATION
|
||||
|
||||
This workshop uses:
|
||||
- **4b-sketch-analysis.md** - For actual section analysis
|
||||
- **guides/SKETCH-TEXT-ANALYSIS-GUIDE.md** - For reading text markers
|
||||
- **page-specification.template.md** - For document structure
|
||||
- **object-types/*.md** - For component specifications
|
||||
|
||||
---
|
||||
|
||||
**Created:** December 28, 2025
|
||||
**For:** Iterative page specification workflow
|
||||
**Status:** Ready to test with WDS Presentation page
|
||||
Reference in New Issue
Block a user