169 lines
4.9 KiB
Markdown
169 lines
4.9 KiB
Markdown
# Deliverable: Component Library & Design Tokens
|
|
|
|
**Extract reusable patterns - scale your design efficiently across the entire product**
|
|
|
|
---
|
|
|
|
## About WDS & the Design System
|
|
|
|
**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.
|
|
|
|
**The Design System** is where consistency becomes effortless. After specifying your initial pages, Freya the UX Designer helps you identify reusable patterns and extract them into a structured component library. This becomes the foundation for rapid, consistent design and development.
|
|
|
|
---
|
|
|
|
## What Is This Deliverable?
|
|
|
|
The Design System documents all reusable components, patterns, and design tokens:
|
|
- Component specifications (buttons, cards, forms, etc.)
|
|
- Design tokens (colors, typography, spacing)
|
|
- Interaction patterns
|
|
- Accessibility guidelines
|
|
- Component usage rules
|
|
|
|
**Created by:** Freya the UX Designer (extraction from page specs)
|
|
**When:** Phase 6 - After initial page specifications are complete
|
|
**Format:** Structured component library documentation
|
|
|
|
---
|
|
|
|
## Why This Matters
|
|
|
|
**Without a Design System:**
|
|
- ❌ Every page/screen designed from scratch
|
|
- ❌ Inconsistent UI across product
|
|
- ❌ Developers reinvent components repeatedly
|
|
- ❌ No single source of truth
|
|
- ❌ Design debt accumulates fast
|
|
|
|
**With a Design System:**
|
|
- ✅ Rapid design and development
|
|
- ✅ Consistent user experience
|
|
- ✅ Easier maintenance and updates
|
|
- ✅ Onboarding new designers/developers faster
|
|
- ✅ Scalable design operations
|
|
|
|
---
|
|
|
|
## What's Included
|
|
|
|
### 1. Design Tokens
|
|
- **Colors:** Brand palette, semantic colors, state colors
|
|
- **Typography:** Font families, sizes, weights, line heights
|
|
- **Spacing:** Consistent spacing scale
|
|
- **Shadows:** Elevation system
|
|
- **Border Radius:** Rounding scale
|
|
- **Breakpoints:** Responsive design breakpoints
|
|
|
|
### 2. Component Library
|
|
For each component:
|
|
- Component name and Object ID pattern
|
|
- Visual examples and variants
|
|
- States (default, hover, active, disabled, error, loading)
|
|
- Content structure
|
|
- Usage guidelines
|
|
- Accessibility requirements
|
|
- Code examples (if applicable)
|
|
|
|
### 3. Patterns
|
|
- Navigation patterns
|
|
- Form patterns
|
|
- Layout patterns
|
|
- Interaction patterns
|
|
- Empty states
|
|
- Error states
|
|
- Loading states
|
|
|
|
### 4. Guidelines
|
|
- When to use each component
|
|
- Accessibility standards (WCAG compliance)
|
|
- Mobile vs desktop considerations
|
|
- Brand guidelines integration
|
|
|
|
---
|
|
|
|
## The Dialog with Your Design Partner: Freya the UX Designer
|
|
|
|
**The Process (2-3 hours):**
|
|
|
|
Freya the UX Designer helps you extract patterns from your page specs:
|
|
|
|
```
|
|
Freya the UX Designer: "I've analyzed your page specifications. I found 8 button
|
|
variants across 5 pages. Let's standardize them."
|
|
|
|
You: "Yes! Primary, secondary, and text buttons are intentional.
|
|
The others are inconsistent."
|
|
|
|
Freya the UX Designer: "Perfect! I'll document those 3 as your button system.
|
|
What about colors?"
|
|
|
|
You: "Brand blue #2563EB for primary actions, gray for secondary,
|
|
red for destructive actions."
|
|
|
|
Freya the UX Designer: "Got it. I see you're using 3 different card components.
|
|
Are those variants of one pattern or separate components?"
|
|
|
|
You: "They're all the same - just different content inside."
|
|
|
|
Freya the UX Designer: "Excellent - I'll document one card component with content slots..."
|
|
```
|
|
|
|
As you work together, Freya the UX Designer creates:
|
|
- ✅ Design token system
|
|
- ✅ Component specifications
|
|
- ✅ Usage guidelines
|
|
- ✅ Accessibility standards
|
|
- ✅ Pattern library
|
|
|
|
Then you review together:
|
|
|
|
```
|
|
Freya the UX Designer: "Here's your Design System. Does this cover your needs?"
|
|
|
|
You: "Add a 'ghost button' variant for low-emphasis actions."
|
|
|
|
Freya the UX Designer: "Added COMP_BUTTON_GHOST to button variants. ✅ System is complete."
|
|
```
|
|
|
|
**Result:** Design System saved to `/docs/5-design-system/`
|
|
|
|
---
|
|
|
|
## Example
|
|
|
|
*(Example coming soon)*
|
|
|
|
---
|
|
|
|
## Agent Activation
|
|
|
|
To start creating your Design System:
|
|
|
|
```
|
|
@freya Let's extract a Design System from my page specifications.
|
|
```
|
|
|
|
Freya the UX Designer will analyze your existing specs and guide the extraction process.
|
|
|
|
---
|
|
|
|
## How to Create This
|
|
|
|
**Hands-on Tutorial:** [Module 09: Design System](../module-09-design-system/tutorial-09.md)
|
|
|
|
**Workflow Reference:** [Design System Workflow](../src/workflows/5-design-system/)
|
|
|
|
---
|
|
|
|
## 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:** [Page Specifications & Prototypes](page-specifications.md)
|
|
**Next Deliverable:** [Design Delivery PRD](design-delivery-prd.md)
|