BMAD-METHOD/src/modules/wds/workflows/4-ux-design/modular-architecture/00-MODULAR-ARCHITECTURE-GUI...

1.5 KiB

Modular Component Architecture

Navigation hub for the three-tier specification system


Foundation (00-)

Agent-Designer Collaboration

How AI agents optimize designer craft without replacing designer thinking


Core Concepts (01-)

Three-Tier Architecture

Overview of Pages, Components, and Features separation

Content Placement Rules

Decision tree for where to document content

Complexity Detection

How to identify simple vs complex components


Workflows (02-)

Page Specification Workflow

Step-by-step page decomposition from sketch to specs

Complexity Router Workflow

Guided decomposition for complex components

Storyboard Integration

Using visual storyboards for complex components


Examples

Simple Component Example

Button - single file documentation

Complex Component Example

Calendar - three-tier decomposition

Search Bar Example

Search with page-specific content


Quick References (03-)

Decision Tree

One-page flowchart for file placement

Benefits Summary

Why this architecture works