Web Image Skill — Design skill for Claude Code

web-image

**用前端渲染生成图片。** 不依赖模型的多模态能力，也不绑定特定 agent —— 任何能写 HTML/CSS 的模型（DeepSeek、Claude、Kimi、GPT…）配任何能读文件的 coding agent （Claude Code、Codex、OpenCode、Cursor、Cline…）都能用。


**32 套预设风格开箱即用，想要别的直接说** —— 描述一个参照物（"像 A24 电影海报"、 "八十年代香港霓虹招牌"、"我们品牌是莫兰迪色系"），AI 会把它拆成一套可执行的设计规则再实现出来。

解决什么问题

市面上的生图 skill 大多依赖模型自身的多模态能力，对 DeepSeek 这类很强但不能生图的模型完全失效。

这个 skill 换了条路：**把浏览器当渲染引擎**。用 HTML/CSS 精确描述画面，导出成真实像素的 PNG。 产物可复现、可微调、可版本管理——而不是一次性的随机结果。

代价是：做不了照片级内容（人像、风景、材质渲染），那仍然需要真正的图像模型。 强项是排版驱动的图——封面、头像、卡片、Banner、数据图、海报、代码图。

风格：32 套预设，也可以自己描述

预设的 32 套

每套都有明确出身和**签名手法**——那一招才是辨识度所在，配色只是入场券。 用的时候直接点名：「用工程蓝图风格做张公众号封面」。


完整列表

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

每套还标了「常用画幅」——风格和画幅是配套的，你不指定尺寸时它按这个来。

想要预设之外的风格，直接描述

**32 套是起点，不是上限。** 说一个参照物就行：

"像 A24 电影海报那样"
"八十年代香港霓虹招牌"
"我们品牌是莫兰迪色系 + 圆润无衬线"
"《POPEYE》那种日式杂志内页"
"《银翼杀手 2049》的橙色沙尘"

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` 都已实测支持。

安装

这个 skill 不绑定任何特定 agent —— 它本质上就是**一组