@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/guizang-product-video-skill/references/audio-sourcing.md

@@ -1,80 +0,0 @@
-# 配乐与音效：来源、编曲与对位
-
-## 音乐从哪里来（按顺序选）
-
-1. **用户给的曲子**，或用户有授权的曲库：直接用。按它的实际节拍重新对齐画面切点，节拍用 `audio.beatGrid` 记录。
-2. **本机确实可用的音乐生成模型**：先确认模型权重真的在本地、运行环境（例如 torch）装好了，再用。只有配置文件的缓存不算"可用"。生成后照样按分镜检查段落，必要时剪辑或叠加冲击、上升音。
-3. **代码原创合成**（默认兜底）：为这支片子写一段合成脚本，保留源码和固定随机种子，重新运行能得到同一首曲子。
-
-不要下载一首来路不明的 BGM，不要把参考视频的音乐扒下来用，也不要把示例曲改个名字就当作新配乐。用户要求静音时遵从，并记录 `audioExceptionReason`。
-
-## 代码原创：先编曲，再合成
-
-**编曲从分镜来**：打开 `DIRECTION.md` 的镜头表，逐段写出音乐要做什么，时间直接取 `plan.json` 的镜头边界：
-
-- 开场是渐强、悬念，还是直接进节奏？
-- 品牌出现、章节切换、片尾落版要不要冲击点？冲击前留不留一瞬空白？
-- 读文字、看界面操作的段落要让出空间：乐器变少，旋律退后。
-- 快切段落加密节奏或上升音，结尾有完整的和声收束，并按片长留出尾音。
-
-**音色从产品气质来**：[影片方向](direction.md) 里的"声音"轴先定下类型，再选配器，而不是每次都做电子乐：
-
-| 气质 | 可以考虑的配器与手法 |
-|---|---|
-| 冷静、高端、技术 | 宽的 supersaw 铺底、pluck 琶音、侧链压缩的底鼓、次低频冲击 |
-| 轻快、友好 | 明亮的键盘和弦、短音旋律、轻拍手、马林巴类音色 |
-| 温暖、人文 | 钢琴或拨弦主导、慢速、长混响、少打击乐 |
-| 有力、紧凑 | 打击乐主导、低音脉冲、上升音密集、切分节奏 |
-| 安静、专注 | 氛围铺底、稀疏的铃音、几乎没有鼓 |
-
-**两个示例**，看合成手法，不要照搬曲子：
-
-- `assets/audio/score-example-keys.py`：D 大调，键盘和弦、短音旋律、轻鼓，只需标准库 + FFmpeg。
-- `assets/audio/score-example-cinematic.py`：F 小调，supersaw 铺底（带滤波扫频）、泛音衰减做的 pluck、音高下滑的底鼓、噪声做的拍手和踩镲、侧链压缩、附点八分延迟、噪声扫频上升音、次低频冲击、卷积混响。需要 numpy/scipy/soundfile，放在工程自己的 venv 里。
-
-**合成的要点**：
-
-- 按总线（鼓、低音、铺底、琶音、效果）分别合成，最后混合。各自的包络、声像和音量要能单独调。
-- 所有时间都用拍和小节换算。改片长或速度时，所有段落时间一起改，并检查尾音越界。
-- 不要把画面动作的点击、提示音写进配乐，那些是独立音效，后面要单独对位、单独让位。
-- 导出后看频谱图和每秒响度（见 [审片](review.md)），确认段落结构和低频量。低频过重是合成配乐最常见的问题。
-
-## 音效：先找录音素材，缺项再用内置
-
-1. **用户已有、来源清楚的素材库。**
-2. **本机已装的录音素材库**：例如 media-use skill 自带的 Pixabay 音效（点击、按键、打字、弹出、通知、叮、嗖、故障、低频冲击等）。许可说明读它自带的 `CREDITS.md`，并记录进工程。
-3. **素材站搜索**：例如 [Pixabay 音效库](https://pixabay.com/sound-effects/)。下载链接必须来自真实的下载操作，不要编造 CDN 地址。素材站需要交互式下载、当前工具拿不到文件时，如实记录，改用下一项。
-4. **skill 内置音效**（`assets/audio/sfx/`，11 个原创 WAV）：只补缺的那一类。内置音效本身音量较低（峰值约 −20 dBFS），增益要按实测峰值设。
-
-| 画面动作 | 适合的声音 | 选择重点 |
-|---|---|---|
-| 点击、选中 | 短而清楚的 UI click | 不刺耳，起音干净 |
-| 弹出、出现 | pop、轻 toggle | 轻巧，有状态反馈 |
-| 输入 | 键盘短簇 | 和画面打字节奏相符 |
-| 通知、完成 | 双音提示、确认 chime | 能被认出，拖尾不要太长 |
-| 结构变化 | whoosh、glitch | 只给真正的换段，不给每个元素 |
-| 冲击、落版 | 低频冲击 | 和配乐的冲击点叠加或二选一，不要打架 |
-
-## 对位：让声音落在动作上
-
-用 `scripts/sfx_landmarks.py` 实测每个文件的起音点、峰值时间和峰值电平：
-
-```sh
-python3 <skill-dir>/scripts/sfx_landmarks.py assets/sfx/*
-```
-
-- 点击、按键、弹出：用**起音点**对齐画面动作。
-- whoosh、冲击、上升音：用**峰值**对齐切点或撞击帧，声音要比画面先开始。
-- 写入 plan：`syncOffset` = 所用的落点，`at` = 动作时间 − `syncOffset`。
-- 增益：让音效在出现那一刻的峰值不低于压低后的配乐峰值。录音素材接近 0 dBFS，内置音效约 −20 dBFS，同样的 gain 听感差很多。
-
-## 留下来源
-
-`evidence/audio-selection.json` 记录：
-
-- `music`：来源（用户提供 / 生成模型 + 模型名 / `code-original` + 脚本路径）、时长、BPM、调性、段落时间。
-- `sfx[]`：每个文件的作用、来源（库名、详情页或作者）、许可、本地路径。回退到内置音效时写明实际原因，例如"素材站需要交互式下载，当前工具无法获取文件"。未知就写未知，不要编造搜索经历。
-
-下载素材用于成片，和把原录音打包成可再分发的素材库是两回事。这个 skill 不捆绑第三方录音；工程里用到的素材按其现行许可使用。
-
-最后按 [混音与成片检查](audio-and-qa.md) 混音。

package/skills/guizang-product-video-skill/references/case-study.md

@@ -1,63 +0,0 @@
-# CodePilot 原案例：保留做法，不固化偶然参数
-
-最终成片为 48 秒、1920×1080、30 FPS，14 镜头，120 BPM。真实 React 组件经 esbuild 打包形成画面，GSAP 驱动，HyperFrames 导出。音乐是代码原创器乐，另配来自本地素材库、来源标注为 Pixabay 的录制音效；早期第一版则连提示音也由代码合成。skill 的默认流程采用后期组合，来源和内置替代音效见 [声音来源](audio-sourcing.md)。以上是一个成功实例，不是所有产品的必选技术栈或时长。
-
-## 有效的做法
-
-- 直接导入模型选择器、RuntimeSelector、输入框、标签页、卡片容器、CLI 维护行、按钮和图标；provider 用最小只读适配。
-- 镜头从大字切到选择卡片，再到输入区、工作区和通知，不反复使用同一版式。
-- 文件树、diff、浏览器内容和系统通知是受控展示数据；不谎称整套业务系统都在真实运行。
-- 音乐、音效 cue 和视觉共用时间轴。约 0.3–0.6 秒的操作动作，加上足够的解释停留。
-
-## 迭代中真正修过的问题
-
-| 问题 | 根因 | 可复用的检查 |
-| --- | --- | --- |
-| 画面好但像无声 | 早期音乐过轻，存在音轨仍听感不足 | 测响度并试听成片 |
-| 节奏像卡住 | 重复布局，动画和静止停留偏长 | 提前解释、穿插字卡和特写、让每次停顿有信息 |
-| 方向稿偏离用户意思 | 生成概念图不能代替真实组件动画 | 早期就接入代码组件，静帧来自实际渲染 |
-| GLM 5.3 卡片下沿被裁 | 定位偏移叠加 zoom 放大，超出局部 mask | 检查变换后的组件边界，居中并预留空间 |
-| TokenDance 图标裂图 | 组件引用网站根路径，独立预览资源缺失 | 将原 SVG 内联或正确复制，预览与导出分别验图 |
-| 字少但说不清楚 | 小字只有短语，没有功能与结果 | 完整句子，提早出现，按阅读时间安排镜头 |
-| Logo 不完整 | 只用了图标中心符号 | 用正式圆角矩形 app icon |
-| 抽帧缺组件 | CSS transition/visibility 与主时间线争夺状态 | 将原动画接到主时钟，必要时只禁用具体冲突元素，前后 seek 验看 |
-| 不符合这次发布要求 | 浏览器和片尾有 URL | fixture 去 URL，地址栏中性化，移除片尾链接及对应动画 |
-
-静帧检查不能替代看节奏；框架 check 通过不能替代成片检查。社交封面按用户要求制作，方法见 [封面](cover.md)；没提时在交付时问一句，不默认扩展。
-
-## 第二个项目的经验
-
-中文宋体标题、装饰性英文标签、泛泛的完整句子和只有 BGM 的音轨暴露出默认值问题。具体做法分别见 [分镜与文案](story-and-copy.md) 与 [混音验收](audio-and-qa.md)，本文件保留案例背景。
-
-## 第三个项目：清单式迭代为什么变差
-
-同一个 CodePilot 仓库做过三版，对照很说明问题：
-
-| 版本 | 做法 | 结果 |
-|---|---|---|
-| 模型直接做（HyperFrames） | 先写 `frame.md` 视觉规范（字号阶梯、界面放大到 22px、边距、安全区），再给每个镜头写一份详细镜头说明，最后用 GSAP 逐镜头编排 | 节奏好、组件精细、文字动效到位 |
-| 按"12 个蓝图 + 动效原语 + 落拍/静止帧指标"迭代后的 skill | 每个镜头套一个蓝图名，用统一的 data 属性入场，靠指标验收 | 29/29 动作落拍、切点全在小节线上；画面却挤、字小、标题撞图标、界面大片空白 |
-| 本 skill 当前流程 | 先写 `DIRECTION.md`（参考拆解、产品气质、三个方向、画面规范、镜头表），真实组件按视频尺度上镜，GSAP 主时间轴 + Three.js/canvas 背景层，逐镜头出静帧，全片出联系表和转场条带 | 见下一节 |
-
-教训：**模型会去满足能量化的东西。** 把"好看"压缩成蓝图名和指标，就会得到指标完美、画面平庸的片子。让质量落地的是写代码之前的设计：规范写成具体数字，镜头写到每一秒。
-
-## CodePilot 影片：手法是怎么从产品推导出来的
-
-50 秒，暗色舞台。两个参考视频（Hero UI 品牌片、Talis 发布片）拆出来的是做法：星空穿越、构造线画标志、产品从发光地平线后升起、章节大字、切片错位、伪 3D。颜色没有照搬，因为 CodePilot 是炭黑单色。
-
-| 手法 | 因为 CodePilot 有…… |
-|---|---|
-| 流线场开场，配"今天用 Claude / GPT / Gemini……"轮换 | 用户在多个模型之间来回换，这是它要解决的痛点 |
-| 粒子汇聚进 5×5 点阵的每一格 | 标志本身就是渐隐的点阵，取的是真实 SVG 的几何和透明度 |
-| 银白光弧，只有极淡的色边 | 单色品牌，有暗色主题 |
-| 暗色真实界面放大 1.6–2 倍，带小角度透视 | 产品有完整的暗色主题；Agent 对话、审批、模型选择都是真实组件的真实交互 |
-| 服务商图标环绕输入框 | 预设里有 17+ 家服务商（数量来自 README，图标来自产品依赖） |
-| 插件页平放成看板，镜头飞越，技能卡沿 Z 轴抬起 | 技能和 MCP 是一整页卡片 |
-| 产品源码组成的字符场 | 面向开发者的工具 |
-| 章节词 Ask / Switch / Extend | 三个核心能力正好是三个动词 |
-
-配乐是代码合成的 F 小调电子乐（`assets/audio/score-example-cinematic.py`），段落按镜头边界编排；音效用本机 media-use 库里的 Pixabay 录音，落点逐个实测。
-
-**这张表是一次推导的例子，不是模板。** 换一个产品，这些手法大多不成立：没有点阵标志就不该做粒子汇聚，浅色、纸感的产品不该用发光地平线，只接一两个服务的产品不该做环绕。照着 [影片方向](direction.md) 从新产品重新推导；同一工作区连续做片时，开场、章节和背景手法要换掉。
-
-做这支片子时遇到的具体坑（弹层 portal、3D 下推近落点、浅深切换发灰、标点单独掉行、GSAP 时间轴是 thenable）已写进 [组件接入](component-pipeline.md)、[起步工程](starter.md) 和 [审片](review.md)。

package/skills/guizang-product-video-skill/references/component-pipeline.md

@@ -1,86 +0,0 @@
-# 真实组件到可渲染画面
-
-## 先找原功能入口，不能只找几个基础控件
-
-从实际页面/路由找到该功能使用的业务组件及组合关系，再追到主题、CSS、字体、图标、provider 与状态依赖。例如展示模型切换，应复用实际的模型选择器与选项；展示文件树，应复用文件树/节点组件，而不是导入一个 Button 后手写其余页面。
-
-接入顺序：
-
-1. 直接导入原业务组件或实际组合组件，并加载它用到的完整样式链。已存在的 Storybook/story、demo route、preview harness 可以作为受控挂载入口。
-2. 补最小 provider/context、固定且无敏感信息的 props 和状态 fixture。adapter 负责让**原组件**运行，不负责重画内部 DOM。
-3. 依赖复杂时先解决 alias、资源路径、CSS 编译、provider、网络/IPC stub 等具体问题。起步工程在浏览器里挂载组件，组件的 effect 会真实执行：缺 provider 就补 provider，要请求数据就在 `fixtures/api.js` 给 fixture，不因一次报错就手写复刻。
-4. 仍然无法直接运行时，优先复用已有纯展示子组件，保留原组合结构和原样式。必要的源码提取要保留来源并最小化改动，不能顺便重新设计。
-5. 只有明确的平台/技术边界使上述路径不可行，才说明具体阻碍、已尝试的方法及受影响的镜头，提出受控录屏或忠实展示适配。已有用户授权覆盖替代方式就继续，否则让用户选择；不能把“省时间、依赖多、不好做动画”当成静默复刻的理由。其余可复用镜头继续推进。
-
-“抽象化”指减少画面里同时出现的信息、突出关键原组件和调整取景，不意味着重画软件。默认样式包装宣传画面，不替换被演示的软件本体。
-
-## 让原组件在视频里跑起来
-
-实测可行的一套做法（CodePilot 的输入框、消息、工具步骤、审批弹窗、模型选择器、插件整页都这样上镜）：
-
-- **provider**：读产品的 App 外壳，把组件依赖的上下文（i18n、tooltip、面板/分屏状态、图标默认值）用静态值补在 `product-context.jsx`。报错 `must be used within ...` 指明了缺哪个。
-- **数据**：组件在 effect 里 `fetch('/api/...')` 的，由 `fake-api.js` 按路径返回 fixture。fixture 从产品自己的常量或目录派生（例如用产品内置的服务商预设生成模型列表），名字和图标就是真的。
-- **不确定性**：`fake-api.js` 固定了时钟和随机种子，按时间段切换问候语、随机挑一句这类组件，每次渲染都一致。
-- **真实交互**：打字用原生 setter 写入真实 textarea 并派发 `input` 事件，React 的 onChange 照常触发；弹层用真实点击打开和关闭；选中项用真实点击选中。驱动按时间算出应有状态，只在 DOM 不一致时动手，所以前后跳转都成立。
-- **弹层与 3D**：Radix 一类 portal 默认挂到 `document.body`，不会跟着镜头缩放。写一个 adapter，把 portal 的 container 指到镜头内部的节点。弹层打开期间，所在面板不要有 3D 旋转（定位库按平面计算）。
-- **视频尺度**：功能镜头把产品根节点整体放大（正文 ≥ 22px），或者用摄像机包层推近；不要缩小字号硬塞进画面。产品有暗色主题且片子走暗调时，直接用它的暗色主题。
-
-## 原组件的状态和动画
-
-- 展开/收起、选中、切换、加载、完成等，优先通过原组件 props、受控状态或真实交互触发。按时间变化的离散状态（第几步完成、回复显示几个字）用 `useShotState` 算出来，再作为 props 传进原组件。
-- 原动画不可 seek 时，仅在展示入口把时间接到主时间线，保留原视觉、状态语义和布局；不要因此删掉原组件换成假 DOM。
-- 镜头外层可以添加缩放、移动、遮罩、聚焦和编排。额外宣传字卡不冒充产品界面；中英标题排版规则也不强制覆盖组件内部字体。
-- 编排型镜头可拆出实际子组件放大，但不得虚构原软件没有的状态、交互或组合关系。
-
-## 每个功能镜头的复用证据
-
-在 `evidence/component-usage.json` 或等价清单中逐镜头记录：`shotId`、`featureEntry`、`components`、`styleEntries`、`stateDriver`、`adapters`、`reuseMode`、`exceptions`。路径要指到真正使用的源码，而非只列一串希望使用的组件名。
-
-将清单与构建导入图、实际 JSX/挂载入口和静帧核对：
-
-- 是否用了对应功能的业务组件，而非只有通用按钮/卡片？
-- 样式是否来自组件实际使用的 CSS/theme/font/assets，而非几项颜色常量？
-- 选中、展开等状态是否确实由原组件呈现？
-- 原页面与镜头中的组件在形状、层级、间距、图标、状态细节上是否一致（允许取景和等比例放大）？
-
-构建图有导入不等于真的上镜；静帧相似也不证明复用了源码，两份证据要结合看。未用原组件的部分明确标注，不将整片笼统称为“全部原生组件”。
-
-React/Next 项目按项目实际情况处理 `@/` alias、CSS/Tailwind、Next Image、router、客户端 providers 和图标库。打包成功不等于样式已生效，也不等于数据到位：出静帧看。
-
-Vue/Svelte 使用自身渲染入口；Electron 壳不要在宣传片进程内启动真实 IPC；原生 UI 无法直接导入时，说明选择受控录屏或展示层适配的原因。
-
-原生应用（例如 Rust/GPUI、SwiftUI）经用户同意做忠实重建时：尺寸取自源码（标题栏、标签栏、面板默认宽度、字号行高），颜色取自主题文件，字体、图标、标志用仓库里的原文件；把界面上会变的东西（缓冲区文字、光标、弹层、面板状态）写成影片时间的纯函数模型，画面和 `plan.json` 的动作时间都从这个模型读。在 component-usage 里写明每个界面对应的源码文件，并说明这是重建而不是运行中的应用。用户明确要求代码动效时，不要偷偷退化为录屏拼贴。
-
-## 工程与资源
-
-建议将 source、assets、evidence、renders 放在独立项目。记录依赖版本及 lockfile、尺寸、FPS、时长、组件来源、字体和音乐来源。不要把完整原仓库/node_modules 打包给别人。
-
-资源处理必须覆盖真实组件内部引用：
-
-- `/provider-icons/...` 这样的根路径在独立播放器里常失效。复制公开资源并修正 base path，或将小 SVG 转为 data URI。
-- CSS 中的 `url(...)`、字体文件、图标内链、图片加载策略也要处理。
-- 等待字体和图片解码后再截图。页面无报错不意味着图片完整；检查 `img.complete && img.naturalWidth > 0`。
-- 本地 HTTP 服务比 `file://` 更接近导出环境。最终文件尽量不依赖外网。
-- 需要共享的资源应有相应许可；参考视频中的音乐不能默认提取后复用。
-
-## 确定性与时间线
-
-所有动画由同一主时间轴或纯 `seek(t)` 驱动。任意 `t` 都能恢复完整画面，不依赖曾经播放过之前的帧。
-
-- GSAP：暂停的主 timeline；在 HyperFrames 中按其当前项目契约注册 `window.__timelines[compositionId]`，媒体由框架负责。
-- Remotion：状态由 frame/fps 计算。
-- 独立浏览器（起步工程）：`window.seek(seconds)` 依次推进 React 时钟、交互驱动、GSAP 主时间轴和每帧绘制；由 Playwright 逐帧截图 + FFmpeg 导出。
-
-每个镜头定义初始/结束状态，并测试前后跳转。起步工程冻结了所有 CSS transition/animation，motion 库的微动画可以用全局开关跳到终态；需要保留的产品动态（加载旋转、进度条）在 `onRender` 里按时间重建。随机数、请求和定时器使用固定 fixture。
-
-## 构图与裁切
-
-CardFrame 负责阴影、圆角和外部空间，不裁切；CardSurface 负责内部背景和裁切。放大组件时检查**变换后的**边界。不要以为父容器有足够高度就不会裁掉 zoom 后的子元素。
-
-对要居中的卡片，可用外层 flex/grid 居中、内层 transform 缩放，并为变换预留空间。避免定位偏移再乘上 CSS zoom 造成意外下沉。页面总宽不溢出不能证明局部 mask 内的文字/图标没被裁。
-
-用产品的完整正式图标，尤其是有圆角矩形底板的 app icon。不要只截取里面的核心符号代替。
-
-## 链接处理
-
-依据用户的发布要求处理，不推定某地区所有平台都禁止链接。要求不出现链接时，优先清空 fixture 中 URL，地址栏用中性形状或模糊占位；若必须用画面遮盖，遮罩应与组件共同移动和缩放。片尾、角标、截图、导出帧一并检查。不要只把 DOM 某处模糊而在另一个镜头露出完整 URL。

package/skills/guizang-product-video-skill/references/cover.md

@@ -1,43 +0,0 @@
-# 封面：3:4、4:3、16:9
-
-用户要发布影片时，或者明确要封面时再做；其他情况在交付时用一句话问一下即可。封面是影片的延伸，画面语言取自这支片子的 `DIRECTION.md`，不是一套通用模板：暗色舞台片的封面和浅色编辑器片的封面应该一眼看出是两回事。
-
-## 三种比例
-
-| 比例 | 设计尺寸（CSS px，导出 2 倍） | 常见用途 | 布局思路 |
-|---|---|---|---|
-| 3:4 | 1080×1440 | 小红书、朋友圈等竖向信息流 | 上下堆叠：标题在上，主图在中，标签和署名在下 |
-| 4:3 | 1440×1080 | X / Threads / 公众号配图 | 左右分栏：左侧约 40% 放标题和标签，右侧放主图 |
-| 16:9 | 1920×1080 | 视频平台缩略图、B 站、YouTube | 主图占主导，标题更大、字更少；避开右下角时长角标和底部进度条区域 |
-
-## 做法
-
-1. **挑画面。** 先用联系表看全片，再选 1 张主图、0–2 张辅图。只用这支片子真实渲染出来的画面：`node stills.mjs cover/frames <时刻…>` 出 PNG，比从 MP4 抽帧清晰。
-   - 主图要缩小后仍然读得出：大块形状、清楚的产品界面、有辨识度的那一刻（例如 CodePilot 片的服务商环绕、Zed 片光标画出标志的瞬间）。
-   - 大面积纯黑或纯白的帧做辅图会像一块空板子，要换掉。
-2. **定文案。**
-   - 主标题：用户发帖的原话优先，否则取影片的核心主张。中文主标题不超过约 12 个字，可以配一行简短英文。
-   - 副标题一句。标签最多 4 个。
-   - 主张要么是用户自己的观点、用用户的原话，要么在仓库里有出处。和其他产品的比较只在用户自己写了的时候才上封面，并保留用户原话。
-3. **定设计。** 底色、字体、母题直接沿用影片的画面规范：影片的标题用代码注释，封面标题也可以是一行注释；影片用发光地平线，封面也可以用。三种比例共用同一套元素，只重新排版，不能等比缩放了事。
-4. **排版并导出。** 在视频工程里写 `cover/cover.html`，每种比例一个元素，标上 `data-cover="3x4"`、`"4x3"` 或 `"16x9"`，尺寸按上表。字体和图片用相对路径引用（例如 `../public/fonts/…`、`frames/…`）。然后运行：
-
-   ```sh
-   node cover.mjs            # 输出 covers/cover-3x4.png 等，2 倍像素
-   ```
-
-   脚本会核对每个元素的尺寸，页面报错或资源加载失败时直接失败。
-5. **缩略图测试。** 把每张封面缩到 320px 宽看一遍：标题还读得出吗？主图还认得出吗？信息流里 3:4 和 4:3 往往只以这么小的尺寸出现。
-
-## 常见问题
-
-| 现象 | 改法 |
-|---|---|
-| 辅图几乎被主图完全挡住 | 辅图往外移，至少露出三分之一，并且露出有内容的部分 |
-| 标题和主图重叠 | 标题区和主图区分开，或者给标题加底色；不要让标题压在界面文字上 |
-| 16:9 里标题太小 | 缩略图尺寸下标题高度至少是画面高度的 1/8；字数减半 |
-| 三种比例看起来像同一张图缩放 | 按各自的布局思路重排，主图大小和位置都要变 |
-| 代码/等宽文字的空格丢了（`fnname`、`1//`） | 行容器用了 `display:flex`，只含空白的文本节点被丢弃；行改成普通块元素加 `white-space:pre` |
-| 字体没加载（回落成系统字体） | 检查 `@font-face` 的相对路径；`cover.mjs` 会等 `document.fonts.ready` |
-
-不要做伪装成平台界面的封面（假的播放量、假的平台按钮、别人的品牌）。封面上的播放图标只能是中性的形状。

package/skills/guizang-product-video-skill/references/direction.md

@@ -1,91 +0,0 @@
-# 影片方向：先定方向，再写代码
-
-决定一支片子好不好看的，是写代码之前的设计：它讲什么、看起来是什么气质、每个镜头的主角是谁、字多大、界面放大几倍。把这些写进 `DIRECTION.md`（初始化时已生成问题模板）再动手。
-
-两次对照说明了这一步的分量：只按清单和指标做的版本，落拍率 100%，画面却挤、字小、像幻灯片；先写视觉规范和镜头表的版本，同一产品、同一套组件，观感完全不同（见 [案例复盘](case-study.md)）。
-
-## 1. 拆参考（用户给了参考视频/图片时）
-
-1. 抽帧看全片：`ffmpeg -i ref.mp4 -vf "fps=1,scale=400:-1,tile=6x8" -frames:v 1 sheet.png`，再对关键时刻截全尺寸帧。
-2. 逐个列出手法：它是什么、在表达什么（速度感？秩序？连接？）、出现在哪一段、持续多久。
-3. 学"做法"，不抄"样子"：参考片的颜色、图形、字体属于它的品牌。写清楚本片是否采用、改写成什么，以及改写的依据。
-
-## 2. 提炼产品气质
-
-从仓库和用户输入回答，不要凭印象：
-
-- **谁在用、在什么情境下用、用起来是什么感觉**：冷静专业、轻快、温暖、硬核、安静……
-- **设计语言**：色板、字体、圆角、阴影、明暗主题（产品有暗色主题就把它当候选）、图标风格。来源写到文件路径。
-- **母题候选**：能直接变成画面的产品元素。
-  - 标志的几何构造（点阵、线条、字母形）
-  - 核心界面本身（输入框、列表、画布、时间线）
-  - 产品处理的数据形态（文本流、图表、文件树、波形、地图）
-  - 领域隐喻（写作 → 纸与墨；设计 → 构造线与控制点；音乐 → 波形；财务 → 走势线）
-  - 产品名字的字面意象
-
-## 3. 提出三个方向，沿不同的轴拉开
-
-每个方向在下表每个轴上各选一个，彼此要**至少在三个轴上不同**，而且各自内部要自洽。选项只是举例，可以自己加：
-
-| 轴 | 可选取向（举例） |
-|---|---|
-| 底色与光 | 黑色舞台 + 发光；纸白 + 墨线；品牌色大色块；明暗交替；真实环境照片感 |
-| 字体声音 | 超细大字；粗重冲击；衬线编辑感；等宽技术感；圆润亲和 |
-| 母题来源 | 标志几何；界面本身；数据形态；领域隐喻；用户场景 |
-| 镜头语言 | 平面排版编辑；3D 舞台（倾斜、环绕、飞越）；微距特写；一镜到底；录屏质感 |
-| 转场词汇 | 硬切卡拍；穿越缩放；遮罩擦除；形状变形；匹配剪辑（前一镜的元素变成后一镜的元素） |
-| 节奏 | 发布会式从容；预告片式紧凑；轻快俏皮；安静叙事 |
-| 声音 | 电子脉冲；钢琴与弦；打击乐主导；氛围铺底；用户提供的曲子 |
-
-然后按产品气质、受众和发布平台选一个，写下理由。用户想先看方向时，把三个方向和 3–6 张关键静帧给用户选，否则直接继续。
-
-## 4. 本片专属手法（3–5 个）
-
-每个手法都必须能写成"因为产品有 X，所以用 Y"。写不出 X 的手法，删掉。
-
-一些推导的例子（只说明推导方式，不是菜单）：
-
-| 产品有什么 | 可以长成什么 |
-|---|---|
-| 点阵构成的标志 | 粒子从远处汇聚，落进点阵的每一格 |
-| 接入很多服务/插件 | 成员沿一个倾斜的环绕着核心界面转 |
-| 面向开发者、以代码为材料 | 由产品自己的代码组成的字符场 |
-| 笔记/写作产品 | 字逐笔写出，纸张纹理，墨迹晕开 |
-| 数据分析产品 | 真实图表的路径逐段画出，数字滚动落定 |
-| 设计工具 | 构造线、控制点、网格吸附 |
-| 协作产品 | 多个光标同时进入，状态实时合并 |
-
-[视觉手法词汇](visual-vocabulary.md) 列了更多手法及其实现要点；`assets/fx-lab/` 有几个可改写的样例。
-
-## 5. 反重复
-
-- **跨片**：动手前看看同一工作区里之前用本 skill 做的片子（相邻目录下的 `DIRECTION.md`、`evidence/contact-sheet.png`）以及 [案例复盘](case-study.md)，列出它们的开场、章节处理、背景手法和配乐。新片至少在三个轴上与最近一支不同，并且不原样复用它的开场手法、章节手法和背景效果。
-- **片内**：不要所有元素都用同一种入场；相邻镜头换取景（全景 ↔ 特写 ↔ 大字）或换明暗；同一种转场不连用三次以上。
-- **案例不是模板**：CodePilot 片子的星空开场、银白光弧、Ask/Switch/Extend 章节字卡，属于那个产品和那一次的推导。另一个产品直接照搬，就是千篇一律。
-
-## 6. 叙事结构，按内容选
-
-默认的"钩子 → 品牌 → 功能证明 ×3–5 → 小功能快切 → 收尾"只是其中一种。也可以：
-
-- 问题 → 转折 → 解决（适合解决明确痛点的更新）
-- 完整做完一件真实任务（适合 Agent、工作流类产品）
-- 一镜到底穿过产品的各个区域（适合空间感强的界面）
-- 前后对比（适合性能、改版）
-- 倒数清单（适合很多个小更新）
-- 一天的使用（适合日常工具）
-
-## 7. 画面规范（frame design system）
-
-从产品推导，写成具体数字：
-
-- 画幅、帧率、底色、安全区（重要内容避开底部约 13%）。
-- 字号阶梯：主标题、次标题、说明，中英文分别给字号和字重；字体来自产品或有授权的字体，中英文分别指定。
-- 界面上镜倍数：让界面正文在成片里 ≥ 22px（1080p）。倍数 ≈ 22 ÷ 产品正文像素。完整窗口只作为交代全局的建立镜头。
-- 明暗主题：产品有暗色主题且片子走暗调时，直接用产品的暗色主题。
-- 动效语法：入场方式、缓动族、时长范围，以及本片**不用**什么（例如"不用回弹""不用彩虹色"）。
-
-## 8. 镜头表
-
-每个镜头写：时间、主角（只有一个）、画面与动作（带子拍时间）、上屏文案、声音。一个镜头里至少有一次状态变化或镜头运动；超过 2.5 秒完全不动，只能是在给观众读字。镜头长度有长有短：开场、快切短，功能证明长。
-
-写完镜头表再开始搭镜头。每搭完一个镜头就出静帧，和镜头表对照（见 [审片](review.md)）。

package/skills/guizang-product-video-skill/references/onboarding.md

@@ -1,98 +0,0 @@
-# 依赖安装（仅有缺项时读取）
-
-先确认风格并初始化视频目录，再运行 `check_environment.py --project <video-dir>`。Python 不存在时先补 Python。检查脚本只用标准库，缺依赖也可运行并列出需要安装的项目。
-
-## 安装范围与验证
-
-| 路径 | 所需环境 |
-| --- | --- |
-| 起步工程 | Python ≥3.9、Node ≥22、npm、FFmpeg/FFprobe；项目内 React、ReactDOM、esbuild、GSAP、Three.js、Playwright 及其可启动的 Chromium |
-| 代码合成配乐（可选） | 使用 `score-example-cinematic.py` 这类依赖 numpy/scipy/soundfile 的脚本时，在视频工程里建 venv 安装，不装进系统 Python |
-| HyperFrames | 对应版本的官方运行要求、FFmpeg/FFprobe、可启动 Chrome；本 skill 音频脚本需要 Python |
-| 其他已有框架 | 保留框架与 lockfile，补齐其实际缺项 |
-
-先复用可用环境。下面命令只执行缺项；安装前查询链接中的**当前官方说明**核对系统支持、包名和所需版本。稳定下限用于兼容性判断，新装优先受支持版本。安装后的实际版本、锁文件和运行结果记录进项目；历史验证日期不代表未来兼容承诺。
-
-执行后重跑检查。同一错误在安装后仍出现时，先读错误区分权限、系统库、网络和版本问题，再针对原因处理，避免反复下载。系统权限按当前执行环境的权限机制处理。
-
-## 系统工具
-
-### macOS
-
-已有 Homebrew 时，按缺项选择命令。安装前可用 `brew info <formula>` 核对包信息：
-
-```sh
-brew install ffmpeg
-brew install node
-brew install python
-```
-
-来源：[FFmpeg](https://formulae.brew.sh/formula/ffmpeg)、[Node](https://formulae.brew.sh/formula/node)、[Python](https://docs.brew.sh/Homebrew-and-Python)。若需要 Node LTS，按 [Node 下载页](https://nodejs.org/en/download) 与 Homebrew 当前 formula 选择受支持的 LTS；已有可用 Node 保留原版本。版本化 formula 的 PATH 用实际 `brew --prefix <formula>` 和安装输出确定。
-
-没有 Homebrew 时可使用已有工具或 [官方安装器](https://docs.brew.sh/Installation)。需要安装 Homebrew 时，从官方文档取当前命令，查看脚本后执行；不在此冻结安装脚本版本。
-
-### Debian / Ubuntu
-
-```sh
-sudo apt-get update
-sudo apt-get install -y ffmpeg python3
-```
-
-仅缺一项时缩减包列表。Node 可复用现有 nvm：
-
-```sh
-nvm install --lts
-nvm use --lts
-```
-
-nvm 未安装时，按 [nvm 官方安装说明](https://github.com/nvm-sh/nvm#installing-and-updating) 获取当前版本化脚本 URL，下载查看后执行；可用 `PROFILE=/dev/null` 避免修改 shell 配置，再加载安装输出中的实际 `nvm.sh`。其他发行版按其包管理器及 [FFmpeg 下载页](https://ffmpeg.org/download.html) 处理。
-
-### Windows / PowerShell
-
-先查询并核对包身份，再安装实际返回的准确 ID。例如：
-
-```powershell
-winget search --name Node.js
-winget search --name FFmpeg
-winget search --name Python
-# 将 package-id 替换成查询结果与官方说明核对后的精确 ID：
-winget show --id <package-id> --exact
-winget install --id <package-id> --exact
-```
-
-来源：[WinGet search](https://learn.microsoft.com/en-us/windows/package-manager/winget/search)、[WinGet install](https://learn.microsoft.com/en-us/windows/package-manager/winget/install)、[Python Windows 安装说明](https://docs.python.org/3/using/windows.html)、[FFmpeg 官方列出的 Windows 构建](https://ffmpeg.org/download.html)。Python 包身份/安装管理器以当时官方说明为准，不冻结 Store ID。安装后刷新会话 PATH，使用实际 `python` / `py -3` 命令验证。
-
-## 项目依赖与浏览器
-
-在视频工程目录内，有 package-lock.json 使用 `npm ci`；首次无锁文件使用 `npm install`。其他管理器沿用现有锁文件。起步工程 package.json 的固定版本是可复现基线；升级时测试后更新，不为每次制片自动升级。
-
-浏览器版本跟随项目 Playwright；仅缺对应浏览器时：
-
-```sh
-npx playwright install chromium --only-shell
-```
-
-此命令适合起步工程默认 `headless:true`、未指定 channel 的导出。工程需要有头 Chromium 时去掉 `--only-shell`。Linux 缺系统库时可用 `npx playwright install --with-deps chromium`。依据 [Playwright 浏览器文档](https://playwright.dev/docs/browsers)，headless shell 与完整 Chromium 是独立文件，**以真实 launch 成败验收**。沙箱/权限导致 launch 失败时处理执行权限，重新下载浏览器无助于修复。
-
-起步工程的导出脚本带 `--use-angle=swiftshader --enable-unsafe-swiftshader --ignore-gpu-blocklist`，让 Three.js/WebGL 在无头模式下用软件渲染；环境检查实际启动浏览器时也带同样参数。
-
-## HyperFrames
-
-沿用已有版本。新工程需要 CLI 时，先核对 [官方 CLI 文档](https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes-cli/references/doctor-browser.md) 和当前 `--help`，再执行：
-
-```sh
-npm install --save-dev --save-exact hyperframes
-npx hyperframes doctor --json
-# 仅缺 Chrome 时：
-npx hyperframes browser ensure
-```
-
-锁定实际安装版本。doctor 按实际缺项解释：本地渲染需要 Node、FFmpeg、FFprobe、Chrome；未选择的 TTS、Whisper、MusicGen、Docker 不构成必装依赖。doctor schema 改变时更新检查适配器，而不是反复安装已存在的软件。只有使用 Docker 渲染时才处理其依赖。框架 CLI 与其他 skill 分开安装，按任务实际需要选择。
-
-## 复查
-
-```sh
-python3 <skill-dir>/scripts/check_environment.py --project <video-dir> --engine browser --force
-```
-
-HyperFrames 改为 `--engine hyperframes`。成功后继续原分镜工作；只有缺项才重新读取对应段落。平台安装语法来自上述官方来源，实机覆盖以验证记录为准。

package/skills/guizang-product-video-skill/references/repo-and-style.md

@@ -1,44 +0,0 @@
-# 仓库与风格审计
-
-## 更新事实
-
-先读仓库规则和相应目录索引，再定向检索。优先找 release notes、changelog、版本标签和实现路径；不要全量导出日志或环境文件。
-
-建立 `feature-evidence`，每项写：
-
-| 字段 | 含义 |
-| --- | --- |
-| feature / benefit | 实现了什么 / 用户获得什么 |
-| status / release | 已发布、已合并或开发中；所属版本 |
-| source | repo 相对路径 + 提交/标签，或用户提供的文档 |
-| component | 真实可复用的组件及相关样式 |
-| demoState | 展示所需输入、状态与 fixture |
-| limits | 不可证明的部分或演示范围 |
-
-用户说“近几周”，先用当前日期划范围，再与版本记录对应；不要用参考推文的日期。尚未确定范围时可建议最近 2–4 周，明确这是拟定范围。
-
-## 原组件及设计依赖审计
-
-先沿功能页面找到实际业务组件和组合层，再读取它们使用的 tokens / CSS variables / Tailwind 配置、字体、图标和主题上下文。审计输出业务组件、组合结构及其完整设计依赖。
-
-在 `style-audit.md` 写出：
-
-1. 色板及语义：背景、表面、文本、弱文本、描边、强调色，含代码来源。
-2. 字体：分别确定英文标题、中文标题/正文的字体、字重、行距和实际加载结果。宣传标题的具体字体分配按 [分镜与文案](story-and-copy.md) 执行。
-3. 空间和形状：基础间距、圆角、阴影、线宽、密度。
-4. 品牌：完整 app icon / 横向 logo / 单色版本适用范围；使用仓库现有资产。
-5. 镜头适配：原 UI 中哪些细节能直接复用，哪些需要放大、裁切或拆分；产品有没有暗色主题可以直接启用。
-6. 母题候选：标志的几何构造、核心界面、产品处理的数据形态、领域隐喻。这些是 [影片方向](direction.md) 推导专属手法的原料。
-7. 决策：repo / default / hybrid，理由与保留的品牌识别点。
-
-“审美不行”要变成可操作的判断：层级混乱、字号/间距不一致、对比不足、信息密度太高、边框/阴影杂乱。不要把自己的审美偏好当成客观结论，也不要背着用户换掉其品牌。
-
-## 默认样式的范围
-
-默认样式 提取/改编自 CodePilot 的 CardFrame / CardSurface、圆角按钮、标签及视觉 tokens。它提供画面容器和排版基础，不包含模型列表、浏览器等业务功能，也不提供另一个产品的品牌。
-
-- `default`：视觉基调用于宣传字卡、背景和外层容器；功能镜头优先保留原业务组件及内部样式。仅当用户另行明确要求换肤时，才按其范围处理。
-- `hybrid`：只借用画面包装；目标产品的重要界面、品牌色和状态保持可识别。
-- `repo`：按产品设计审计结果制作。
-
-不要复制用户仓库的真实对话、账号、密钥、浏览历史或商业数据到可分享工程。fixture 要能表达真实功能，但不冒充真实业绩/客户结果。

package/skills/guizang-product-video-skill/references/review.md

@@ -1,38 +0,0 @@
-# 审片：边做边看，最后看成片
-
-自动检查只能证明结构和文件是对的。好不好看要看画面，这一页讲怎么高效地看，以及实际做片时反复出现的问题。
-
-## 三个节点
-
-1. **每搭完一个镜头**：`node stills.mjs evidence/stills <这个镜头内 3–4 个时刻>`，拿静帧和 `DIRECTION.md` 的镜头表对照：主角是不是一眼能看出来？字号够不够？有没有撞在一起？`stills.mjs` 还会打印页面错误和组件实际请求过的 API 路径，缺的 fixture 在这里就能发现。
-2. **全片第一次导出后**：
-   - 2 fps 联系表看节奏和构图：`ffmpeg -i final.mp4 -vf "fps=2,scale=384:-1,tile=6x9" -frames:v 1 sheet.png`（前后两半各一张）。
-   - 10 fps 条带看每个转场：`ffmpeg -ss <切点前0.4秒> -t 1 -i final.mp4 -vf "fps=10,scale=320:-1,tile=10x1" -frames:v 1 cut.png`。
-   - 信息密的镜头截全尺寸帧，确认界面文字清晰。
-3. **修改之后**：只重看改过的镜头和它前后的转场，最后再整体过一遍。
-
-## 常见问题
-
-| 看到的现象 | 通常的原因 | 改法 |
-|---|---|---|
-| 标题和界面撞在一起、字挤在角落 | 没有字号阶梯和安全区，或者标题列太窄 | 回到画面规范，给标题列固定宽度和字号；缩短文案，不要缩字号 |
-| 中文说明最后一个字或标点单独掉到下一行 | 文字宽度刚好超出一点 | 改短一两个字或微调列宽；不要靠 `nowrap` 让文字溢出 |
-| 界面上镜后字很小、面板大片空白 | 产品按桌面尺寸上镜；面板高度按全屏设 | 放大产品根节点；面板高度贴合内容；空白区域收紧 |
-| 推近落点偏了 | 在 3D 倾斜/透视下手算落点 | 用 `screenCenterAt` 在对应时刻测出真实屏幕位置 |
-| 镜头对准了错误的行，或者对准了画面顶部 | 按文字匹配找目标行时，匹配到了前面相似的行，或者在那一行还没打完时就去找 | 在这一行完整出现之后再查；用唯一的标记（例如状态字段）找行；找不到就直接报错，不要让 −1 变成坐标 |
-| 浅色切到深色时中间一片灰 | 长交叉淡化 | 硬切，或者前一镜的主角先模糊退场再切 |
-| 弹层位置错乱、跟不上缩放 | portal 挂在 body；打开时面板在 3D 旋转 | portal 容器指到镜头内部；打开期间不做 3D 旋转 |
-| 某一段 3 秒以上完全不动 | 最后一个动作之后没有后续 | 加一次缓慢推近或状态延续（例如新消息进来），或者缩短镜头 |
-| 所有元素用同一种入场 | 只用了一个 reveal | 主角、辅助信息、背景分别设计出场；相邻镜头换一种 |
-| 第一帧是空白底色，发到社交平台后缩略图一片白或一片黑 | 开场从空画面入场，第一帧还什么都没有 | 前 5–10 帧放开场的完成态当海报帧，再淡出、正常入场；`check_delivery.py` 的 `firstFrames` 会报出空白帧 |
-| 每支片子看起来都一样 | 直接复用案例或上一支的手法 | 回到 `DIRECTION.md` 第 3–5 节，重新从产品推导 |
-| 背景效果抢了界面 | 气氛层对比太高，或者铺在密集界面后面 | 功能镜头背景保持安静；效果留给字卡、品牌和转场 |
-
-## 指标只是提示
-
-`check_delivery.py --video` 会报告静止帧比例、最长静止段和硬切次数（`pacing`）。它们用来提醒"去看看某一段"：阅读停顿是必要的，大面积深色背景上的小动作也会被算成"静止"。**不要为了让数字好看去加没意义的晃动，也不要把数字达标当成片子好看。**
-
-## 声音
-
-- 能试听就逐段听：单独听 `sfx-stem.wav`，再听 master，最后听编码后的 MP4。
-- 不能试听时如实说明，并用可以看到的证据检查结构：频谱图（`ffmpeg -i music.wav -lavfi showspectrumpic=s=1600x500:scale=log:fscale=log music-spec.png`）和每秒响度，确认冲击点、停顿、渐强和收尾落在该在的时间。低频是否过重，在频谱图上很明显。