Quick Start

YAML
# Tool Product Definition Canvas Template
tool_name: "Email Template Builder"
user_story: "As a marketing manager, I want to create brand-compliant email templates in under 5 minutes so I can launch campaigns faster."
input_spec:
  - brand_guidelines: "JSON with colors, fonts, spacing"
  - content_blocks: "Array of text/image components"
  - template_type: "newsletter|promotional|transactional"
output_spec:
  - html_template: "Production-ready email HTML"
  - preview_images: "Desktop/mobile renderings"
  - brand_compliance_score: "0-100 rating"
ai_model: "GPT-4 for content optimization, Claude for template structure"
ui_requirements:
  - drag_drop: "Block-based editor"
  - real_time_preview: "Side-by-side view"
  - brand_guardrails: "Auto-enforce token usage"
mvp_scope:
  - 3_template_types: "Basic layouts only"
  - 5_content_blocks: "Text, image, button, spacer, divider"
  - brand_validation: "Color/font checking only"

Workflow

Progress:

• Write user story (As a [role], I want [goal] so [benefit])
• Define input specification (data types, formats, constraints)
• Define output specification (deliverables, formats, quality metrics)
• Select AI model (task-specific, cost-optimized)
• Map UI requirements (interaction patterns, layouts)
• Scope MVP (3-5 core features maximum)

Design Token Generator

• Input: Brand guidelines PDF/Figma file
• Output: CSS variables, JSON tokens, component props
• MVP: Colors, typography, spacing only

Accessibility Checker

• Input: Design file URL or component code
• Output: WCAG compliance report with fixes
• MVP: Color contrast and text sizing only

Color Palette Generator

• Input: Primary brand color, usage context
• Output: 50-shade palette with semantic naming
• MVP: Single primary color expansion

Spacing Calculator

• Input: Base unit (4px, 8px), scale type
• Output: Consistent spacing system
• MVP: 8px base with 8-step scale

Typography Scale Tool

• Input: Base font size, brand personality
• Output: Harmonious type scale with CSS
• MVP: 6-size scale with single font family

Social Post Formatter

• Input: Content text, platform, brand voice
• Output: Optimized posts with hashtags
• MVP: LinkedIn + Twitter formatting only

SEO Brief Generator

• Input: Target keyword, competitor URLs
• Output: Content brief with optimization tips
• MVP: Keyword analysis and outline only

Landing Page Wireframe AI

• Input: Campaign goal, target audience
• Output: Conversion-optimized wireframe
• MVP: 3 proven templates (lead gen, product, event)

Design Handoff Checklist

• Input: Design file link, development timeline
• Output: QA checklist with asset exports
• MVP: Component inventory and specs only

Brand Audit Scanner

• Input: Website URL or marketing materials
• Output: Brand consistency report
• MVP: Logo usage and color compliance only

ROI Calculator

• Input: Tool usage metrics, time savings
• Output: Efficiency gains and cost justification
• MVP: Simple time-to-value calculation

Examples

Example 1: Email Template Builder MVP Scope Input: "Build email template tool for 50-person marketing team" Output:

YAML
mvp_features:
  - template_types: ["newsletter", "promotional", "announcement"]
  - content_blocks: ["header", "text", "image", "cta_button", "footer"]
  - brand_enforcement: ["color_validation", "font_checking"]
  - export_formats: ["html", "png_preview"]
excluded_v1:
  - advanced_animations
  - a_b_testing
  - dynamic_personalization
  - integration_apis
build_time: "2-3 sprints"
success_metrics: ["template_creation_time < 5min", "brand_compliance > 95%"]

Example 2: Design Token Generator Input: Brand guidelines with 3 primary colors, 2 fonts Output:

CSS
:root {
  --color-primary-50: #f0f9ff;
  --color-primary-500: #0ea5e9;
  --color-primary-900: #0c4a6e;
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
}

Best Practices

Tool Scoping:

• Start with 1 user persona per tool
• Limit MVP to 3-5 core features
• Design for 80% use cases, ignore edge cases initially
• Plan 2-week build cycles maximum

Framework Application:

• Always start with user story validation
• Define success metrics upfront
• Choose AI models based on task complexity and cost
• Design UI for non-designers (simple, guided workflows)

Team Efficiency:

• Build tools your team will actually use daily
• Integrate with existing design/marketing workflows
• Create self-serve capabilities to reduce bottlenecks
• Measure time savings and adoption rates

Technical Constraints:

• Use no-code/low-code platforms when possible
• Integrate with existing martech stack (HubSpot, Figma, etc.)
• Plan for 10x user growth in tool usage
• Design for mobile-first when applicable

Common Pitfalls

Over-engineering:

• Don't build features "just in case"
• Avoid complex AI when simple rules work
• Don't create tools that require training to use

Scope Creep:

• Resist adding "quick features" during build
• Don't try to solve multiple personas in v1
• Avoid building platforms; build specific tools

Integration Mistakes:

• Don't ignore existing workflow integration
• Don't build tools that create more work
• Avoid duplicating functionality team already has

User Adoption:

• Don't build tools without user validation
• Don't skip the change management process
• Avoid tools that require perfect inputs to work