拖圆角

---
name: mb-corner-drag
description: 手柄拖圆卡片的角，读数数到你设定的值。镜头拉回到发布卡，卡片落在 3x3 功能格中央，光标点下按钮。适合设计更新或产品发布。渲染成一个 1920x1080、30 fps、H.264 的 MP4，剪纸定格风格，支持中文和英文，四套配色，不生成实拍、配音或音乐。需要这类标题、图表、展示或片尾，或点名要这个技能时使用。
version: 1.0.0
---

# 拖圆角

手柄拖圆卡片的角，读数数到你设定的值。镜头拉回到发布卡，卡片落在 3x3 功能格中央，光标点下按钮。适合设计更新或产品发布。

所有文字和数值都在一个 JSON 文件里，改完一条命令重新渲染。样式写死在 `assets/`，你负责填内容，不要改样式。精确的颜色和时序见 `references/style.md`。

## 先问清楚

简报里没有的，一次问完：

1. 名称、主打功能、按钮、读数标签、一个设计值、另外最多 8 项功能和最多 9 张图片。
2. 用户自己的文字或事实，原样放进 `"source"`。
3. 语言：`zh` 或 `en`。一个版本一种语言，两种都要就做两个 JSON。
4. 配色：`vermilion`、`cobalt`、`pine`、`apricot`。没人指定就用 apricot。

**没人回答时：** 继续做，把假设列在回复最前面。

## 步骤

1. 新建文件夹写 `clip/beats.json`。`assets/library.zh.json` 和 `assets/library.json` 是填好的合法示例，抄结构，不要抄虚构文字。
2. 校验：`node <skill>/scripts/check.mjs clip/beats.json`，报什么改什么。
3. 渲染前先看：`node <skill>/scripts/sheet.mjs clip/beats.json clip/sheet.png --at 0.99`，打开图片；也试试 `--at 0.5`。
4. 渲染：`node <skill>/scripts/render.mjs clip/beats.json --out clip --flat`。
5. 检查观众实际看到的：`node <skill>/scripts/check.mjs clip`。改 JSON，重新渲染，再查，直到通过。
6. 从 MP4 抽几个时间点的真实画面看：`nice -n 10 ffmpeg -threads 2 -ss 2 -i clip/clip.mp4 -frames:v 1 f.png`。好不好看，检查脚本判断不了，只能你看。

`--at` 是要显示的时间点，用 0 到 1 的比例；一两个片段的拼图会画得足够大，方便判断。

选项：`--only clip --frame 120` 只重渲一帧，存到 `clip/frames/clip-120.png`。`--stills 0.3,0.6,1` 把静帧存到 `clip/frames/`。`--scale 0.5` 出草稿，存到 `clip/draft/clip.mp4`（用了 `--flat` 也一样），检查脚本不接受草稿。渲染很吃资源：先出小尺寸，不要同时跑两个渲染，也不要用按进程名批量结束进程的命令。

`check.mjs` 可以在技能安装的位置独立运行，参数可以是 JSON、文件夹（JSON 在别处时加 `--beats path/to/beats.json`）或任意 MP4。改过名的 MP4 要跑全部检查，请加 `--beats`。`check.mjs --test` 是短自检。它能查出：溢出、缺设计值标签、落单的字、对比度低、静止片段、尺寸或编码错误、占位文字。

## beats.json

```json
{
 "lang": "zh",
 "palette": "apricot",
 "label": "虚构示例",
 "source": "虚构示例：一款叫“面包屑”的面包店工具。",
 "beats": [
  {
   "id": "clip",
   "job": "show",
   "effect": "corner-drag",
   "seconds": 7.7,
   "slots": {
    "name": "面包屑新版本",
    "feature": "圆角配方卡片",
    "button": "试试看",
    "readoutLabel": "圆角（设计值）",
    "radius": 24,
    "features": [
     {
      "text": "早间订单"
     },
     {
      "text": "烤箱计时"
     },
     {
      "text": "每日盘点"
     },
     {
      "text": "面粉库存"
     },
     {
      "text": "配送时段"
     },
     {
      "text": "共享配方"
     },
     {
      "text": "交班记录"
     },
     {
      "text": "周日菜单"
     }
    ]
   }
  }
 ]
}
```

| 字段 | 含义 | 上限 | 简报单薄时 |
|---|---|---|---|
| `lang` | 屏幕上所有文字的语言 | `zh` 或 `en` | 跟原文语言一致 |
| `palette` | 唯一的配色设置 | 四选一 | apricot |
| `label` | 片段上的小标签 | 30 字以内，可选 | 示例内容填“虚构示例”；真实项目省略 |
| `source` | 用户原文，不做改动。屏幕上每个数字都必须能在这里找到 | 必填 | 给什么贴什么 |
| `keepLatin` | 中文版里允许保留拉丁字母的真实名称 | 列表，可选 | 省略 |
| `beats[].id` | 片段文件名 | 字母、数字、连字符 | clip |
| `beats[].job` | 照示例保留 | `show` | `show` |
| `beats[].effect` | 照示例保留 | `corner-drag` | `corner-drag` |
| `beats[].seconds` | 片段时长 | 7 到 8.5 | 7.7 |

## slots 里的每个字段

上限是中文字数。

| 字段 | 含义 | 上限（中文字数） | 简报单薄时 |
|---|---|---|---|
| `name` | 人名、产品名或系列名。 | 12, 必填 | 用简报里的名字；没有就用脚本标题。 |
| `feature` | 这次发布要讲的新功能，大字显示在一条横带上，一直留到结尾。 | 16, 可选 | 用简报点名的功能。没有单一功能就省略。 |
| `button` | 发布卡上的按钮文字。 | 6, 必填 | 用简报里的行动，或者 Try it；中文填“试试看”。 |
| `readoutLabel` | 读数测量的是什么。要写明是设计值，比如“圆角（设计值）”。 | 12, 必填 | 填 Corner radius (design)；中文填“圆角（设计值）”。 |
| `radius` | 读数数到的圆角值。这是用户设定的设计值，不是测量结果，也是这里唯一不需要出处的数字。绘制时按两倍显示，最大到卡片高度的一半，这样变化看得清。 | 设计值, 必填 | 填 24。 |
| `unit` | 读数单位，默认“像素”。 | 2, 可选 | 省略。 |
| `features.text` | 卡片周围格子里的一项功能。 | 12, 必填 | 只写用户列出的功能；其他格子只放图片。 |
| `features` | 列表（0 到 8 项） | | |
| `pictures` | {"src":"file.png"} 的列表，PNG 或 JPG，路径相对 JSON。数量不够时会循环使用。 | 最多 9 张, 可选 | 省略：会用代码绘制、与配色一致的抽象图。用户有真实图片就用真实图片。 |

## 规则

**读数是用户设定的设计值**，不是测量结果，也是这里唯一不需要出处的数字。在 `readoutLabel` 里写明，比如“圆角（设计值）”。圆角按两倍绘制，最大到卡片高度的一半，这样变化看得清。默认 24。**图片：** PNG 或 JPG，循环使用。没有图片时用代码绘制的抽象图。**这次要讲的功能** 写在 `feature`：大字横带，一直留到结尾。**`features`** 按阅读顺序填入周围格子，跳过中间：只写用户列出的功能，其他格子只放图片。**图片：** 第 1 张在中间卡片上，其余按同样顺序填入周围。图片围绕中心裁成约 2:1，主体放中间，或在图片上写 `"focus"`。**按钮：** 简报没给就填“试试看”，并列入推断内容。

**不编造数字。** 每个数字都必须在 `source` 里，否则检查脚本判失败。**简报单薄时：** 用用户自己的话转述事实，绝不编造客户、数字、引语或资历，把推断的内容列在回复的“推断内容”下面。**没人能回答时：** 继续做并列出假设。**拼接片段：** 所有片段用同一配色，否则每次切换都会变色。**要其他时长：** 在范围内改 `seconds`。**没有真实链接：** 不要显示地址。**换行：** 词语会保持完整；断行别扭时，在文字里加 `\n`。

## 交付物

`clip/beats.json`（唯一需要改的文件）和 `clip/clip.mp4`：1920x1080、30 fps、H.264、yuv420p、无声。附说明：假设、推断内容、重新渲染的命令。

## 渲染时间

在 16 GB Mac 上实测，同时有其他任务，低优先级全尺寸：这个 7.7 秒片段用默认素材时 6 秒。

## 交付前检查

- [ ] 对文件夹运行 `check.mjs` 退出码为 0，引用它的最后一行。
- [ ] 看过最终 MP4 多个时间点的真实画面。
- [ ] 屏幕上每个数字都在用户原文里，推断内容已列出。
- [ ] 一个版本一种语言。
- [ ] 虚构内容已通过 `label` 标明。
- [ ] 没有生成实拍、配音或音乐。

## 什么时候不要用

读数可能被误当成跑分之类的测量结果。它也不生成实拍、配音或音乐，不能严格匹配品牌色：这四套配色就是设计本身。

## 环境要求

- Node 18 及以上；ffmpeg 和 ffprobe 在 PATH 或 /opt/homebrew/bin。
- 渲染需要 Playwright：`npm install playwright`，再运行 `npx playwright install chromium`。装在别处时，把 `NODE_PATH` 设为那个 `node_modules`。`check.mjs` 不依赖任何包。
- 字体都是系统字体。没有 Avenir Next Condensed 或苹方时，用 `references/style.md` 里的备选字体并重新排版，请在那台机器上跑一遍检查。