Product Video — Website-URL zum 15–25-s-Remotion-Promo

Product Video from URL

Pipeline: URL → extract → draft brief → blind-spot questions → build → review → render.

The creative brief template lives in references/video-brief.md. The extraction script is scripts/extract_site.mjs. Read the brief template before step 4.

1. Check the environment

node --version   # need 18+

Fetching arbitrary websites and downloading Chromium both need open network access. In Claude Code on the web, the environment's network access must be set to Full (the default "Trusted" allowlist blocks most client sites and the browser download). If a fetch fails with a network/proxy error, tell the user that in one line and fall back (see step 2 fallback).

2. Extract the site

mkdir -p work && cd work
npm init -y >/dev/null && npm i playwright@1 >/dev/null
npx playwright install --with-deps chromium   # drop --with-deps if no root
node <skill-dir>/scripts/extract_site.mjs "<URL>" ./site

This writes to ./site/:

• site.json — title, meta/OG tags, headings, CTAs, nav, body text, ranked brand colors, CSS color variables, fonts, logo candidates, subpages crawled
• hero-desktop.png, hero-mobile.png, full-desktop.png, section-*.png, page-*.png
• logo.* if found

claims is a broad net (anything with numbers) — treat it as a list to review, not a list of claims to use.

If Chromium is already installed elsewhere (e.g. /opt/pw-browsers), skip the install and set PLAYWRIGHT_BROWSERS_PATH to that path.

Then look at the screenshots (open the PNGs) — don't trust the JSON alone. Judge: is there real product UI visible, or only marketing graphics/stock photos? Which sections would crop well into a close-up? Do the extracted colors match what you see?

Fallback (no browser / blocked): fetch the page text with whatever web-fetch tool exists, fill what you can, and mark colors, logo, and screenshots as missing — they become blind-spot questions.

3. Draft the PROJECT DETAILS

Fill every field of the PROJECT DETAILS block. Tag each value with its source:

• [site] — stated on the site (quote or near-quote)
• [inferred] — reasonable reading of the site
• [guess] — not supported; needs confirmation

Rules:

• Claims: Only use metrics/testimonials/claims that appear verbatim on the site, and tag them [site]. Never invent numbers, customer counts, or results. If the site has none, the video has none.
• Features: Pick the 2–3 that are most visual and most concrete. A feature that can't be shown on screen is a weak pick.
• Main benefit: One sentence, user-outcome language, not the company's tagline unless the tagline is already a clear benefit.
• Colors: Pick a restrained set from the extraction (background, text, 1 brand, 1 accent max). Give hex codes.
• Assets: List actual file paths from ./site/ and say what each shows.

4. Ask blind-spot questions — once, batched

Before building, send ONE message containing the drafted details block plus questions. Rules:

• Ask only what changes the video and couldn't be resolved from the site. Skip anything already clear.
• Every question carries your proposed default, so the user can reply "go" and you proceed.
• Max ~6 questions, ordered by impact. Short.

Check these blind spots (ask only the ones that apply):

1. Purpose — cold-pitch sample to the business, their paid ad, a portfolio piece, or a launch video? (Changes CTA, tone, aspect ratio.)
2. Aspect ratio — 9:16 (Reels/TikTok/DM) vs 16:9 (website/YouTube/LinkedIn). Default: 9:16 for pitches/ads, 16:9 for site embeds.
3. Audience — if the site serves several (e.g. buyers and sellers), which one?
4. Feature choice — if more than 3 candidates, confirm your picks.
5. Product visuals — if screenshots show no real UI (only photos/illustrations), ask: use simplified recreated UI, use their photography, or does the user have real app screenshots?
6. Logo — missing, low-res, or only a favicon → build a clean wordmark from the brand font?
7. Claims — site has stats/testimonials: include them (verbatim) or keep it claim-free?
8. CTA — no clear CTA on site, or purpose is a pitch → what should the end card say/link?
9. Physical/local business with no app → device mockup doesn't fit; propose an alternative central visual (their photos, a booking/menu card, a map pin).
10. Music/voiceover — the brief is silent video; mention only if the user's purpose implies sound (ads).

If the user says "just go" or answers partially, use your defaults and state them in one line.

5. Fill the brief and execute it

Read references/video-brief.md. Insert the confirmed PROJECT DETAILS (remove the source tags) into it and save as work/brief.md. Then follow the brief as your own instructions: storyboard first (show it briefly, no need to wait for approval unless the user asked to review), then build.

Remotion setup (non-interactive)

mkdir video && cd video
npm init -y >/dev/null
npm i remotion @remotion/cli react react-dom
npm i -D typescript @types/react
npx remotion browser ensure
mkdir -p src public && cp ../site/*.png ../site/logo.* public/ 2>/dev/null

All remotion / @remotion/* packages must be the exact same version. Entry: src/index.ts calls registerRoot(Root); src/Root.tsx registers the <Composition>. Reference assets with staticFile('name.png') and <Img>. Load web fonts with @remotion/google-fonts when the brand font is a Google font, else a close fallback.

Structure:

• src/content.ts — all copy, colors, asset filenames, scene durations (in seconds). This is the file the user edits.
• src/scenes/*.tsx — one component per scene.
• src/components/* — device frame, text reveal, etc.
• Total duration computed from content.ts scene durations.

Use interpolate + spring from remotion, <Sequence> or @remotion/transitions <TransitionSeries> for scenes. No CSS animations or Math.random() (non-deterministic renders); use random('seed') from remotion if needed.

6. Review before final render

Render stills at representative frames (start, middle, and end of each scene) and look at them:

npx remotion still src/index.ts <CompId> out/f-<n>.png --frame=<n>

Check against the brief's review list: readable text at phone size, nothing clipped, one focal point per scene, screenshots not stretched, ending holds ≥1.5s. Fix, then re-check the frames you changed.

7. Render and deliver

npx remotion render src/index.ts <CompId> out/<product>-video.mp4

Deliver: the MP4 path, the brief storyboard (short), and a 4-line edit note — copy/colors/durations live in src/content.ts, assets in public/, preview with npx remotion studio, re-render with the command above. State any defaults you assumed in one line.