一句话总结
web-image 是一个「反直觉」的生图 skill——它不碰扩散模型，而是写 HTML/CSS，让浏览器渲染成 PNG。文字由浏览器排版（100% 准确、永远不糊），颜色、间距、字号像素级可控，不抽卡、不订阅，DeepSeek、Claude 这类不能生图的模型照样出图。
顺便说一句：本文的 4 张配图，就是用它生成的。
为什么需要它
市面上的「生图 skill」大多有一个共同前提：模型自己得有生图能力。这对 DeepSeek 这类「很强但不能生图」的模型来说，直接失效。
即便你用能生图的模型，还有一个更难受的问题——抽卡。AI 生图最让人抓狂的地方：想改一个字，整张重抽，其他部分全跟着变，风格永远对不齐。
web-image 换了一条路：把浏览器当渲染引擎。用 HTML/CSS 精确描述画面，导出成真实像素的 PNG。产物可复现、可微调、可版本管理——不是一次性的随机结果。
代价也明确：做不了照片级内容（人像、风景、材质渲染），那仍然需要真正的图像模型。它的强项是排版驱动的图——封面、头像、卡片、Banner、数据图、海报、代码图。
它怎么工作
原理一句话就够：HTML/CSS 描述画面 → 浏览器渲染 → 导出 PNG。
它提供两条导出通道，读的是同一份 HTML：
| 页内按钮 | scripts/shot.mjs | |
|---|---|---|
| 原理 | 克隆节点 → 内联 computed style → SVG foreignObject → canvas | 本机 Chrome headless 渲染后截图 |
| 依赖 | 无 | 本机 Chrome / Chromium / Edge |
| 速度 | 单张即时 | 约 1.5s/张，默认 3 并发 |
| 适合 | 边调边看、复制到剪贴板 | 出最终稿、批量、CI |
SVG 滤镜、mix-blend-mode、background-clip:text、竖排 writing-mode、clip-path 都已实测支持。
32 套风格，开箱即用
预设的 32 套风格，每套都有明确出身和**「签名手法」**——那一招才是辨识度所在，配色只是入场券。
覆盖六大类：印刷传统（瑞士国际主义、杂志、报纸、工程蓝图、档案手稿）、艺术运动（包豪斯、装饰艺术、Riso、粗野主义、孟菲斯、拼贴）、东方（日式侘寂、中式水墨、国潮）、手作纸感（手绘、黑板、水彩、博物图鉴）、流行文化（波普、像素、Y2K、蒸汽波、霓虹、街头）、影像商业（电影海报、70s、极简线条、玻璃拟态、极光、奢侈品）。
不在库里也没关系。 描述一个参照物就行：
- 「像 A24 电影海报那样」
- 「八十年代香港霓虹招牌」
- 「我们品牌是莫兰迪色系 + 圆润无衬线」
它会按四步法把参照物拆成可执行的规则——取 4 个色 / 定字体反差 / 找签名手法 / 定留白比例——再照着做出来，质量不会因为「不在库里」而打折。
尺寸不用你操心
20 多个尺寸预设，连各平台的遮挡区都标好了。
- 公众号封面 900×383——列表页会裁成 1:1 取中间；
- 小红书 1080×1440——底部 18% 会被标题栏盖住；
- OG 图 1200×630——四边留 8% 出血余量；
- X 头图 1500×500——左下角被头像挡住；
- 抖音 1080×1920——上下各留 15% 给系统 UI；
- 播客封面 3000×3000——缩到 55px 也要认得出。
关键信息不会放到遮挡区，导出直接 2x，发出去不糊。
最爽的是：能改
这是它跟传统生图最本质的区别。
AI 生图改一个字要整张重抽；web-image 改一行 CSS 重新出图，你没动的地方一个像素都不变。做系列图更明显——改一次配色变量，十张图的风格同时更新，永远统一。
这意味着：图可以进 Git、可以 diff、可以团队协作改。它从「一次性产物」变成了「可维护的资产」。
能做什么，不能做什么
能做的：封面、头像、Banner、小红书图、知识卡片、金句卡、代码截图、数据卡、产品发布图、活动海报、幻灯片、电子名片、打印稿——基本上你日常在做的图，除了照片。
不能做的：人像、风景、材质渲染。那些还是得靠真正的图像模型。
免费，一行装好
它本质上就是一组 Markdown 说明 + 两个 Node 脚本，不绑定任何特定 agent。Claude Code、Codex、OpenCode、Cursor、Cline 都能用。
git clone --depth 1 https://github.com/whyubel1eve/web-image-skill.git
或者一条安装脚本自动探测技能目录、检查依赖、并真的渲染一张图做自检：
curl -fsSL https://raw.githubusercontent.com/whyubel1eve/web-image-skill/main/install.sh | bash
装好后读一遍 SKILL.md（入口），里面有完整生图流程，以及 references/ 下四份参考文档各自该在什么时候读。
总结
- 思路新：绕开模型生图能力，把浏览器当渲染引擎，DeepSeek/Claude 也能出图；
- 可复现：改 CSS 重出图，没动的部分像素不变，图能进 Git 做版本管理；
- 够全：32 套风格 + 20 多个尺寸预设 + 各平台遮挡区，出图不翻车；
- 免费开源：一行装好，任何 agent 都能用。
如果你想给文章配图、做知识卡片、批量出系列图，又不想订阅生图会员、不想抽卡，web-image 值得一试。
