Skip to the content
Theme Studio: how it works

From one prompt to a finished video

Copy the prompt into Claude Code and let it set up the project and create your video. If system dependencies are missing, Claude will guide you through installing them. Review the final video before publishing.

How the prompt works

The studio writes one prompt. This is what happens after you paste it, step by step, and who does each part.

YouClaude CodeThe kit

What the prompt carries

What to make
A video of your website (with its address), or a presentation with no product filmed. Plus the length and where it will be posted.
Your theme
The theme file, written out in full, already checked by the engine in the studio.
Your settings
The config file, written out in full.
The steps
Ten numbered steps, each a real command of the kit, in the order below.
The rules
Stop and tell me if a step fails. Do not change the theme unless it fails its check. Look at frames before saying it is done.
Before you start
  1. 0

    Make the theme and copy the prompt

    You

    In the theme studio you pick a look, a brand colour and fonts, or press Surprise me. The page runs the engine's own rules on it. Only a theme that passes can be copied.

    Then: open Claude Code in your project folder, and paste.

Set up: Claude does this
  1. 1

    Install the kit

    Claude Code

    Claude makes a package.json if the folder has none, then installs the kit from npm.

    bun add -d kwartz-showcase

    If Bun is not installedClaude uses npm, and writes npx where the steps say bunx.

  2. 2

    Check the machine

    The kit

    The kit lists five things: FFmpeg, ffprobe, the browser, Python and the voice.

    bunx showcase doctor

    If the browser or the voice is missingClaude runs "bunx showcase setup" itself. It is a one-time download of about 350 MB.

    If FFmpeg or Python is missingClaude stops, tells you what to install, and waits. These are system tools, so you install them.

  3. 3

    Start the project

    The kit

    One command adds the config, a starter scenes file, and the skills that tell Claude how a video editor works: the editor skill, the skill of your look, and the skill for changing the theme later.

    bunx showcase init --config --theme <your look>

  4. 4

    Save your theme and your settings

    Claude Code

    Claude writes the theme file and the config exactly as the prompt gives them.

    themes/<name>.json and showcase.config.json

    If your address is a live siteThe config also lists the names that must never appear on screen, or says there are none. The studio asks you for them, so Claude does not have to. The site is then filmed read-only.

  5. 5

    Check the theme again

    The kit

    The same rules the studio ran, now on the saved file: safe CSS, and contrast that can be read on video.

    bunx showcase theme check <name>

Make the video: Claude follows the editor skill
  1. 6

    Learn the product and the budget

    The kit

    For a website, the kit opens it and writes a map: every screen, a screenshot, and a selector for each control. Then it prints the work order: scenes, words, shapes and safety rules.

    bunx showcase explore then bunx showcase plan

    For a presentationNothing is explored. The plan gives the length and the word budget.

  2. 7

    Write the script, then the scenes

    Claude Code

    Claude writes one spoken line per scene first, then what happens on screen while it is said. It chooses the audience and the promise, and tells you which.

    video.ts

  3. 8

    Draft until it is right

    The kit

    A draft is silent and fast. The kit films every scene and runs the checks. Claude reads the report, looks at frames, fixes the scenes, and drafts again.

    bunx showcase make --draft

    If a check failsThe report names the scene and the reason: too short, something cut off, a label under a caption. Claude fixes that scene. This loop usually runs two to four times.

  4. 9

    Render the real video

    The kit

    A local voice reads the narration. The kit adds captions, music and sound effects, builds the video in every shape you asked for, and measures the file.

    bunx showcase make

  5. 10

    Report, and hand back to you

    Claude Code

    Claude looks at frames from the finished video and reports each check with the value it measured. It ends by asking you to listen once, because it cannot hear.

    out/<name>.mp4, one file per shape and per platform

After

  1. Review before publishing

    You

    Watch it with the sound on. The checks measure the file. They do not judge whether the voice sounds right, or whether the story is the one you wanted.

    To change what is said: edit a line in video.ts, and render again.

What ends up in your folder

FileMade byWhat it is
showcase.config.jsonthe promptWhat the video is: address, length, platforms, theme
themes/<name>.jsonthe promptYour theme. Commit it, so everyone gets the same look
video.tsClaudeThe script and the scenes. Edit a line and render again
.claude/skills/the kitThe skills Claude follows
.showcase/the kitWorking files: the product map, chosen sounds. Not committed
out/the kitThe videos, the captions and the frames. Not committed

What you need first

  • Claude Code, open in a project folder
  • Bun 1.2 or later, or Node 22.18 or later
  • FFmpeg on your PATH
  • Python 3.10 to 3.13, for the voice
  • Your website running, or reachable at its address

What is and is not proven

  • Tested three times: a fresh agent with only the prompt, in an empty folder, made a voiced video that passed every check
  • Tested on Windows only
  • Not yet tested on a machine with nothing installed
  • No API key is needed in Claude Code
By hand

Manual guide for the npm package

The same journey without the prompt, with the package kwartz-showcase. Every command is run in your own project folder. With Node, write npx wherever this guide says bunx.

Set up, once per machine

  1. 1

    Install the kit

    bun add -d kwartz-showcase     # or: npm install --save-dev kwartz-showcase
  2. 2

    Check what is installed

    bunx showcase doctor

    Five lines. On a new machine, chromium and voice say missing.

  3. 3

    Install the browser and the voice

    bunx showcase setup

    About 350 MB, shared by every project on the machine. Run doctor again: every line should say ok.

Make a video

  1. 4

    Start the project

    bunx showcase init --config

    Adds showcase.config.json, video.ts and the skills. Add out/ and .showcase/ to your .gitignore.

  2. 5

    Describe the video

    {
  "name": "demo",
  "url": "http://localhost:3000",
  "length": 30,
  "platforms": ["youtube", "instagram-reel"],
  "theme": "glass"
}

    In showcase.config.json. Only "url" is required.

  3. 6

    Map the product, and get the work order

    bunx showcase explore     # screens, screenshots, a selector for each control
bunx showcase plan        # scenes, words for each, shapes, safety rules

    The map is .showcase/explore/map.md. The voice reads about 3 words a second, which is where the word budget comes from.

  4. 7

    Write the scenes

    {
  id: 'moved',
  say: 'One click keeps only the shipments whose date moved.',
  run: async ({ page, stage, untilSaid }) => {
    await stage.click(page.getByRole('button', { name: 'Moved only' }))
    await untilSaid(1)
  },
}

    In video.ts: one spoken line per scene, and what happens on screen while it is said.

  5. 8

    Draft, then render

    bunx showcase make --draft     # picture only, until every check says ok
bunx showcase make             # voice, music, effects, every shape

    If a draft stops, the message names the scene, and out/failed.png shows the page at that moment.

  6. 9

    Watch it, with the sound on

    The videos are in out/: one per shape, and a named copy per platform. The checks measure the file. They cannot hear it.

Commands you will use

CommandDoes
showcase doctorShows what is installed and what is missing
showcase setupOne-time: the browser and the voice
showcase init --configStarts a video: config, scenes file, skills
showcase init --config --motionStarts a presentation: no product is filmed
showcase exploreMaps the product's screens and controls
showcase planPrints the work order
showcase make --draftEvery shape, picture only
showcase makeEvery shape, with sound and checks
showcase make --theme clayTries a theme for one run, beside the others
showcase themesLists the themes, and your own
showcase theme new acme --from glass --accent "#FF5A1F"Starts a theme of your own
showcase theme check acmeIs it safe, and readable on video?
showcase loginSigns in once, in a visible browser, for a product that needs it

Change it later

  • What is said: Edit a "say" line and run make again. Only changed lines are voiced again.
  • The look: Change "theme" in the config.
  • The length: Change "length", then run plan for the new word budget.
  • Where it goes: Change "platforms". Each platform gets its own file.

When something goes wrong

  • A command is not found: Run showcase doctor.
  • The length check fails: The report says how many words to add or cut.
  • The layout check fails: Something is cut off or under a caption. The report names the scene.
  • A render stops: Open out/failed.png.

The longer version, with every setting, is in the user guide and the ten step first video guide.