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/docs/deliverables/page-specifications.md

5.1 KiB
Raw Blame History

Deliverable: Page Specifications & Prototypes

Turn sketches into complete specs - capture WHAT it looks like AND WHY you designed it that way

About WDS & Page Specifications

WDS (Whiteport Design Studio) is an AI agent framework module within the BMAD Method that transforms how designers work. Instead of creating documentation that gets lost in translation, your design work becomes powerful prompts that guide AI agents and development teams with precision and intent.

Page Specifications are where your design thinking becomes implementation-ready. Instead of handing off a Figma file with vague annotations, you create detailed specs that capture content, structure, strategy, and rationale—specifications that developers AND AI agents can execute with precision.

What Is This Deliverable?

Page Specifications are detailed documentation for each page/screen in your product:

  • Complete content with language tags
  • Component descriptions with Object IDs
  • Navigation and user flows
  • Strategic rationale for design decisions
  • Interactive prototypes (optional)

Created by: Freya the UX Designer
When: Phase 5 - After Platform PRD (or in parallel)
Format: Markdown specifications + sketches/prototypes

Why This Matters

Without Detailed Specifications:

  • ❌ Developers guess at your intent
  • ❌ Content gets "lorem ipsum" treatment
  • ❌ Design decisions lost in handoff
  • ❌ Endless "what did you mean?" meetings

With Page Specifications:

  • ✅ Preserves design intent from concept to code
  • ✅ Developers understand the WHY, not just the WHAT
  • ✅ Content is strategic, not placeholder
  • ✅ Specifications become AI-ready super-prompts
  • ✅ Reduces implementation errors and rework

What's Included

For Each Page:

  1. Navigation Structure

    • Page name and placement
    • Entry and exit points
    • Embedded sketch/wireframe

  2. Page Overview

    • User situation and context
    • Page purpose and goals
    • Success criteria

  3. Page Sections

    • Organized by section objects
    • Component hierarchy with Object IDs
    • Content with language tags (EN, etc.)
    • Links and interactions

  4. Object Registry

    • Complete list of all Object IDs
    • Component types and parent sections
    • Status tracking

  5. Strategic Links

    • References to Content Strategy
    • Connections to Trigger Map
    • Links to personas and driving forces

The Dialog with Your Design Partner: Freya the UX Designer

The Process (iterative, per page):

Freya the UX Designer helps you specify each page with precision:

Freya the UX Designer: "I see you've uploaded a sketch. Let me analyze it... 
                         This looks like a dashboard homepage. Is that right?"

You: "Yes! It's the first thing users see after login."

Freya the UX Designer: "Perfect. What's the user's situation when they arrive here?"

You: "They just logged in - they want to see their project status at a glance."

Freya the UX Designer: "Got it. I can see three sections in your sketch: 
                         header navigation, project cards, and quick actions. 
                         Let me identify the components..."

You: "The project cards need to show status, deadline, and team members."

Freya the UX Designer: "Excellent detail! Let me document that with Object IDs..."

As you work together, Freya the UX Designer creates:

  • ✅ Complete navigation structure
  • ✅ Page overview with context
  • ✅ Section breakdown with Object IDs
  • ✅ Content with language tags
  • ✅ Component specifications
  • ✅ Object Registry

Then you review together:

Freya the UX Designer: "Here's your page specification. Does this capture your vision?"

You: "Add a filter dropdown to the quick actions section."

Freya the UX Designer: "Added COMP_FILTER_001 to quick actions. ✅ Spec is complete."

Result: Page specification saved to /docs/4-scenarios/[page-name]/

Example

See the WDS Presentation Project - Page Specification

Agent Activation

To start creating Page Specifications:

@freya I have a sketch for [Page Name] - let's create the specification.

Or simply upload a sketch image to any agent, and they'll recognize it and activate Freya automatically.

How to Create This

Hands-on Tutorial: Module 08: Initialize Scenario

Additional Tutorial: Module 12: Conceptual Specs

Workflow Reference: UX Design Workflow

Quality Workflow: Page Specification Quality

Getting Started with WDS

New to WDS? Install the complete AI agent framework to unlock all capabilities:

👉 Install WDS & Get Started

Previous Deliverable: Platform PRD & Architecture
Next Deliverable: Component Library & Design Tokens