AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载本文围绕 HTML Anything 内置的video-hyperframes技能完整拆解一条「视频化内容」生产链路先用 Markdown 写出按帧拆分的视频脚本再让 AI 依据模板规则生成可自动播放的 Hyperframes HTML 帧动画最后借助项目自带的解析与导出管线一键得到可直接喂给 Remotion 渲染成 mp4 的工程文件。读完你将掌握该技能的三件套结构example.md输入脚本 →SKILL.md模板规则 →example.html渲染产物、帧元数据的三种携带方式以及从编辑器「导出 → 解压 → 渲染」的完整实操路径。一、技能定位video-hyperframes是什么在 HTML Anything 的模板体系里每个技能Skill都是一个目录包含SKILL.md模板规则 frontmatter 元数据、可选的example.md示例输入与example.html预渲染预览统一由 模板加载器 扫描src/lib/templates/skills/id/目录读取。video-hyperframes的 frontmatter 给出了它的完整定位见 SKILL.md字段值含义namevideo-hyperframes技能唯一标识kebab-casezh_name/en_nameHyperframes 视频脚本 / Hyperframes Video选择器中的双语展示名descriptionHyperframes / Remotion 兼容的连续帧动画可自动播放核心能力category/scenariovideo/video归属于「视频」场景见 场景词表aspect_hint1920×1080 (16:9)画幅提示recommended5排序权重数字越小越靠前tags[video, hyperframes, remotion, 视频]搜索与检索标签example_formatmarkdown示例输入为 Markdown该技能要解决的问题很具体写一段带叙事节奏的短视频脚本并把它变成可预览、可导出的逐帧动画 HTML。其源头来自 heygen-com/hyperframes 的帧动画思路但在 HTML Anything 中已经演化为一套完整的「脚本 → HTML → Remotion 工程」工作流。二、输入侧读懂 8 帧视频脚本example.mdexample.md是一段真实可用的短视频脚本示例主题是「AI workflow 三件套」共 8 帧每帧标注了时长。它演示了该技能要求的脚本写法每帧 一个镜头 一句话。完整脚本如下原文逐字保留来自 example.md# Hyperframes 视频脚本: AI workflow 三件套 ## 帧 1 (hook, 3s) 80% 的 AI 工具用户, 都没用对 prompt。 ## 帧 2 (3s) 不是因为 prompt 难写。 ## 帧 3 (3s) 是因为他们一直在重写。 ## 帧 4 (4s) 真正高效的人, 用模板。 ## 帧 5 (4s) 模板 提示词 设计 system 输出格式 ## 帧 6 (5s) HTML Anything 把这三件事打包好了。 ## 帧 7 (5s) 9 套模板, 一个动作: ⌘Enter ## 帧 8 (CTA, 3s) github.com/nexu-io/html-anything这段脚本直接体现了 SKILL.md 规定的叙事骨架第 1 帧是 hook一个反常识断言「80% 的 AI 工具用户没用对 prompt」第 27 帧是论证链递进式抛出观点、公式、产品价值、行动指令最后是结论 CTA。总时长 33344553 30 秒恰好是一段适合短视频平台的口播/字幕动画长度。三、模板规则SKILL.md 的七条硬性约束把上面的脚本喂给 AI 后SKILL.md会约束生成 HTML 的行为这七条规则是整个技能的灵魂帧结构输出 N 个连续的section classframe每个固定w-[1920px] h-[1080px]N 由内容信息密度决定短脚本 610 帧起步每帧只承载一个镜头/概念。单帧单义每帧表达一个镜头/概念文字 视觉构图中央构图 / 黄金分割 / 三分法三选一。隐藏标记每帧底部写!-- frame:N duration:3000 transition:fade --注释供后续 Remotion / Hyperframes 渲染脚本读取。自动播放顶部加一段 JavaScript每 3 秒切到下一帧同时支持点击 / 方向键控制角落显示进度条。hook 结构帧 1 是 hook数据 / 反常识 / 问题中间是论证结尾是结论 CTA。极简排版字号巨大text-9xl级别一句话即可不堆砌文字。统一配色一套电影感配色——深色背景 1 个霓虹强调色。元数据注释输出末尾附带!-- HYPERFRAMES_META: ... --内含每帧 duration / transition / sceneSummary 的 JSON用于后续转 Remotion。对照 example.html 可以逐条验证规则的落地8 个section classframe均未写死w-[1920px] h-[1080px]类代码以position:fixed; inset:0撑满视口但 Remotion 导出端固定按 1920×1080 画布装载配色统一为深黑背景 #e9b94a琥珀黄强调色 #c96442橙红辅助色第 5 帧采用了三分法式的三行公式构图。四、渲染侧example.html 的自动播放实现example.html 是一个可独立打开的自包含页面Tailwind CDN 内联style其播放核心分三块1. 帧切换状态机section classframe active hook>script const frames Array.from(document.querySelectorAll(.frame)); // ... function show(n) { i (n total) % total; frames.forEach((f,k)f.classList.toggle(active, ki)); counter.textContent String(i1).padStart(2,0) / String(total).padStart(2,0); frameStart Date.now(); if (playing) schedule(); } function schedule() { clearTimeout(timer); const d Number(frames[i].dataset.duration) || 3000; timer setTimeout(() show(i1), d); } function tick() { const d Number(frames[i].dataset.duration) || 3000; const pct Math.min(1, (Date.now()-frameStart)/d) * 100; progress.style.width pct %; requestAnimationFrame(tick); } /scriptshow()负责循环切帧(n total) % total实现首尾循环schedule()读取当前帧data-duration决定下一次切帧的间隔tick()用requestAnimationFrame驱动顶部 3px 高的进度条。控制条提供‹/⏸/›三键并监听方向键与空格键。3. 帧元数据 JSON文件末尾的注释是关键的下游接口!-- HYPERFRAMES_META: {frames:[ {i:1,duration:3000,transition:fade,scene:Hook: 80% 的人没用对 prompt}, ... {i:8,duration:3000,transition:fade,scene:CTA: github.com/nexu-io/html-anything} ]} --注意一个细节这里scene字段的值如「Hook: 80% 的人没用对 prompt」是对应 example.md 中各帧文案的摘要。AI 在生成 HTML 时会把脚本逐帧翻译进 HTML 结构并把每帧语义同步写进HYPERFRAMES_META这是脚本与最终视频一一对应的关键。五、源码级解析hyperframes.ts 如何读懂帧hyperframes.ts 是前端的解析层负责从任意 HTML 中识别「这是一份 Hyperframes 文档」并抽出帧数据识别isHyperframes()用正则section\b[^]*\bclass\s*\s*[][^]*\bframe\b...检测是否存在frame类 section元数据提取META_RE /!--\s*HYPERFRAMES_META\s*:\s*([\s\S]*?)--/i抓取 META JSON解析失败时Agent 偶发输出不合法 JSON会优雅降级回退到每帧的data-duration和行内注释标记时长优先级META JSON >npm install npx remotion render Hyperframes out/video.mp4预览与微调npx remotion studio然后打开 Hyperframes 合成直接修改src/Video.tsx中的FRAMES数组即可调整帧时长或转场。七、实操路径在编辑器里走通全流程结合上述源码在 HTML Anything 中的完整使用路径是选择技能打开模板选择器找到「Hyperframes 视频脚本」recommended: 5使其位于推荐区靠前位置可悬停加载example.html预览写脚本按example.md的格式撰写 Markdown 视频脚本标注每帧时长与 hook / 论证 / CTA 结构生成⌘Enter 触发 AI 生成得到带自动播放脚本、进度条与HYPERFRAMES_META的帧动画 HTML右侧预览区可直接播放查看FRAME 01 · OPENING之类的帧指示会显示在预览区顶部导出打开导出菜单Hyperframes 分区出现「Remotion Zip」动作export-menu.tsx点击后浏览器下载 zip渲染本地解压执行npm install npx remotion render Hyperframes out/video.mp4得到成片。八、实用注意事项从 remotion.ts 生成的 README 注释中可以提炼出两个实操雷区单线程渲染是默认值remotion.config.ts设置了Config.setConcurrency(1)因为每个帧 iframe 挂载时会重新请求cdn.tailwindcss.com。渲染耗时大致与「帧数 ×CDN 加载 截图」成正比。加速手段有二调高并发数或把各帧 HTML 里的 CDNscript换成预编译样式表。帧内相对资源会 404每帧 HTML 从public/frames/frame-NN.html提供服务img srclogo.png会解析到/frames/logo.png。解决方式是把资源放进public/frames/、转成>赞分享AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载相关推荐Hermes Studio HyperFrames 技能实战用 HTML/CSS/JS 合成并渲染 AI 视频MP4Hermes Studio HyperFrames 技能实战用 HTML/CSS/JS 合成并渲染 AI 视频MP4 本篇技术指南围绕 Hermes StAI 应用人工智能AI Agent本地部署前端后端工作流自动化终极指南3分钟掌握MouseClick鼠标连点器轻松实现自动化点击终极指南3分钟掌握MouseClick鼠标连点器轻松实现自动化点击 还在为重复的鼠标点击操作烦恼吗无论是游戏中的挂机升级、办公软件的批量处理还是日常工作AI 应用人工智能AI AgentAI 写作媒体生成Huashu Design 视频导出完整指南HTML 动画转 MP4/GIF 的脚本工具链与最佳实践Huashu Design 视频导出完整指南HTML 动画转 MP4/GIF 的脚本工具链与最佳实践 动画 HTML 跑通之后如何把它变成能交付、能上传、能AI 技能上一篇终极指南快速掌握 C PostgreSQL 客户端编程下一篇Insomnia 数据 Schema 迁移机制全解双版本策略、迁移注册表与新增迁移实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
