Chans-gh/ai-coding-video

AI Coding Video: A Style Library for Creating Videos with Code

For content and maintenance, see README.md. This document only explains how an AI assistant can look up and use the library.

When to Use

• The user wants to set a style for a video or asks, "What styles exist / which style fits X."
• A style description is needed to write scene prompts or directly write rendering code (Canvas, WebGL, SVG, Three.js, Manim, Remotion, etc.).
• The user wants to preview how a certain style looks in their project (produce a sample clip) or wants to solidify a chosen style (create a style package).
• The user has video recordings, screen recordings, photos, or data, or wants to use AI-generated images, videos, or speech synthesis as assets, and wants to edit them into a video with code.
• The user needs to select background music, sound effects, or Chinese narration voice for a video.

Three-Level Workflow: From Style Selection to Style Package

Level	What to Do	Output	When to Use
Level 0: Dictionary	Select 2–3 candidates from the library, provide prompts and reasoning	Candidate list + style prompt and technical path for each	User hasn't decided on a style yet
Level 1: Sample Clip	Apply candidates with the user's brand colors, fonts, and real content, run for 3–5 seconds in the user's own tech stack	One landscape 16:9 and one portrait 9:16 sample clip + extracted frame collage for the user to review	When a project wants to change or add styles, done in a single conversation
Level 2: Style Package	Expand the user-approved style to cover common presentation types for the project (opening, explanation, data, transitions, subtitles, etc.)	Reusable code modules + style documentation written into the project's standards (color palette, fonts, motion, sound, prohibited items)	After Level 1 is approved

Each level requires user approval before proceeding to the next. Before creating a Level 1 sample clip, first confirm that the technical path is feasible in the user's project environment (e.g., browser, GPU, Python).

How to Look Up (In Order, Do Not Read Everything at Once)

1. Unsure which style to use → First distinguish between three categories: all visuals generated by code (C), uses real footage (T), uses AI-generated assets (G). If the user specifies the video type (talking-head, e-commerce, music video, news...), first check the "By Content Type" table in index.md, referencing columns T and G side by side. For pure-code styles, find the corresponding row in the remaining index tables (topic, business use, audience, emotion, platform & format, assets & conditions); styles that appear repeatedly across tables are the top picks. Provide 2–3 candidates with reasoning.
2. Known style name or ID → Find the ID (e.g., C-013, T-007) in the "Style Directory" of index.md, open the corresponding styles/*.md file (C styles are organized by technology, T styles in styles/footage.md, G styles in styles/generated.md), and locate the entry via anchor #C-013.
3. Need to write a complete prompt or rendering code → Read prompting.md: 8 control points, general template, production pipeline, examples, common pitfalls and solutions.
4. Need to filter by technology (e.g., "only SVG," "need Three.js") → Read tags.md and data/styles.json; each entry has id / name / theme / content_type / materials / fit / prompt / layer / suggested / verified / render_code / pack / refs (C styles have a theme; T and G styles have content_type and materials).
5. Need to add sound → Read sound.md: first set background music and sound effects based on topic, then choose narration voice based on use case.
6. Need to use assets (T, G categories) → Read materials.md: where assets come from, how to check licenses, how to generate assets, how to unify processing before passing to code, how to match sound.
7. Need to produce a sample clip (Level 1) or create a style package (Level 2) → Read making.md: pre-production checklist, sample clip writing and self-check, five methods for style packages, and what to write in STYLE.md.
8. Need to write rendering code → First look at the code included with this skill: samples/API.md (sample clip skeleton and function quick reference), samples/<id>/ (verified scene.js, sound.py for each style), packs/<name>/ (style packages). The paths in the entry's "sample code" or "style package" link text are actual locations within this skill's directory—no need to fetch from GitHub.

Usage Rules

• The text code block in an entry is the style prompt—use it as-is, then supplement with topic, specifications, sound, and workflow according to the template in prompting.md.
• "Technology (verified)" means the repository contains code that can produce a sample clip; "Technology (suggested)" is a recommended approach that hasn't been verified. Clearly distinguish this when explaining to the user.
• Using only the style name will degrade into a generic flat style: you must include 3–5 signature elements, prohibited items, and reference works.
• For reference works, learn only composition, rhythm, and color logic—do not copy characters, logos, or music. This applies even to "tribute styles" named after works or authors (e.g., C-187 Ghibli-style): learn only the drawing method; characters, scenes, logos, and lines must all be original.
• Prompts only set a direction; the same prompt will not produce identical visuals every time. To reproduce the same effect, modify the sample clip code from a "Technology (verified)" entry—do not rely solely on prompts or redesign from scratch: first copy samples/<id>/ into the user's project and run it, then replace the content (see making.md "Level 1: Sample Clip"). If a "style package" exists, use it directly.
• Sample clip code provides the pipeline and drawing method, not the content: use the output pipeline (lib.js, synth.py, batch.py) as-is; borrow drawing methods like hollowing, lighting, and textures; but do not directly copy characters, composition, color palettes, or text from sample clips into the user's video—replace them with the user's own topic and brand.
• Toolchains, costs, and time estimates in case studies are the original author's account and have not been verified—do not present them as guarantees to the user.
• Category C visuals are entirely generated by code, requiring no assets. Photorealistic faces, human talking-head videos, and similar effects cannot be achieved with pure code—switch to Category T (user's own assets) or Category G (AI-generated assets) and inform the user what to prepare.
• Category T uses only assets the user has confirmed rights to, or public domain/open-licensed assets, with source and license recorded for each; Category G can use any image generation, video generation, or speech synthesis service—configure them according to materials.md "Configure Generation Services". For any category not configured, first tell the user what needs to be configured; parts that don't need generation proceed as normal. Do not generate real people or clone real voices.

Modifying Content

For steps to add or modify styles, see the "Maintenance" section of README.md. After modification, you must run and pass:

python3 scripts/build_index.py          # Generates data/styles.json and the style directory in index.md from styles/*.md
python3 scripts/build_index.py --check  # Checks consistency of IDs, tags, images, links, and directory

IDs only increase and do not change; data/styles.json and the style directory are generated artifacts—do not edit them by hand.