中文竖屏图片生成技能

生成高质量中文竖屏图片（750×1334px），适用于微头条、社交媒体等。

技术方案

• - 渲染引擎：Playwright（Python）+ Chromium（不用 snap 版 CLI chromium，有 AppArmor 权限问题）
• 字体：Google Fonts CDN Noto Sans SC（不用系统 Noto Sans CJK，有 glyph bug）
• 样式：HTML + CSS 内联（不用 PIL 手写坐标）

Prerequisites

bash

Install Playwright (Python)

pip install playwright

Install Chromium browser (required once)

playwright install chromium

和 AI 生图的区别

	本技能（代码渲染）	AI 生图（Midjourney/DALL-E）
文字精度	100% — 浏览器渲染真实字体	几乎不准确 — AI 在画文字
可控性

CSS 精确到像素 | 每次结果随机、不可预测 | | 费用 | 免费（本地 Playwright） | 每张图有 API 费用 | | 速度 | 约 2 秒/张 | 10-30 秒/张 | | 最适合 | 数据卡片、对比图、信息图、社交媒体配图 | 插画、艺术图、照片级渲染 | | 弱点 | 需要写 HTML/CSS | 中文/日文/韩文几乎无法准确渲染 |

一句话总结： 图里需要可读的文字（尤其是中日韩）→ 用本技能；需要艺术画面→ 用 AI 生图。

适用场景

数据展示

• - Token 消耗报表、费用分析
• API 性能仪表盘
• 周/月统计数据汇总

对比分析

• - 大模型价格对比（如 GPT vs Claude vs DeepSeek）
• 产品参数对比
• 方案优劣分析卡片

社交媒体配图

• - 微头条 / 小红书竖屏信息图
• 微信公众号头图
• 知识分享卡片（含代码片段）

任何需要像素级文字精度的场景

• - 图片里有可读文字 → 用本技能
• 纯视觉/艺术图 → 用 AI 生图

操作流程

1. 编写 HTML

将内容写成 HTML，内联所有 CSS。固定尺寸 750×1334px。

HTML 模板头部（必加）：
html

2. 设计规范

配色体系：

• - 主背景：linear-gradient(180deg, #1a1220 0%, #0d1b2a 40%, #080e18 100%)
• 顶部光晕：radial-gradient(ellipse, rgba(255,140,50,0.5) 0%, rgba(255,100,30,0.15) 40%, transparent 70%) + filter:blur(40px)
• 强调色：电光蓝 #00d4ff（主）、活力橙 #ff6b35（峰值/重点）、薄荷绿 #00e5a0、金色 #ffc107

布局层级（从上到下）：

1. 1. 头部区：大标题 48px 加粗 + 副标题 16px 灰色
2. 数据卡片：3 列 grid，半透明黑底 rgba(15,20,40,0.7) + 细微边框 + 圆角 10px
3. 活跃度行：居中排列，用 / 分隔，上下有分隔线
4. 柱状图区：上方加每日 token 消耗量小标题，柱子高度等比缩放
5. 底部：虚线分隔 + 说明文字

安全边距： 上下左右各 80px

字体规范：

• - 字重：300（light）、400（regular）、700（bold），都安全
• 标题：#ffffff，正文：#bbbbbb，辅助：#999999，更弱：#777777
• 数字格式：中文用万亿，不用 MK

柱状图规范：

• - 峰值柱：橙色渐变 #ff8c32 → #cc5500 + box-shadow 发光
• 普通柱：青色渐变 #00d4ff → #0088aa
• 柱宽 52px，圆角 8px 8px 4px 4px
• 柱顶标注数值，柱底标注星期+日期

3. 渲染截图

将 HTML 写入临时文件，用 Playwright 渲染：

python
from playwright.syncapi import syncplaywright
import time

with sync_playwright() as p:
browser = p.chromium.launch(args=[--no-sandbox])
page = browser.new_page(viewport={width: 750, height: 1334})
page.setcontent(htmlstring)
page.waitforload_state(networkidle)
time.sleep(1.5) # 等 Google Fonts 加载
page.screenshot(path=output.png)
page.close()
browser.close()

4. 多图生成

复用同一个 browser 实例，循环生成多张图：

python
with sync_playwright() as p:
browser = p.chromium.launch(args=[--no-sandbox])
for html, filename in pages:
page = browser.new_page(viewport={width: 750, height: 1334})
page.set_content(html)
page.waitforload_state(networkidle)
time.sleep(1.5)
page.screenshot(path=f{OUT}/{filename})
page.close()
browser.close()

5. 质量检查

• - 放大查看每个汉字（尤其复繁赢等笔画多的字）
• 确认无重叠、无裁切、无变形
• 确认对比度足够
• 确认整体布局均匀，没有大片空白

⚠️ 踩过的坑

问题	原因	解决
复字右边被裁切	Noto Sans CJK Bold glyph bug	用 Google Fonts CDN 的 Noto Sans SC
部分汉字乱码

Noto Serif CJK Bold glyph 问题 | 不用 Serif 字体 | | 截图写文件失败 | snap 版 chromium AppArmor 权限限制 | 用 Playwright 而非 CLI chromium | | 柱子遮挡文字 | overflow 控制不当 | 容器加 overflow:hidden 或控制柱高 | | 排版大片空白 | flex:1 撑空间 | 用固定 margin 控制间距 | | 数字格式不统一 | 用 MK 不符合中文习惯 | 统一用万亿 |

自定义尺寸

默认 750×1334（竖屏微头条）。如需其他尺寸，在 viewport 和 HTML body 上同时修改。

完整示例：Token 消耗周报图

以下是经过验证的完整 HTML 模板，直接可用：

html