企业官网建设流程全解析

炸裂！一行HTML就能生成专业视频，这个开源框架让AI编程彻底“开挂”了

小伙伴们，你敢信吗？现在只要让AI编程助手写一份标准的HTML文件，就能直接渲染出像素级完美的专业视频，连React、专有DSL都不用学！更酷的是，把它和OpenCode这类AI编程助手结合起来，配置好大模型、装上技能包，复制一篇文章进去，AI就能自动调用skills完成从文本分析到视频渲染的全流程，几分钟搞定一个带配音、带画面的视频。虽然目前的初步框架还有不少优化空间，但那种“想法即视频”的未来感已经扑面而来，忍不住想喊一声：创作的门槛，真的快被AI踏平了！

opencode工具安装

https://opencode.ai/download

命令安装

npm i -g opencode-ai

/models 调整大模型

或者下载桌面版

配置xiamo 大模型

输入apikey

安装Skills技能，赋予AI编程助手视频创作能力

HyperFrames是HeyGen团队开源的AI原生视频渲染框架，其核心理念猛得一批：WriteHTML. Render video. Built for agents.（写HTML，渲染视频，为AI智能体而生）。它彻底重构了程序化视频生成的逻辑——你无需学习React、专有DSL，只需编写一份标准的HTML文件，并使用data-*属性来声明时间轴和轨道信息，就能渲染出像素级完美的专业视频。

npx skills add heygen-com/hyperframes

使用

/hyperframes

开发实战

参考skills目录中的技能,开发一个文章转视频的应用，用户可配置大模型，用户复制文章内容，通过大模型调用相应的skills 最终渲染成音画同步的mp4视频

根据相应的问题进行选择

这里有个技巧 点击创建git仓库，可对当前项目代码进行管理

退出plan模式，进行代码开发

计划已完整，请进行开发，实现所有功能

生成开发任务计划

开发完成

运行项目

npm install npm run dev

您的浏览器不支持 video 标签

初步框架形成了，生成的视频有些拉垮，还是有不少问题需要改进，我们后续进行优化！视频效果太单调了，默认的TTS语音生成效果不行，后续可考虑换成edgetts！

感谢大家的点赞和关注，我们下期见