@autoaiai/aicut 0.1.11 → 0.1.13

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

@@ -1,168 +0,0 @@
-# 起步工程：技术底座，不是成片模板
-
-初始化后得到 10 秒、3 镜头的**技术样片**，只证明"真实组件挂载 → 时间轴 → 任意时刻截图 → MP4"这条链路能走通。它刻意没有视觉风格：正式片的画面规范、镜头和手法都按 `DIRECTION.md` 为这个产品重新写。
-
-## 运行
-
-需要 Python 3、Node.js、FFmpeg。先按 SKILL.md 做环境检查，缺项按 [依赖安装](onboarding.md) 补装。
-
-```sh
-python3 <skill-dir>/scripts/init_project.py --output <video-dir> --style repo --repo <repo-dir>
-cd <video-dir>
-python3 <skill-dir>/scripts/check_environment.py --project . --engine browser
-npm run build
-node stills.mjs evidence/stills 1.5 5 8.5          # 一次会话批量出静帧，并打印页面错误和 API 请求
-node render.mjs --from 4 --to 7 --output renders/draft.mp4   # 局部草稿，不需要音频
-node render.mjs --silent-demo --output renders/technical-demo.mp4
-npm run preview                                     # 浏览器控制台：await seek(4) 或 playFilm()
-node cover.mjs                                      # 从 cover/cover.html 导出 3:4 / 4:3 / 16:9 封面（见 references/cover.md）
-```
-
-正式导出：
-
-```sh
-python3 <skill-dir>/scripts/mix_audio.py plan.json
-node render.mjs --audio assets/master.wav --output renders/final.mp4
-python3 <skill-dir>/scripts/check_delivery.py plan.json --video renders/final.mp4 --mix-report evidence/audio-mix.json
-```
-
-导出逐帧截图（JPEG 中间帧，x264 编码）。50 秒片子、含 WebGL 和模糊滤镜，一般 2–4 分钟；先渲染几秒估算。`--silent-demo` 只用于技术样片；用户要求的正式静音片设 `audioRequired:false` 并记录 `audioExceptionReason`。
-
-## 运行时结构
-
-```
-src/client.jsx        挂载 <Film>，等字体和假数据就绪后运行各镜头的 builder，暴露 window.seek / __filmReady
-src/engine.js         seek(t)：React 时钟 → 交互驱动 → GSAP 主时间轴 → 镜头显隐 → onRender 画布
-src/film-store.js     useShotState(select)：组件按镜头内时间取离散状态（第几步、打了几个字）
-src/fake-api.js       固定时钟、固定随机种子、按路径返回 fixture 的 fetch，静默 EventSource/WebSocket
-src/fixtures/api.js   接口 fixture；尽量从产品自己的常量/目录派生，保证名字、图标是真的
-src/product-context.jsx  产品外壳本该提供的 provider（i18n、主题、tooltip、路由/面板上下文）
-src/kit/              Split + reveal（文字拆分入场）、Cursor + paintCursor、offsetCenter / screenCenterAt、setFieldValue / typed / ensureOpen
-src/shots/index.js    plan.json 每个镜头 id → 视图组件 + builder
-src/film.css          本片的画面规范（字号阶梯、布局），加上逐帧渲染必需的机制
-src/adapters/         next/image、next/navigation 等框架运行时的静态替身，按需 alias
-```
-
-`seek(t)` 是 t 的纯函数，前后跳转、单帧渲染结果一致：
-
-1. `flushSync` 把时间推给 React。组件用 `useShotState(l => stageAt(l, [...]))` 只在离散状态变化时重渲染，例如工具步骤出现、回复多了几个字。
-2. 运行 `onDrive(id, fn)` 注册的驱动，也就是**真实交互**：往真实输入框里打字（`setFieldValue` + `typed`）、点真实按钮打开真实弹层（`ensureOpen`）。驱动要幂等：先按时间算出应有状态，DOM 不同时才动手。需要等弹层定位时返回 Promise，`render.mjs` 会等它。
-3. `master.seek(t)`：所有 GSAP 动画都挂在这一条暂停的主时间轴上，用影片绝对时间摆放。
-4. 按时间显示/隐藏镜头（前后各留 0.8 秒给转场重叠）。
-5. 调用 `onRender(id, fn)` 注册的每帧绘制：Three.js、2D canvas、依赖时间的样式计算。
-
-### 写一个镜头
-
-```jsx
-// src/shots/agent.jsx（示意，名字、结构按本片需要来）
-export function AgentView() { /* 真实组件 + 本片的排版；GSAP 目标用稳定的包裹层 */ }
-export const buildAgent = tl => {
-  const s = shot('agent');
-  // 1. 先测量（布局已存在）：offsetCenter(el, root)，或 screenCenterAt(tl, t, el) 取 3D 变换后的屏幕位置
-  // 2. 再往 tl 上摆动画：tl.fromTo(el, from, to, s.start + 0.4)
-  // 3. 注册每帧工作：onDrive('agent', local => ...)、onRender('agent', local => ...)
-};
-```
-
-- 镜头的起止时间只写在 `plan.json`，代码通过 `shot(id)` 读，时间只有一处来源。
-- GSAP 的 `fromTo` 在搭建时就写入起始值，所以测量要放在摆动画之前。
-- GSAP 时间轴是 thenable：`await tl` 要等时间轴播完，暂停的主时间轴永远不会结束。builder 可以是 async 函数，但不要 await 时间轴本身。
-- React 会重新渲染或条件渲染的节点，不要直接当 GSAP 目标：套一层稳定的包裹层来动。
-- 产品里的微动画（motion/framer-motion、CSS transition）会和影片时钟抢状态：`film.css` 已冻结 CSS 动画；用 motion 库的产品在 `client.jsx` 里打开 `MotionGlobalConfig.skipAnimations`。旋转的加载图标这类需要动的，在 `onRender` 里按时间设 transform。
-- 背景效果可以参考 `assets/fx-lab/` 改写，见 [视觉手法词汇](visual-vocabulary.md)。
-
-### 首帧海报
-
-开场大多从空画面入场，但平台会拿第一帧当缩略图。解决方法：在最上层盖一张开场完成态的静帧，前 0.3 秒（约 9 帧）完全不透明，再用 0.3 秒淡出。底下的开场动画照常从 0 秒开始，时间轴和音效都不用改。
-
-起步工程里同一份 DOM 由 GSAP 主时间轴驱动，没法同时停在 0 秒和完成时刻，所以海报用真实渲染出来的静帧：
-
-1. 开场搭好后，挑开场段落完成、标题都在的时刻出静帧，放进 `public/`（`build.mjs` 会复制到 `dist`）：
-   ```sh
-   node stills.mjs public/poster 5.9 && mv public/poster/t005.90.png public/poster.png && rmdir public/poster
-   ```
-2. 在 `film.jsx` 的 `<main>` 末尾加 `<img id="poster" src="poster.png" alt="" />`，样式铺满画面、`z-index` 高于所有镜头，然后 `npm run build`。
-3. 在开场镜头的 builder 里把淡出挂到主时间轴上。不要用 `onRender`：它只在镜头附近调用，直接跳到片子后段时海报会一直盖着。
-   ```js
-   tl.fromTo('#poster', {opacity: 1}, {opacity: 0, duration: 0.3, ease: 'none'}, 0.3);
-   ```
-
-开场改了，就重新出一次静帧，否则海报和片子会对不上。视图本身是时间纯函数（直接按 `t` 渲染）的片子，也可以不用静帧，在 0.6 秒内再挂一份 `<Opening t={完成时刻} />` 当海报层，原理相同。
-
-## 接入仓库
-
-1. 在镜头视图里直接 import 该功能的原业务组件和组合层。不要只接几个基础按钮，再手写剩下的界面。
-2. 读产品的根布局和 App 外壳，把组件依赖的 provider 写进 `product-context.jsx`，全部用静态值。缺哪个 provider，运行时会直接报错（`xxx must be used within yyy`），按报错逐个补。
-3. 组件在 effect 里请求数据的，在 `fixtures/api.js` 按路径给 fixture。`stills.mjs` 输出的 `api` 列表就是实际请求过的路径，用来查漏。
-4. 编译产品真实样式到 `src/product.css`（下文），保留主题、字体、图标和状态规则。产品有暗色主题时，`ProductContext dark` 直接启用。
-5. 品牌、字体、公开图标放 `public/`（会复制到网页根），修正组件里的根路径引用（如 `/provider-icons/...`）。
-6. 构建会写出 `evidence/component-imports.json`；逐镜头记录复用证据，见 [组件接入](component-pipeline.md)。
-
-`--style default` / `hybrid` 会复制默认样式组件；`repo` 不复制。起步样片按 1920×1080 布局，改画幅必须重新排版。
-
-### 解析配置
-
-```js
-// integration.config.mjs
-import path from 'node:path';
-const repo = '/absolute/path/to/product', video = path.resolve('.');
-export default {
-  repoDir: repo,
-  aliases: {
-    '@': path.join(repo, 'src'),
-    'next/image': path.join(video, 'src/adapters/next-image.jsx'),     // 组件真的用到才加
-  },
-  external: [], loaders: {}, define: {},
-  esbuild: {},   // 其他 esbuild 选项，例如 tsconfigRaw
-};
-```
-
-构建器打出浏览器 IIFE 包：先从产品的 `node_modules` 解析依赖，React/ReactDOM 统一指向视频工程的那一份（两份 React 会导致 `Cannot read properties of null (reading 'useContext')`）。产品依赖缺失时，只在视频工程安装固定版本的展示依赖。pnpm 等严格隔离的布局按实际 workspace 映射解析路径。含 top-level await 的依赖不能打进 IIFE：换用它的同步入口，或把构建改成 ESM。
-
-monorepo 里直接导出 TS 源码的 workspace 包：把包名 alias 到它的 `src`；带子路径 `exports` 的包，读它的 `package.json` 生成一张子路径 → 源文件的 alias 表。产品开了 `verbatimModuleSyntax` 时，类型导入会被原样保留，可能把服务端运行时拖进浏览器包；用 `esbuild: {tsconfigRaw: {compilerOptions: {verbatimModuleSyntax: false}}}` 只放宽这次展示构建。
-
-暗色 token 挂在 `:root` 的 `dark` 变体上时，`dark` class 必须加在 `<html>` 上（`client.jsx` 挂载前执行 `document.documentElement.classList.add('dark')`），加在某个 div 上不生效。同一画面要同时出现几套主题时，先确认 Tailwind 工具类直接引用 `var(--token)`，再把主题色写成元素级 CSS 变量。
-
-某个 alias 需要"换掉一个模块里的一个导出、其余照旧"时（例如让弹层的 portal 挂进镜头里），adapter 可以先 `export * from '<真实文件绝对路径>'`，再单独导出同名的替身。
-
-### Next / Tailwind 样式链
-
-Tailwind 源 CSS 要先编译。Tailwind v4：创建 `src/product.input.css`，导入产品真实的 CSS 入口，并扫描产品源码和视频源码：
-
-```css
-@import "/absolute/path/to/product/src/app/globals.css";
-@source "/absolute/path/to/product/src";
-@source "./";
-```
-
-```sh
-npx @tailwindcss/cli -i src/product.input.css -o src/product.css   # 版本与产品一致
-npm run build
-```
-
-镜头代码里新写了 Tailwind 类，要重新编译。Tailwind v3 用对应版本的 CLI 和继承产品 theme/plugins 的配置，`content` 同时包含产品与视频源码。产品 CSS 里的 `url(...)` 字体/图片要能在 `dist/` 里找到。来源：[esbuild nodePaths](https://esbuild.github.io/api/#node-paths)、[Tailwind CLI](https://tailwindcss.com/docs/installation/tailwind-cli)。
-
-## plan 字段
-
-- `demo`：技术样片 true，正式内容完成后设为 false。
-- `product / width / height / fps / duration / style / audioRequired`：工程规格。
-- `typography`：默认 `mode:bilingual`，分别指定 `zhFont / enFont`，`zhStyle:sans-serif`；用户指定单语或其他字体时，用 `exceptionReason` 记录依据。
-- `shots[]`：`id, start, end, type, headlineEn, headline, plainExplanation, description, descriptionAt, claim, source, component, actions`。镜头在代码里的实现以 `DIRECTION.md` 的镜头表为准，plan 记录时间、事实与声音，两者要一致。
-- `claim` 为 true 的镜头必须给 `source`。写法：`file:docs/release.md`（相对视频工程）或 `repo:src/features/panel.tsx`（相对 `plan.repo`），支持 `:行号` / `#L行号`；裸路径先查视频工程再查 `plan.repo`；URL、版本标签、提交引用留给事实核对。品牌开场不需要假造 source。
-- `component`：实际源码路径或适配器；字卡可为 null。
-- `actions`：唯一 `id`、相对镜头开始的 `at`、动作描述、`soundRequired`。
-- `audio.music / audio.cues`：cue 的 `at` 是文件开始的影片绝对时间，`syncOffset` 是文件内听觉落点，满足 `at + syncOffset = 动作时间`。落点用 `scripts/sfx_landmarks.py` 测，不要猜。可选 `onBeat` / `beatDivision` 对照 `audio.beatGrid`。
-- `descriptionAt`：说明文字相对镜头开始的出现时间，用于阅读时间提示。
-
-改了分镜或配乐就重新混音；正式导出会核对 plan 与 master 的哈希。通用占位组件带 `data-skill-placeholder`，正式模式下 build 会拒绝仍在画面上的占位内容。
-
-## 接入回归
-
-修改构建器、引擎或 kit 后运行：
-
-```sh
-python3 -m unittest discover -s <skill-dir>/tests
-node <skill-dir>/tests/integration.mjs --modules <video-dir>/node_modules
-```
-
-集成测试在临时目录构造一个产品仓库，验证：只存在于产品里的依赖和 alias 能解析、CSS 资源能复制、组件 effect 通过 fixture API 拿到数据、前后跳转时 GSAP 状态正确、WebGL 能在无头导出里渲染。它不会自动安装依赖。

package/skills/guizang-product-video-skill/references/story-and-copy.md

@@ -1,88 +0,0 @@
-# 分镜、文案与节奏
-
-## 从更新清单到故事
-
-结构先在 [影片方向](direction.md) 里选定：先给主张再逐段证明是最常见的一种，另外还有"问题 → 解决""完整做完一件任务""一镜到底""前后对比"等，按内容选。45–60 秒通常适合 3–5 组更新、约 10–14 个镜头；这是容量参考，不是必须填满的模板。小版本可以 20 秒，复杂功能也可以更长。
-
-每个镜头在 `plan.json` 记录：起止时间、类型、主文案、解释、卖点来源、真实组件/适配器、主要动作、声音提示。先估算阅读和演示时间，再贴合音乐节拍，不要先锁死 48 秒再塞文案。
-
-以"主张 → 证明"结构为例，可参考的段落：
-
-| 段落 | 画面职责 | 节奏参考 |
-| --- | --- | --- |
-| 开场 | 一句直接的变化，大字或品牌 | 2–4 秒 |
-| 核心能力 | 字卡提出能力 → 组件特写证明 → 工作区交代上下文 | 每组 7–12 秒 |
-| 小优化 | 2–3 个独立清楚的细节 | 每项 2–4 秒 |
-| 收尾 | 产品标识和一句收束；行动遵从发布要求 | 2–3 秒 |
-
-镜头变化来自“要让观众看哪里”：单组件放大、左右对话、聚焦输入区、工作区展开、纯大字、少量并列卡片。不是用随机转场制造忙碌感。
-
-## 中文文案要说人话
-
-- 标题可以短，小字不能只剩关键词。
-- 小字尽量有主体/动作/结果，观众第一次看到也能知道变化。
-- 用产品用户熟悉的词，避免在宣传片中解释构建脚本、SSR 或技术适配。
-- 功能名与真实界面一致；不改成“更聪明、更丝滑、更自由”这类无法证明的泛词。
-
-案例：
-
-| 过于省略 | 更清楚 |
-| --- | --- |
-| 上下文，跟得上。 | 更换模型后，可以带着之前的对话内容继续工作。 |
-| 预览与浏览，就在旁边。 | 用内置浏览器打开网页，随时查看项目效果。 |
-| 任务通知。少一点守候。 | 任务完成后会收到通知，不用一直盯着对话窗口。 |
-| CLI 维护。 | 在设置里检查 CLI 状态，需要时直接更新。 |
-
-这些句子仅是 CodePilot 的写法示例，不能直接套到没有这些功能的产品。
-
-## 标题的中英分工
-
-默认采用英文短标题 + 中文清楚的一句话；两者都在主要视觉层级，英文负责提炼能力/动作，中文负责让人直接理解。英文根据每个功能选择有实际意义的短语。
-
-- 中文标题和正文统一无衬线体系，字重/字号区分层级。
-- 英文独立 span，指定 `--film-font-en`；中文独立 span，指定 `--film-font-zh`。英文可用有气质的衬线，中文用干净的黑体；也可按品牌选两套合适的无衬线。**中英文分配字体，不是让字体 fallback 随机分配字形。**
-- 主字卡可用英文大字 + 中文中等标题；组件页可将短英文放在中文标题上方，仍应足够显眼。不是每一小按钮都翻译成双语。
-- 英文必须贴合功能；不要机械翻译中文长句，不为了排版强塞无关口号。中文说明即使观众不懂英文也能独立理解。
-- 字体选择来自产品设计或可用授权字体；系统字体仅用于技术预览，正式工程冻结字体资源并查看实际字形。不能仅凭 CSS 字体名判断已加载。
-
-| 英文主标题 | 中文标题 | 中文说明（功能真实存在时使用） |
-| --- | --- | --- |
-| Switch models | 换个模型，接着聊 | 切换模型后，之前的对话会一起带过去，不用重新交代一遍。 |
-| Browse here | 网页直接在旁边打开 | 在应用内打开网页，可以一边对话，一边查看页面内容。 |
-| You're notified | 做完了，会提醒你 | 任务完成后会弹出通知，你可以先去处理别的事。 |
-
-不要反复把这三组文案当成所有产品的固定模板；先查事实再改写。用户明确指定单语/字体时尊重选择，在 `typography.exceptionReason` 记录原话/依据。
-
-## 文案试读：有句号也可能仍然是空话
-
-按功能逐项执行，写入 `evidence/copy-review.md`：
-
-1. 先写白话事实：“以前要做什么，现在怎么做，结果有什么不同。”只写有来源的部分；不知道以前行为就不编造对比。
-2. 从中提炼标题，再写说明。说明必须交代**操作对象 + 动作 + 可观察结果**，必要时补使用场景；长度以讲清楚为准。
-3. 遮住截图和英文，只读中文给没用过产品的人听。若仍需问“什么接上了？在哪看？会发生什么？”，重写。
-4. 检查标题与说明是否只是同义重复；说明应补充操作或结果，而非再次赞美产品。
-5. 用自然聊天语气朗读，再检查字幕显示时间。不要以“字数够了”“有句号”代替内容审查。
-
-补充反例：
-
-| 不通过 | 为什么不清楚 | 可以这样说（以真实功能为前提） |
-| --- | --- | --- |
-| 让工作流自然流转。 | 没说哪个动作变了 | 提交修改后，可以在同一个窗口里查看检查结果。 |
-| 从灵感到落地，一气呵成。 | 万用赞美，没提供信息 | 写下需求后，AI 会生成代码，你可以直接预览修改后的页面。 |
-| 结果，触手可及。 | “结果”是什么、在哪看不明 | 任务完成后，点击通知就能回到对应的对话。 |
-
-`plainExplanation` 存放按事实写的白话解释；`description` 是最终上屏文字。两者可相同，不能为了“高级感”把具体解释重新压成抽象短语。脚本只能发现缺字段/部分可疑措辞，语义是否清楚仍须上述试读。
-
-## 动作、停留与音乐
-
-- 入场/选中/切换动作通常 0.25–0.6 秒；让动作有明确起止。
-- 每个镜头一般安排“建立画面 → 核心动作 → 可读结果 → 切走”，不要全部元素一起飘入再静止 5 秒。
-- 说明文字早出现，让阅读时间与组件演示重叠。长句不靠缩字号解决，优先删冗词、分句或增加停留。
-- 每秒约 6–9 个中文字可作粗略预警线。UI 同时发生复杂变化时还要留余量；这是人工阅读起点，不是通过阈值。
-- 可从 110–125 BPM 开始编曲；拍点约为 `60 / BPM` 秒，主动作贴重拍，小动作错开半拍。不要把所有片段硬量化成同一长度。
-- 空白或完全静止并非一概错误：短暂停顿用于强调/阅读。警惕无信息的长停顿；不要为了消除静止检测加入无意义晃动。
-- 结尾要有完整落版与声音收束。无网站链接时，可以只留下产品名/Logo 与一句结束语。
-
-## 静帧审阅
-
-从实际代码截取代表镜头，按播放顺序排成一张联系表。核对是否有画面尺度变化、是否一眼知道主次、缩小到手机宽度能否读懂解释，中文说明有没有单独掉到下一行的字或标点。静帧通过只能证明布局方向；节奏、动作连贯和声音仍需看成片，方法见 [审片](review.md)。

package/skills/guizang-product-video-skill/references/visual-vocabulary.md

@@ -1,78 +0,0 @@
-# 视觉手法词汇
-
-按作用分组列出常用手法。每条写它表达什么、应该从产品的哪一点推导、实现要点和常见陷阱。**这是词汇，不是菜单**：一支片子挑 3–5 个能从产品推导出来的，其余不用。选之前先读 [影片方向](direction.md)。
-
-所有手法都要满足同一条技术约束：画面只由时间决定（seek-safe）。GSAP 动画挂在主时间轴上；canvas/WebGL 写成 `render(t)` 纯函数，注册到 `onRender`；随机数固定种子。`assets/fx-lab/` 有标 ★ 的几种手法的可改写样例。
-
-## 开场与钩子
-
-| 手法 | 表达 | 从哪里推导 | 实现要点 | 陷阱 |
-|---|---|---|---|---|
-| 流线场 / 穿越 ★ | 速度、进入一个世界 | 产品的"快"或"多" | Three.js 线段，位置 = 速度的积分 | 平静的产品用它显得浮夸 |
-| 槽位轮换 | 痛点的重复（今天 A 明天 B） | 用户真实在换的东西 | 硬切或极短模糊切，间隔逐步加快 | 淡入淡出会失去节奏感 |
-| 真实界面微距 | 直接进入产品 | 最有代表性的一个控件 | 真实组件放大 3–4 倍，景深虚化其余部分 | 放大后文字断行、溢出 |
-| 一句话逐字书写 | 安静、有分量 | 写作、对话类产品 | 逐字或逐笔，配光标 | 句子太长，观众等不及 |
-| 数据先行 | 用结果开场 | 有可证明的数字 | 数字滚动 + 图表路径画出 | 没有来源的数字 |
-
-## 品牌与标志
-
-| 手法 | 表达 | 从哪里推导 | 实现要点 | 陷阱 |
-|---|---|---|---|---|
-| 粒子汇聚成形 ★ | 分散的东西归于一处 | 标志本身是几何构造 | 从渲染好的 SVG 取格子（`targetsFromSvg`），粒子落定后换成清晰 SVG | 标志不是几何构造时硬拆 |
-| 构造线与控制点 | 精密、被设计过 | 设计类产品，或标志有网格 | SVG 线条用 `strokeDashoffset` 画出，方形节点弹出 | 线太多、太亮，抢主体 |
-| 字标描边成实 | 从草图到成品 | 字标有特色 | 描边路径画出再填充 | 中文字体路径太复杂 |
-| 挤出 / 等距体块 | 结构、稳重 | 标志有立体潜力 | CSS 3D 叠层或 Three.js 挤出几何 | 过度的光泽材质显廉价 |
-| 形状变形 | 一种东西变成另一种 | 标志和产品界面有形状关联 | SVG path 插值（点数要一致）或遮罩 | 变形中间态很丑 |
-
-## 舞台与背景
-
-| 手法 | 表达 | 从哪里推导 | 实现要点 | 陷阱 |
-|---|---|---|---|---|
-| 发光地平线 ★ | 登场、仪式感 | 暗色、高端的产品 | CSS 多层径向渐变 + 暗色本体遮挡 | 连续镜头都用；和浅色产品冲突 |
-| 渐变场 | 情绪、品牌色 | 品牌色丰富的产品 | 慢速移动的大色团（canvas 或 CSS），低对比 | 铺在密集界面后面，看不清 |
-| 字符场 ★ | 代码、数据、底层 | 技术产品，用它自己的代码或数据 | 2D canvas 字符网格 + 噪声亮度，中心留空 | 面向非技术受众时显得冷 |
-| 纸张与墨 | 书写、温度 | 写作、笔记类产品 | 纸纹理 + 墨迹扩散遮罩 | 纹理太重，显脏 |
-| 网格与点阵 | 秩序、工具感 | 设计、数据工具 | 极淡的点或线，随镜头有视差 | 和界面网格打架 |
-| 环境景深 | 真实使用场景 | 硬件、移动端 | 设备模型 + 背景虚化 | 伪造产品没有的硬件 |
-
-## 产品上镜
-
-| 手法 | 表达 | 从哪里推导 | 实现要点 | 陷阱 |
-|---|---|---|---|---|
-| 放大取景 + 推拉 | 让观众看清一件事 | 所有功能镜头 | 摄像机包层用 GSAP 动 x/y/scale；落点先在时间轴上测出来（`screenCenterAt`） | 在 3D 倾斜下手算落点会偏 |
-| 透视倾斜的面板 | 空间感、高级感 | 暗色、层级清楚的界面 | 父层设 `perspective`，面板 `rotationX/Y` 小角度，随时间缓慢变化 | 弹出层（portal）在 3D 变换里定位会错，打开时回到平面 |
-| 平放看板 + 镜头飞越 | 全局、体系 | 有很多卡片或模块的页面 | 整页 `rotationX 50–60°` 抬起到 10–20° | 抬得太快晕；卡片文字太小 |
-| 沿 Z 轴抬起细节 | 在全局中指出重点 | 列表/卡片中的关键项 | 在 `preserve-3d` 的同一容器里给副本加 `translateZ` 和阴影，背景压暗 | 抬起的是手画的而不是真组件 |
-| 环绕 ★ | 很多东西连接到一个核心 | 集成、服务商、插件数量 | 手工投影：深度控制大小、透明度、模糊和层级 | 为了凑满一圈虚构成员 |
-| 光标操作 | 这是可以点的真东西 | 交互类功能 | 光标在产品坐标系里移动，点击落在拍点，真实点击触发状态 | 点击后没有状态变化 |
-| 真实打字与流式输出 | Agent/对话在工作 | 对话、生成类产品 | 用原生 setter 写入真实输入框；回复按时间截断字符 | 整段一次性出现 |
-
-## 章节与文字
-
-| 手法 | 表达 | 从哪里推导 | 实现要点 | 陷阱 |
-|---|---|---|---|---|
-| 章节大字 | 段落分隔、节奏 | 功能可归成几个动词 | 一个词占满画面，1–1.5 秒 | 词没有意义（UPDATE、NEW） |
-| 切片错位 ★ | 信号、打断 | 需要一次强烈换段 | 文字切成横条，从不同偏移弹回；配细光条 | 当成默认标题入场 |
-| 逐字模糊入场 | 精致、呼吸感 | 大多数标题 | `Split` + `reveal`，间隔 0.02–0.05 秒 | 每个元素都用它，变成单调 |
-| 词语快切 | 很多小功能 | 小功能不值得单独成镜 | 每拍一个词，入场方式轮换，配计数 | 每个词停太久，变成字幕 |
-| 光束扫过 | 强调、完成 | 片尾或关键词 | 一条带辉光的横线快速扫过 | 频繁使用失去分量 |
-| 衬线编辑感标题 | 品位、内容型产品 | 内容、阅读类产品 | 衬线英文 + 无衬线中文，字距收紧 | 中文用衬线显得老气 |
-
-## 转场
-
-| 转场 | 用在 | 实现要点 |
-|---|---|---|
-| 硬切卡拍 | 冲击、明暗突变 | 切点落在拍点上；前一镜先把主角模糊掉，切得更干净 |
-| 穿越缩放 | 从概念进入产品内部 | 前一镜的主角放大并淡出，后一镜从略大缩回 |
-| 推近接续 | 前一镜的某个元素就是下一镜的主角 | 推近到那个元素，下一镜从同一位置、同一大小开始 |
-| 白闪 / 黑场 | 大段落之间 | 0.15–0.25 秒，配冲击音 |
-| 遮罩擦除 | 并列的功能之间 | 形状来自产品（圆角矩形、标志形状） |
-
-浅色和深色镜头之间不要做长交叉淡化：中间会出现一片发灰的画面。用硬切，或者先让前一镜的主角模糊退场再切。
-
-## 技术备忘
-
-- **Three.js 在无头导出里**：起步工程的 `render.mjs` / `stills.mjs` 已带 SwiftShader 参数；渲染器要设 `preserveDrawingBuffer: true`，像素比 1。
-- **一个 WebGL 画布一个场景**，整片控制在 2–4 个上下文以内；背景层能用 CSS 或 2D canvas 就不用 WebGL。
-- **GSAP**：主时间轴是 paused 状态，由 `seek` 驱动。`fromTo` 在搭建时就会写入起始值，要在布局测量完成后再搭。React 会重新渲染的节点不要当作 GSAP 目标，动画挂在稳定的包裹层上。
-- **CSS 滤镜**（blur）和 3D 变换在逐帧截图里都能正常工作，但大面积 blur 会拖慢导出；先渲染几帧估算耗时。

package/skills/guofeng-paper-video/SKILL.md

@@ -1,159 +0,0 @@
----
-name: guofeng-paper-video
-description: "用一套可复用的「国风纸片动画」风格资产 + AICUT，把一首诗 / 一个成语 / 一则寓言做成一条带配音的国风短片。给 Claude Code / Codex 读，它照着这套风格和流程搭新片。 Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: MIT
-source: "AllenAI2014/remotion-guofeng-starter"
----
-
-# 国风纸片动画 · 制作流程 Skill
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-这个仓库有两半：
-
-- **风格资产**（`style/` + `src/components`、`src/style`、`src/lib`）——跟具体故事解耦的国风视觉 DNA、色卡、纸片规范、图层运动预设、提示词模板。这是"可复用"的部分。
-- **这份 SKILL.md**——教 AI 用上面那套风格，从零搭一条**新**片的流程。
-
-`src/examples/` 里的《守株待兔》是用这套风格做出来的**演示**，不是"产品本体"。你不是来拿走这一条片，是来用这套风格做你自己的片。
-
-## 何时用
-
-用户给你一首诗 / 一个成语 / 一则寓言 / 一个要讲的小概念，想做成一条"国风纸片拼贴"风格的短视频，且**不想剪辑**（全程代码渲染，不进剪映）。
-
-## 前置
-
-- Node 18+（建议 20+）、`npm install` 过。
-- 中文字体：宋体 / 楷体 / 苹方（macOS 自带；Windows / 云端要装，否则中文走形）。
-- 先读 [`style/design.md`](style/design.md) 和 [`style/palette.md`](style/palette.md) 把风格吃进去——**这一步别跳**，后面所有决定都以它为准。
-
-## 可复用件清单（搭片时直接用，别重写）
-
-| 件 | 位置 | 干嘛 |
-|---|---|---|
-| `PaperCollageLayer` | `src/components/PaperCollageLayer.tsx` | ★核心：一张纸片的入场回弹 + 呼吸浮动 + 纸投影，你只填 spec |
-| `FieldPlate` | `src/components/FieldPlate.tsx` | 背景大图层 + 推镜 + 干/暖色调 |
-| `PaperTag` | `src/components/PaperTag.tsx` | 撕边纸标签（宋体大标题 + 小注） |
-| `StoryCaption` | `src/components/StoryCaption.tsx` | 底部四向描边字幕 |
-| `guofeng` / `C` | `src/style/palette.ts` | 国风色卡 token |
-| `clamp` | `src/lib/anim.ts` | interpolate 两端钳住的简写 |
-
----
-
-## 模式 A · 先跑通示例（10 分钟摸到门道）
-
-啥也别改，先出片感受这套风格。两条案例分别展示成语叙事和古诗意境：
-
-```
-npm run render                # → 《守株待兔》（带声，25.5 秒）
-npm run render:jiang-xue      # → 《江雪》（带声，88 秒）
-npm run studio                # 打开可视化预览，逐帧查看两条 composition
-```
-```
-做成语、寓言时，优先参考 `src/examples/IdiomShouZhuDaiTu.tsx` 的分镜结构；做古诗意境和人物入画时，参考 `src/examples/PoemJiangXue.tsx` 的长时间轴、雪景氛围和纵向诗句。两条片共享的是风格与分层方法，不是换几个参数就自动套出的同一条模板。摸熟了再进模式 B。
-
----
-```
-
-## 模式 B · 给一首诗 / 一个成语，出一条新片
-
-六步。每步都给"可以直接对 Claude Code / Codex 说的话"。
-
-### 1. 读风格
-```
-读 style/design.md 和 style/palette.md，用一段话复述这套国风风格的视觉和运动规则，确认你理解了再往下。
-```
-
-### 2. 分镜
-用 [`style/prompts/01-分镜表.md`](style/prompts/01-分镜表.md) 的模板，产出**分镜表 + 纸片清单**。确认分镜再往下——分镜错了，后面全白做。
-
-### 3. 生成纸片
-用 [`style/prompts/02-生成纸片.md`](style/prompts/02-生成纸片.md) 的图像提示词，一张张出白描透明纸片 + 一张背景大图，抠边，按 [`style/纸片素材规范.md`](style/纸片素材规范.md) 命名放进 `public/style/{新slug}/`。
-> 生图工具看你用谁：**Codex** 能直接生图（自带图像生成），最省事；**Claude Code** 自己不出图，得另接一个图片生成 API，或用即梦 / Lovart / MJ 生完再放进来。抠透明底这步都得你手动过一下工具（remove.bg / 即梦去背 / PS），Agent 代跑不了。
-
-### 4. 搭 composition
-```
-根据内容类型参照 src/examples/IdiomShouZhuDaiTu.tsx 或 src/examples/PoemJiangXue.tsx，在 src/examples/ 新建 {新slug}.tsx。
-按分镜表，每镜一个 Sequence（120 帧/4 秒起）：
-- 背景用 FieldPlate（src 指向新片的 field-plate）
-- 每张纸片用 PaperCollageLayer，按 style/分镜与图层规范.md 填 spec：
-  主角给 role='primary'、远景给 'tertiary'，delay 错开入场
-- 每镜配一句 StoryCaption 旁白，需要说明的地方加 PaperTag
-颜色只用 src/style/palette.ts 里的 token。总时长常量 = 帧数（秒×30）。
-```
-```
-细则见 [`style/分镜与图层规范.md`](style/分镜与图层规范.md)。**只搭画面，音频下一步。**
-```
-
-### 5. 配音 + 音效
-用 [`style/prompts/03-配音脚本.md`](style/prompts/03-配音脚本.md)：整理配音脚本 → **MiniMax** 合成 `vo-0x.wav` → 放 `public/audio/{新slug}/` → 在新片里写一个 `StoryAudio`（ambient 打底 + 每句 vo 卡镜 + 转场/撞击音效）。
-
-### 6. 注册 + 预览 + 出片
-```
-在 src/Root.tsx 里给新片加一个 <Composition />（id、component、durationInFrames、fps=30、1920×1080）。
-然后 npm run studio 预览逐帧调，npm run render 出片。
-```
-```
-预览里不对就回上一步改一句需求，重渲染。**你改的是"需求"，不是一帧帧 K 帧。**
-
----
-```
-
-## 模式 C · 从一部参考片提炼新风格（进阶，可选）
-
-想把这套"纸片拼贴"的做法迁到**另一种画风**（比如敦煌、水墨、剪纸）：不要照抄参考片的角色和剧情，只提炼**可复用的视觉语法**——
-
-```
-看这几张参考图 / 这条参考片，只提炼可复用的东西，别抄具体内容：
-1. 一份色卡（HEX + 用途），覆盖 src/style/palette.ts
-2. 构图 / 镜头 / 材质规则，更新 style/design.md
-3. 纸片该长什么样，更新 style/纸片素材规范.md 和生图提示词
-把参考片里的角色、剧情、专有元素列进一份「不要照搬」清单。
-```
-```
-产出的是新的 `style/`，`src/components` 那套运动件不动，照样复用。
-
----
-```
-
-## 坑（都是踩过的）
-
-- **字体**：非 macOS 环境中文会 fallback 走形，先装宋体 / 楷体 / 苹方，或改 `fontFamily`。
-- **音频别漏**：换素材时容易只顾换图、漏掉音频目录，`render` 会报"找不到文件"。音频目录整个带上。
-- **纸片别带字**：中文交给代码渲染（零错字）；纸片图上写字 = 把这个优势丢了。
-- **别一个 role 到底**：所有纸片同 role，画面会整体平移、没纵深。主角 primary、远景 tertiary。
-- **这不是一键生成器**：分镜、拆纸片、节奏是创意活，AI 帮你落地、替你决定不了。它给的是一套能复用的风格 + 一条能照抄的流程。
-
-## Source
-
-Rewritten for AICUT from [`AllenAI2014/remotion-guofeng-starter`](https://github.com/AllenAI2014/remotion-guofeng-starter)
-(MIT), SKILL.md. The method is that skill's own; the way it runs is AICUT's.

package/skills/guofeng-paper-video/style/design.md

@@ -1,43 +0,0 @@
-# 国风纸片动画 · 视觉 DNA
-
-这份文档描述这套风格**长什么样、怎么动**，跟任何具体片子（守株待兔 / 江雪）无关。做新片前，先让 AI 读这份 + `palette.md`，把风格吃进去，再动手分镜。
-
-## 一句话
-
-把一个画面**拆成一张张白描纸片**，每张单独入场、呼吸、位移，叠在一张墨线山水背景上，点一枚朱红印章——像一幅会动的手工拼贴。
-
-## 六个视觉支柱
-
-1. **纸片拼贴**：画面主体（人 / 动物 / 器物 / 山 / 云）各是一张透明背景白描 PNG，独立成层。不是一整张图在动，是一叠纸片各飘各的。
-2. **墨线白描**：所有元素走白描线稿——细墨线勾边、淡赭石/墨色晕染。不要写实照片、不要厚涂、不要 3D。
-3. **暖纸材质**：底色是暖米白纸（`#efe2c6` 一带），带纸纹；纸片边缘**撕裂毛边**（不规则多边形 clipPath），叠一层**硬纸投影**（亮边 + 暖褐暗影）。
-4. **朱红印章**：唯一的高饱和色是朱红（`#8f2019`）。用在圆/方印章、楷体大字（"咚""完"）、关键标签。面积小、位置刁，起"敲一下"的作用。
-5. **横版留白构图**：1920×1080；背景满幅 + 缓推镜；主体纸片错落偏置、不居中堆叠；左上角贴撕边纸标签，底部居中走字幕。
-6. **中文靠代码渲染**：所有文字用系统字体现渲染（宋体 / 楷体 / 苹方），**不让 AI 把字画进图里**——这是"零错字"的来源，也是这套风格相对 AI 生图的核心优势。
-
-## 运动语言
-
-- **入场**：纸片从侧下方带回弹地滑入（spring），同时从略小放大到位。主角滑得远、回弹明显；远景几乎在原地淡入。
-- **待机**：入场后每张纸片做极缓慢的正弦"呼吸"浮动（不同纸片相位错开，避免同步）。
-- **分层视差**：靠"角色"拉开层次——主角（primary）动得多，中景（secondary）中等，远景（tertiary）几乎不动。**这一条是整套质感的关键**，别让所有纸片一样地动。
-- **镜头**：背景大图缓慢推近（几帧内 scale 1.02→1.05 + 轻微平移），给静止画面一点呼吸。
-- **转场**：一块朱红撕纸从画面横扫而过，接下一镜。
-- **卡点**：印章落下、物体相撞这类"重音"，配一声音效卡在动作帧上。
-
-## 字体
-
-| 用途 | 字体 |
-|---|---|
-| 标签大标题 | 宋体 `Songti SC` / `STSong` |
-| 印章 / 楷体重字 | 楷体 `STKaiti` / `Kaiti SC` |
-| 字幕 / 小注 / 正文 | 苹方 `PingFang SC` |
-
-> macOS 自带这三种。Windows / 云端渲染要装上，或换成本机等价中文字体，否则中文 fallback 走形，"零错字"优势就没了。
-
-## 明确禁用
-
-写实照片、厚涂 CG、3D 渲染、发光 / 霓虹 / 赛博、扁平 emoji 贴纸、塑料渐变、多种高饱和强调色同台、让 AI 把中文标题直接生进图里。
-
----
-
-节奏参数、色值、纸片规格分别见 [palette.md](palette.md) / [纸片素材规范.md](纸片素材规范.md) / [分镜与图层规范.md](分镜与图层规范.md)。

package/skills/guofeng-paper-video/style/palette.md

@@ -1,21 +0,0 @@
-# 国风色卡
-
-代码里在 [`src/style/palette.ts`](../src/style/palette.ts)（导出 `guofeng`，别名 `C`）。改风格从这一处改，全片跟着变。
-
-| token | HEX | 名 | 用途 |
-|---|---|---|---|
-| `red` | `#8f2019` | 朱红 | 印章、楷体重字、最强调的一处 |
-| `redDark` | `#591612` | 暗红 | 背景兜底、收尾场底色、撕纸转场 |
-| `paper` | `#efe2c6` | 纸 | 次级标签底、纸感面 |
-| `paperLight` | `#f8efd9` | 亮纸 | 主标签底、高亮块 |
-| `ink` | `#241a14` | 墨 | 描边、正文字、边框 |
-| `ochre` | `#b3833f` | 赭石 | 辅助点缀、暖调过渡 |
-| `dust` | `#806a4d` | 尘 | 远景、弱化元素 |
-
-## 用色规矩
-
-- **一片只有一个高饱和色**：朱红。其余都是纸、墨、赭的低饱和暖色。想换季 / 换情绪，动 `red` 一处即可。
-- **朱红面积要小**：印章、重字、一条边——点一下就够，别大面积铺红（收尾场例外，可用 `redDark` 满铺压场）。
-- **描边统一 `ink`**：所有纸片标签、边框走墨色，别用纯黑 `#000`。
-- **背景兜底 `redDark`**：纸片没盖满时露出的底用暗红，别露白。
-- **荒芜 / 收束**：把背景切到 `dry` 调（去饱和 + 压暗，见 `FieldPlate` 的 `mood="dry"`），叙事从暖转冷。

package/skills/guofeng-paper-video/style/prompts/01-/345/210/206/351/225/234/350/241/250.md

@@ -1,19 +0,0 @@
-# 提示词 · 出分镜表
-
-把这段丢给 Claude Code / Codex，替换 `{{诗或成语}}`：
-
-```
-我要用「国风纸片动画」风格把 {{诗或成语}} 做成一条短片。
-先读 style/design.md 和 style/palette.md 吸收风格，然后给我一张分镜表。
-
-要求：
-- 30fps，每镜约 4 秒（120 帧），总时长控制在 {{20-30}} 秒
-- 逐镜给：镜号 | 时长(帧) | 画面描述 | 需要的纸片清单(语义英文名) | 旁白字幕(中文一句) | 印章/重音(可选)
-- 画面要能拆成「背景大图 + 若干白描纸片」，别出现整幅带文字的图
-- 旁白口语、每镜一句、能对上画面
-- 最后汇总一份「纸片清单」（去重），我拿去生图
-
-先只出分镜表，别写代码。
-```
-
-产物：一张分镜表 + 一份纸片清单。确认后进 [02-生成纸片.md](02-生成纸片.md)。

package/skills/guofeng-paper-video/style/prompts/02-/347/224/237/346/210/220/347/272/270/347/211/207.md

@@ -1,37 +0,0 @@
-# 提示词 · 生成白描纸片
-
-## 给绘图工具（即梦 / Lovart / MJ）
-
-> 用 **Codex** 可以直接让它生图（自带图像生成），省去外部工具；用 **Claude Code** 则要另接一个图片生成 API，或者用下面的提示词喂即梦 / Lovart / MJ 生完再放进来。
-
-按分镜的纸片清单，一张一张出。中文模板（替换 `{{}}`）：
-
-```
-国风白描线稿，{{主体，如"一个弯腰锄地的农夫"}}，
-单个主体、居中、完整，纯色浅背景便于抠图，
-细墨线勾边、淡赭石晕染，无写实光影、无阴影、无文字、无边框，
-传统工笔白描风格。
-```
-
-英文（喂 MJ / nanobanana）：
-
-```
-Traditional Chinese ink-outline (baimiao) line drawing of {{subject}},
-single subject, centered, full body, plain light background for easy cutout,
-fine ink linework with light ochre wash, no realistic shading, no cast shadow,
-no text, no border, gongbi baimiao style.
-```
-
-背景大图把主体换成场景：`{{墨线山水 / 田野 / 庭院}}，满幅，留出主体活动的空间`。
-
-## 抠边（对 Claude 说 / 手动）
-
-```
-把生成的纸片抠成透明背景 PNG，去掉底色，保留白描线，
-主体居中留边，按语义英文名存到 public/style/{{slug}}/layers/。
-背景大图存 public/style/{{slug}}/field-plate.png。
-```
-
-（抠图本身用 remove.bg / 即梦去背 / PS，这一步 Agent 代跑不了，留给你手动。）
-
-要点重申：**透明底、白描、无文字、无写实阴影、长边 ≥ 1000px**。细则见 [../纸片素材规范.md](../纸片素材规范.md)。