Product UI Promo — Design skill for Claude Code

product-ui-promo

把一个**真实运行的 web 产品**做成宣传片的 Claude Code skill。

它不是镜头库，而是镜头库的**上游**： [`video-shotcraft`](https://github.com/Vincentwei1021/video-shotcraft) 管镜头怎么动， 这套管**素材从哪来、谁来拍板、哪些坑会踩**。

内容全部来自一次真实交付——某企业内部 AI 工作台的 63 秒宣传片， 8 镜、23 张元素级切图、13 条音效、零手搓 UI。里面的数字都是当时量出来的。

---

安装

前置

• Claude Code
• `video-shotcraft` —— 强依赖，本 skill 的镜头卡全部来自它
• Remotion（视频渲染）
• ffmpeg（音频测量与混音验证）
• 浏览器自动化：Playwright MCP 或 Chrome MCP（采集素材）

装到个人 skill 目录

git clone https://github.com/H0nGzA1/product-ui-promo.git \
  ~/.claude/skills/product-ui-promo

或者下载 zip 解压：

curl -L https://github.com/H0nGzA1/product-ui-promo/archive/refs/heads/main.tar.gz \
  | tar xz -C ~/.claude/skills/ --strip-components=1 --one-top-level=product-ui-promo

装到某个项目

只想在一个项目里用，放进项目的 `.claude/skills/`：

git clone https://github.com/H0nGzA1/product-ui-promo.git \
  .claude/skills/product-ui-promo

验证

重开一个 Claude Code 会话，问：

我想给我们的内部系统做个宣传片

它应该主动提到 `product-ui-promo` 并从「产品检查」开始。 也可以直接点名：`用 product-ui-promo 给 <你的产品> 做宣传片`。

---

里面有什么

SKILL.md                     七阶段流程，前 5 阶段是人机协同区
references/
  known-traps.md             8 个带实测数据的判例  ← 最值钱的一篇
  collaboration.md           6 个确认节点的实际问法，含问错的记录
  asset-capture.md           切图规格、layout.json 结构、脱敏清单
  sound.md                   钉帧表、归一、峰值对齐、自制 BGM
scripts/
  measure-tokens.js          量设计 token（含 lab()/oklab() 换算）
  capture-elements.js        两步法切图 + 脱敏复查
  make-bgm.py                合成氛围垫，calm / bright 双 mood

七个阶段

0 产品检查 ──┐
1 需求决策   ├─ 人机协同区：每步停下来等确认
2 视觉方向   │
3 镜头映射   │
4 分镜放行 ──┘
5 素材采集 ──┐
6 逐镜实现   ├─ Agent 自主区：只在发现矛盾时才打断
7 声音与交付─┘

---

三条核心原则

**1. 复刻真实页面必须用真实截图。** 手搓的假 UI 一眼就假。允许手搓的只有非复刻场景（抽象开场、品牌段、独立字卡）。

**2. 视觉语言从产品自身长出来。** 先量产品的设计 token，片中所有字卡、转场、配色都复用这套 token。 套模板只继承运动语法，配色排版必须重新蒙皮。

**3. 数据必须脱敏，且在采集前就冻结。** 一旦进了截图就洗不掉了。

---

几个坑的预览

完整 8 条见