Skip to main content

Master Jony's Guide to Fast Product Design (PDM-A)

Intro​

Welcome to the fast lane of product design! I'm Jony, and I transform solution specs into complete, buildable, beautiful product designs in record time—without sacrificing quality. Think of me as your design accelerator: metrics, IA, UX flows, UI wireframes, prototypes, PRPs, and handoff docs, all executed with world-class standards.

  • Speed with Quality: Complete product design in ~90 minutes (80-130X faster than traditional)
  • Evidence-Driven: Every pixel traces back to a validated user need
  • Build-Ready: Outputs are executable by both human and agentic coders with zero context loss

Hyperboost Formula (Summary)​

  • Design isn't decoration—it's strategy made visible. Every element earns its place through evidence, not opinion.
  • I blend Lean Startup ruthlessness with deep human empathy and AI acceleration. Waste dies. Users win. Speed compounds.
  • Each phase delivers concrete artifacts that de-risk the next. By handoff, you're not guessing—you're shipping with confidence.
  • The result? A complete design system that any builder (human or AI) can execute autonomously, with quality baked in.

Process Overview​

  • 00: Context Intake & Dispatch
  • 01: Track What Matters (Value Tree & Metrics)
  • 02: Organize Your Product Experience (Information Architecture)
  • 03: User Experience Flows (UX)
  • 04: User-Interface Design (Design System & Component Library)
  • 05: User-Interface Design (Wireframes & Visual Templates)
  • 06: Interactive SVG Prototype (Approved UI)
  • 07: SV-Grade Design Critique & Excellence Validation
  • 08: Product Reqs Prompt (PRP)
  • 09: PRD Update (Post-Design Alignment)
  • 10: Design Package Manifesto
  • 11: AI Coder Build Manual
  • 12: User Testing Guide & Intermezzo
  • 13: Conclusion & Handoff

Phase 1: Foundation & Metrics​

Before pixels touch screen, we build the measurement and information backbone.

Step 00: Context Intake & Dispatch​

  • I'll gather every piece of relevant context: solutions, personas, roadmaps, constraints, business goals
  • I validate completeness of upstream docs (JTBD, DOS, solution briefs) and flag gaps early
  • I route you to the right workflow path based on your context and needs
  • I ensure we're aligned on what we're building and why before Step 01 begins

Deliverables: (No artifacts—just validated context and clear workflow path)

Step 01: Track What Matters (Value Tree & Metrics)​

  • I'll build your complete metrics hierarchy: North Star Metric at top, key drivers below, supporting metrics beneath
  • I create a visual Value Tree (SVG) showing how everything connects from NSM down to granular signals
  • I tie every metric back to validated user outcomes (DOS) so you're measuring what actually matters
  • I spec out technical implementation: event tracking, analytics tags, platform integration requirements
  • I pressure-test alignment with your OKRs and lock it down before moving forward

Deliverables:

  • mm_solutions_yaml: Updated OST with complete metrics hierarchy, weighted priorities, NSM integration
  • support/master_jony/a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/01b_metrics_vtree_md: Complete metrics hierarchy with technical implementation framework
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/01b_metrics_vtree: Full metrics documentation with visual Value Tree (HTML+SVG)

Step 02: Organize Your Product Experience (Information Architecture)​

  • I'll map user jobs to content types and build site maps that reflect user priorities, not org charts
  • I define navigation patterns (tabs, menus, wizards) and label everything clearly (no jargon)
  • I create taxonomy systems for tagging, filtering, and searching
  • I spec out technical architecture: routes, data models, permissions, integration points
  • I document everything so coders (human or AI) can implement without hunting for missing pieces

Deliverables:

  • support/master_jony/a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/02_navigation_ia_md: Complete IA foundation with navigation, technical architecture, implementation specs
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/02_navigation_ia: Full IA documentation (HTML) with site maps, nav patterns, taxonomy, technical specs

Step 03: User Experience Flows (UX)​

  • I'll map complete UX flows per feature: entry points, decision points, success states, failure states, contextual help
  • I design for hooks (what brings them back?), AHA moments (when do they get it?), and habit formation
  • I annotate flows with emotional states (frustration, curiosity, delight, confidence) alongside functional steps
  • I include implementation notes so coders understand not just the what, but the why
  • I apply Hooked Model, Fogg Behavior Model, and JTBD orchestration to create experiences worth repeating

Deliverables:

  • support/master_jony/a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/03_[%feat_id%]_flow_[%unique_feat_name%]_md: UX flow per feature with emotional journey, Hook loops, AHA moments, implementation specs
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/03_[%feat_id%]_flow_[%unique_feat_name%]: Complete UX flow documentation (HTML) with flow diagrams, interaction patterns, emotional arcs

Phase 2: Visual Design & Prototyping​

Structure becomes visible beauty. Concepts become pixels.

Step 04: User-Interface Design (Design System & Component Library)​

  • I'll define your design tokens (colors, typography, spacing) that can be updated globally
  • I build a component library covering buttons, inputs, cards, navigation, modals, loaders, empty states, error states
  • I create light/dark mode variations, responsive breakpoints, and all interaction states (default, hover, active, disabled, loading)
  • I apply Atomic Design, WCAG 2.1 AA accessibility standards, and platform conventions (iOS/Android/web)
  • I document every component with usage guidelines, accessibility specs, and code snippets for implementation

Deliverables:

  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/04a_design_system_template: Design system template (baseline for generation)
  • support/master_jony/a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/04a_design_system_md: Complete design system foundation with atomic components, design tokens, accessibility specs
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/04b_design_system: Full design system documentation (HTML) with component library, tokens, usage guidelines

Step 05: User-Interface Design (Wireframes & Visual Templates)​

  • I'll design 2-3 visual concepts per feature, gather feedback, refine winners, and lock in approved versions
  • I version everything meticulously (v01, v02, v03) and archive rejected concepts for paper trail
  • I include annotations: interaction states, copy suggestions, edge case handling, accessibility notes
  • I apply visual hierarchy, Gestalt psychology, emotional design, F-pattern/Z-pattern layouts
  • I ensure touch targets meet accessibility minimums (44x44px mobile) and use color psychology intentionally

Deliverables:

  • support/master_jony/a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/05b_[%feat_id%].v[YY]_ui_[%gen.words(max:3, 'ui_unique_name')%]_md: Source UI wireframe spec (markdown) for HTML rendering
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/05b_[%feat_id%].v[YY]_ui_[%gen.words(max:3, 'ui_unique_name')%]: HTML/SVG wireframe version for UI interface (screen, dialog, component)

Step 06: Interactive SVG Prototype (Approved UI)​

  • I'll assemble approved UI wireframes into a navigable, clickable SVG prototype
  • I add navigation hotspots (tap here to go to next screen) for realistic interaction testing
  • I confirm which versions are final, archive or delete rejected versions to prevent builder confusion
  • I package the prototype for user testing, stakeholder feedback, and investor demos
  • I enforce cleanup discipline so only approved designs move forward

Deliverables:

  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/06_interactive_svg_prototype: Navigable SVG prototype assembled from approved UI versions, with confirmed cleanup

Phase 3: Validation & Refinement​

Critique time. We benchmark against world-class standards and refine until it sings.

Step 07: SV-Grade Design Critique & Excellence Validation​

  • I'll conduct comprehensive design critique: usability, aesthetics, accessibility, brand consistency, technical feasibility
  • I benchmark against 3-5 category leaders (Apple, Airbnb, Stripe-level standards)
  • I apply Jakob Nielsen's heuristics, WCAG audits, aesthetic-usability validation, and competitive analysis
  • I deliver prioritized list of improvements: quick fixes (padding, contrast) and strategic changes (rethink flows, add missing states)
  • I provide clear, specific, implementable feedback that elevates your product from "pretty good" to "industry-leading"

Deliverables:

  • support/master_jony/a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/05_design_critique_md: Comprehensive SV-grade design critique with benchmarking, creative analysis, actionable recommendations
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/05_design_critique: Full design critique documentation (HTML) with heuristics evaluation, competitive analysis, improvement roadmap

Step 08: Product Reqs Prompt (PRP)​

  • I'll create self-contained PRPs per feature: UX flows, UI specs, IA context, metrics tracking, implementation guidance
  • I write clear feature descriptions, user stories, acceptance criteria, edge case handling, technical specs
  • I embed source content (copy, images, design tokens) so builders aren't hunting across five tools
  • I structure PRPs for agentic coder execution: modular, complete, testable, autonomous
  • I ensure if a builder finishes reading and still has questions, I revise until they don't

Deliverables:

  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/06_[%feat_id%]_prp_ch:figma|{{prp_platf_slug}}_[%unique_feat_name%]: Self-contained PRP (markdown) with navigable prototype specs embedded with full source content

Step 09: PRD Update (Post-Design Alignment)​

  • I'll integrate design-phase data into your PRD: revised metrics, refined user stories, updated technical considerations
  • I update P1 (problems, solutions, context, metrics), P2 (feasibility, dependencies, risks), P3 (executive one-pager)
  • I review and approve each part sequentially before moving to next
  • I ensure the PRD stays traceable, version-controlled, and aligned with design reality
  • I create a living document that evolves with the product and keeps everyone honest

Deliverables:

  • support/master_jony/a2_solution_discovery/{{mm_session_persona}}/{{mm_session_roadmap}}/05a_prd_p1_problems_solutions_md: Source PRD P1 (markdown) - Problems, Solutions, Context, Metrics
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/05a_prd_p1_problems_solutions: PRD Part 1 (HTML): Problem definition, solution overview, success metrics, use cases
  • support/master_jony/a2_solution_discovery/{{mm_session_persona}}/{{mm_session_roadmap}}/05b_prd_p2_feasibility_risks_md: Source PRD P2 (markdown) - Feasibility, Dependencies, Security, Risks
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/05b_prd_p2_feasibility_risks: PRD Part 2 (HTML): Technical feasibility, dependencies, security compliance, risk assessment
  • support/master_jony/a2_solution_discovery/{{mm_session_persona}}/{{mm_session_roadmap}}/05c_prd_p3_one_pager_md: Source PRD P3 (markdown) - Executive One-Pager Summary
  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/05c_prd_p3_one_pager: PRD Part 3 (HTML): Executive one-pager summary for quick stakeholder alignment

Phase 4: Packaging & Handoff​

Package beautifully, guide builders, plan testing, hand off with confidence.

Step 10: Design Package Manifesto​

  • I'll inventory every artifact generated, categorize by role (designer, dev, PM, QA) and phase (setup, build, test, launch)
  • I write descriptions and usage guidelines for each artifact
  • I highlight dependencies (read this before that), critical paths (must-have for launch), optional resources (deep dives)
  • I create a single, scannable document answering "where do I find X?" and "what do I read first?"
  • I eliminate onboarding friction so new team members get productive in hours, not weeks

Deliverables:

  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/08_design_package_manifesto: Design Package Manifesto: complete index of design artifacts, organized by role and usage context

Step 11: AI Coder Build Manual​

  • I'll compile setup instructions (environment, dependencies, design system integration)
  • I create build prompts (how to implement features from PRPs) and memory bank files (reusable context for AI agents)
  • I define quality gates (what to check before calling a feature "done")
  • I include troubleshooting: common issues, how to resolve them, when to escalate
  • I ensure the manual is both human-readable and AI-parseable for autonomous, high-quality execution

Deliverables:

  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/09_prototype_build_manual: Agentic coder operations manual with setup prompts, build prompts, memory bank context, quality gates

Step 12: User Testing Guide & Intermezzo​

  • I'll extract key design hypotheses (e.g., "users will complete task X in under 60 seconds")
  • I design test protocols (moderated sessions, unmoderated remote tests, A/B tests)
  • I define success metrics (task completion rate, time on task, user satisfaction scores) and create testing timeline
  • I draft feedback integration plan: what changes trigger redesign vs. minor tweaks vs. post-launch iterations
  • I pause before full build to de-risk, refine, and ensure we're shipping the right thing

Deliverables:

  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/10_user_testing_guide: User testing guide with hypotheses, test protocols, success criteria, feedback loop integration

Step 13: Conclusion & Handoff​

  • I'll compile completion summary: journey recap, key decisions, design highlights, validation results
  • I create handoff checklist (✓ metrics defined, ✓ IA complete, ✓ UX flows validated, ✓ UI approved, ✓ PRPs ready, ✓ build manual delivered)
  • I route to next agent (ABM-A) with clear instructions and all artifacts they need to execute flawlessly
  • I archive the entire project in structured format ensuring nothing gets lost
  • I ensure next agent hits the ground running with zero knowledge loss or context hunting

Deliverables:

  • a3_product_design/{{mm_session_persona}}/{{mm_session_roadmap}}/11_handoff_summary: Conclusion summary with journey recap, artifact inventory, next-agent routing, handoff checklist

Victory Lap​

You now have a complete, world-class product design. Every step was evidence-backed. Every decision was intentional. Every artifact is executable. Your product isn't just pretty—it's strategic, measurable, user-centered, and ready to win.

Now go build something beautiful. Pixels are love letters. Make every one count.