Turn the product into a 30–60 second promo video:Script (brief.json) → Voiceover → HTML motion effects → Frame-by-frame rendering → Audio mixing → MP4。
All visuals are HTML/CSS, driven by a time-advancing runtime, with headless Chrome taking screenshots frame by frame, so text is crisp, every frame is reproducible, and switching styles, brand colors, or landscape/portrait orientation requires no redoing of assets.
Relationship with store-release-kits :
store-promo-shots makes static store promo images; this Skill makes dynamic promo videos, and the screenshots used by both can be shared.
Hard rules
- The interface must be real. Product screenshots come from the official website or real screenshots provided by the user; do not draw interfaces that do not exist in the product.
- Numbers must have a source. Numbers such as user count and growth rate must be either provided by the user or verified from financial reports or official announcements, and the time must be written in the kicker (e.g., "Q2 2026"). If it cannot be verified, do not include the stats scene.
- Use the original logo file. Prefer vector SVG, followed by the original transparent-background PNG. Do not use a screenshot with a background as the logo, and do not draw it yourself.
- No emoji. Emoji must not appear in titles, voiceover, labels, or cards; it looks unprofessional. Use for card icons
Lucide line icons, referenced by name (
"icon": "gamepad-2"), with colors automatically following the style.make.pyBefore rendering, the entire brief is scanned; if emoji is found, it reports an error directly and lists the locations. Kaomoji (such as(゜-゜)つロ) and arrows do not count as emoji. - Making someone else's product (for example, using Bilibili as an example) can only be used for demonstrations and internal proposals; do not impersonate an official release.
Process
1. Collect product materials
If the user provided materials, use the user's. If not, scrape from the official website:
cd <本 Skill 目录>/scripts
npm install --silent # 第一次用时装 puppeteer-core 和 lucide-static（图标）
node fetch_brand.mjs https://example.com <工作目录>/brand
Things scraped back:brand.json(title, description, keywords, navigation text, primary color candidates, logo candidates),
logo-*.png、logo-*-raw.*(original logo image),icon-*、shot-desktop*.png(three screens),shot-mobile.png,
and img-*: all images and video covers in the page body with width ≥ 600. Interface images and scene images in published articles and product pages are usually here,
and are much more useful than first-screen screenshots.
After scrapingyou must review it manually. For common pitfalls, see references/brand-extraction.md：
- A product homepage often has only a login box or a slogan; the real interface images are in thepublished articles / product introduction pages, so scrape both places
- A logo screenshot will include the banner behind it; use the
-raworiginal image, or go to another page (App download page, login page) to find the SVG - When the logo only appears in promo images, use
extract_logo.pyto cut it out to a transparent background (see below) - Primary color candidates are sorted by area; the first one is not necessarily the brand color, so check it against the logo color
- The slogan is often not on the page; look it up (official website title, App Store subtitle, brand ads)
- Some sites show a Cloudflare verification to headless browsers, and it is more likely to trigger after several consecutive scrapes; if the body text cannot be scraped, use screenshots and search results
Extract the logo from promotional images:
python3 scripts/extract_logo.py og-image.png logo.png --mode white --box 540,440,1420,660 # 彩色底上的白字
python3 scripts/extract_logo.py og-image.png logo.png --mode on-dark --box 400,150,1200,560 # 黑底上的彩色/发光字
python3 scripts/extract_logo.py banner.png logo.png --mode on-light # 白底上的深色字
When cropping part of an interface from a screenshot, use PIL to crop by pixels directly (screenshots are at 2× resolution, so multiply webpage coordinates by 2).
The video must include:the logo, slogan, primary color, core use cases, and real interface。
2. Write the script in brief.json
Copy assets/brief.template.json. Use one object per scene;say is the narration for that scene.
Scene duration is determined automatically by narration length; manual timing is unnecessary.
Available scene types:
| type | Visual | Required |
|---|---|---|
logo |
Logo entrance + slogan | tagline |
slogan |
A large headline explaining the product in one sentence | title |
feature |
Copy on one side and a screenshot on the other (in a browser or phone frame), with an optional slow zoom toward the focal point | title image |
cards |
A grid of scene cards (2–6, with line icons or images) | items[{icon/image,label,desc}] |
stats |
Animated number counters | items[{value,label}] |
tags |
Tag flow:danmaku flying comments / cloud scattered pop-ins / marquee full-row scrolling |
items[] |
gallery |
A wall of screenshots pans slowly beneath a central line of text | images[] |
end |
Logo + slogan + call-to-action button | cta |
Typical structure (about 40 seconds, 6–8 scenes): logo → slogan → 2–3 feature/cards scenes → stats or tags → end. For script and narration writing, see references/script-writing.md。
3. Choose a style
For descriptions, palettes, and suitable products for the eight styles, see references/styles.md：
| Style | In one sentence | Suitable for |
|---|---|---|
apple-keynote |
Large type on black, blurred fade-ins, slow pacing | Hardware, flagship features, premium brands |
saas-glow |
Dark glowing grid, screenshots standing up in 3D | Software, AI, developer tools, B2B products |
kinetic |
Oversized type slams in, flash cuts, a different background color per scene | Short-video ads, campaigns, youthful brands |
flat-mg |
Floating geometric shapes, bouncing letters, color-block transitions | Consumer apps, communities, education |
editorial |
Paper texture, serif type, upward mask reveals, page numbers | Content, culture, lifestyle |
neo-brutal |
Thick outlines, hard shadows, stepped motion | Independent development, creative tools, streetwear brands |
cyber-glitch |
Neon scanlines, scrambled-text decoding, glitch transitions | Games, esports, trend-focused technology |
bento |
Light-gray rounded cards, zoom-in entrances | Feature-rich products, productivity tools |
If the user has not specified a style, choose 2–3 distinctly different styles that fit the product and produce a version of each for the user to choose. Brand colors automatically override the style's accent color.
4. Produce still previews before rendering
python3 scripts/make.py brief.json --style flat-mg --preview # 只出 HTML + 每场静帧（几十秒）
python3 scripts/make.py brief.json --style flat-mg # 出成片（40 秒的片子约 2 分钟）
python3 scripts/make.py brief.json --style kinetic --format 9:16 # 竖版
python3 scripts/make.py brief.json --style kinetic --remix # 只改了配乐/音量时，不重渲画面
Always start with --preview, then assemble an overview image and inspect it yourself：
ffmpeg -y -loglevel error -pattern_type glob -i "out/<style>-16x9/stills/s*.jpg" \
-vf "scale=640:-1,tile=2x4:padding=6" -frames:v 1 out/<style>-16x9/contact.jpg
Checklist: check for overflowing text or awkward line breaks, headings overlapping cards or numbers, subtitles obscuring content, login pop-ups in screenshots, and logo visibility against the background. Fix these before producing the final video.
After rendering, extract more frames to inspect the motion: one at each entrance and one midway through each transition (ffmpeg -ss <秒> -i x.mp4 -frames:v 1).
Scene start and end times are in out/<style>/timeline.json .
5. Delivery
Outputs are in brief 所在目录/out/<style>-<format>/：
<name>-<style>-<format>.mp4: final video (H.264 + AAC)index.html: open directly in a browser for live preview;?t=12.5pauses at a particular secondstills/、timeline.json、voice/、bgm.wav
Tell the user which narration engine was used, that the music is a synthesized temporary track (licensed music is recommended for official campaigns), and where the data came from.
Narration and music
- Try narration engines in this order:
edge-tts(Microsoft online voices, the most natural) → macOSsay(Tingting, more mechanical).voice.enginecan specifyedge/say/kokoro/none; each scene can also usevoiceFileto substitute a human recording. Microsoft's endpoint occasionally rejects edge-tts (403); it then falls back automatically to say;state which engine was used when delivering。 - Each style has a default voice and speech rate (see
make.py'sSTYLE_META); override them withvoice.voice/voice.rate. - For background music,
"bgm": "auto"synthesizes a copyright-free temporary track matching the style (scripts/bgm.py, with five moods). For the final video, set"bgm": "music/xxx.mp3"to use licensed music. Music volume automatically ducks during narration.
Customization and extension
- Change a single scene's transition: set
"transition": "circle"(options: cut fade blur push pushUp zoom circle shapeWipe flash glitchCut stripes) - Change a single scene's background theme: add extra CSS to the brief's
cssfield - Brand font:
"fontFile": "fonts/xxx.ttf" - Change colors:
product.colors.accent / accent2, or usetokensto override any variable (bg, fg, sub, card…) - Add a style: in
templates/styles.js, add an entry (tokens + text/image/card entrances + transitions + background);templates/styles.css, add the skin;make.py'sSTYLE_META, add music and voices;references/styles.md, document it - Add a motion preset:
templates/runtime.js'sTEXT/IMAGE/TRANS
Examples
examples/ contains five complete examples for real products (brief.json + overview images), using the same skill with different styles:
| Product | Style | Asset sources |
|---|---|---|
| Bilibili | flat-mg / kinetic / saas-glow / cyber-glitch / kinetic portrait | bilibili.com, app.bilibili.com, 2026 Q2 financial report |
| Meta Muse | bento | muse.ai |
| SpaceXAI Grok Bot | editorial | x.ai/bot、x.ai/news/introducing-grok-bot |
| OpenAI dots | apple-keynote | openai.com/dots |
| Manus Cue | neo-brutal | cue.im、manus.im/blog/introducing-manus-2-0 |
Dependencies
Node 18+, ffmpeg, Chrome (or puppeteer's cached chrome-headless-shell), Python 3 + numpy (for music synthesis).
Optional:uvx(edge-tts). No image generation API is called.
Limits
- Does not generate product interfaces or shoot live-action footage. To demonstrate an interaction, ask the user to record the screen and place it in
feature(currently only still images are supported; extract keyframes from recordings first). - Synthesized music is only a temporary track and cannot replace the final music.
- Chinese text uses the system PingFang font (Semibold is its heaviest weight). For heavier type, use
fontFilein the brief to specify a font file.