web-image - 用HTML/CSS渲染生成图片

这是什么

web-html-image-skill（仓库名：web-html-image-skill）是一个 GitHub Agent Skill，它的核心思路是用前端渲染生成图片——不依赖模型的多模态能力，也不绑定特定 agent。任何能写 HTML/CSS 的模型（DeepSeek、Claude、Kimi、GPT 等）配合任何能读文件的 coding agent（Claude Code、Codex、OpenCode、Cursor、Cline 等）都能使用。

该技能由作者 bayue-syj 开发，采用 MIT 许可证。项目目前处于积极的早期阶段（GitHub 上拥有 3 个 Star、1 个 Fork，0 个未解决问题）。本质上它是一组 Markdown 说明 + 两个 Node 脚本，只要你的 agent 能读文件、能跑 shell，把 SKILL.md 送进它的上下文就能用。

适合谁

内容创作者：需要制作公众号封面、小红书卡片、Banner、海报但不会设计工具的创作者。
开发者/技术博主：需要为文章生成代码截图、数据图、架构图等排版驱动的图像。
一人公司/小团队：希望建立统一的视觉风格，且能版本管理图片资产的团队。
使用非多模态模型（如 DeepSeek）的用户：这类模型不能直接生图，但通过本技能仍可获得可控的图片输出。
品牌运营：需要大量、风格一致的社媒配图，且能通过 CSS 精确控制细节。

能做什么

这个技能解决的核心问题是：市面上大多数生图 skill 依赖模型自身的多模态能力，对 DeepSeek 这类很强但不能生图的模型完全失效。而它换了一条路：把浏览器当渲染引擎，用 HTML/CSS 精确描述画面，导出成真实像素的 PNG。产物可复现、可微调、可版本管理——而不是一次性的随机结果。

强项是排版驱动的图：封面、头像、卡片、Banner、数据图、海报、代码图。它内置了 32 套预设风格，每套都有明确的出身的「签名手法」（辨识度所在）。风格分为多个分组：

印刷传统：瑞士国际主义 · 杂志编辑部 · 报纸 · 工程蓝图 · 档案手稿
艺术运动：包豪斯 · 装饰艺术 · 双色印刷 Riso · 粗野主义 · 孟菲斯 · 拼贴
东方：日式侘寂 · 中式水墨 · 国潮
手作纸感：手绘 · 黑板 · 水彩 · 博物图鉴
流行文化：美漫波普 · 像素 8-bit · 千禧 Y2K · 蒸汽波 · 霓虹赛博 · 街头海报
影像商业：电影海报 · 复古未来 70s · 极简线条 · 玻璃拟态 · 终端 · 极光 · 奢侈品 · 极简产品

32 套是起点而不是上限。你还可以直接描述一个参照物（例如「像 A24 电影海报那样」「八十年代香港霓虹招牌」「我们品牌是莫兰迪色系 + 圆润无衬线」），AI 会按 references/styles.md 里的四步法把参照物拆成一套可执行的规则：

步骤	干什么
1. 取 4 个色	底色 / 主文字 / 次要文字 / 一个重音色（超过 5 个说明还没看准）
2. 定字体反差	哪一对在打架？衬线 vs 等宽、900 vs 300、全大写宽字距 vs 常规
3. 找签名手法	这个风格独有的那一招是什么？（一条线？一种错位？一个形状？找不到就别动手）
4. 定留白比例	35% / 55% / 70%，三选一

拆完就照 design.md 里的中文排版、构图和纹理配方实现，质量不会因为「不在库里」而打折。如果你没指定风格，它会按内容气质报 3~4 个候选让你挑，而不是默认套一个。

它还提供两条导出通道：

	页内按钮	`scripts/shot.mjs`
原理	克隆节点 → 内联 computed style → SVG `foreignObject` → canvas	本机 Chrome headless 渲染后截图
依赖	无	本机 Chrome / Chromium / Edge
速度	单张即时	~1.5s/张，默认 3 并发
适合	边调边看、复制到剪贴板	出最终稿、批量、CI

两条通道读同一份 HTML。SVG 滤镜、mix-blend-mode、background-clip:text、writing-mode 竖排、clip-path 都已实测支持。

使用前准备

需要准备的内容根据你打算使用的导出通道而不同：

零依赖通道（页内导出按钮）：只需一个现代浏览器，无需安装任何东西。
精确出图通道（scripts/shot.mjs）：需要本机装有 Chrome / Chromium / Edge。
批量出图和拼版脚本（contact.mjs）：需要 Node.js。

如果两个可选依赖都没有，仍可用画板页面里的导出按钮——那条通道是零依赖的纯浏览器实现。

安装方法

该技能不绑定任何特定 agent，有三种安装方式。推荐方式一是让你的 agent 自己安装，以下是直接发给 Claude Code / Codex / OpenCode / Cursor / Cline 等 coding agent 的完整提示：

帮我安装 web-image skill：

1. 克隆到你的技能目录（你比我清楚该放哪）：
   git clone --depth 1 https://github.com/whyubel1eve/web-image-skill.git <你的技能目录>/web-image
   - Claude Code 放 ~/.claude/skills/web-image
   - 其他 agent 放到你自己的 skills / rules / prompts / 扩展目录
   - 如果你没有技能目录机制，放到项目里任意位置，然后把 SKILL.md
     的路径写进你的 AGENTS.md / .cursorrules / CLAUDE.md 之类的常驻配置里

2. 读一遍 web-image/SKILL.md，那是入口：里面有生图流程，
   以及 references/ 下四份参考文档各自该在什么时候读。不用一次读完全部。

3. 检查依赖并告诉我结果：
   - node -v            （批量出图和拼版脚本需要，没有也能用页面里的导出按钮）
   - Chrome / Chromium  （精确出图通道需要，没有则只用页内导出）

4. 自检：node web-image/scripts/shot.mjs web-image/examples/styles.html --only swiss
   能生成 PNG 就算装好了。

方式二是使用安装脚本（自动探测已有技能目录、检查 Node 和 Chrome，并渲染一张图做自检）：

curl -fsSL https://raw.githubusercontent.com/whyubel1eve/web-image-skill/main/install.sh | bash

指定目录安装：

curl -fsSL .../install.sh | bash -s -- ~/.config/your-agent/skills
# 或 clone 下来后： ./install.sh ~/my/skills

方式三是手动克隆到目标目录（以 Claude Code 为例）：

git clone --depth 1 https://github.com/whyubel1eve/web-image-skill.git ~/.claude/skills/web-image

使用示例

安装完成后，你可以通过以下命令快速上手：

# 看 32 套风格样张（每套用它最擅长的画幅 + 真实场景文案）
open ~/.claude/skills/web-image/examples/styles.html

# 批量精确出图
node ~/.claude/skills/web-image/scripts/shot.mjs out/index.html --scale 2

# 把出好的图拼成一张总览（justified 打包，各列等高，底部不留空洞）
node ~/.claude/skills/web-image/scripts/contact.mjs out/png/*.png --cols 5 --label

风险与注意事项

能力边界：它做不了照片级内容（人像、风景、材质渲染），那仍然需要真正的图像模型。强项是排版驱动的图。
中文排版细节：不要用 max-width:…ch 控制折行——ch 是字符