CoverFlow 免费开源，文章封面再也不用自己动手设计了。接入 AI 后它不跟你讨论设计方案，而是读懂图层结构之后，直接把封面改到你满意为止。
今年 2 月我写过一篇 《初级研发已死：当代码成为消耗品，什么才是程序员的新护城河》，里面有一张截图，是我在 Google AI Studio 上用一段需求描述生成的封面图制作工具。那篇文章结尾留了一句"近期会开源分享给大家"。
最初的原型
坑是自己挖的，就得自己填。其实 2 月底就经过大量更新和优化，把 Gitub 仓库转公开了。只是一直没有正式写一篇文章介绍它。毕竟这个需求看起来比较小众了，因为那个时候这个工具只是给人用的，需要自己找素材，组合 SVG 资源，手动排版。确实有一些麻烦，并且只适用于少数有设计基础的用户，并且仅对科技类文章封面比较合适。
2月优化后的 CoverFlow
近期闲来加入了 AI 能力，那个 5 分钟跑出来的原型已经长成了一个正经的工具，名字叫 CoverFlow。不过这次想聊的重点不是"AI 帮我写了多少代码"，而是另一件事：当工具自己长出 AI 能力之后，它会变成什么样子。
CoverFlow 编辑器主界面
1. 那个一直没被解决的问题
每篇文章发出来之前，最后一道工序永远是封面。正文可以写得顺畅，封面上却总要再耗掉不少时间：找图、定版式、调字号、适配比例，一轮下来往往比写两段正文还久。
麻烦的地方在于这件事高度重复，却又无法彻底复用。公众号需要保持统一的视觉风格，但不同平台的比例要求各不相同。微信文章封面是 2.35:1，小红书是 3:4，视频平台要 16:9。同一套内容换个平台，版式几乎要重做一遍。
我长期用 PPT 凑合这个环节。它能完成任务，但每次都要重新摆位置、重新对齐，改一个标题常常要手动挪动三四个元素，导出之后还要裁剪。这套流程我忍了很久，直到那次让 AI 生成出一个原型，才觉得这件事值得正式做成一个工具。
PPT 凑合的封面设计
2. CoverFlow 是什么
一句话概括：面向多平台文章封面设计的 Web 工具，基于 SVG 资源库与图层系统，提供可配置画布、快速排版、背景生成与项目保存导出能力。
它提供三种使用方式：
-
安装为桌面应用：在浏览器菜单中选择"安装应用"（PWA），之后以独立窗口运行。
-
下载原生安装包：https://github.com/sangyuxiaowu/CoverFlow/releases 页面提供 Windows / macOS / Linux 版本，基于 Tauri 2 打包，可以直接读写本地文件系统。
CoverFlow 项目列表落地页，截图内封面为人工设计
技术选型上是 React 19 + TypeScript、Vite 7、Tailwind CSS 4，桌面端用 Tauri 2，位图导出走 html-to-image。
3. 地基：手动设计的那一整套
AI 能力是后加的，先把不含 AI 的部分说清楚，因为它是所有自动化的落点。
3.1 画布与图层
画布内置了微信文章封面常用的 2.35:1 与 1:1，方形和高清 16:9 也一并提供了，尺寸支持自定义填写。画布本身可以缩放和平移。
所有加入的元素都以图层形式管理，位置、尺寸、旋转既可以拖拽也可以输入精确数值，编组、对齐、撤销与重做都在。快捷键覆盖了常用操作：Ctrl + G 编组、Ctrl + J 克隆、Ctrl + 上下 调整层级、Ctrl + 左右 调整旋转角度、Enter 编辑文字。
画布比例选择与图层面板
3.2 素材、装饰与背景
素材分三类来源：内置的基础图形与装饰元素、可加载的用户自定义 SVG / PNG 素材文件夹、以及需要手动载入数据的 Font Awesome 图标库。三类都支持关键词检索，命中后一键加入画布。
装饰系统投入的精力比较多。装饰内容可以是 CSS 声明，也可以是静态 HTML（含内联样式与作用域化 <style>），应用会自动判断类型。多层渐变、纹理叠加都可以用 CSS 直接表达，其中的 CSS 变量会被自动识别并生成对应控件；颜色变量走色板编辑，支持 HEX（含透明度）、RGB/RGBA、HSL/HSLA、OKLCH 与 CSS 命名颜色，并配有透明度滑块、通道输入与格式切换。屏幕取色依赖浏览器的 EyeDropper API，不支持时按钮自动禁用。
背景部分是同一套思路：纯色、线性渐变、图片、自定义 CSS 均可，还可以在其上叠加条纹、网格、波点纹理。
装饰检查器与 CSS 变量拾色器
3.3 模板沉淀与导出
整套版式可以保存为装饰模板，也就是把当前画布中多个图层打包成一个可复用组件。这才是解决"风格统一"的真正手段：把角标、边框、字号层级这些组合一次性固化下来，之后每次都在同一套骨架上起手。
导出方面，项目列表支持快速导出 PNG，编辑页面可以导出 PNG / JPEG / WebP 并自定义分辨率与压缩质量；矢量输出走 SVG，文字与 CSS/HTML 装饰使用 foreignObject 承载。项目本身保存为 .cfj 后缀的 JSON 工程文件，浏览器模式下存 IndexedDB，桌面版模式下直接落在本地目录，随时可以重新打开继续编辑。
导出格式与分辨率设置
4. 分水岭：AI 是一双会动手的手
前面这些能力，本质上仍属于"更好用的设计工具"范畴。真正改变工作方式的，是十月这轮迭代里加进去的 AI 能力。
这里有一条需要划清楚的界限：CoverFlow 的 AI 助手不是咨询式的对话框，而是具备工具调用能力的执行者。 它读取当前画布上下文之后，会真实地去创建图层、修改样式、调整排版；所有改动都进入既有的编辑历史，可以撤销、可以重做。
AI 助手通过工具调用直接修改画布
4.1 模型能碰到哪些东西
模型可见并可调度的工具共二十余个，按职责大致分为几类：
| 类别 | 覆盖范围 |
|---|---|
| 读取上下文 | 当前项目、画布、背景、选区与图层元数据；按 ID 或关键词读图层；搜索项目；搜索已授权素材文件夹；读取字体清单 |
| 创建与修改 | 添加文字 / SVG / 图片 / CSS 装饰图层；批量修改内容、位置、尺寸、旋转、透明度、文字渐变与阴影、显隐与锁定 |
| 组织与排列 | 复制、删除、编组 / 拆组、置顶 / 置底、按画布对齐、等间距分布 |
| 画布 | 调整画布尺寸，以及纯色 / 渐变 / 图片 / 自定义 CSS 背景与纹理 |
| 项目 | 新建、打开、重命名、复制、确认删除、保存 |
| 生成 | 列出可用生图模型、文生图或单图参考生图、本地抠图 |
举一个具体的调用形态。当模型需要在画布上添加标题时，实际发出的是这样一个结构化请求：
{
"type": "text",
"properties": {
"name": "标题",
"layerInfo": { "x": 52 },
"text": { "content": "标题", "fontSize": 78, "color": "#fff6ea" }
}
}请求会先经过运行时白名单与数值范围校验，再落到内部的图层操作内核上。也就是说模型并不能为所欲为：内容安全、字段合法性、当前项目 ID 的一致性都会在执行前检查，跨操作字段与未知字段一律报错，而不是被静默忽略。
4.2 视觉模型带来的迭代闭环
如果接入的是支持视觉输入的模型，工作方式还会再变一次。
AI 可以预览当前画布，也可以接收用户粘贴或上传的图片，于是形成"看一眼------改一版------再看一眼"的迭代闭环，直到结果符合要求。画布预览与图片在发送前会压缩为 WebP、长边不超过 600px，用于控制传输成本与 token 开销。切换到不支持视觉的模型时，待发图片会暂存在输入区，历史图片仅在出站副本中替换为文字标记，原图不会被删除。
视觉模型读取画布预览并迭代修改
4.3 接入点与密钥
AI 走 OpenAI 兼容的 Responses API，使用官方 SDK 直连，要求模型支持函数工具调用。
内置 OpenAI、DeepSeek、Ollama 三类预设，也允许填写自定义的兼容服务地址。多个接入点各自维护独立的模型列表，并单独配置上下文窗口、最大输出、思考档位与视觉能力。思考参数统一由 reasoning.effort 控制，不必再适配各家不同的思考协议。
AI 接入点与模型配置面板
密钥存储做得比较较真。API Key 使用 AES-GCM 256 位加密，配合随机 IV 与保存在本机 IndexedDB 中不可导出的 CryptoKey，刷新后自动恢复。首次使用需要在"其他设置"中创建或导入主密钥，创建时提供一次口令加密备份机会，导入同一份备份即可跨浏览器、跨设备解密；正常换钥会保留并重新加密当前可恢复的 Key。
需要说明的是：清除站点数据会一并删除本机主密钥，没有备份就无法恢复旧密文。这是纯前端加密方案的固有代价。
已知问题：部分厂商 CORS 配置可能导致 AI 接入点无法正常调用，需确保服务端允许跨域请求。
4.4 SKILL：把设计规范写成可检索的规则
这是我自己比较喜欢的一处设计。
用户可以维护若干条纯文本 SKILL，例如"品牌封面的固定配色与字号层级"、"标题最多两行、正文字号不小于 72"、"商标和 Logo 使用规范及存放的资源目录"。模型在请求中只会先看到 SKILL 的名称与简介，判断匹配后才调用 skill 工具读取正文。
好处在于上下文不会被无关规则占满，同时模型又清楚存在哪些规则可用。SKILL 是纯文本，不执行脚本，不适合也不应该在其中放置凭据。
4.5 生图与本地抠图
生图部分提供三种选择：GPT Image，以及 Agnes 与 Kolors。后两者目前免费，在对应平台注册获取 Key 后即可配置使用。支持文生图与单图参考，也支持按模型能力批量生成，结果会自动加入当前画布，并保留原始 PNG / JPEG / WebP 字节。
AI 生图结果自动加入画布
抠图则完全在本地完成，方便快捷，无需配置和后端服务。
模型内置在应用中，在浏览器的 Worker 里直接推理，计算设备可选 WebGPU 或 WASM。内置 U2NetP（约 4.57 MB，速度优先），另外可以按需安装 BiRefNet Lite 512（适合复杂边缘）与 MODNet（人像 alpha 抠图）。
本地抠图模型与计算设备管理
这里踩过一个值得记录的坑：ONNX Runtime Web 的 WebGPU 后端运行 MODNet 时会输出错误蒙版------相同权重与输入下，WASM 与 Python CPU 的结果基本一致，WebGPU 却存在显著数值偏差。因此实现中对 MODNet 做了硬编码处理，即使全局选择 WebGPU，它也强制走 WASM，其余模型不受影响。
5. 几个值得说明的取舍
5.1 为什么不让模型直接输出 JSON
让模型吐出一段描述封面的 JSON、由前端解析渲染，实现路径要短得多。但我没有选这条路。
核心原因是渲染确定性。采用工具调用时，每一次 AI 修改走的都是与用户手动操作完全相同的代码路径------同一个图层操作内核、同一套校验规则、同一份历史记录。AI 的改动因此天然可撤销、可重做，与用户自己拖动的结果没有任何区别。而"解析 JSON 再重建画布"等于另起一套渲染逻辑，两套逻辑迟早会出现行为分歧。
代价是工具定义必须写得很细。为了兼容不支持引用的远端服务，JSON Schema 中不能使用 $ref 与 $defs，所有参数说明需要完整内联；条件约束也不能指望模型自觉遵守，必须由运行时再校验一遍。
5.2 上下文必须算得清楚
设计类会话很容易在长轮次后撑爆上下文，所以输入区会实时展示上下文估算、占用百分比与预留输出预算，展开后还能看到上次输入实测、本次操作、会话累计用量、输入/输出、缓存命中、思考 token 与请求次数。
估算方法是把序列化输入、系统提示词与工具定义的 UTF-8 字节数除以 3，再用同一接入点、同一模型最近的实测输入做校准。它并不是服务端的精确计数，但足以支撑预算判断。中断或未返回 usage 的请求会被明确标记为统计不完整，不会伪造为零。
此外设了两道闸门：maxToolRounds 限制单轮工具调用轮次（默认 24），maxImageFailures 限制生图累计失败次数（默认 3）。生图失败达到上限后即拦截该轮后续请求，不再向图像服务发起调用------因为失败的服务端请求可能同样计费。
上下文与用量统计面板
5.3 两条不妥协的边界
一是删除项目必须单独确认 ，AI 不代为决策。二是AI 执行期间暂停手动编辑，避免两侧同时修改导致状态冲突；而点击停止并不会回滚已经完成的操作。
6. 数字
从 2 月 10 日第一次提交，到 10 月 25 日发布 v8.0.0：
| 月份 | 提交数 | 主要工作 |
|---|---|---|
| 2026-02 | 123 | 手动设计能力成型 |
| 2026-03 | 19 | 功能维护 |
| 2026-05 | 9 | 零星修复 |
| 2026-10 | 97 | AI 能力集中建设 |
| 合计 | 248 | --- |
源码为 146 个 TS / TSX 文件，约 3.2 万行 TypeScript。
二月那一百多次提交解决的是"把手动设计这条路走通"，中间几个月属于维护性迭代。真正的变化集中在十月，97 次提交几乎全部围绕 AI：工具调用框架、视觉模型支持、多接入点管理、密钥加密、生图适配器、本地抠图、SKILL、字体管理、用量统计等等。
换句话说，这个项目是到最近才真正变成我当初设想的样子，而 AI 能力的接入，让无论是设计速度还是美感，都有了很大提升。
AI 设计效果欣赏
7. 最后
回到那个老问题：代码越来越不值钱，什么才值钱？
CoverFlow 本身可以当作一份回答。它的第一版确实是 AI 在 5 分钟内生成的，但那只是一个勉强可用的原型。让它变成能天天用的工具，靠的是这 248 次提交里一个接一个的具体判断：装饰变量该不该自动生成控件、抠图模型走 WebGPU 还是 WASM、上下文预算怎么估算才不虚报、密钥存在哪里才算不裸奔。
这些判断 AI 替不了；但有了 AI，一个人做出这些判断并把它们实现出来的速度，快了不止一个量级。
项目已在 GitHub 免费开源，采用 AGPL-3.0 协议：
同时也提供了网盘分享的文件，方便大家下载和使用。网盘里有预发行的 9.0 版本，支持多页面，同时也实现了 AI 设计PPT的能力：网盘地址1。新能力下次正式发布再介绍吧，我担心这篇文章再不发就更过时了。
如果你也在为封面这件事反复消耗时间，希望它能帮上忙。
References
1 网盘地址: https://pan.baidu.com/s/1JPCG-_jRjXP9J5t520O2TQ?pwd=satw