Claude Code product marketing
Build product demos with Claude Code
Use Claude Code to turn a supported product flow into a checked HTML demo for launch pages and follow-up.
Product marketing outcome
One request can produce a checked local launch asset
Claude Code plans the demo and drafts the story from visible product evidence. ShowKit captures, checks, and builds the flow into portable HTML files. Preview it locally, then publish the checked version with ShowKit or host the files on your own site.
Use it to
Embed a guided product flow in a launch page or campaign.
Explain a multi-step workflow with selectable text, semantic targets, hotspots, and tooltips.
Ask Claude Code to refresh the demo after the product UI changes.
Workflow
From agent prompt to local interactive demo
Add the ShowKit skill
Install the agent instructions first. This step does not install or update the ShowKit CLI.
Name the product flow
Share the product URL or currently open flow. The agent can draft a first story from your request and visible product evidence.
Capture and shape the story
The agent chooses a supported source, captures supported product states, and writes the demo story from visible evidence.
Check and build the demo
ShowKit checks hotspots, local assets, sensitive-data rules, and the player before creating the HTML files.
Publish when you approve
After you review the local preview, the agent can publish the exact checked version and return a hosted URL.
Example request
A Claude Code product marketing prompt
Name the product flow, audience, takeaway, and endpoint. Let the agent open the local preview, then decide whether to publish.
Source boundary
Claude Code may need a separate browser
Claude Code cannot safely capture every open Chrome tab. ShowKit first looks for product files it can use. If live capture needs a separate non-persistent Playwright browser, it asks before opening one. If no supported source is available, it saves nothing.
How to use ShowKit
Start with the product flow you want to show
Paste this into Claude Code or Codex. It adds the ShowKit skill, then asks for the product URL or open flow.
The skill asks before changing an existing project, adding Playwright, or publishing a checked demo.
Ready to share?
Publish the checked version
Your coding agent fills in the version hash. The command connects your account when needed and returns a hosted URL. Up to 3 active demos are free.
Frequently asked questions
No. Start with a supported product URL or existing product files. A codebase helps when you want repeatable updates through Playwright or CI, but it is optional.
Yes. ShowKit exports a static HTML demo with CSS, player code, demo content, and local assets. You can publish that folder on any static host. Opening a local preview does not publish it.
No. The skill only adds instructions for your coding agent. After you request a demo, the skill can set up a compatible CLI in a new output folder. It asks before changing an existing project or adding optional Playwright.
No. The agent opens a local preview first, then asks whether you want to publish the checked version. Publishing changes external state and requires your explicit approval.
Yes. Describe the flow and goal in Claude Code or Codex. The coding agent runs the ShowKit workflow and opens a local preview. ShowKit still asks before changing an existing project or adding Playwright.
ShowKit stops before saving blocked content. When a supported private page can use text-only redaction, it asks for explicit consent and leaves the previous demo unchanged if consent is not given.