Code Brand Film

Produce a short brand film or product promo (10-60s, typically 15s) entirely as code: one static HTML page with a paused GSAP timeline that a renderer seeks frame by frame, plus a music score synthesized in Python. Use when the user wants a 品牌宣传片, 广告片, 宣传动画, 产品短片, 发布会开场视频, brand film, promo video, product teaser, logo animation, or a generated ad spot — especially when they ask for 高级感 / 艺术感 / 电影感 / 别像模板, or when an existing video "looks like AI made it" or "too simple" and needs to be redone properly. Also use when a film already exists and needs a score, a soundtrack, background music, or 配乐

181 stars 23 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add nutllwhy/code-brand-film --skill code-brand-film

Manual install

git clone --depth 1 https://github.com/nutllwhy/code-brand-film.git /tmp/code-brand-film
mkdir -p ~/.claude/skills
cp -r /tmp/code-brand-film/. ~/.claude/skills/code-brand-film

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Code-generated brand films

> **Three things decide whether a film ships. Do not skip any of them.**
> 1. Read *all ten* files in the reading table below, plus the example's
>    `src/index.tpl.html`. Reading only `creative.md` / `pipeline.md` /
>    `scoring.md` reproduces the rejected films described here.
> 2. Search for the brand's real logo and imagery and record them in
>    `assets.md`, then write `shot-list.md` and `copy.md` — all before the timeline.
> 3. Run all three gates and paste their output in your delivery:
>    `scripts/film_audit.py film/index.html` before rendering,
>    `node scripts/layout_audit.mjs film/index.html` before rendering,
>    `scripts/frame_audit.py film/renders/silent.mp4` after.
>    All three print `0 failed`, or the film is not delivered. Lint passing means
>    the page is valid, not that the film is good.

A film is one static HTML page inside `film/`, driven by a paused GSAP timeline
that the renderer ([HyperFrames](https://github.com/heygen-com/hyperframes))
seeks frame by frame. Every asset is a local file. The score is a separate Python
program that writes a WAV, muxed onto the silent picture at the end.

## The failure this skill exists to prevent

The usual failure is not a broken film, it's an **under-built** one: it lints
clean, has no bad frames, and still looks like a template. A real example built
from an earlier version of this skill had 18 tweens, one entrance mechanic

Read the full skill on GitHub

Details

Skill name: code-brand-film
Repository: nutllwhy/code-brand-film
License: MIT
Repo updated: 18 October 2026

FAQ

What does the Code Brand Film skill do?

How do I install the Code Brand Film skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add nutllwhy/code-brand-film --skill code-brand-film. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Code Brand Film popular?

It lives in nutllwhy/code-brand-film, which has 181 GitHub stars and 23 forks.

Related skills

Blcaptain Style Skill

178

dososo/blcaptain-style-skill

当用户需要把内容（文章、笔记、截图、数据、产品说明）做成中文图文卡片组图时使用——小红书 / Rednote 3:4 竖图、公众号封面、社交卡。提供三套独家视觉语言（静纸 Still Paper本手记 / Signal Proof 证据层 / Bridge Canvas 跨平台桥），由 Claude 读懂内容、自己撰写 brief.json，交给确定性引擎渲染出第一眼惊艳、一眼可辨、国内开箱即用的图文组图。

Frontend & Design16

Diorama

196

sloemo01/diorama

Use when building a pixel diorama in Three.js — one-prompt autonomous builds with staged systems, detailed props, real animation, and social/service choreography.

Frontend & Design15

Frontend Design

154

Ilm-Alan/frontend-design

Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.

Frontend & Design23

Apple Hig Designer

212

axiaoge2/Apple-Hig-Designer

Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.

Frontend & Design23

Brand System Builder

168

amirmushichge/brand-system-skill

Guides Lovart Agent from one visual reference to a coherent brand system, campaign assets, and packaging concepts through a gated creative-direction workflow.

Frontend & Design12

2dimg2motion

239

WU-HAOTIAN34/2dimg2motion

Use when a user provides one baseline image and requests game animation frames, sprite sequences, attack/walk/idle/hit/death/casting motion, transparent PNG frames, a spritesheet, keyframe prompts, or consistent whole-character pose animation.

Frontend & Design11

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.