165 lines
5.1 KiB
Markdown
165 lines
5.1 KiB
Markdown
# 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](../../examples/WDS-Presentation/docs/4-scenarios/1.1-wds-presentation/1.1-wds-presentation.md)
|
|
|
|
---
|
|
|
|
## 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](../module-08-initialize-scenario/tutorial-08.md)
|
|
|
|
**Additional Tutorial:** [Module 12: Conceptual Specs](../module-12-conceptual-specs/tutorial-12.md)
|
|
|
|
**Workflow Reference:** [UX Design Workflow](../src/workflows/4-ux-design/)
|
|
|
|
**Quality Workflow:** [Page Specification Quality](../src/workflows/4-ux-design/page-specification-quality/)
|
|
|
|
---
|
|
|
|
## Getting Started with WDS
|
|
|
|
New to WDS? Install the complete AI agent framework to unlock all capabilities:
|
|
|
|
👉 **[Install WDS & Get Started](../../getting-started/getting-started-overview.md)**
|
|
|
|
---
|
|
|
|
**Previous Deliverable:** [Platform PRD & Architecture](platform-prd.md)
|
|
**Next Deliverable:** [Component Library & Design Tokens](design-system.md)
|