Preview Three Concepts, Pick One to Make a Video xilo-opus-video

Compare three concepts before choosing a direction

You want a product video, but have not decided how it should look. xilo-opus-video proposes three distinct concepts, each with a key frame or a few seconds of motion. Review them, choose one or request a combination, then have the assistant produce the full video.

The video above is @Cryptoxorz’s introduction to eight video skills, made with this one. The repository was created by Kianzzz (周行). Its first section shows three approaches to the same subject. The complete video is a finished example, rather than a direct export of three concept previews.

The benefit is making creative decisions early. Claude Opus 5.5 plans, writes and revises animation code; a browser and FFmpeg render the video. The model does not directly generate the footage. In this tutorial, use a short product video to practice writing a brief, choosing a concept and adapting the result to your own content.

Install the skill and check rendering tools

Run the author’s installation command in a terminal:

npx skills add Kianzzz/xilo-opus-video

Follow the installer’s prompts to install the skill for Claude Code. Rendering requires Python 3.9+, NumPy, Python Playwright, FFmpeg and a working Chromium or Chrome browser. The installer’s Node.js requirements are separate from the skill’s Python requirements.

To install manually, clone the repository and copy the skill directory:

git clone https://github.com/Kianzzz/xilo-opus-video.git
mkdir -p ~/.claude/skills
cp -r xilo-opus-video/skills/xilo-opus-video ~/.claude/skills/
# Check the local rendering tools
python3 ~/.claude/skills/xilo-opus-video/scripts/check_env.py

Choose one route. The skill also checks the environment on first use and reports missing tools. Its Python dependencies are numpy and playwright; install the browser with python3 -m playwright install chromium. If your system restricts global Python package installation, use a virtual environment and activate it in the terminal where you launch Claude Code. Specific animation frameworks may need additional dependencies; review the proposed approach before installing them.

The commands were checked against the repository documentation and source. We have not installed upstream dependencies or run a video render for this tutorial.

Set a clear goal for the three concepts

“Make it look premium” leaves most decisions unspecified. Start with the audience, the one thing they should learn and the materials you already have. Here, imagine introducing a booking product through one process: choose a time, enter your details, receive confirmation.

Send this to Claude Code. These example requests were written for this tutorial, rather than supplied by the creator. We have not used them to generate a video.

Use xilo-opus-video to make a 15-second product video.
The product is a booking tool. Viewers are customers using it for the first time.
Explain: choose a time, enter your details, receive confirmation.
I will provide the product logo, screenshots and approved copy. List any missing materials.
Use 16:9, code-synthesized music and no voiceover.
Propose three clearly different concepts, including shot summaries, style, technical approach, sound and estimated rendering time.
Make a key frame for each; use a 2–4 second preview when motion is essential to judging a concept.
Do not produce the full video yet or invent features and promises absent from the materials.

Compare more than attractive images. Does the UI concept make the sequence clear? Is the product still recognizable in the stylized concept? Can a continuous shot explain the idea within the allotted time? Choose visuals that help the audience understand the product.

What to compare	Question to ask
Information hierarchy	Can you recognize the point of the shot without reading its description?
Product and style	Does the style suit the audience while keeping the product prominent?
Motion	If transitions or camera movement are the selling point, is there a motion preview?
Production effort	Are time estimates based on preview renders, and are missing assets identified?

A key frame lets you judge composition, but not pacing. If two concepts mainly differ in how they move, watch short previews before deciding.

Save the approved direction in brief.md

If you prefer concept B’s style but concept A’s process explanation, say:

Use concept B's visual style with concept A's three-step sequence.
Show the combined shot plan first, then save it in brief.md after approval.
Include the product name, screenshot sources, shot durations, music approach and output settings.
Keep the approved logo and copy. Do not introduce new feature claims.

The approved brief.md guides production and can provide a starting point for your next video. Projects default to opus-video/<project name>/ in the current working directory. Materials go in source/, concept previews in previews/, and the animation code is usually index.html. A chosen framework may use its own project structure.

Read the brief before production. If the central message is still unclear, revise the plan first instead of asking the assistant to guess while rendering the full video.

Inspect shots before the full render

Ask the assistant to build the approved plan and inspect stills from each shot. Check that the subject is clear, text stays within the frame and viewers have enough time to read it. Once the shots are assembled, review a low-resolution draft for pacing and transitions before the final render.

Build a first version from brief.md. Inspect stills from the start, middle and end of each shot, fixing overlaps and text overflow first.
Show a draft of the full video so I can check that all three steps are readable and the music matches the motion.
After approval, render the final version and deliver the MP4, brief.md, editable project and review notes. List known limitations.

The animation page exposes window.render(t) to draw a particular moment. The renderer captures frames and encodes them as video, allowing individual time ranges to be inspected or rebuilt. You do not need to write that interface yourself; ask the agent to follow the skill’s rules.

Exports normally appear in opus-video/<project name>/out/, sound files in audio/, and inspection images and notes in qa/. Use the filename actually delivered by your project: the skill documentation includes both video.mp4 and final.mp4 examples, so a single hard-coded filename is not a reliable guide.

Playback answers questions stills cannot: do actions match the sound, and does text remain visible long enough? Voiceover needs an additional speech tool and its configuration. This example uses no voiceover to keep the first project simpler.

Change one part while preserving what works

If a product screenshot is too small, request a focused revision:

Only revise the shot showing the booking page. Enlarge the screenshot so available times are readable in a phone-sized preview.
Keep the approved copy, shot order, palette and total duration.
Show a new still of that shot, then render the affected segment. After approval, export the full video again.
Update brief.md and the review notes.

That is a composition change, so it does not require three new concepts. Changing the goal from explaining a process to announcing a feature is different: the takeaway has changed, so revisit the plan and storyboard. Define the scope of a small revision; replan when the purpose changes.

Apply it to your product or content

Fill in this brief before requesting three concepts:

Use xilo-opus-video to make a video.
Audience: [who will watch and what they already know]
Takeaway: [one thing they should remember or learn to do]
Content and facts: [article, product materials or approved copy]
Available assets: [logos, screenshots, music, reference videos and paths]
Reference priorities: [structure, pacing or visual techniques to borrow]
Output: [duration, aspect ratio, voiceover and music approach]
Must preserve: [brand colors, key wording and asset restrictions]
Show three distinct concepts and previews before writing brief.md and producing the video.

A reference can communicate pace and style; product facts should still come from your materials. When changing subjects, reuse useful shot structure but review the copy, assets, duration and sound. Replacing only a title can leave claims from the old product in the new video.

For more detail, see the author’s concept format, production rules and skill instructions. The repository uses MIT; rights to third-party music, logos and reference materials must be checked separately.