Communitygithub.com

tin-computer/tin

Capture a live product at phone size and render a narrated 9:16 demo video.

tin 是什麼?

tin is a Claude Code agent skill that capture a live product at phone size and render a narrated 9:16 demo video.

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tin-computer/tin/tree/HEAD/codex_procedures/creative.product_demo/skills/product-demo-video

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Product demo video procedure

Everything happens through tin-studio (run tin-studio help). Work in the Studio work directory provided by the runtime (call it WORK; API runs use /home/tin-work/studio, historical OAuth runs use /home/user/.tin-lite/studio); only the finished MP4 goes into the project checkout. There is no real-time screen recording: you capture settled keyframes and the renderer synthesizes the scroll, tap, zoom, and caption motion, which is why the result is smooth.

1. Plan the story

  1. Read wiki/INDEX.md (## Product, feature map, positioning). Read angle and notes.
  2. Run tin-studio inspect <product_url> WORK/inspect. Read the JSON: headings with their scrollY, actions with ready-made selectors (prefer ones with inHeader: true for navigation), text, docHeight. Open WORK/inspect/inspect.png and WORK/inspect/inspect-full.png with your image viewer and note what each screen shows. Inspect one or two more pages if the story needs them (docs, pricing).
  3. Decide the format script-format.md describes: one hook of at most seven words that names the pain (angle if given), then five to seven steps. Each step is one visible moment with one voice line of at most fourteen words and one caption of at most five words. Mark exactly one *word* per caption and in the hook. The last step lands on the call to action the page actually offers (trial, pricing, install) with a [warm] line. Total speech at most 75 words.
  4. Claims come from the page text or project memory; numbers must be visible on screen in the step that says them.
  5. Write every line as a creator talking to the viewer: present tense, second person, the thing itself. Never narrate the page ("the page shows", "this section lists", "the site's example"); say what it means for them ("your agent gets its own number"). Write amounts and counts as words, and keep brand names inside a full sentence.

2. Write and capture

  1. Write WORK/script.json in the format from script-format.md.
  2. Run tin-studio capture WORK/script.json WORK/out. Open every WORK/out/frames/kNNN.png with your image viewer and check: the page loaded (no blank, no error, no interstitial); no cookie banner or popup covers the content (add an early click step on its dismiss button if one appears, or choose a page without it); each scroll lands where the caption expects; each click hit the intended element (the click keyframe shows the new page). A keyframe that is wrong is a script fix: better selector from inspect, scrollTo, a bigger settleMs, or a different page. Recapture until every keyframe is right.

3. Voice

  1. Run tin-studio voice WORK/out --voice <voice> --language "<language>". Add [excited] on the hook line and [warm] on the last; otherwise plain sentences. Each run prints the clip length per step; if a clip is longer than five seconds, shorten that line.
  2. Voice is capped per run (24 lines, 3000 characters). Re-running keeps unchanged lines, so edit a line in WORK/script.json, recapture is not needed, and run voice again.
  3. A line the provider refuses is reported as REFUSED with the reason and the other lines are kept. A content_policy_violation is the provider's opaque text checker misfiring: first run voice again without any --style of your own (the default style is known to pass), then rewrite that one line with plainer wording and run voice again. Never resend an unchanged refused line, and never spend more than two rewrites on one line; drop it and let the caption carry the step.

4. Preview, render, check

  1. Character: when character is set, the file is /home/user/project/characters/<character>.svg; run tin-studio check on it first. If it is missing or rejected, render without it and say so in the message.
  2. Preview three frames before the full render (hook, a mid scroll, the final step): tin-studio frame WORK/out WORK/p1.png --at 1.5 --bg <backdrop> [--character <svg>], and again at about half the total length and at the end. Look at them: captions readable and centred, the character's face visible and not covering the caption, the phone card showing the right screen, backdrop not clashing.
  3. Render: tin-studio render WORK/out WORK/<slug>.mp4 --bg <backdrop> [--character <svg>]. It prints the duration. Then tin-studio check WORK/<slug>.mp4 must print OK and tin-studio probe should show 1080x1920 with an audio stream.
  4. Longer than 40 seconds: cut a step or shorten lines, re-run voice, render again.

5. Deliver

Copy the checked MP4 to the declared output path and nothing else. The final message is the storyboard: hook, then per step the caption, the voice line, and what is on screen; the total duration, voice, backdrop, and character used; and any claim you softened because the page did not support it.

Rules

Never sign up, log in, fill a form, or press buy, send, delete, invite, or contact. Do not use any account. Do not capture pages behind a login. Do not edit the page's DOM to fake a state. Do not create any file in the project checkout other than the declared output.

相關技能