Output Formats
Purpose: Use this file when Vision must produce a canonical deliverable with stable headings and delegation-ready sections.
Contents:
- Design Direction Document
- Style Guide
- Design Improvement Report
- Trend Application Report
1. Design Direction Document
## Vision Design Direction: [Project Name]
### Executive Summary
[2-3 sentences]
### Design Principles
1. **[Principle]**: [Why it matters]
2. **[Principle]**: [Why it matters]
3. **[Principle]**: [Why it matters]
### Direction Options
#### Option A: [Name] (Recommended)
- **Concept**: [One line]
- **Mood Keywords**: [keywords]
- **Pros**: [benefits]
- **Cons**: [trade-offs]
- **Best For**: [use case]
#### Option B: [Name]
[same structure]
#### Option C: [Name]
[same structure]
### Recommendation
[Selected option and justification]
### Composition Strategy
| Aspect | Decision | Rationale |
|--------|----------|-----------|
| First Viewport | [single composition description] | [why this hero approach] |
| Hero Visual | [image strategy: real photo / custom illustration / etc.] | [brand alignment notes] |
| Layout Approach | [card usage policy, section strategy] | [restraint level and rationale] |
| Page Flow | [Hero → Support → Detail → CTA or custom] | [narrative reasoning] |
| Motion Budget | [which 2-3 motion slots are filled] | [intentionality notes] |
### Token Foundation
| Area | Decision | Notes |
|------|----------|-------|
| Color | [palette approach] | [reason] |
| Typography | [type system — must not default to Inter/Roboto/Arial for display] | [reason] |
| Spacing | [grid or scale] | [reason] |
| Motion | [style] | [reason] |
### Component Priorities
| Priority | Component | Complexity | Agent |
|----------|-----------|------------|-------|
| P1 | [component] | [S/M/L] | [agent] |
### Delegation Plan
| Step | Agent | Task | Input | Output |
|------|-------|------|-------|--------|
| 1 | Muse | [task] | this doc | [artifact] |2. Style Guide
## Vision Style Guide: [Project Name]
### Brand Summary
[personality, tone, constraints]
### Tokens
| Token Area | Rule |
|------------|------|
| Color | [semantic strategy] |
| Typography | [scale, weight, line-height] |
| Spacing | [grid or spacing scale] |
| Radius/Shadow | [effect rules] |
### Responsive Strategy
| Breakpoint | Layout Behavior | Notes |
|------------|-----------------|-------|
| Mobile | [behavior] | [notes] |
| Tablet | [behavior] | [notes] |
| Desktop | [behavior] | [notes] |
### Component Specifications
| Component | States | Variants | Notes |
|-----------|--------|----------|-------|
| [component] | default, hover, focus, active, disabled | [variants] | [constraints] |3. Design Improvement Report
## Vision Design Review: [Target Name]
### Executive Summary
- **Overall Score**: [X/10]
- **Critical Issues**: [N]
- **Quick Wins**: [N]
- **Primary Focus Area**: [area]
### Heuristic Evaluation
| Heuristic | Score (1-5) | Notes |
|-----------|-------------|-------|
| Visibility of system status | [X] | [finding] |
| Match with real world | [X] | [finding] |
| User control & freedom | [X] | [finding] |
| Consistency & standards | [X] | [finding] |
| Error prevention | [X] | [finding] |
| Recognition over recall | [X] | [finding] |
| Flexibility & efficiency | [X] | [finding] |
| Aesthetic & minimal design | [X] | [finding] |
| Help users with errors | [X] | [finding] |
| Help & documentation | [X] | [finding] |
### Detailed Findings
| # | Issue | Severity | Category | Location | Recommendation | Agent |
|---|-------|----------|----------|----------|----------------|-------|
| 1 | [Issue] | Critical | [Cat] | [Page/Component] | [Fix] | [Agent] |
### Action Plan
| Priority | Task | Agent | Effort | Impact |
|----------|------|-------|--------|--------|
| P1 | [task] | [agent] | [S/M/L] | [1-5] |4. Trend Application Report
## Vision Trend Report: [Project Name]
### Selected Trends
| Trend | Risk Level | Brand Fit | Application Scope |
|-------|------------|-----------|-------------------|
| [Trend] | [Low/Med/High] | [1-5] | [pilot area] |
### Phased Application Plan
| Phase | Trend | Target Area | Timeline | Success Metric |
|-------|-------|-------------|----------|----------------|
| 1 | [Trend] | [Area] | [Pilot] | [Metric] |
### Before/After Concepts
[component-level comparison]
### Evaluation Checklist
- [ ] Brand Fit
- [ ] User Fit
- [ ] Accessibility: WCAG 2.2 AA maintained
- [ ] Performance impact acceptable
- [ ] Longevity acceptable over 2-3 years