1实现原理 · 为什么它能做到
七步流水线，每步产出一个人工或程序门禁文件才允许进入下一步。
.claude/skills/website-to-hyperframes/SKILL.md
The workflow has 7 steps. Each produces an artifact that gates the next.
注：这里在做什么：把「做个宣传视频」拆成 抓站→DESIGN→SCRIPT→STORYBOARD→VO+对时→构建→校验 七段，各带 Gate（Step 1 打印站点摘要、Step 2 要求 DESIGN.md 存在、Step 5 要求 narration + transcript.json 且 STORYBOARD 时长已更新、Step 7 要求 lint/validate 零错误）。
抓站本身不需要任何 key：hyperframes capture 一次抓取设计 token、截图、字体与资产，并自动生成带 DOM 上下文的描述。
.claude/skills/website-to-hyperframes/references/step-1-capture.md
npx hyperframes capture <URL> -o captures/<project-name> … No API keys required. The capture extracts design tokens, screenshots, fonts, and assets with DOM-context descriptions automatically.
注：这里在做什么：把「读一个网站」变成可离线复用的本地 captures/ 素材；同段还给出读图顺序（先看滚动截图）与丰富抓取（30+ 图）的处理建议。
可选加 Gemini 视觉描述：把 GEMINI_API_KEY/GOOGLE_API_KEY 放仓库根 .env，可让 Gemini 2.5 Flash 生成更丰富的图片描述（有免费额度上限）。
.claude/skills/website-to-hyperframes/references/step-1-capture.md
**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 2.5 Flash vision.
注：这里在做什么：这是本 skill 唯一涉及凭证的地方，且显式可选——页面截图会因此被发给 Google 视觉模型；不配置则抓取照常工作，只少了 AI 描述。
DESIGN.md 被限定为「速查表」而非创意计划，创意计划留给 Step 4 的 STORYBOARD.md。
.claude/skills/website-to-hyperframes/SKILL.md
Write a simple brand reference for the captured website. 6 sections, ~90 lines. … This is a cheat sheet, not the creative plan — that comes in Step 4.
注：这里在做什么：避免把品牌参考与导演意图混在一份文档里——Step 2 只回答「这个站长什么样」，Step 4 才回答「每拍怎么演」。
旁白先于画面：脚本是故事骨架，场景时长来自旁白而不是猜测。
.claude/skills/website-to-hyperframes/SKILL.md
Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.
注：这里在做什么：把时长绑定到 TTS 产物的实测长度（Step 5 用 transcribe 得词级时间戳回填 STORYBOARD 的真实时长）。
TTS 有三条路且默认走本地免费：Kokoro 本地 CPU 生成（无需 key），ElevenLabs 走 MCP 工具（音质最好但不返回时间戳，需另转写）。
.claude/skills/website-to-hyperframes/references/step-5-vo.md
- **Kokoro** (try first — free, no API key) — `npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wav`. Runs locally on CPU. … - **ElevenLabs** (best voice quality, widest selection) — `mcp__elevenlabs__search_voices` to browse, `mcp__elevenlabs__text_to_speech` to generate. Does not return timestamps — transcribe separately after.
注：这里在做什么：把配音成本与隐私做成可选项；随后用 npx hyperframes transcribe 得词级时间戳，把节拍对齐到真实语音。
Step 6 构建必须真正调用 /hyperframes skill，而不是自带一套动画约定。
.claude/skills/website-to-hyperframes/SKILL.md
**Read:** The `/hyperframes` skill (invoke it — every rule matters)
注：这里在做什么：把渲染契约（暂停时间线、clip 层、确定性）外包给权威 skill，本 skill 只负责「每拍导演什么」；Step 6 的 gate 是自评式（自检布局/资产/无静止图）。
交付前双校验零错误，并留 HANDOFF.md 供多会话续做。
.claude/skills/website-to-hyperframes/SKILL.md
Lint, validate, preview. Create a HANDOFF.md for multi-session continuity. … `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors.
注：这里在做什么：把「可交付」定义成 lint/validate 通过 + 交接文档存在，避免会话中断后无法续做。
2核心能力
01网站抓取与素材化：URL → captures/<project>（设计 token、截图、字体、资产 + DOM 上下文描述）
02品牌速查文档（DESIGN.md，6 节 ~90 行）与旁白脚本（SCRIPT.md）
03逐拍创意导演（STORYBOARD.md）：情绪、相机、动画、转场、资产、景深层、SFX + 资产审计表
04配音与对时：TTS（本地 Kokoro / ElevenLabs MCP）→ 转写得词级时间戳 → 回填每拍真实时长
05视频类型/画幅速查（社交广告 10-15s、产品演示 30-60s 等；1920x1080 / 1080x1920 / 1080x1080）
0610 类视觉技法参考（SVG 绘制、Canvas 2D、3D、排版、Lottie、视频、打字、可变字体、MotionPath、转场）供 Step 4/6 使用
07交付校验与交接：hyperframes lint + validate 零错误、HANDOFF.md
08触发面覆盖「只丢一个 URL」：description 第 4 条与正文都声明用户分享链接即可走本流程
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | HyperFrames CLI：capture / tts / transcribe / lint / validate |
| api | Gemini 2.5 Flash 视觉描述（可选，需 GEMINI_API_KEY / GOOGLE_API_KEY，写在仓库根 .env） |
| api | ElevenLabs 语音（经 MCP 工具 mcp__elevenlabs__*，可选；不返回时间戳需另行转写） |
| network | 被捕获的目标网站自身（URL 由用户提供） |
| package | 兄弟 skill：/hyperframes（Step 6 必须调用） |
4风险提醒 风险提醒：橙色 · 评估后使用
风险提醒：橙色 · 评估后使用
- 可选 Gemini 描述会把抓站截图外送（并需要把 key 写进仓库根 .env） — 若目标站含未发布内容或敏感界面，配置该 key 即意味着截图离开本机；不配置则仅损失 AI 描述质量（文档明示两者差异）。
- 抓回来的页面文本与资产是未消毒的外部输入 — 远端页面内容（含可选的自然语言图像描述）会进入 DESIGN.md/STORYBOARD.md 并成为构建上下文；理论上可携带指令式文本影响产出，本 skill 未提供内容消毒或指令隔离条款。
- Step 6 的「合成自评」门禁是软门禁 — 无脚本或人工签字可验（见 second_pass 的 discrepancy 条）；实际质量取决于执行者的自查严格度，交付风险集中在这一步。
- 抓取的字体/图片资产有版权与来源风险 — 抓站会带下字体与图片资产供本地使用，但文档未声明对目标站素材的授权校验；商用前需自行确认。
- 抓站行为依赖外部 CLI 与目标站可用性 — npx hyperframes capture 需要 Node 与网络；目标站改版、需登录或有反抓取会让 Step 1 失败（文档未给登录态抓取方案）。
- 流程偏长，中间产物多 — 七步各自落盘（captures/DESIGN.md/SCRIPT.md/STORYBOARD.md/narration+transcript/compositions/HANDOFF.md），跳过任一环都会让后续门禁失去依据。
风险提醒：橙色，评估后使用。本 skill 自身目录是 9 份 markdown（SKILL.md + references/ 8 份），没有脚本、没有可执行代码、没有硬编码端点；触发橙档的是它在 SKILL.md/references 中声明的执行路径：① **凭证读取 + 素材外送**——step-1-capture.md 明确指示把 GEMINI_API_KEY（或 GOOGLE_API_KEY）放进仓库根 .env，以便把抓到的页面截图交给 Gemini 2.5 Flash 生成更丰富的图像描述（并提示免费额度 5 RPM），被抓站点的截图/资产因此离开本机；② **外部语音服务**——step-5-vo.md 给出 ElevenLabs 的 MCP 路径（账号服务），同时把本地免费 Kokoro 列为**首选**，即有明确降级路径。此外抓取目标本身是用户提供的任意 URL（外发对象可预期但由用户决定）。未发现安全降级（无 TLS 关闭、无 --no-verify）、反自动化绕过或任意代码执行面；本 skill 不含任何脚本，执行面实际由 HyperFrames CLI 与宿主提供。
5第二遍独立确认
- [ok] Gemini key 与截图外发是否真实存在于文档（橙档关键证据） — references/step-1-capture.md 原文两处：抓站命令与 'No API keys required.'，紧接着 '**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 2.5 Flash vision. Free tier: 5 RPM; paid tier removes the bottleneck.' 即外发可选，且降级路径（不做 AI 描述）同段说明。
- [ok] 本 skill 是否夹带脚本或隐藏执行面 — find 目录只返回 .md；无 package.json、无 scripts/。SKILL.md 与 references 内的命令都是 npx hyperframes / 外部工具类，由宿主执行。
- [ok] ElevenLabs 路径是否把「免费本地」选项挤掉（隐私判断） — step-5-vo.md 把 Kokoro 列为首选并注明 'try first — free, no API key' 与 'Runs locally on CPU'，ElevenLabs 列第二且如实标注 'Does not return timestamps — transcribe separately after'。默认路径不出网（除抓站与 npx 拉取），付费服务是显式选项。
- [discrepancy] 「7 步每步一门禁」是否真的每步都有可判定 gate — ［判定：轻微］Step 1–5、7 的 gate 都是可机械判定的文件存在或 CLI 零错误；但 Step 6 的 gate 是自评式的——'**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.' 由 agent 自查，无脚本或人工签字支撑。属文档自认的软门禁，已在 traits 与 risks 中标注。
- [ok] 触发面声明是否与内容相符（只丢 URL 就用它） — frontmatter 第 4 条与正文 Quick Reference 都覆盖用户分享链接的情形；SKILL.md 的 Users say things like 三条示例（25s launch video、15s IG 广告、30s 产品 tour）方向一致。
6结论
适合：适合手上有网站（自有产品站、客户站、落地页）要做宣传视频的人：15s 社交广告、25–30s 产品 launch / tour、30–60s 功能演示，希望有「抓站 → 品牌速查 → 旁白 → 逐拍导演 → 配音对时 → HyperFrames 构建 → 校验」的可复核流程，并接受把最终渲染契约交给 /hyperframes skill。
不适合：不适合：① 没有可抓站点、要凭空构思从零起片的场景（本 skill 以已有网站为输入前提）；② 需要登录态抓取或目标站有反自动化保护的场景；③ 不愿把页面截图交给第三方视觉 API 的用户（须跳过可选 Gemini 路径）；④ 想跳过中间文档直接出片的用户——七步门禁是它的核心设计。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 website-to-hyperframes.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent689a696415fb5f9d…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nateherkai / nateherkai/hyperframes-student-kit
原始 GitHubnateherkai/hyperframes-student-kit ↗
Stars1070
最近推送2026-09-28
本 skill commit
0d30152a82许可MIT（仓库根 LICENSE = MIT License, Copyright (c) 2026 Nate Herk）；另有 licenses/PIPELINE-USE-PERMISSION.txt（教学包再分发授权）与 licenses/HYPERFRAMES-LICENSE（Apache-2.0，随包 HyperFrames skill 的上游许可）；GitHub API 因附加许可把仓库标为 NOASSERTION
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。