ldy26098
/
BMAD-METHOD
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git
1
0
Fork 0
Code Packages Projects Releases Wiki Activity
BMAD-METHOD/src/modules/wds/workflows/4-ux-design/steps/step-03-design-page.md

4.2 KiB
Raw Blame History

Step 3: Design Page (4A-4E Process)

Progress: Step 3 of 5 - Page Design Loop

YOUR TASK

Guide the user through designing one page using the 4A-4E process.

GOAL

Complete one page specification ready for development.

CURRENT PAGE

Load scenario-info.yaml to determine current page Display: "Designing page {nn}.{current}: {page-name}"

THE 4A-4E DESIGN PROCESS

Execute substeps in sequence for this page:

Substep 4A: Exploration (Optional)

Do you need help exploring the concept before sketching?

  1. Yes - Think through the concept together
  2. Skip - I have sketches or know what I want

Choice [1/2]:

Load and execute `substeps/4a-exploration.md` When 4A complete, return here and continue to 4B Continue to Substep 4B

Substep 4B: Sketch Analysis

Do you have sketches to analyze?

  1. Yes - I have sketches ready
  2. Skip - Go directly to specification

Choice [1/2]:

Load and execute `substeps/4b-sketch-analysis.md` When 4B complete, return here and continue to 4C Continue to Substep 4C

Substep 4C: Specification (Required)

Time to create the complete specification. 📝

We'll go through this systematically in focused steps:

  1. Page basics
  2. Layout sections
  3. Components & Object IDs
  4. Content & languages
  5. Interactions
  6. States
  7. Validation & errors
  8. Generate final document

This ensures nothing is missed and every detail is captured.

Execute substeps in sequence:

  1. Load and execute substeps/4c-01-page-basics.md
  2. Load and execute substeps/4c-02-layout-sections.md
  3. Load and execute substeps/4c-03-components-objects.md
  4. Load and execute substeps/4c-04-content-languages.md
  5. Load and execute substeps/4c-05-interactions.md
  6. Load and execute substeps/4c-06-states.md
  7. Load and execute substeps/4c-07-validation.md
  8. Load and execute substeps/4c-08-generate-spec.md

When all 4C substeps complete, return here and continue to 4D

Substep 4D: HTML Prototype

Create HTML prototype?

  1. Yes - Make it interactive
  2. Skip - Move to PRD update

Choice [1/2]:

Load and execute `substeps/4d-prototype.md` When 4D complete, return here and continue to 4E Continue to Substep 4E

Substep 4E: PRD Update (Required)

Let's capture the requirements this page revealed. 📋

Load and execute substeps/4e-prd-update.md When 4E complete, return here

PAGE COMPLETE

Page "{page-name}" is complete! 🎉

Created:

  • ✅ Specification: C-Scenarios/{scenario}/{page}/{page}.md {{#if prototype_created}}
  • ✅ Prototype: C-Scenarios/{scenario}/{page}/Prototype/ {{/if}}
  • ✅ PRD Requirements: Added to D-PRD/PRD.md

Your page is development-ready! ✨

NEXT PAGE DECISION

Increment current_page_index in scenario-info.yaml Check if more pages remain in scenario

**Next page: {next_page_name}**

[C] Continue to next page [P] Pause - Save and continue later

Choice [C/P]:

Loop back to top of Step 3 with new page Progress saved! Resume anytime. 👍 Exit workflow Proceed to Step 4 (Complete Scenario) Load `steps/step-04-complete-scenario.md`

STATE MANAGEMENT

After each page:

  • Update scenario-info.yaml with current_page_index
  • Mark page as complete in tracking
  • Save progress

NEXT STEP

  • If more pages: Loop back to top of Step 3
  • If scenario complete: Load steps/step-04-complete-scenario.md