夜雨聆风SeeHTML AI 是我最近整理到 v2.0.0 的一个本地桌面端工具。
它的定位很简单：用 Agent 生成或修改 HTML，在同一个窗口里预览效果，然后按需要导出成 PNG、PPTX 或 MP4。
我最开始不是想做一个模板编辑器。
模板编辑器通常是先选模板，再替换文字和图片。SeeHTML AI 更像一个面向 HTML 创作的本地 Agent：打开项目，输入需求，生成页面，看效果，再继续修改。
1. 为什么是 HTML
AI 现在已经很擅长生成页面代码。
但我更关心的是后半段：生成之后怎么预览、怎么修改、怎么交付。
HTML 很适合做这件事。
它可以描述布局、字体、颜色、动效、粒子、剧情和场景；可以直接在浏览器里预览；也可以按页面导出成 PowerPoint，或者逐帧渲染成 MP4。
这也是 SeeHTML AI 的出发点。
不要把 HTML 只当成网页。
它也可以是一张动态海报、一段宣传短片、一组 PPT 页面、一份数据报告，或者一个可以继续迭代的视觉原型。
2. 现在能做什么
用 Agent 生成或修改 HTML 文档 预览 HTML、MP4、PDF、Markdown、PNG 和常见项目文件 把 HTML 页面导出为 PowerPoint，一页 HTML 对应一页幻灯片 把带动画的 HTML 通过 FFmpeg 导出为 MP4 捕获当前页面为 PNG 模型不支持图片理解时，使用本地 OCR 回退 每个项目用 .seehtml/memory.sqlite3保存记忆和上下文索引模型供应商可以配置，不绑定某一家服务
这几项合在一起，形成的是一条项目型工作流。
左侧管理项目文件，中间预览和导出，右侧和 Agent 对话。一次 HTML 生成之后，不需要再切到浏览器、录屏工具或 PPT 软件里反复搬运。
3. Agent 不是一次 prompt
SeeHTML AI 的右侧 Agent，不是简单把用户输入塞进模型。
README 里把它拆成了一条本地编排流程：
理解需求：解析用户文本、当前项目、上传图片、导出目标和时长要求。 理解视觉信息：模型支持视觉输入就直接读图；不支持时走本地 OCR，提取图片里的文字和结构线索。 检索上下文：从当前项目和 .seehtml/memory.sqlite3里取相关片段，不把整段历史硬塞进模型。规划任务：判断是新建 HTML、修改现有 HTML、补动画导出接口，还是进入修复流程。 生成 HTML：产出 HTML/CSS/JS，并尽量让布局、动画、素材策略和导出接口在一个文件里闭环。 预览检查：在中间预览区加载页面，检查 viewport、样式、响应式、动画播放和资源引用。 修复：遇到图片加载、布局溢出、导出接口或模型中断问题时，继续补全或重写关键片段。 导出：根据用户选择导出 PNG、PPTX 或 MP4。
这条链路的目标，是让“生成、预览、修问题、导出文件”都尽量在一个窗口里完成。
4. 一个基本使用流程
实际使用时可以很短。
打开或创建一个本地项目。
在 Agent 窗口里输入需求，也可以附带参考图。
比如：
> 根据这张图做一个 45 秒赛博朋克短视频动画。
系统会理解需求、读取相关上下文、生成或修改 HTML。
生成后直接在预览窗口看效果。
如果画面还不对，就继续在当前项目里修改。
如果效果可用，就按需要导出：
PNG 截图 PowerPoint MP4 视频
项目记忆和上下文索引只属于当前项目。不同项目之间不会共用一份杂乱的历史。
5. MP4 导出为什么要做逐帧接口
动效 HTML 要导出成视频，最怕不稳定。
如果只靠真实播放时间录屏，机器卡一下、页面加载慢一下，导出的节奏就可能不一致。
const DURATION = 30;
window.__SEEHTML_EXPORT_DURATION__ = DURATION;
function renderAtTime(seconds) {
// Render the full frame from absolute time.
}
window.renderAtTime = renderAtTime;
window.addEventListener("seehtml:export-frame", (event) => {
renderAtTime(event.detail.time);
});
这样导出时，系统不是等页面自己播放，而是主动告诉页面：现在渲染第几秒。
第 0 秒、第 0.1 秒、第 0.2 秒……每一帧都从绝对时间算出来，再交给 FFmpeg 合成 MP4。
这个设计对 Canvas 动画、粒子轨迹、镜头推进、短视频标题卡都很有用。
6. 模型配置
SeeHTML AI 使用 OpenAI-compatible Chat Completions API。
可以接入以下LLM模型供应商：
OpenAI / GPT DeepSeek GLM / 智谱 OpenRouter 4router Ollama 本地模型 自定义 OpenAI-compatible 网关
应用内可以配置 Provider、API URL、API Key、模型名、Authorization Bearer、模型是否支持视觉输入、是否启用默认 OCR 回退。
也可以用环境变量配置：
SEEHTML_AI_PROVIDER=custom SEEHTML_AI_API_URL=https://api.example.com/v1/chat/completions SEEHTML_AI_API_KEY=your_key SEEHTML_AI_MODEL=your_model SEEHTML_AI_USE_AUTH_HEADER=true SEEHTML_AI_SUPPORTS_VISION=false SEEHTML_AI_USE_DEFAULT_OCR=true如果想指定配置文件，也可以用：
SEEHTML_AI_CONFIG=C:\path\to\ai-config.json仓库不会提交生产 API Key。首次打开 Windows 安装包后，需要在应用内先配置自己的模型服务。
7. 项目记忆
每个项目都有自己的 SQLite 记忆库：
your-project/ .seehtml/ memory.sqlite3里面会存三类内容：
精简会话记忆 项目上下文片段 文件上下文索引
这个设计是为了减少上下文噪音。
一轮 Agent 请求只需要取相关片段，不需要每次都把整个项目、整段历史和所有文件内容塞给模型。
8. 开发和打包
如果从源码运行，README 里列的依赖是：
Node.js Rust Windows 桌面端打包环境
常用命令：
npm install npm run dev npm run build npm run build:fullnpm run build:full 会准备本地 OCR 和 FFmpeg 依赖，然后执行 Tauri 打包。
当前 v2.0.0 的 Windows 产物包括：
SeeHTML AI_2.0.0_x64-setup.exeSeeHTML AI_2.0.0_x64_en-US.msi
开源协议是 MIT License。
9. 结尾
SeeHTML AI 想解决的不是“让 AI 写一段 HTML”这么简单。
真正卡人的地方，是写完之后的那一串动作：看效果、改细节、补动画、处理素材、导出 PPT 或视频，再回到项目里继续迭代。
所以我把它做成了一个本地桌面工作台。
HTML 在这里不是终点，也不是临时草稿。
它是一个中间层：能被 Agent 生成，能被预览，能继续修改，也能导出成更适合交付的文件。
这条链路现在已经在 v2.0.0 里跑起来了。后面我会继续整理实际案例，把动态海报、产品演示、PPT 页面和短视频导出的过程拆开写。
