Phase 4 coherence: fix paths, add spacing step, extraction rules, align transitions
Path fixes across 14 files: - D-UX-Design/ → C-UX-Scenarios/ (page specs) or D-Design-System/ (tokens) - 4-scenarios/ → C-UX-Scenarios/ (all step files and page creation flows) New spacing & typography step in [P] Specify: - step-08-spacing-typography.md defines section spacing objects and heading tokens - Old step-08 renumbered to step-09, references updated to steps 1-8 [M] Design System extraction rules: - Objects extract on 2nd use, spacing extracts immediately on 1st use - Component extraction check before designing 2nd+ page [S] Suggest step-15 alignment: - Old [A]/[S]/[M] menu replaced with two-option transitions - Matches the pattern used by [C] Conceptualize and workflow-suggest.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mårten Angner
parent
095c2ec92e
commit
d2599c91b4
|
|
@ -108,7 +108,7 @@ Generate page specification document:
|
|||
- User flow description
|
||||
- Next steps: "Create visualization (sketch/wireframe)"
|
||||
|
||||
Save to: 4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md
|
||||
Save to: C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md
|
||||
</action>
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ Styling:</ask>
|
|||
|
||||
File: `prototypes/{{page_slug}}-prototype.html`
|
||||
|
||||
Save to: `4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/`
|
||||
Save to: `C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/`
|
||||
</action>
|
||||
|
||||
---
|
||||
|
|
@ -88,7 +88,7 @@ Save to: `4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes
|
|||
<output>**Prototype generated!** 🎉
|
||||
|
||||
**File location:**
|
||||
`4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/{{page_slug}}-prototype.html`
|
||||
`C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/{{page_slug}}-prototype.html`
|
||||
|
||||
**Next steps:**
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ Template for generating page placeholder documents in page-init-lightweight work
|
|||
|
||||
## File Location
|
||||
|
||||
`4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md`
|
||||
`C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/{{page_number}}-{{page_slug}}.md`
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ Next page:</ask>
|
|||
<action>
|
||||
**Create folder structure:**
|
||||
|
||||
Path: `4-scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/`
|
||||
Path: `C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/`
|
||||
|
||||
Create:
|
||||
1. Page folder: `{{page_number}}-{{page_slug}}/`
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ Templates for generating placeholder page documents.
|
|||
|
||||
## Page Placeholder Document Template
|
||||
|
||||
File: `4-scenarios/{{scenario_path}}/{{page.number}}-{{page.slug}}/{{page.number}}-{{page.slug}}.md`
|
||||
File: `C-UX-Scenarios/{{scenario_path}}/{{page.number}}-{{page.slug}}/{{page.number}}-{{page.slug}}.md`
|
||||
|
||||
```markdown
|
||||
{{#if @index > 0}}
|
||||
|
|
@ -64,7 +64,7 @@ _Placeholder created using Whiteport Design Studio (WDS) methodology_
|
|||
|
||||
## Scenario Overview Template
|
||||
|
||||
File: `4-scenarios/{{scenario_path}}/00-{{scenario_slug}}-scenario.md`
|
||||
File: `C-UX-Scenarios/{{scenario_path}}/00-{{scenario_slug}}-scenario.md`
|
||||
|
||||
```markdown
|
||||
# {{scenario_number}} {{scenario_name}} - Scenario Overview
|
||||
|
|
@ -112,7 +112,7 @@ _Created using Whiteport Design Studio (WDS) methodology_
|
|||
|
||||
## Scenario Tracking Template
|
||||
|
||||
File: `4-scenarios/{{scenario_path}}/scenario-tracking.yaml`
|
||||
File: `C-UX-Scenarios/{{scenario_path}}/scenario-tracking.yaml`
|
||||
|
||||
```yaml
|
||||
scenario_number: {{scenario_number}}
|
||||
|
|
|
|||
|
|
@ -50,13 +50,13 @@ Understand the current state of the design system before making changes. Invento
|
|||
- Available context: Design system folder, page specifications
|
||||
- Focus: Review and inventory only
|
||||
- Limits: Do not modify any components (that is step 02)
|
||||
- Dependencies: Design system folder must exist at {output_folder}/D-UX-Design/design-system/
|
||||
- Dependencies: Design system folder must exist at {output_folder}/D-Design-System/
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. Load Design System
|
||||
|
||||
Check `{output_folder}/D-UX-Design/design-system/` for existing components.
|
||||
Check `{output_folder}/D-Design-System/` for existing components.
|
||||
|
||||
### 2. Inventory
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ Reference `../data/object-types/COMPLEXITY-ROUTER.md`:
|
|||
|
||||
### 4. Save
|
||||
|
||||
Write component definition to `{output_folder}/D-UX-Design/design-system/`
|
||||
Write component definition to `{output_folder}/D-Design-System/`
|
||||
|
||||
### 5. Present MENU OPTIONS
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Check that design system components are used correctly and consistently across p
|
|||
|
||||
- 🎯 Scan page specifications, cross-reference with design system, generate report
|
||||
- 💾 Update component definitions and page specs based on resolution decisions
|
||||
- 📖 Reference all page specifications in `{output_folder}/D-UX-Design/`
|
||||
- 📖 Reference all page specifications in `{output_folder}/C-UX-Scenarios/`
|
||||
- 🚫 FORBIDDEN to auto-fix inconsistencies without user approval
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
|
@ -56,7 +56,7 @@ Check that design system components are used correctly and consistently across p
|
|||
|
||||
### 1. Scan Page Specifications
|
||||
|
||||
Read all page specifications in `{output_folder}/D-UX-Design/` and extract component references.
|
||||
Read all page specifications in `{output_folder}/C-UX-Scenarios/` and extract component references.
|
||||
|
||||
### 2. Cross-Reference
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ name: 'step-07-validation'
|
|||
description: 'Define all validation rules and error messages for form fields and inputs'
|
||||
|
||||
# File References
|
||||
nextStepFile: './step-08-generate-spec.md'
|
||||
nextStepFile: './step-08-spacing-typography.md'
|
||||
workflowFile: '../workflow.md'
|
||||
activityWorkflowFile: '../workflow-specify.md'
|
||||
---
|
||||
|
|
@ -107,11 +107,11 @@ Error code (e.g., ERR_EMAIL_INVALID):
|
|||
**Validated fields:** {{validated_field_count}}
|
||||
**Error messages:** {{error_message_count}}
|
||||
|
||||
**Next:** We'll generate the complete specification document.</output>
|
||||
**Next:** We'll define the invisible layer — spacing and typography.</output>
|
||||
|
||||
### 3. Present MENU OPTIONS
|
||||
|
||||
Display: "**Select an Option:** [C] Continue to Generate Specification | [M] Return to Activity Menu"
|
||||
Display: "**Select an Option:** [C] Continue to Spacing & Typography | [M] Return to Activity Menu"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,210 @@
|
|||
---
|
||||
name: 'step-08-spacing-typography'
|
||||
description: 'Define spacing objects between sections and typography tokens for all text elements'
|
||||
|
||||
# File References
|
||||
nextStepFile: './step-09-generate-spec.md'
|
||||
workflowFile: '../workflow.md'
|
||||
activityWorkflowFile: '../workflow-specify.md'
|
||||
---
|
||||
|
||||
# Step 8: Spacing & Typography
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Define the invisible layer — spacing objects between sections and typography tokens for all text elements. Every gap gets an ID, every heading gets a token.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
### Universal Rules:
|
||||
|
||||
- 🛑 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}`
|
||||
|
||||
### Role Reinforcement:
|
||||
|
||||
- ✅ You are Freya, a creative and thoughtful UX designer collaborating with the user
|
||||
- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
|
||||
- ✅ We engage in collaborative dialogue, not command-response
|
||||
- ✅ You bring design expertise and systematic thinking, user brings product vision and domain knowledge
|
||||
- ✅ Maintain creative and thoughtful tone throughout
|
||||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Focus on spacing between sections and typography tokens — the invisible layer
|
||||
- 🚫 FORBIDDEN to skip zero-spacing decisions (they are intentional design choices)
|
||||
- 💬 Approach: Walk through sections top-to-bottom, define each gap and heading
|
||||
- 📋 Use token names, never arbitrary pixel values
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Define spacing objects for every section boundary and typography tokens for all headings
|
||||
- 💾 Store spacing_objects and typography_tokens
|
||||
- 📖 Reference the section layout from step 02 for section order
|
||||
- 🚫 FORBIDDEN to use pixel values — always use token names
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: Layout sections (step 02), components (step 03), content (step 04)
|
||||
- Focus: Spacing between sections and typography scale
|
||||
- Limits: Do not redefine layout or components — only add the spacing and typography layer
|
||||
- Dependencies: Section layout must be defined
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. Define Section-to-Section Spacing
|
||||
|
||||
<output>**Now let's define the invisible layer — the spacing between your sections.**
|
||||
|
||||
Every gap between sections is a design decision. Even zero spacing is intentional — it means two sections form one visual unit.
|
||||
|
||||
We'll work top to bottom through your page sections.</output>
|
||||
|
||||
<action>
|
||||
For each pair of adjacent sections from the layout (step 02):
|
||||
|
||||
Present the pair and ask:
|
||||
</action>
|
||||
|
||||
<ask>**Spacing between sections:**
|
||||
|
||||
Working through your page sections top to bottom:
|
||||
|
||||
| Between | Above | Below | Spacing |
|
||||
|---------|-------|-------|---------|
|
||||
| Gap 1 | [Section A] | [Section B] | ? |
|
||||
| Gap 2 | [Section B] | [Section C] | ? |
|
||||
| ... | ... | ... | ? |
|
||||
|
||||
**Available tokens:** `zero`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
|
||||
|
||||
**Guidelines:**
|
||||
- `zero` = sections form one visual unit (e.g., header + nav)
|
||||
- `sm`/`md` = related sections
|
||||
- `lg`/`xl` = standard section boundaries
|
||||
- `2xl`/`3xl` = major visual breaks
|
||||
|
||||
For each gap, what spacing feels right?</ask>
|
||||
|
||||
<action>
|
||||
Store spacing_objects with IDs using the naming convention:
|
||||
|
||||
`{page-slug}-v-space-{size}` for vertical spacing
|
||||
`{page-slug}-v-separator-{size}` for lines/dividers with spacing
|
||||
|
||||
Example:
|
||||
```
|
||||
#### ↕ `hem-v-space-zero` — header and nav form one continuous unit
|
||||
#### ↕ `hem-v-space-xl` — standard gap between hero and content
|
||||
#### ↕ `hem-v-separator-2xl` — gray line, space-2xl above and below
|
||||
#### ↕ `hem-v-space-3xl` — major boundary before footer
|
||||
```
|
||||
|
||||
Also capture grid gaps for any sections with repeated items (card grids, lists):
|
||||
```
|
||||
| Grid gap | h-space-lg / v-space-lg |
|
||||
```
|
||||
</action>
|
||||
|
||||
### 2. Define Typography Tokens
|
||||
|
||||
<output>**Now let's assign typography tokens to your headings.**
|
||||
|
||||
In WDS, the semantic tag (h1, h2, h3) and the visual size are independent:
|
||||
- The **tag** tells screen readers the document structure
|
||||
- The **token** controls how big it looks
|
||||
|
||||
A section heading might be an `<h2>` but visually `heading-xl` on mobile and `heading-2xl` on desktop.</output>
|
||||
|
||||
<ask>**Typography for your page headings:**
|
||||
|
||||
For each heading in your content (from step 04):
|
||||
|
||||
| Heading | Semantic tag | Visual size (mobile / tablet / desktop) |
|
||||
|---------|-------------|----------------------------------------|
|
||||
| [Main page heading] | h1 | ? / ? / ? |
|
||||
| [Section heading 1] | h2 | ? / ? / ? |
|
||||
| [Section heading 2] | h2 | ? / ? / ? |
|
||||
| [Card heading] | h3 | ? / ? / ? |
|
||||
|
||||
**Available heading tokens:** `heading-xxs` (14px), `heading-xs` (16px), `heading-sm` (18px), `heading-md` (20px), `heading-lg` (24px), `heading-xl` (30px), `heading-2xl` (36px), `heading-3xl` (44px), `heading-4xl` (56px)
|
||||
|
||||
**Rule of thumb:** Step up one token size per breakpoint (mobile → tablet → desktop).
|
||||
|
||||
What sizes feel right for each heading?</ask>
|
||||
|
||||
<action>Store typography_tokens for each heading:
|
||||
|
||||
```markdown
|
||||
### [Heading name]
|
||||
|
||||
**OBJECT ID:** `{page-slug}-{section}-heading`
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| Tag | h2 |
|
||||
| Visual size | heading-lg / heading-xl / heading-2xl |
|
||||
| Font weight | 900 |
|
||||
```
|
||||
</action>
|
||||
|
||||
### 3. Review
|
||||
|
||||
<output>**Here's your invisible layer:**
|
||||
|
||||
**Spacing Objects:**
|
||||
{{#each spacing_object}}
|
||||
#### ↕ `{{id}}` — {{description}}
|
||||
{{/each}}
|
||||
|
||||
**Typography Tokens:**
|
||||
{{#each typography_token}}
|
||||
- **{{name}}**: `{{tag}}` at `{{mobile}} / {{tablet}} / {{desktop}}`
|
||||
{{/each}}
|
||||
|
||||
Does this feel right? Any adjustments?</output>
|
||||
|
||||
### 4. Present MENU OPTIONS
|
||||
|
||||
Display: "**Select an Option:** [C] Continue to Generate Specification | [M] Return to Activity Menu"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
- IF C: Load, read entire file, then execute {nextStepFile}
|
||||
- IF M: Return to {workflowFile} or {activityWorkflowFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#4-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
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN the user selects an option from the menu and all spacing objects and typography tokens have been defined will you proceed to the next step or return as directed.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 SYSTEM SUCCESS/FAILURE METRICS
|
||||
|
||||
### ✅ SUCCESS:
|
||||
|
||||
- Every section boundary has a spacing object with an ID
|
||||
- Zero-spacing decisions documented with rationale
|
||||
- Grid gaps defined for sections with repeated items
|
||||
- All headings have semantic tags and visual tokens
|
||||
- Responsive scaling defined (mobile / tablet / desktop)
|
||||
- No pixel values used — only token names
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
- Missing spacing between any section pair
|
||||
- Using pixel values instead of tokens
|
||||
- Skipping zero-spacing documentation
|
||||
- Not defining responsive typography scaling
|
||||
- Generating spacing/typography without user input
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
name: 'step-08-generate-spec'
|
||||
name: 'step-09-generate-spec'
|
||||
description: 'Compile all gathered information into the complete page specification document'
|
||||
|
||||
# File References
|
||||
|
|
@ -7,11 +7,11 @@ workflowFile: '../workflow.md'
|
|||
activityWorkflowFile: '../workflow-specify.md'
|
||||
---
|
||||
|
||||
# Step 8: Generate Specification Document
|
||||
# Step 9: Generate Specification Document
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Compile all gathered information from steps 1-7 into the complete page specification document using the specification template.
|
||||
Compile all gathered information from steps 1-8 into the complete page specification document using the specification template.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
|
|
@ -42,12 +42,12 @@ Compile all gathered information from steps 1-7 into the complete page specifica
|
|||
|
||||
- 🎯 Generate complete specification using the page-specification template
|
||||
- 💾 Save specification to the correct output location
|
||||
- 📖 Reference all data from steps 1-7
|
||||
- 📖 Reference all data from steps 1-8
|
||||
- 🚫 FORBIDDEN to generate with missing data sections
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: All data from steps 1-7
|
||||
- Available context: All data from steps 1-8
|
||||
- Focus: Compilation and document generation
|
||||
- Limits: Use the template — do not invent new formats
|
||||
- Dependencies: All previous steps must be complete
|
||||
|
|
@ -71,6 +71,7 @@ Fill in all sections with data collected:
|
|||
- interaction_behaviors (from step 05)
|
||||
- page_states and component_states (from step 06)
|
||||
- validation_rules and error_messages (from step 07)
|
||||
- spacing_objects and typography_tokens (from step 08)
|
||||
</action>
|
||||
|
||||
<action>Save complete specification to:
|
||||
|
|
@ -91,6 +92,8 @@ Fill in all sections with data collected:
|
|||
- {{state_count}} total states (page + component)
|
||||
- {{validation_count}} validation rules
|
||||
- {{error_count}} error messages
|
||||
- {{spacing_count}} spacing objects
|
||||
- {{typography_count}} typography tokens
|
||||
|
||||
**Your specification is development-ready!**</output>
|
||||
|
||||
|
|
@ -119,7 +122,7 @@ The specification must be generated, saved, AND the design log updated before th
|
|||
### ✅ SUCCESS:
|
||||
|
||||
- Specification generated using the template
|
||||
- All data sections from steps 1-7 included
|
||||
- All data sections from steps 1-8 included
|
||||
- Document saved to correct output location
|
||||
- Summary presented to user with metrics
|
||||
- Specification is development-ready
|
||||
|
|
@ -59,7 +59,7 @@ Create the physical folder structure and overview documents for the scenario bas
|
|||
|
||||
<action>
|
||||
**Determine scenario number:**
|
||||
- Count existing scenario folders in `4-scenarios/`
|
||||
- Count existing scenario folders in `C-UX-Scenarios/`
|
||||
- If none exist, scenario_num = 1
|
||||
- Otherwise, scenario_num = (highest number + 1)
|
||||
- Store scenario_num
|
||||
|
|
@ -68,11 +68,11 @@ Create the physical folder structure and overview documents for the scenario bas
|
|||
<action>
|
||||
**Create physical folder structure:**
|
||||
|
||||
1. Create `4-scenarios/{{scenario_num}}-{{scenario-slug}}/` directory
|
||||
1. Create `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/` directory
|
||||
|
||||
**Generate 00-scenario-overview.md:**
|
||||
|
||||
File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/00-scenario-overview.md`
|
||||
File: `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/00-scenario-overview.md`
|
||||
|
||||
Content:
|
||||
```markdown
|
||||
|
|
@ -145,7 +145,7 @@ When users arrive, they are feeling:
|
|||
|
||||
**Generate scenario-tracking.yaml:**
|
||||
|
||||
File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/scenario-tracking.yaml`
|
||||
File: `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/scenario-tracking.yaml`
|
||||
|
||||
Content:
|
||||
```yaml
|
||||
|
|
@ -176,7 +176,7 @@ total_pages: {{pages_list.length}}
|
|||
**Scenario {{scenario_num}}:** {{scenario_name}}
|
||||
|
||||
**Folder:**
|
||||
- `4-scenarios/{{scenario_num}}-{{scenario-slug}}/`
|
||||
- `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/`
|
||||
|
||||
**Documents:**
|
||||
- `00-scenario-overview.md` (detailed scenario metadata)
|
||||
|
|
|
|||
|
|
@ -60,13 +60,13 @@ Create the physical page folder structure, generate the initial specification do
|
|||
**Determine page folder path:**
|
||||
|
||||
**For single page projects (no scenarios):**
|
||||
- Page path: `4-scenarios/{{page_slug}}/`
|
||||
- Page path: `C-UX-Scenarios/{{page_slug}}/`
|
||||
|
||||
**For scenario-based projects:**
|
||||
- Read scenario_number from context
|
||||
- Read current_page_index from `scenario-tracking.yaml`
|
||||
- Calculate page_number: `{{scenario_number}}.{{current_page_index + 1}}`
|
||||
- Page path: `4-scenarios/{{scenario_number}}-{{scenario-slug}}/{{page_number}}-{{page_slug}}/`
|
||||
- Page path: `C-UX-Scenarios/{{scenario_number}}-{{scenario-slug}}/{{page_number}}-{{page_slug}}/`
|
||||
|
||||
Store page_path and page_number
|
||||
</action>
|
||||
|
|
@ -178,26 +178,44 @@ If this is a scenario-based project:
|
|||
- Add sketches to the sketches folder
|
||||
- Continue with page design</output>
|
||||
|
||||
### 2. Present MENU OPTIONS
|
||||
### 2. Two-Option Transition
|
||||
|
||||
Display: "**Select an Option:** [A] Add Another Page | [S] Add Another Scenario | [M] Return to Activity Menu"
|
||||
After page structure is created, present exactly two options:
|
||||
|
||||
#### Menu Handling Logic:
|
||||
**If more pages exist in the scenario (from Q8 shortest path):**
|
||||
|
||||
- IF A: Load, read entire file, then execute ./step-08-page-context.md
|
||||
- IF S: Load, read entire file, then execute ./step-01-core-feature.md
|
||||
- IF M: Return to {workflowFile} or {activityWorkflowFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#2-present-menu-options)
|
||||
<output>
|
||||
**Page structure for "[page name]" is ready!**
|
||||
|
||||
1. **Specify this page** — add full detail with [P] Specify
|
||||
2. **Design the next scenario step** — [next page name]
|
||||
</output>
|
||||
|
||||
**If this is the last page in the scenario:**
|
||||
|
||||
<output>
|
||||
**Page structure for "[page name]" is ready!**
|
||||
|
||||
1. **Specify this page** — add full detail with [P] Specify
|
||||
2. **All pages in this scenario are created!** — return to dashboard
|
||||
</output>
|
||||
|
||||
#### Transition Handling:
|
||||
|
||||
- **Option 1 (specify):** Load and execute `../steps-p/step-01-page-basics.md`
|
||||
- **Option 2 (next page):** Load and execute `./step-08-page-context.md` for the next page
|
||||
- **Option 2 (all done):** Return to {workflowFile} adaptive dashboard
|
||||
- **Dream mode:** Auto-proceed to option 1. Skip menu display.
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
|
||||
- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
|
||||
- User can chat or ask questions — always respond and then redisplay menu options
|
||||
- **Suggest mode:** 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
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN the user selects an option from the menu and the page structure has been created will you proceed as directed. This is the last step in the Suggest activity chain.
|
||||
ONLY WHEN the user selects an option and the page structure has been created will you proceed as directed. This is the last step in the Suggest page creation chain.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ Store visual artifact in the appropriate location:
|
|||
|
||||
- **UI mockups (page/section):** `{output_folder}/D-Design-System/01-Visual-Design/design-concepts/`
|
||||
- **Image assets (photos/illustrations):** `{output_folder}/D-Design-System/01-Visual-Design/design-concepts/` (move to `02-Assets/images/` when finalized)
|
||||
- **Legacy path:** `{output_folder}/D-UX-Design/[scenario]/visuals/` (if project uses older folder structure)
|
||||
- **Legacy path:** `{output_folder}/C-UX-Scenarios/[scenario]/visuals/` (if project uses older folder structure)
|
||||
|
||||
**Update the agent dialog** with the accepted result and save path.
|
||||
|
||||
|
|
|
|||
|
|
@ -20,9 +20,26 @@ description: 'Define, update, and review design system components used across pa
|
|||
3. Load dialog context
|
||||
|
||||
|
||||
## Extraction Rules
|
||||
|
||||
Not everything extracts at the same time:
|
||||
|
||||
### Objects: Extract on Second Use
|
||||
The first time a button, card, or widget appears, it stays inline in the page spec — it's a one-off. The **second** time the same pattern appears (same states, same behavior), it's a real pattern. Extract it to the design system.
|
||||
|
||||
**First use = one-off. Second use = pattern. Extract.**
|
||||
|
||||
### Spacing: Extract Immediately on First Use
|
||||
Spacing extracts on **first use** — no waiting for a second occurrence. Spacing is relational: when you decide that a heading needs `space-xl` above a card grid, that's a universal design principle, not a page-specific detail.
|
||||
|
||||
### Component Extraction Check
|
||||
Before designing the 2nd+ page, scan completed specs for shared elements. If found, suggest extraction. Don't block the flow — the user can defer.
|
||||
|
||||
---
|
||||
|
||||
## Entry
|
||||
|
||||
Load design system from `{output_folder}/D-UX-Design/design-system/` (if exists).
|
||||
Load design system from `{output_folder}/D-Design-System/` (if exists).
|
||||
|
||||
## Steps
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ Execute steps in `./steps-p/`:
|
|||
| 05 | step-05-interactions.md | User interactions and behaviors |
|
||||
| 06 | step-06-states.md | Loading, error, empty states |
|
||||
| 07 | step-07-validation.md | Form validation and constraints |
|
||||
| 08 | step-08-generate-spec.md | Generate final specification document |
|
||||
| 08 | step-08-spacing-typography.md | Spacing objects and typography tokens |
|
||||
| 09 | step-09-generate-spec.md | Generate final specification document |
|
||||
|
||||
**Reference data:**
|
||||
- `./data/object-types/` — component types and templates
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ description: 'Systematically audit page specifications for completeness, consist
|
|||
### Configuration Loading
|
||||
|
||||
1. Load project config
|
||||
2. Locate page specifications at `{output_folder}/D-UX-Design/`
|
||||
2. Locate page specifications at `{output_folder}/C-UX-Scenarios/`
|
||||
3. Begin: Load and execute `./steps-v/step-01-page-metadata.md`
|
||||
|
||||
**Reference data:**
|
||||
|
|
@ -53,7 +53,7 @@ Execute each step in order. Each step produces a section of the validation repor
|
|||
|
||||
## Final Output
|
||||
|
||||
Save validation report to `{output_folder}/D-UX-Design/validation-report.md`
|
||||
Save validation report to `{output_folder}/_progress/validation-report.md`
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ description: 'Create visual representations of page designs using external tools
|
|||
|
||||
## Entry
|
||||
|
||||
Load page specification from `{output_folder}/D-UX-Design/`.
|
||||
Load page specification from `{output_folder}/C-UX-Scenarios/`.
|
||||
|
||||
## Steps
|
||||
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ The primary navigation is the adaptive dashboard above — Freya suggests the ne
|
|||
[D] Dream Up Design — I'll create it all, you review
|
||||
|
||||
── Specify ─────────────────────────────────────
|
||||
[P] Write Specifications — Content, interaction and functionality specs
|
||||
[P] Write Specifications — Content, interactions, spacing, typography specs
|
||||
[V] Validate Specs — Audit spec completeness and quality
|
||||
|
||||
── Produce ─────────────────────────────────────
|
||||
|
|
|
|||
Loading…
Reference in New Issue