Demo Setup

Demo Setup

Overview

Creates demo-ready prototypes by guiding you through a simulated Design Thinking Coach session with a customer persona, then scaffolding a hi-fi prototype. The skill generates a customer persona brief with realistic conversation seeds, accelerates through DT Methods 1 through 6 with simulated customer dialogue, and scaffolds a runnable hi-fi prototype directly at Method 7. The result is a complete, runnable demo with a presenter's walkthrough guide and a video script for recording.

Primary audience: new users learning HVE Core tools.

Core design constraints:

• Every demo starts with a customer persona brief that drives the simulated conversation.

• DT Coach interactions use accelerated pacing (2 to 3 exchanges per method) for demo efficiency.

• Step 4 scaffolds the hi-fi prototype directly, handling all scaffold generation and experiment framing.

• Presenter's guide included so demos are repeatable without memorizing the flow.

• Demo video script generated for recording a polished walkthrough video.

Prerequisites

• DT Coach agent accessible (provided by the HVE Core extension)

• .copilot-tracking/ directory exists at the workspace root

Quick Start

Run a demo with custom inputs:

1. Invoke /demo-setup with customer={name}, industry={vertical}, and optionally persona and problem.

2. The DT Coach walks through Methods 1 through 6 with a generated persona and conversation seeds.

3. At Method 7 the skill scaffolds a runnable prototype.

4. Open index.html in a browser and follow the presenter's guide in README.md.

When to Use

• Setting up a demo for a customer, partner, or internal team to showcase HVE Core tooling

• Onboarding new users who need to see the DT Coach and prototype workflow end to end

• Preparing a conference talk, workshop, or training session that walks through the tools

• Creating a reference demo that others can replicate independently

When Not to Use

• Running a real Design Thinking engagement with actual stakeholders (use the DT Coach directly)

• Building a production prototype without the demo scaffolding and walkthrough

• Creating a static slide deck or documentation (use the canonical deck)

• The audience already knows the tools and needs advanced workflow guidance

Inputs

Customer Persona Brief Template

The skill generates a customer persona brief before starting the DT Coach session. This brief drives all simulated customer interactions through Methods 1 through 6.

Save location: .copilot-tracking/dt/{project-slug}/context/customer-persona-brief.md

Organization Profile

Persona Profile

Problem Scenario

Conversation Seeds

Conversation seeds provide realistic customer responses that the DT Coach uses during simulated interactions. Each seed matches the coaching focus of its method.

Domain Vocabulary

Industry-specific terms the persona would naturally use in conversation. Include 10 to 15 terms with brief definitions for context.

Workflow

Follow the six-step workflow to set up a complete HVE Core demo. Each step builds on the previous one.

Step 1: Define Customer Scenario

Accept customer context from user inputs and generate the persona brief.

1. Generate a Customer Persona Brief from the customer, industry, persona, and problem inputs.

2. Fill all sections of the Customer Persona Brief Template, including conversation seeds tailored to the industry and problem.

3. Derive the project slug from the customer name: strip all characters except letters, digits, and spaces, collapse consecutive spaces, then lowercase and replace spaces with hyphens (for example, Contoso Manufacturing becomes contoso-manufacturing, O'Brien & Co. becomes obrien-co). If the resulting slug is empty, prompt the user for a valid customer name.

4. Save the brief to .copilot-tracking/dt/{project-slug}/context/customer-persona-brief.md using the project slug derived above.

Checkpoint: persona brief exists with all sections populated.

Step 2: Initialize DT Coach Session

Create the project structure and start the DT Coach session with demo context.

1. Use the project slug derived in Step 1.

2. Initialize coaching-state.md with initial_classification set to frozen. Add a session_mode: demo marker under the project block to record that this is a demo session.

3. Include at minimum these fields: project.slug, project.name, project.initial_classification: frozen, project.session_mode: demo, current.method: 1, current.space: problem, current.phase: session-init.

4. The DT Coach loads the customer persona brief as simulated customer context.

5. Begin Method 1 with the DT Coach greeting and session initialization.

Note: session_mode: demo is a demo-setup convention that the DT Coach does not natively recognize yet. Accelerated pacing is enforced by this skill's Step 3 direction to the Coach, not by the coaching-state.md schema. Native session_mode support could be formalized in the DT Coach agent and coaching-state schema if a future use case requires it.

Checkpoint: coaching-state.md exists with demo initial_classification and Method 1 active.

Step 3: Guided DT Methods 1-6 (Accelerated Demo Mode)

The DT Coach guides through each method with simulated customer conversations drawn from the persona brief.

1. At each method, the persona brief's conversation seeds provide realistic customer responses.

2. Direct the DT Coach to complete each method in 2 to 3 exchanges (one user turn plus one coach response per exchange), compared to 10 or more in full coaching. This skill drives the accelerated cadence; the Coach does not infer it from session_mode.

3. Key artifacts are generated at each method exit:

   • M1: stakeholder map and scope summary

   • M2: research notes and interview synthesis

   • M3: theme clusters and problem statement

   • M4: prioritized idea list

   • M5: concept cards with desirability/feasibility/viability assessment

   • M6: lo-fi prototype sketches and usability notes

4. At each method transition, highlight which HVE Core tool or feature is being demonstrated:

   • M1 to M2: coaching state persistence and session recovery

   • M2 to M3: artifact lineage across methods

   • M3 to M4: problem-to-solution space transition

   • M4 to M5: concept cards with D/F/V evaluation

   • M5 to M6: canonical deck snapshot (optional)

   • M6 to M7: hi-fi prototype scaffold generation

Checkpoint: Methods 1 through 6 have generated artifacts in the coaching state.

Step 4: Prototype Scaffold (Method 7)

Transition to Method 7 and generate the hi-fi prototype scaffold directly.

1. Derive the scaffold inputs from the DT session artifacts using the Prototype Input Mapping table below.

2. Populate the experiment card from DT session artifacts (hypothesis from M3 themes, success criteria from M5 concepts).

3. Generate the scaffold using the fixed and variable elements defined in the Demo Scaffold Template section below.

4. Fixture data derived from the persona brief and domain vocabulary.

5. Name the fixture file after the primary domain noun in plural form (for example, machines.js, vehicles.js, patients.js).

6. Include experiment banner on every page with hypothesis text.

7. Apply [SIMULATED] badges to all mock components.

8. Pre-wire telemetry for page views, clicks, and task timing.

Prototype Input Mapping

Checkpoint: prototype runs locally by opening index.html in a browser.

Step 5: Demo Walkthrough Guide

Generate a presenter's guide in the prototype README with everything needed to deliver the demo.

1. Step-by-step demo narrative from DT Coach session through prototype walkthrough.

2. Key talking points at each stage of the demo.

3. Which HVE Core features are showcased at each step:

   • DT Coach agent and coaching state management

   • Customer persona brief and conversation simulation

   • Experiment cards and hypothesis-driven development

   • Hi-fi prototype scaffold generation

   • Telemetry instrumentation

4. Common audience questions and suggested responses.

5. Timing guidance (approximate duration per section).

Checkpoint: README contains a complete presenter's walkthrough guide.

Step 6: Demo Video Script

Generate a demo-video-script.md in the prototype directory with a complete narrated video script for recording the demo.

1. Follow the structure in references/demo-video-script-template.md for the script layout.

2. Populate the Cold Open with a vivid scene showing the prototype in action and stating the persona's core pain point.

3. Write Section 1 (The Problem) using the customer persona brief: organization profile, frustrations, and the specific problem scenario.

4. Write Section 2 (Design Thinking Coach) walking through the DT artifacts generated in Step 3, highlighting coaching state persistence and artifact lineage.

5. Write Section 3 (The Experiment Card) narrating the hypothesis, success criteria, and failure criteria from the experiment card.

6. Write prototype demo sections (Sections 4 and 5) with screen-by-screen narration of the prototype workflow. Include visual cues in brackets describing what appears on screen and what the presenter clicks.

7. Write Section 6 (What You Just Saw) recapping the HVE Core tools demonstrated and their value.

8. Write Section 7 (Where to Start) introducing the three entry points: Task Researcher, RPI Agent, and DT Coach. Include a brief live demo prompt for each.

9. Write a Closing section and Production Notes table with recording setup details.

10. Target duration is 14 to 16 minutes. Distribute time across sections proportionally, with prototype demo sections receiving the most time.

Checkpoint: demo-video-script.md exists with all sections populated and timing annotations.

Demo Scaffold Template

Every demo scaffold follows a fixed structure. Step 4 generates this layout with demo-specific content.

{project-slug}/
├── experiment-card.md
├── README.md
├── demo-video-script.md
├── index.html
├── style.css
├── app.js
├── telemetry.js
└── sim/fixtures/{domain-data}.js

Fixed Elements (same across all demos)

Variable Elements (customized per demo)

Integration with HVE Core Tools

Each step of the demo workflow showcases specific HVE Core tools and features.

Validation

• [ ] Customer persona brief exists and all sections are populated

• [ ] DT coaching state initialized with initial_classification: frozen and session_mode: demo

• [ ] Methods 1 through 6 have generated artifacts

• [ ] Experiment card has a falsifiable hypothesis and measurable success criteria

• [ ] Prototype scaffold runs locally by opening index.html

• [ ] Telemetry captures page views, clicks, and task timing

• [ ] README contains a complete presenter's walkthrough guide

• [ ] Demo video script exists with all sections, visual cues, and timing annotations

• [ ] All simulated components display [SIMULATED] badges

• [ ] Experiment banner visible on every prototype page

Troubleshooting

Demo Video Script Template

The demo video script follows a fixed section structure with narrator text (blockquoted) and visual stage directions (bracketed). See references/demo-video-script-template.md for the full template, section-by-section script structure, authoring rules, and content derivation guidance. Copy that file to the prototype directory as demo-video-script.md in Step 6 and fill in the placeholders.

Brought to you by microsoft/hve-core