Record your product. Ship the fix.

The problem with the way you're shipping fixes today

You spot a bug in your own product. Or a customer Slacks you a screen-recording. Or you watch a Lovable preview and think "the menu's wrong, the copy's confusing, the empty state needs a button." Then you sit down to write the bug report.

That's where the loss happens. You translate the live experience into a Linear ticket, then translate the ticket into a Cursor prompt, then debug what the AI wrote because half the context dropped along the way. You did the thinking three times. Two of those times the AI didn't see what you saw.

Walkthrough as Spec collapses those three translations into one. The recording is the spec. Every click, every keystroke, every comment — captured with full DOM context, then handed straight to whichever AI tool you build with.

How it works

Five formats. One recording.

Different AI tools want different inputs. Cursor is happiest with structured YAML. Lovable wants natural-language paragraphs that reference what the user sees. v0 prefers design-first prose. Claude wants markdown with citations. JSON ingests anywhere. We generate all five from the same underlying capture.

task: Fix empty state on /dashboard/leads
context: |
  User opened /dashboard/leads
  with no leads. The empty
  state shows "No data" but
  no Add button. Friction at
  4.2s; user clicked twice
  on the heading expecting
  it to be interactive.
acceptance_criteria:
  - Empty state shows
    "Add your first lead"
    button
  - Button opens existing
    AddLeadDrawer
  - Heading is not
    clickable
files_to_modify:
  - src/pages/Leads.tsx
  - src/components/leads/
    EmptyState.tsx

On the Leads page, when there
are no leads yet, the empty
state currently shows the
text "No data" but doesn't
give the user any way to add
their first lead. The user
also clicked the page heading
twice expecting it to do
something — make sure the
heading isn't styled like a
button.

Add a clear "Add your first
lead" button below the empty
state message that opens the
existing add-lead drawer.
Build this fix without
changing unrelated files.

An empty state for a leads
table. Centered layout,
friendly copy, a single
primary CTA button labeled
"Add your first lead" in
brand orange. Soft icon
above the text. Subtle
secondary line of muted
copy below the button:
"It only takes 30 seconds."

Component: LeadsEmptyState

## Product context
The /dashboard/leads page
shows a list of leads. Empty
when the user has just
signed up.

## What the user did
At 0.0s the user navigated
to /dashboard/leads. At 2.1s
they clicked the heading
"Leads" twice. At 4.2s they
commented: "where do I add
one???"

## Suggested fix path
Add an "Add your first lead"
CTA to the empty state...

{
  "summary": "Empty state
    on /dashboard/leads
    has no add CTA",
  "user_intent": "create
    first lead",
  "friction_points": [
    {
      "timestamp_ms": 4200,
      "description": "user
        comment: 'where do
        I add one???'",
      "severity": "high"
    }
  ],
  "events_count": 12,
  "target_components": [
    "LeadsEmptyState"
  ]
}

Issue detection runs alongside spec generation

Every recording is also classified for issue type and severity. Console errors during the walkthrough become ui_bug or data_error. Slow page transitions (>3 seconds) become slow_load. Broken links (404s) become broken_link. Repeated clicks on the same element become confusing_copy. User comments — "this label is wrong", "I expected data here" — become confusing_copy, missing_feature, or ui_bug depending on context. Each issue gets a severity score (critical / high / medium / low / info) and a recommended fix.

Result: a spec for the AI tool to build with, AND a triage list for you to prioritize.

The moat use case — your customers' products

Pricing

What gets captured (and what doesn't)

v0 captures: every click event with the target's selector + xpath + outerHTML + accessibility-tree snippet, two levels of parent context, console errors, navigation events, scroll position deltas, comment text bound to the focused element + timestamp.

v0 does not yet capture: video of the screen, audio voice-notes. Both are coming in v0.2 — the underlying schema already supports them. For v0, comments via Cmd/Ctrl+/ replace voice-notes; the AI gets a textual proxy of what you'd have said out loud.

What's never captured: passwords (we strip type=password input values before persistence), aria-hidden=true trees, anything inside iframes you don't own. RLS at the database level guarantees only you (and admins, when explicitly authorized) can read your recordings.

FAQ

Roadmap

v0 (today): DOM event capture, element inspection, inline comments, five spec formats, issue detection, admin + end-user dashboards.

v0.2 (next): Screen video capture (getDisplayMedia), audio capture (getUserMedia), Whisper transcription of audio into the spec context, video upload to Supabase Storage, video timeline scrub on the admin viewer.

v0.3: Share tokens with read-only viewer, agency cross-seat reads, embed mode for customer-facing products (your customers record on your site, you get the spec), webhook delivery to Linear / GitHub Issues / your own endpoints.

v1.0: Tauri Desktop App ingest, third-party site capture, native macOS/Windows recording with full audio + system events.