shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程无需 API Key

wechat-cover

name: wechat-cover description: 生成微信公众号封面（1080×460 PNG）。触发词：「生成一个微信公众号封面」「公众号头图」「公众号封面」「公众号 banner」「公众号文章封面」「wechat cover」「wechat banner」。流程：Read/模板抽风格 → 手写 HTML+CSS（CSS 变量化）→ Chrome headless 渲染 → 机械检查+逻辑自检 → VL 只在兜底验收,最多 2 轮。

person作者: UnspokenSheephubModelScope
download下载资源包

WeChat Cover Generator

一句话:Read + 模板 定风格,手写 HTML 出稿,机械检查 验基础,逻辑自检 验结构,VL 兜底 验气质。VL 越少越好。

这个 Skill 做什么

把"做一个公众号封面"变成有纪律的 token 经济型工作流。输出物固定:

{项目}/cover/
  index.html         # 自包含 HTML+CSS,1080×460,字体走 Google Fonts CDN
  cover_final.png    # Chrome headless 渲染,1080×460
  cover_vN.png       # 中间稿(可选)

何时触发

匹配以下任意提示时自动激活:

  • "生成一个微信公众号封面"
  • "公众号封面 / 公众号头图 / 公众号 banner"
  • "公众号文章封面"
  • "做个封面,公众号用"
  • "wechat cover / wechat banner"

不适用

  • 朋友圈方图(1080×1080,需要不同工作流)
  • 文章内大图(不是头图)
  • 已有现成图,只需要改尺寸(用 ImageMagick)

工作流(5 阶段)

Phase 1 · 抽风格(0 次 VL)

有源码时(首选):

Read {参考项目}/index.html
Grep -E "(:root|--[a-z]+:|font-family|background)" {参考项目}/index.html

抽取后写到会话上下文:--bg / --fg / --accent-* / 字体栈 / 阴影值 / 边框宽度。

无源码时:

用 AskUserQuestion 让用户用关键词描述,不要发图给 VL。关键词模板(细节参考 references/themes.md):

| 类别 | 关键词 | |---|---| | 行业气质 | 工具分享 / 文学 / 商业 / 艺术 / 教育 | | 视觉风格 | 瑞士网格 / 克莱因蓝 / 烫金 / 杂志感 / 新野兽派 / 极简 | | 字体倾向 | 无衬线现代 / 衬线优雅 / 等宽技术 / 混合 | | 情绪 | 冷静 / 热烈 / 严肃 / 活泼 / 复古 |

禁止:无源码时调用 VL 抽风格。 VL 抽不准(猜),且消耗巨大。

Phase 2 · 选主题

参考 references/themes.md,从 5 套预设里选最接近的:

| 风格 | 适用 | |---|---| | brutalist | 工具栈分享、代码、个人技术博客 | | swiss | 数据/工程/科技/严肃内容 | | magazine | 文学/评论/生活方式 | | klein | 艺术/摄影/设计师/极简 | | gold | 商业/品牌/礼赞/传统 |

选完后:复用主题的 CSS 变量和类名,不要另造。

Phase 2.5 · 决定是否加背景艺术层(默认加)

默认: 在 .banner 内最前面加一层 <svg class="bg-art"> 抽象几何背景艺术,提升视觉层次感。

主题适配表:

| 主题 | 默认 | 几何元素建议 | |---|---|---| | brutalist | ✓ 加 | 点阵 / 旋转色块 / 硬阴影图形 | | swiss | ✓ 加 | 同心圆 / 对角线 / 点阵 / 十字标 | | magazine | ✓ 加 | 细线 / 印记 / 罗马数字装饰 | | klein | ✗ 跳过 | 克莱因蓝本身就是大色块背景,再加冲突 | | gold | ✗ 跳过 | 烫金边框已是装饰,再加冲突 |

纪律:

  • inline SVG,position: absolute; z-index: 0,前景内容加 position: relative; z-index: 1
  • 颜色只用主题色板(从 Phase 2 选的主题变量里取),opacity 0.05–0.30
  • 几何元素放视觉重心外围(通常右上 / 左下),不抢 60% 巨字和标题
  • 不用位图、emoji、动画、滤镜
  • 直径/线条/间距用 SVG 内部坐标,跟外层 1080×460 viewBox 对齐

不确定时 → 用 AskUserQuestion 问用户,2-3 个具体选项:

"是否加一层抽象几何背景?选项:加(SVG 几何)/ 不加(纯色底) / 换种方式(用户描述)"

不要泛问"要背景吗",也不要闷头加。

Phase 3 · 写 HTML(变量化)

纪律:

  • 所有可调参数(尺寸、间距、阴影偏移、旋转角度)用 CSS 变量,集中在 :root
  • 结构(div 嵌套)写一次,不再改;迭代只改变量值
  • 类名复用模板
  • 不上 JS 库 / 不用 emoji / 不引入 Tailwind / Bootstrap

HTML 骨架模板:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{封面标题}</title>
  <link href="https://fonts.googleapis.com/css2?family={字体1}&family={字体2}" rel="stylesheet">
  <style>
    :root { /* 从 references/themes.md 抄 */ }
    .banner { width:1080px; height:460px; position:relative; overflow:hidden; }
    .bg-art { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
    .banner > *:not(.bg-art) { position:relative; z-index:1; }
  </style>
</head>
<body>
  <div class="banner">
    <!-- Phase 2.5 背景艺术层:klein/gold 主题可删 -->
    <svg class="bg-art" viewBox="0 0 1080 460" preserveAspectRatio="none">
      <!-- 点阵 pattern + 同心圆/对角线/十字标 等 -->
    </svg>

    <div class="top-strip">...</div>
    <div class="main">
      <div class="title-block">...</div>
      <div class="aside">...</div>
    </div>
    <div class="footer">...</div>
  </div>
</body>
</html>

.bg-art 槽位是默认的;如果主题是 klein / gold(Phase 2.5 表里 ✗ 的),删掉 <svg> 那一段就行,不要保留空容器。

Phase 4 · Chrome headless 渲染

chrome --headless --disable-gpu --no-sandbox \
  --window-size=1080,460 --hide-scrollbars \
  --virtual-time-budget=3000 \
  --screenshot={项目}/cover/cover_v1.png \
  "file:///{项目}/cover/index.html"

--virtual-time-budget=3000 让 Google Fonts 加载完再截,避免 FOIT。

Windows 下固化到 D:\wechat\.claude\commands\render-cover.bat(可选)。

Phase 5 · 三级验收(VL 兜底)

第 1 级 · 机械检查(必做,0 token)

python scripts/check_cover.py cover_v1.png

输出示例:

DIM 1080x460
COLOR bg-tl (10,10) = #faf3e0
COLOR bg-center (540,230) = #1d1d1d
...
SIZE 44.5KB

告警含义:

  • WARN: expected 1080x460 → 修 --window-size
  • WARN: file < 18KB → Google Fonts 没加载完,加 --virtual-time-budget=3000
  • COLOR bg-* 不像主题背景色 → CSS 没生效,查 index.html

第 2 级 · 逻辑自检(必做,0 token)

  1. Read index.html 重新读一遍
  2. 用 Read 自己算每个关键元素的位置(根据 padding/font-size 推算)
  3. 用 Grep 检查关键文案是否在 HTML 里:
grep -c "不再截图" index.html
grep -c "READ" index.html
  1. 必要时用 Chrome dump 渲染后的 DOM 拿真实坐标:
chrome --headless --dump-dom "file:///{项目}/cover/index.html" | grep -A 2 "big-title"

逻辑自检能抓住:文案缺失/错字、元素位置重叠、padding/font-size 算错。这些都是机械问题,VL 答得不比我好。

第 3 级 · VL 兜底(可选,1+ token)

只有当前两级都过、但对「整体气质/色彩协调/视觉重心」有疑虑时,才用 VL 验收。Prompt 必须具体到像素或元素:

✅ "检查 4 张工具卡左色条颜色顺序是否清晰,top-strip 右侧 VOL.001 是否贴边"

❌ "这张图好看吗"

迭代节奏:

| 轮次 | 动作 | |---|---| | v1 | 渲染 → 1 级 → 2 级 → 改变量 → 重渲染 | | v2 | 渲染 → 1 级 → 2 级 → (可选)3 级 → 改变量 → 重渲染 | | v3 | 兜底,如果 v2 还没收敛就交付并附「已知 P1/P2」清单 |

目标:VL 调用 ≤ 1 次/任务。多数任务 0 次也能交付。

工具决策矩阵

| 工具 | 主要价值 | 该用 | 不该用 | |---|---|---|---| | Read | 代码 ground truth | 所有有源码任务 | — | | Grep | 批量风格指纹/文案校验 | 多文件项目/校验 HTML 关键元素 | 单文件时没必要 | | scripts/check_cover.py | 尺寸/颜色/文件大小机械检查 | 每次渲染后必做 | 需要语义判断时 | | mcp__MiniMax__understand_image | 兜底视觉验收 | 1-2 级检查都过、还有气质疑虑时 | 抽风格 / 读源码 / 单纯确认尺寸 | | AskUserQuestion | 消除风格歧义 | 无源码 / 主题边界模糊(Phase 2.5)/ Phase 1 缺方向时 | 细节级问题 | | inline SVG <svg class="bg-art"> | 背景艺术层(Phase 2.5) | 主题适配表里 ✓ 的主题 | klein / gold 主题 / 抢前景时 | | guizang-ppt-skill | 借调色板和版式 | 风格能套 A/B 模板时 | 自己造色板 | | frontend-design | 拒默认脸、做美学决策 | 风格无现成模板时 | 用来"检查代码对不对" | | Chrome headless | HTML → PNG | 唯一渲染手段 | 用 Puppeteer 反而过度 | | Memory | 跨会话保留上下文 | 项目级元信息(双副本等) | 单次任务临时状态 |

主题索引

详见 references/themes.md,5 套预设风格,选最接近的复用,不要另造。

输出规范

  • 目录:{项目}/cover/
  • 文件:index.html + cover_final.png(中间稿可选)
  • 尺寸:1080×460
  • 字体:Google Fonts CDN
  • 颜色:从 templates.md 选,不另造调色板
  • 不引入第三方 CSS 框架

双副本项目规则

如果项目在 MEMORY.md 里登记了双副本(查 [[worldcup-dashboard-has-two-copies]] 等),两边都生成。先 D 盘,再 G 盘(或反亦)。

反模式(每条都来自实战)

  1. 无源码时用 VL 抽风格 —— 浪费 token,精度低,直接问用户关键词
  2. 跳过机械检查直接发图给 VL —— 尺寸/字体加载问题 VL 答不了,check_cover.py 一行命令搞定
  3. 同时套两个 Skill —— 美学冲突,最终谁都不像
  4. VL prompt 写"好不好看" —— 它答不了,只能答几何/对齐
  5. 迭代超过 2 轮还在调结构 —— 应改 CSS 变量,不是改 HTML 结构
  6. 自己写新调色板 —— 5 套主题预设已验证,自定义翻车率高
  7. 把临时状态写进 Memory —— 风格指纹从代码能再读出来
  8. 封面里塞 emoji —— 除非用户明确要求
  9. 不写 --virtual-time-budget —— Google Fonts 没加载完,字回退到默认
  10. 覆盖同名文件前不问 —— cover_final.png 是终稿,覆盖即丢失
  11. klein / gold 主题还硬加背景层 —— 主题本身就是装饰,再加会冲突;按 Phase 2.5 表跳过
  12. 背景层用位图 / 滤镜 / 动画 —— 破坏主题纪律 + 渲染结果不可控;只允许 inline SVG 矢量
  13. 背景层不透明度 > 0.4 —— 会和前景文字打架,压制在 0.05–0.30 区间
  14. 背景层把视觉重心放中央 —— 抢 60% 巨字 / 标题的风头,放外围(右上 / 左下)

决策树

开始
  │
  ├─ 有源码?
  │   ├─ 是 → Read + Grep 抽风格
  │   └─ 否 → AskUserQuestion 文字描述 → 关键词匹配 templates.md
  │
  ├─ 选 references/themes.md 里最接近的 1 套
  │   └─ 复用 CSS 变量和类名,不另造
  │
  ├─ Phase 2.5: 主题适配背景艺术?
  │   ├─ klein / gold → 跳过,删 .bg-art 槽
  │   ├─ 主题边界 / 用户调性模糊 → AskUserQuestion
  │   └─ 其它 → 加 .bg-art SVG 层
  │
  ├─ 手写 HTML(变量化,结构只写一次)
  │
  ├─ Chrome headless 渲染 v1
  │
  ├─ 1 级验收:check_cover.py(尺寸/颜色/文件大小)
  │   └─ 不通过 → 修 window-size / virtual-time-budget / 背景
  │
  ├─ 2 级验收:重读 HTML + Grep + Chrome dump-dom
  │   └─ 不通过 → 修 CSS 变量(改 gap/padding/font-size/opacity),不重写结构
  │
  ├─ 3 级验收(可选):VL,只在前 2 级都过、还有气质疑虑时
  │   └─ 问具体到像素/元素的问题,不问"好不好看"
  │
  └─ 交付 cover_final.png
      └─ 超过 2 轮还没收敛 → 交付并附「已知 P1/P2」清单