Skip to documentation
oh-my-design
Live demo▾

LIVE DEMO PLAYBOOK

Make the audience see one real product change.

A strong oh-my-design demo is not a tour of skill names. It starts with a visible problem, protects behavior the product already relies on, and ends on the actual route with evidence anyone can inspect.

Choose the smallest format that can prove the outcome

The clock limits scope, never honesty. Pick one format before the demo and say what will remain unchanged.

5 min01

Rescue one visible flaw

An existing page works but feels generic or unclear

Fix one high-impact hierarchy, spacing, state, or accessibility problem while preserving behavior.

Before view, focused diff, and the same working route after the change.

15 min02

Ship one complete surface

The product already has a stack, components, and a scoped flow

Build one small surface with its loading, empty, error, and success states from project-owned design context.

A working route, state coverage, changed files, and the checks that actually ran.

30 min03

Run the checkpointed harness

The surface is new, ambiguous, or needs research and system decisions

Move from discovery through journey, DESIGN.md proposal, implementation, and validation without skipping approval gates.

Journey, DESIGN.md patch, working UI, validation summary, and all three user checkpoints.

A repeatable six-step runbook

Use this sequence in a meetup, workshop, or screen recording. The CLI prepares the environment; the coding agent performs the UI work in the repository.

  1. 01

    Name one visible problem and one protected behavior

    Open the real route. Point to the exact thing the audience should notice, then state what must not change: URL, data flow, field names, copy, or interaction behavior.

  2. 02

    Install the bundle and let doctor inspect it

    Run both commands in the project root. Restart the coding agent after install. Do not present a successful install as the outcome.

    npx oh-my-design-cli@latest npx oh-my-design-cli@latest doctor
  3. 03

    Reconcile DESIGN.md with verified_v2 evidence

    For a public demo, choose a verified_v2 reference. Ask the agent to read it with the existing DESIGN.md, promote only evidence that belongs to this product surface, and leave unknown font, token, and component claims absent.

  4. 04

    Implement the real surface and its critical states

    Work in the existing stack and components. For a new flow, include the states a user can actually encounter rather than polishing a static happy-path mockup.

  5. 05

    Audit the actual route

    Open the product route, exercise the protected behavior, and run the relevant accessibility and interface-feel checks. Report only checks and measurements that really ran.

  6. 06

    Record the audience's correction

    If a user corrects a visual choice, fix that scoped decision and store it with omd:remember so the next session does not repeat the mistake.

One prompt for a live rescue

Read DESIGN.md and inspect the current product route first. Improve one visible hierarchy or state problem on this page while preserving its URL, data flow, field names, and existing user behavior. For a public demo, use a verified_v2 reference and reconcile only evidence for this product surface; omit unknown values instead of using fallbacks. Implement the change in the real surface, cover the critical states, then verify that route and report the changed files and checks that actually ran. Ask before extending DESIGN.md or crossing a required harness checkpoint.

What the audience should be able to inspect

Capture the evidence as you go. A polished screenshot without this trail is not an auditable demo.

The original screen and the one visible problem you named

The exact prompt, including the protected behavior

The DESIGN.md delta and any unknown fields deliberately omitted

The working product route with critical states, not a detached mockup

Changed files and the exact checks or measurements that ran

The user correction recorded as a durable, scoped preference

Keep the wow moment honest

CLI installs and diagnoses

The coding agent reads the installed context and changes the UI. Do not claim the installer generated the interface by itself.

Unknown still means absent

Never fill missing brand facts with a system font, generic component, heuristic token, or adjacent marketing surface.

Proof beats performance theater

Do not claim speed, conversion, accessibility, or performance gains without a real before-and-after measurement.

Checkpoints stay mandatory

The 30-minute harness still stops for journey, DESIGN.md patch, and validation approval. A live audience is not permission to skip them.