guizang-product-video-skill: An Agent Skill That Renders Product Update Videos in Code

A skill, not a video generator

The project describes itself in Chinese as a product video skill: it reuses real product components and an existing design language, and produces software update promos using code. What it does not do is ask a generative video model for a clip. The main visuals are rendered from code, real components and a timeline, and the soundtrack is synthesised from code as well. The output is described as a publishable MP4 plus a video project you can keep editing and re-render, along with a few key still frames, and a record of component sources, asset sources, sound events and checks. The repository is written for AI coding tools: the skill supports Claude Code and Codex, and the workflow lives in SKILL.md, which holds the workflow, the hard constraints and the tool entry points.

Installing the skill into Claude Code or Codex

Installation goes through a generic skills CLI, and the same command covers both tools.

npx skills add https://github.com/op7418/guizang-product-video-skill --skill guizang-product-video-skill

You choose the AI tool and the install scope when prompted. If you would rather place the files yourself, the manual route clones the repository into the skills directory that matches your tool. For Codex:

mkdir -p ~/.agents/skills
git clone https://github.com/op7418/guizang-product-video-skill.git \
  ~/.agents/skills/guizang-product-video-skill

For Claude Code the target directory differs:

mkdir -p ~/.claude/skills
git clone https://github.com/op7418/guizang-product-video-skill.git \
  ~/.claude/skills/guizang-product-video-skill

A ZIP download works too: unpack it and drop the folder containing SKILL.md into the right skills directory, named guizang-product-video-skill. After installing, reopen the session so the tool reads the new skill. If you cloned manually and have not changed local files, you can update with `git pull --ff-only` from the install directory.

Seven stages from repository to finished clip

The workflow is described as a numbered path, and each stage has a defined output. First the scope is fixed: the product, the update range, the audience, the release platform, the aspect ratio, the language and the style, plus any reference video. Second, real content is found by checking versions and code, confirming feature status and mounting real components scaled for video. Third the direction is proposed, with three visibly different options and a chosen one, where every visual device has to be justified by something the product actually has, and font sizes, interface scale and shot lists are written as concrete numbers before work starts. Then shots are built one at a time, with GSAP driving the main timeline, Three.js and canvas providing the background layer and real components driven by real clicks and input, with a still frame produced for comparison after each shot. Sound is scored to the shot list, effects are aligned to measured timings, and the review pass looks at a contact sheet, every transition and every dense frame before export. A cover in 3:4, 4:3 and 16:9 is an optional last step.

Three visual modes and the fallback styling

The skill asks about style on the first run and remembers choices already made, so the question is not repeated every time. The recommended mode is repo, which keeps the product's own design so the promo looks like the software. The default mode uses a built-in warm white and charcoal style with card hierarchy and Chinese and English typography. The hybrid mode keeps the real interface inside the product but treats the outer framing, text and pacing as something built for sharing. Across all three, feature shots prefer the original components, and the default styling mainly handles the outer layout and visual packaging. When a component cannot be mounted because of platform or framework limits, the skill is supposed to say why and offer an alternative. The licensing detail matters here: components and styling adapted from CodePilot in the default mode keep their original BSL licensing, and the repository points to a source note and a separate CodePilot licence file for the exact terms.

Music picked in order, effects measured before placement

Background music is chosen by priority: a track you supply, then a music generation model that genuinely runs on your machine, then original synthesis written in code. When synthesising, the arrangement source is kept so it can be edited, sections are laid out against the shot boundaries of this particular film, and the timbre is picked to match the product's character. The repository ships two example synthesis styles, a light keyboard one and a cinematic electronic one, and the guidance is to borrow the technique rather than the tune. Sound effects follow a similar rule. Existing asset libraries are searched first, with the source, the licence and the matching action recorded, and for categories where nothing suitable exists the package provides 11 code-synthesised WAV files whose synthesis parameters can be adjusted. Music and effects are mixed separately: clicks, popups, switches and completion reminders get their own sound events, and when a key feedback sound lands the music briefly drops so the notification is actually audible.

What the environment needs and where integration hurts

The bundled starter project uses React, esbuild and Playwright to produce frames, with FFmpeg doing the encoding, and an existing HyperFrames project can be reused instead. The dependency list is explicit: Node.js 22 or newer with npm for building components and running the browser renderer, Python 3.9 or newer for project setup, environment checks, scoring and mixing scripts, FFmpeg and ffprobe for audio handling and encoding, Playwright Chromium for stills and frame-by-frame rendering with WebGL on SwiftShader, and React, GSAP and Three.js inside the video project. The product's own repository and its dependencies are needed as well, since the real components are mounted directly. Integration effort varies by framework. React codebases have ready examples, and monorepo workspace packages or unusual TypeScript compiler options can be mapped and relaxed in the video project's integration.config.mjs without touching product code. Components needing a server, a native runtime or complex context may require a display adapter, and an interface that cannot be connected at all is rebuilt faithfully from source with each gap marked in the evidence.

What you get back, and what automation cannot check

The deliverables are listed as four things: a publishable MP4, a video project that can be modified and re-rendered, a few key still frames for confirming direction or building a cover, and a record of component sources, asset sources, sound events and checks for later tracing and adjustment. The project is explicit about the limits of that last item. Automatic checks can find some structural, file and timeline problems, but whether the text is understandable, whether the visuals feel right and whether the sound works still require watching and listening. The project also distinguishes content that has been verified from content that remains conditionally limited. The same honesty appears in the FAQ section, where the skill is described as a production process an AI completes step by step, not a one-shot converter that ignores the project environment, since a repository address alone sometimes still requires downloading the repository, filling in dependencies and confirming demo states.

The AGPL-3.0 licence and the separate commercial route

The repository carries the GNU AGPL-3.0 as its main licence, and the file listing shows a COMMERCIAL_LICENSING.md alongside LICENSE, described as an entry point for separate commercial licensing. The AGPL obligations for network use are the part to weigh, since the tool is designed to be run through an AI coding service rather than locally, and the obligations attach to how the software is offered rather than only to how a modified binary is distributed. That is a question about your own usage and needs a review of the licence text. The fallback styling carries its own separate terms, as described earlier, which is the second licensing thread to follow. On maintenance, the repository is not archived, the last push was on 2026-10-09 and there are no GitHub releases, so there is no tagged version to pin. The test suites can be run locally with the standard library test runner.

Editorial conclusion

This skill fits a maintainer of a product with a real design system who wants a release clip built from the actual interface rather than a generic template, and who is willing to supervise an agent through a multi-stage production. It is the wrong tool if you need a one-shot conversion from a commit log, or if the default styling matters more than your own components, since the fallback assets carry separate licensing terms. Before running it, install the skill, then check that Node.js 22 or newer, Python 3.9 or newer and FFmpeg are present, and confirm the composition of the soundtrack with the music model running on your machine rather than a hosted service.

Frequently asked questions

Official sources

1. Issues
2. License: AGPL-3.0
3. op7418/guizang-product-video-skill on GitHub
4. README