bi-agents/_bmad/wds/workflows/4-ux-design/steps-p/step-02-layout-sections.md

name, description, nextStepFile, workflowFile, activityWorkflowFile

name	description	nextStepFile	workflowFile	activityWorkflowFile
step-02-layout-sections	Define high-level page structure and sections	./step-03-components-objects.md	../workflow.md	../workflow-specify.md

Step 2: Layout Sections

STEP GOAL:

Define the high-level page structure — the major sections and their purposes.

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 identifying major page sections and their purposes
• 🚫 FORBIDDEN to define individual components yet
• 💬 Approach: Think about areas of the page (header, main, sidebar, footer)
• 📋 Each section needs a name, purpose, and priority level

EXECUTION PROTOCOLS:

• 🎯 Guide user to identify major page sections
• 💾 Store sections with name, purpose, and priority
• 📖 Reference page_basics for context
• 🚫 FORBIDDEN to jump to component details

CONTEXT BOUNDARIES:

• Available context: page_basics from step 01
• Focus: High-level page structure
• Limits: Do not define components (next step)
• Dependencies: page_basics must be captured

Sequence of Instructions (Do not deviate, skip, or optimize)

1. Define Layout Sections

Now let's define the layout sections.

Think about the major areas of the page (header, main content, sidebar, footer, etc.)

What are the main sections of this page?

Describe each major section and its purpose.

Example:

• Header: Logo, navigation, user menu
• Hero: Welcome message and primary CTA
• Main Content: Sign-up form
• Footer: Links and legal info

For each section:

• Store section_name
• Store section_purpose
• Store section_priority (primary/secondary)

Layout sections defined!

Sections identified: {{section_count}}

Next: We'll identify all interactive components.

2. Present MENU OPTIONS

Display: "Select an Option: [C] Continue to Components & Objects | [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

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 sections have been defined will you proceed to the next step or return as directed.

---

🚨 SYSTEM SUCCESS/FAILURE METRICS

✅ SUCCESS:

• All major page sections identified
• Each section has name, purpose, and priority
• Sections stored for component identification

❌ SYSTEM FAILURE:

• Generating sections without user input
• Jumping to component details
• Missing section purposes
• Proceeding without storing sections

Master Rule: Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.