web-imagelisted

# web-image · 用网页生成图片 **核心**：浏览器就是渲染引擎。用 HTML/CSS 精确描述画面，导出成真实像素的 PNG。 结果可复现、可微调、可版本管理，而且不需要模型有生图能力。 > 下文的 `$SKILL` 指本 skill 所在目录。Claude Code 下是 `~/.claude/skills/web-image`； > 装在别处就替换成实际路径（也可以先 `export SKILL=<路径>` 再照抄命令）。 ## 流程 ### 1. 定尺寸 问清楚**发到哪**（公众号？小红书？X？做封面还是头像？），然后查 `references/formats.md` 取预设像素。 用户没说就默认 `og` 1200×630；说"多个平台"就并排出多张画板，不要做"通用图"。 ### 2. 选场景配方 在 `references/scenes.md` 找对应场景，照它的**画面结构**和**文案字数上限**来。 文案先压到额度内，再排版——这一步决定了成图好不好看。 ### 3. 定风格（这一步决定成图是"设计"还是"模板"） **用户指定了风格** —— 在 `references/styles.md` 里按 slug 或别名对号入座， 照抄它的 token 和**签名手法**。签名手法是这套风格的辨识度所在，色值只是入场券，不能只换颜色。 每套还标了「常用画幅」——用户没指定尺寸时优先按它来，风格和画幅是配套的。 **用户没指定** —— 不要默认套一个，也不要报全表。从 `styles.md` 末尾的「推荐话术」里 挑 3~4 个跟他内容气质最近的，一句话一个报出去让他选。比如做技术内容就报 「工程蓝图 / 终端 / 瑞士国际主义 / 粗野主义」，做生活方式就报 「日式侘寂 / 杂志编辑部 / 档案手稿 / 中式水墨」。用户说"你看着办"再自己定。 **用户描述了一个库里没有的风格**（"像 A24 电影海报"、"我们品牌是这样的"）—— 按 `styles.md` 末尾的四步法把参照物拆成 token：取 4 个色 / 定字体反差 / 找签名手法 / 定留白比例。 选定后照 `references/design.md` 实现：中文排版、构图、高级感技法、纹理配方都在那里， 最后对照文末的「AI 味清单」自查。 ### 4. 生成工作台页面 ```bash mkdir -p out && cp $SKILL/assets/{studio.css,studio.js,export.js} out/ ``` 以 `assets/studio.html` 为骨架写 `out/index.html`：`:root` 里放主题变量，每张图一个 `.wi-card`。 **画板契约（不要改）**： ```html <section class="wi-card" id="cover" data-w="1200" data-h="630" data-file="og-cover"> <div class="wi-head"> <span class="wi-name">OG 分享图</span> <span class="wi-use">用于: 微信/Slack 链接预览</span> </div> <div class="wi-frame"><div class="board og">…画面…</div></div> </section> ``` - `data-w/data-h