| name | wechat-infographic |
| description | Use when creating mobile-first infographic HTML pages for WeChat Moments sharing. Triggers: '配图', '信息图', 'infographic', '长图', '数据可视化', '微信图片', '手机截图', '朋友圈配图', '做张图' |
WeChat Infographic
Overview
金标准参考文件：内容/公众号/20260325/pm-skills-infographic.html — 每次做新信息图前必读，严格对齐其设计语言。
用 HTML/CSS 制作手机端信息图，通过 Playwright 3x 截图生成超高清长图，用于微信朋友圈/群聊分享。
核心思路：不做 App，做截图。HTML 只是画布，最终产物是 PNG。
When to Use
- 需要在微信分享数据可视化、排行榜、对比图、流程图
- 需要品牌统一的配图
- 需要超高清（3x Retina）长图
不适用： 需要交互的网页、需要动画的内容。
Quick Reference
| 参数 | 值 |
|---|
| 视口宽度 | 390px（iPhone 12 Pro） |
| 最大内容宽度 | 500px |
| 截图倍率 | 3x deviceScaleFactor |
| 输出分辨率 | 1170px 宽 |
| 标题字体 | Noto Serif SC, weight 900 |
| 正文字体 | Noto Sans SC, weight 300-500 |
| 数据字体 | JetBrains Mono, weight 700 |
| 本地预览 | python3 -m http.server 8766 |
| Header 背景 | mascot.png 右下 + 渐变 + 半透明遮罩 |
| 吉祥物图片 | docs/ai-teaching-plan/mascot.png（复制到 HTML 同目录） |
| 品牌尾部 | 绿色渐变底 + 日期（YYYY.MM.DD），无 QR 无品牌名 |
Design System
Color Spectrum Design
原则：相邻色相，平滑过渡，像彩虹一样
设计多级色谱时，沿色轮选择相邻色相，确保：
- 相邻两色的色相差 20-40 度
- 明度逐级递减（浅 = 多/低，深 = 少/高）
- 饱和度保持在 35-55%
--level-1: #96C474;
--level-2: #7DC8A0;
--level-3: #4BB0A6;
--level-4: #3892B6;
--level-5: #2E6BA4;
关键规则：
- 缩略图/代表色 = 展开后占比最大的颜色（如放大前的格子 = 放大后最多的格子颜色）
- 浅色（L>60%）只用于背景和大号数字，正文用深色（L<45%）
- 需要文字可读时，用色谱中更深的变体（如
--accent-dark）
Spacing
页面内边距：28px 左右
Section 上下：36px
Header 上：48px 下：40px
组件间距：18-24px
Components
1. Grid Visualization（格子图）
用 CSS Grid 生成 N 个彩色格子表示数量。
<div class="grid" id="g1"></div>
<script>
function fill(id, map) {
const g = document.getElementById(id);
map.forEach(([n, cls]) => {
for (let i = 0; i < n; i++) {
const d = document.createElement('div');
d.className = 'cell ' + cls;
g.appendChild(d);
}
});
}
fill('g1', [[67,'c-gray'],[15,'c-green'],[1,'c-accent']]);
</script>
.grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.cell { aspect-ratio: 1; border-radius: 4px; }
2. Stat Cards（数据卡片）
4 列等宽卡片，每张含：色点 + 大数字 + 标签 + 描述。
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { text-align: center; padding: 14px 4px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.stat .n { font-family: 'JetBrains Mono'; font-size: 22px; font-weight: 700; }
.stat .unit { font-size: 12px; opacity: 0.7; }
.stat .tier { font-size: 12px; font-weight: 700; margin-top: 8px; }
.stat .tools { font-size: 8.5px; color: #9AA8B8; margin-top: 5px; line-height: 1.5; }
注意： 描述文字控制在 4 字/行，超出会折行变丑。
3. Callout（重点提示框）
.callout { padding: 18px 20px; background: #F2F6FA; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.callout p { font-size: 13.5px; line-height: 1.85; color: #4A5A6A; }
.callout strong { color: var(--navy); }
.callout .hl { font-weight: 700; color: var(--accent-dark); }
4. Summary Cards（汇总卡片）
3 列大数字卡片，用于全页总结。
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.summary-card { text-align: center; padding: 18px 6px; border-radius: 12px; background: white; border: 1px solid var(--border); }
.summary-card .big { font-family: 'JetBrains Mono'; font-size: 26px; font-weight: 700; }
.summary-card .label { font-size: 11px; color: #7A8A9A; margin-top: 8px; }
5. Legend（图例）
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #5A6A7A; }
.lg { width: 12px; height: 12px; border-radius: 3px; }
6. Brand Footer（品牌尾部）
.brand-footer { padding: 36px 28px 44px; text-align: center; background: linear-gradient(180deg, #D4F0E0, #C4E8D4); }
.brand-sub { font-size: 13px; color: var(--accent-dark); letter-spacing: 1px; }
Workflow
1. 创建 HTML 文件
在目标目录创建 .html，用 Page Template（见下方）起步，根据需求组合 Components。
2. 启动本地服务
cd <html所在目录>
python3 -m http.server 8766
3. 实时预览
用 Chrome MCP 工具在 390px 视口下预览：
tabs_context_mcp → navigate → resize_window(390, 844) → screenshot
4. 迭代调整
直接编辑 HTML/CSS → 刷新浏览器 → 截图确认。颜色、间距、文字都在这步反复调。
5. 导出 3x 高清图
async (page) => {
const browser = page.context().browser();
const ctx = await browser.newContext({
viewport: { width: 390, height: 844 },
deviceScaleFactor: 3
});
const p = await ctx.newPage();
await p.goto('http://localhost:8766/your-page.html');
await p.waitForLoadState('networkidle');
await p.screenshot({
fullPage: true,
path: '/absolute/path/output-3x.png',
type: 'png'
});
await ctx.close();
}
输出：1170px 宽的超高清 PNG，可直接在微信发送。
截图工具备选
- 首选 Playwright MCP（
browser_run_code）
- Playwright MCP 与 Chrome 冲突时，用 gstack 的 headless playwright：
node -e "const pw = require('/Users/jianghongwei/.claude/skills/gstack/node_modules/playwright'); ..."
- 截图参数固定：
viewport: { width: 390, height: 844 }, deviceScaleFactor: 3
SVG 内联图表（推荐）
微信公众号完整支持内联 SVG。 做流程图、循环图、关系图时，优先用 SVG 而不是 CSS flex 拼凑。
优势：
- 箭头、连接线、三角形等图形元素用 SVG 画比 CSS hack 干净 100 倍
- 微信编辑器直接渲染，不需要转成图片
- 可以精确控制每个元素的位置，不受 flex 布局限制
- 缩放清晰，Retina 屏不模糊
用法：
<section style="text-align:center;margin:20px 0;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 300" style="width:100%;max-width:340px;">
<rect x="95" y="16" width="150" height="60" rx="12" fill="#fff" stroke="#4AA882" stroke-width="1.5"/>
<text x="170" y="52" text-anchor="middle" font-size="16" font-weight="900" fill="#1A2E1A">节点文字</text>
<line x1="170" y1="76" x2="170" y2="120" stroke= =/>
注意事项：
- 必须加
xmlns="http://www.w3.org/2000/svg"，否则微信不渲染
viewBox 控制画布大小，style="width:100%;max-width:Npx" 控制显示大小- 字体用系统字体（SVG text 不支持 Google Fonts）
- 颜色直接写色值，不用 CSS 变量
- 适合：流程图、循环图、三角关系图、对比图
- 不适合：大段文字排版（用 section/p 更灵活）
参考：内容/公众号/20260329/evolve-promo-wechat.html 中的三角循环图
不要用的组件
- Loop（循环流程）：步骤节点 + 箭头的横排流程图，用 CSS flex 拼的，太丑。改用 SVG 画
文案规则
- 不用破折号（——/—），用逗号/冒号/换行
- 口语化，面向初级读者
- 流程步骤
white-space: nowrap 不折行
Page Template
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--dark: #2D3A50;
--navy: #3A5670;
--border: #D4DFE9;
--light: #F2F6FA;
--cream: #FAFCFD;
--accent: #7DC8A0;
--accent-dark: #4AA882;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans SC', sans-serif; background: var(--cream); : (--dark); -webkit-: antialiased; }
{ : ; : auto; : (--cream); }
{ : center; : ; : () right - bottom - / auto no-repeat, (, , , ); : ; : flex; : column; : center; : relative; }
{ : ; : absolute; : ; : (, , , ); : none; }
> * { : relative; : ; }
{ : , serif; : ; : ; : ; : ; : ; : nowrap; }
{ : ; : ; : ; }
{ : inline-block; : ; : ; : ; : (--accent-dark); : ; }
{ : ; : solid (--border); }
{ : ; : ; : ; : ; : uppercase; : (--accent-dark); : ; }
{ : , serif; : ; : ; : (--navy); : ; : ; }
{ : ; : ; : ; : ; }
{ : ; : center; : (, , ); }
{ : ; : (--accent-dark); : ; }
标题
副标题说明文字
心情可可
Section Label
章节标题
描述文字。
2026.03.26
Common Mistakes
| 问题 | 解法 |
|---|
| 文字颜色太浅看不清 | 正文 L<45%，浅色只用于背景和大号数字 |
| 色谱过渡跳跃 | 相邻色相差 ≤ 40°，沿色轮单方向递进 |
| 放大前后颜色不匹配 | 缩略图颜色 = 展开后占比最大的颜色 |
| 卡片文字溢出折行 | 描述 ≤ 4 字/行，字号 8-9px |
| 截图模糊 | 必须 deviceScaleFactor: 3 |
| 手机端布局乱 | 固定 390px 视口开发，max-width: 500px |
| Google Fonts 加载慢 | 用 rel="preconnect" 加速 |
微信公众号内联 HTML 模式
信息图不仅可以截图分享，还可以直接转为微信公众号内联 HTML，复制粘贴到微信编辑器。
微信编辑器限制
| 支持 | 不支持 |
|---|
style="..." 内联样式 | <style> 标签（会被剥掉） |
data-darkmode-color/bgcolor | CSS class（无效） |
section, p, span, img, h1-h6 | JavaScript |
display:flex, border-radius, linear-gradient | CSS 变量 var() |
overflow-x:auto（横向滑动） | ::before/::after 伪元素 |
| 远程图片 URL（微信自动抓取到 CDN） | 本地图片、Google Fonts、grid 布局 |
内联 <svg>（完整支持） | 外链 SVG 文件 |
转换清单
从信息图 HTML 转微信版：
- 展开所有 CSS 变量 —
var(--accent) → #3DC88E
- 每个标签写
style="..." — 去掉所有 class
div → section — 微信对 section 更友好- 去掉 Google Fonts — 用
-apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
- 去掉伪元素 — 把效果直接写在父元素背景上
grid → flex — 微信不支持 grid- 加暗黑模式属性 —
data-darkmode-color="#xxx" / data-darkmode-bgcolor="#xxx"
- 图片用远程 URL — 本地图片复制粘贴不生效，必须用 HTTPS URL
布局铁律（微信自带 padding）
微信编辑器容器自带约 15px 左右 padding，所以：
- 左右 padding 全部为 0 —
padding:40px 0 而不是 padding:40px 28px
flex:1 必须搭配 min-width:0 — 否则内容会撑出容器（CSS flex 默认 min-width:auto）- flex 容器加
overflow:hidden;width:100% — 双重保险防溢出
- 不要用固定百分比宽度替代 flex:1 — 会导致桌面端微信（宽屏）布局错乱
- 图片加
max-width:100%
复制到微信的实现
<div id="articleContent">{{微信 HTML}}</div>
<div id="wechatHtml" style="position:absolute;left:-9999px;">{{微信 HTML}}</div>
<script>
function copyToWechat() {
const source = document.getElementById('wechatHtml');
source.style.position = 'fixed';
source.style.left = '0';
source.style.opacity = '0.01';
source.style.width = '375px';
const range = document.createRange();
range.selectNodeContents(source);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand('copy');
source.style. = ;
source.. = ;
sel.();
}
图片方案
- 远程图片：上传到 OSS（如
yuyumao.oss-cn-beijing.aliyuncs.com），用 HTTPS URL
- 微信编辑器粘贴时会自动抓取远程图片到微信 CDN
- 本地图片（
file:// 或相对路径）复制粘贴无效——浏览器能渲染但剪贴板不带图片数据
- 横向滑动画廊：
display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch，子元素 flex-shrink:0
参考作品
内容/公众号/20260326/ai-self-iteration-wechat.html — 首个微信公众号内联 HTML（品牌绿色系 + 圆环可视化 + 图片画廊）内容/公众号/20260326/ai-self-iteration.html — 原始信息图版本（CSS 变量 + class + Google Fonts）
xiaohu-wechat-format 工具
路径：~/Documents/Github/xiaohu-wechat-format/
Markdown → 微信内联 HTML 的转换工具，适合纯文字文章排版：
python3 ~/Documents/Github/xiaohu-wechat-format/scripts/format.py \
--input article.md --theme moodcoco --format wechat
- 主题 JSON 在
themes/ 目录，moodcoco.json 是心情可可品牌色（绿色主 + 蓝色辅）
--gallery 模式可预览 20+ 主题- 工具原理：Python markdown 转 HTML → 正则遍历标签注入
style="..." → 暗黑模式属性
局限：只能处理 Markdown 标准元素（标题/段落/列表/表格/引用/代码），无法做自定义布局（双列对比、圆环、卡片网格等）。复杂布局仍需手写内联 HTML。
参考作品
docs/ai-teaching-plan/ai-tier-pyramid.html — AI 五段位全球人口分布（格子图 + 色谱 + 数据卡片 + 汇总）
