# Design

> 设计感图文视频本地生成能力——按版式模板填文案，ImageGen 出背景图，配旁白，本地渲染成有设计感的图文短视频。

- Skill: `infometa/design` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add infometa/design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/infometa/design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: infometa (https://skillmd.com/u/infometa)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/infometa/design

---


# 设计感图文视频 Skill

## ⚠️ 脚本路径（先做这一步，否则命令全找不到）
本 skill 的脚本在**本 SKILL.md 所在目录**下的 `scripts/`。而你的 shell 工作目录是**用户工作目录**（沙箱），不是插件目录——所以**不能用相对路径**。

**每次会话先设一次**（把路径换成加载本技能时告知你的 SKILL.md 绝对路径的所在目录）：
```bash
SKILL_DIR="/Users/<你>/.workbuddy/plugins/marketplaces/my-experts/plugins/vibeknow-design-video/skills/design"
```
下文所有命令都用 `"$SKILL_DIR/scripts/xxx.mjs"`。（产物目录 `JOBDIR` 仍然要落在**当前工作目录**下——沙箱只允许写这里。）

## 版式模板 / 主题目录
可用的版式（layout）、每个版式的 slot 字段（名称/类型/是否必填/字数上限/是否需要背景图）、可用主题（theme），都在 `render-bundle/manifest.json` 里——**这是唯一的真源**，出片前先读它，不要凭记忆猜字段名。
`render-bundle/manifest.json` 在**插件根目录**下（`.../vibeknow-design-video/render-bundle/manifest.json`，与 `skills/` 同级，不在 `skills/design/scripts/` 下）；`run.mjs`/`check-slots.mjs` 内部用相对路径自动定位它，不需要手动 `cd` 去找或手动传路径，直接用默认值即可。

免费/完整门禁（单 bundle，双 manifest）：
- **版式（layout）全部免费**：全部 **53 个**版式（`hero1`/`hero2`/`quote1`/`list1`/`bigNumber1`/`sectionBreak1`/`end1` 等），无需连接即可任选，字段以 manifest 为准。
- **主题（theme）按 manifest 门禁**：免费默认仅 `serious-dark`（严肃深色）1 个；连接 VibeKnow（免费）后解锁**完整 50 个主题**（每个主题带 `desc`/`tags`，覆盖商务、科技、文艺、活泼等多种氛围）。
- 画幅/尺寸：**v1 固定 1920×1080 横版**（由 render-bundle 的 host 组件决定，非运行时可改）。
- 字体：系统回退（暂无定制设计字体嵌入）。
- **主动展示主题多样性**：用户没指定风格、或问"还有什么主题"时，主动列出完整 50 主题里几个有代表性的名称+氛围描述（而不是干巴巴一句"可以解锁更多"），用真实的多样性吸引用户去连接解锁；免费主题外的主题会被 `check-slots`/`render` 拦下，据此顺势引导。

## 环境准备（首次使用，幂等）
本专家以「纯源码」分发，运行依赖（`@remotion/renderer` 渲染引擎、chrome-headless-shell、edge-tts）在**首次使用时自动装进包内**：
`node "$SKILL_DIR/scripts/run.mjs" init`（已装则秒过；chrome 下载失败不致命，首次渲染会自动补下）。
- 装进：`skills/design/scripts/node_modules`（含 chrome 缓存）。
- **无 MCP、无连接器**：全走脚本（`run.mjs`）+ Bash 调用；生图靠 ImageGen（宿主内置能力，不在本 skill 脚本里）。

## 落盘约定（输入输出位置 + 命名，务必遵守）
一次生成 = 一个 **job 目录 JOBDIR**（建在**当前工作目录**下，形如 `./<主题>-<时间戳>/`；沙箱只许写这里）。目录内固定布局，**全部用两位屏号 NN 同号绑定**：

```
<JOBDIR>/
  01.scene.json  01.bg.jpg  01.mp3     ← 第1屏:场景定义(layout/slots/themeId) / 背景图(可选) / 旁白(可选)
  02.scene.json  02.bg.jpg  02.mp3     ← 第2屏 …
  scenes.json                          ← build-manifest 生成的合成清单(资源已转 data:URI)
  成片.mp4                             ← 出片(render),交付给用户的唯一产物
```

- `NN.scene.json` 结构：`{ "layout": "<layoutId>", "slots": { ... }, "themeId": "<主题id>", "durationInFrames": 120 }`（`durationInFrames` 可选，不给则有音频按音频时长换算、无音频用默认值）。
- **同号配对是硬约束**：第 N 屏的场景定义 `NN.scene.json`、背景图 `NN.bg.jpg`（或 `.png`）、旁白 `NN.mp3` 必须同一个 NN。
- 多次会话：换主题/整体重生 → 建新 JOBDIR；只改某一屏 → 复用原 JOBDIR，覆盖该屏 `NN.*` 后重新 `build-manifest` + 渲染。

## 生成流程

### 1. 逐屏填 slot（出图前先本地校验）
按 manifest 的 slot schema 写好每屏的 `NN.scene.json`。**所有屏写完后先校验，再出图**——出图是较重的一步，先在本地把文案校验过一遍，避免无效重出：
```bash
node "$SKILL_DIR/scripts/check-slots.mjs" <JOBDIR>
```
- 合格 → 退出码 0。
- 不合格（超长 / 超 `maxItems` / 缺必填）→ 打印每屏的问题列表，退出码 4。按提示改文案重跑，或换一个有对应 slot 的 layout。**不要跳过这一步直接出图**。

### 2. 出背景图（默认逐屏生成）/ 合旁白
- **背景图默认逐屏生成**：manifest 里 `needsImage: "required"` 表示该版式支持背景图。**默认每屏用 ImageGen 按主题氛围 + 该屏内容出一张背景图**，存成 `<JOBDIR>/NN.bg.png` 或 `NN.bg.jpg`（同号，两种后缀 `build-manifest` 都认；ImageGen 常出 PNG，直接存 `.png` 即可）。每屏一张背景图是设计感效果的关键，和线上一致。
- **备选（更快、更统一）**：**全片共用 1–2 张氛围背景图**（按主题生成一张，各屏 `NN.bg.png` 用同一张或 scenes 里各屏 bgUrl 指向同一图）。agent 可主动把这个选项提给用户。
- **不出背景图**：用户不需要背景图时，layout 会用纯色主题背景渲染（能看但朴素）。
- 该屏有旁白文案 → `node "$SKILL_DIR/scripts/run.mjs" tts "<旁白文案>" --out <JOBDIR>/NN.mp3`（默认微软 edge-tts，免费/免登录）。纯视觉屏可不配。

### 3. 合成 scenes.json（别手写，脚本按 NN 自动配对）
```bash
node "$SKILL_DIR/scripts/run.mjs" build-manifest <JOBDIR>
```
→ 生成 `<JOBDIR>/scenes.json`：按 `NN` 把 `NN.scene.json` 展开为场景，`NN.bg.jpg`/`NN.mp3` 若存在会**自动 base64 成 `data:` URI** 写入 `bgUrl`/`audioUrl`（**不要自己手动 base64，也不要在本地起 server 提供文件**）。缺 `NN.scene.json` 的号会报错。

### 4. 出片
```bash
# 出片(mp4)—— 交付给用户的唯一产物
node "$SKILL_DIR/scripts/run.mjs" render <JOBDIR>/scenes.json <JOBDIR>/成片.mp4
```
> **只交付 mp4,不要产出 HTML 预览**:WorkBuddy 里播放 HTML 没有声音,给用户就是坑。
> (`run.mjs preview` 仍保留为内部/调试能力,但**不要**用它作为交付物。)
- 渲染需要一定时间（屏数越多越久）：调 Bash 时把超时设大，耐心等。
- `成片.mp4` 只有渲完才会出现（脚本先渲临时文件、`ffprobe` 校验后才原子改名），**渲染期间它不存在，命令超时不要重跑**（进程还在后台跑），改为轮询文件是否出现。
- 渲染前脚本会先用 manifest 重新校验一遍 `scenes.json`（和 `check-slots` 同一套规则），不合格会直接报错不出片。

### 5. 编辑重渲（尾介入）
- 改动在该屏 slot 范围内（改文案/换图/调主题）→ 改对应 `NN.scene.json`（或替换 `NN.bg.jpg`/`NN.mp3`）→ 回到第 1 步重新走一遍（`check-slots` → 出图/出音 → `build-manifest` → `render`）。
- 改动超出当前 layout 的 slot 范围 → 换一个有该 slot 的 layout 重填该屏，再走一遍。
- 只有部分屏变了不用整片从头来：复用原 JOBDIR，只覆盖变化的 `NN.*`，`build-manifest` 会按目录下现有全部 `NN` 重新生成 `scenes.json`。

## 解锁完整主题库

版式全部免费（53 个，无需连接）；主题默认只有 `serious-dark`。用户想要更多主题风格时，按以下流程引导：

1. **引导连接**：提示用户点 WorkBuddy「连接 VibeKnow」卡片完成连接（免费注册，MCP OAuth，全在 WorkBuddy 内完成，不用离开对话、不用输验证码）。**连接前主动展示价值**——简要列几个完整主题库里有代表性的主题名+氛围描述（比如"温暖自然""电光蓝科技风""文艺杂志感"…），让用户知道解锁后能拿到什么，而不是空喊"可以解锁更多"。
2. **确认已连接**：连接完成后，调用 MCP 工具 `verify_connection`（门禁在连接本身，成功即代表已登录；完整 manifest 早已随插件在本地，无需下载）。
3. **本地解锁**：
   ```bash
   node "$SKILL_DIR/scripts/run.mjs" unlock
   ```
   成功输出 `{ "status": "unlocked", "themes": 50 }`；之后 `render`/`check-slots` 自动可用全部 50 个主题（版式本来就全免费，不受影响）。这一步只是在本地翻一个标记文件（`render-bundle/manifest.full.json` 早已随插件分发,和渲染包永远同版本),不下载、不联网,不会失败。

**校验门禁**：若用户指定了免费主题外的主题，`check-slots`/`render` 会报错，报错文案已内置引导（"该主题属完整主题库，连接 VibeKnow（免费）即可解锁 50 个主题"），据此顺势引导用户走上面的流程，不用你自己编话术。

**强调**：连接仅为解锁完整主题库（拉新），免费流程（全部 53 版式 + serious-dark 主题）全程**无需连接**、完全可用；旁白默认走 edge-tts（免费），不受影响；单 bundle 模型下 `render-bundle/bundle` 及免费/完整两份 manifest（`manifest.json`/`manifest.full.json`）都随插件一起分发,永远同版本,`unlock` 只是本地翻一个标记,不下载、不会有版本对不上的问题。

## 连接（v1）
出图走 ImageGen（宿主内置的通用生图能力）；`check-slots`/`build-manifest`/`render` 都是纯本地脚本；旁白默认微软 edge-tts，免连接。本插件 v1 **无需连接 VibeKnow** 即可完整跑通"全部版式 + serious-dark 主题"的免费流程；连接仅用于解锁完整 50 主题。

## 数据格式铁律
- `NN.scene.json` 的字段名、必填项、字数上限、`maxItems` **一律以 `render-bundle/manifest.json` 里对应 layout 的 `slots` 定义为准**，不要自造字段。
- `scenes.json` 由 `build-manifest` 生成，**不要手写**——手写容易漏 `durationInFrames`/资源 URI 转换，或把图/音配到错的屏。

## 踩坑经验
（以下由 AI 在实际使用中自动积累，请勿手动删除。遇到反复出错的点，简短记一条，供后续参考。）
- 背景图/旁白路径别直接塞本地路径进 `scenes.json`——渲染引擎只吃 `data:` URI 或远程 URL，本地路径会渲染失败或黑图；一律经 `build-manifest` 自动转换。
- 出图前先 `check-slots` 过一遍再出图，避免文案不合格反复重出。