Chinese Image Gen

设计多媒体

使用 Playwright + Google Fonts CDN 为微头条/社交媒体生成750×1334 竖版中文图片，解决 PIL 中文 glyph 错误。触发词：生成图片、做图。

图片生成

456

下载量

安装量

收藏量

★ 5.0

综合评分ⓘ

概述

更多信息

中文竖屏图片生成技能#

生成高质量中文竖屏图片（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

<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
<style>
/* 所有 CSS 内联 */
</style></head><body>
<!-- 内容 -->
</body></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

布局层级（从上到下）：

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

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

字体规范：

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

柱状图规范：

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

3. 渲染截图#

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

python

from playwright.sync_api import sync_playwright
import time

with sync_playwright() as p:
    browser = p.chromium.launch(args=['--no-sandbox'])
    page = browser.new_page(viewport={"width": 750, "height": 1334})
    page.set_content(html_string)
    page.wait_for_load_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.wait_for_load_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 控制间距数字格式不统一用 "M""K" 不符合中文习惯统一用"万""亿"

自定义尺寸#

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

完整示例：Token 消耗周报图#

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

html

<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
  width:750px; height:1334px;
  background:linear-gradient(180deg, #1a1220 0%, #0d1b2a 40%, #080e18 100%);
  font-family:"Noto Sans SC",sans-serif;
  color:#fff; padding:80px;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.glow {
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:500px; height:280px;
  background:radial-gradient(ellipse, rgba(255,140,50,0.5) 0%, rgba(255,100,30,0.15) 40%, transparent 70%);
  filter:blur(40px); z-index:0;
}
.header { text-align:center; position:relative; z-index:1; padding-top:20px; margin-bottom:28px; }
.label { font-size:13px; color:#777; letter-spacing:4px; text-transform:uppercase; margin-bottom:10px; }
.main-num { font-size:48px; font-weight:700; color:#fff; margin-bottom:4px; letter-spacing:-1px; }
.unit { font-size:16px; color:#999; }
.stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; position:relative; z-index:1; margin-bottom:24px; }
.stat { background:rgba(15,20,40,0.7); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:16px; }
.stat-label { font-size:12px; color:#777; margin-bottom:6px; }
.stat-val { font-size:20px; font-weight:700; }
.stat-pct { font-size:12px; color:#666; margin-top:2px; }
.activity { display:flex; justify-content:center; gap:30px; padding:18px 0; margin-bottom:28px; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); position:relative; z-index:1; }
.act-item { text-align:center; }
.act-num { font-size:22px; font-weight:700; color:#fff; }
.act-label { font-size:12px; color:#888; margin-top:2px; }
.chart-header { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; margin-top:70px; }
.chart-title { font-size:14px; color:#888; letter-spacing:2px; }
.chart-hint { font-size:12px; color:#555; }
.chart-area { position:relative; z-index:1; }
.chart { display:flex; align-items:flex-end; justify-content:space-between; height:360px; }
.col { display:flex; flex-direction:column; align-items:center; flex:1; }
.val { font-size:15px; font-weight:700; color:#00d4ff; margin-bottom:8px; white-space:nowrap; }
.val.peak { color:#ff6b35; }
.bar { width:52px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg, #00d4ff 0%, #0088aa 100%); }
.bar.peak { background:linear-gradient(180deg, #ff8c32 0%, #cc5500 100%); box-shadow:0 8px 25px rgba(255,120,40,0.3); }
.day { font-size:12px; color:#777; margin-top:10px; text-align:center; }
.day span { color:#555; font-size:10px; }
.footer { text-align:center; margin-top:24px; padding-top:16px; border-top:1px dashed rgba(255,255,255,0.1); font-size:13px; color:#666; position:relative; z-index:1; }
.footer span { color:#ff6b35; }
</style></head><body>
<div class="glow"></div>
<div class="header">
  <div class="label">Week Token Usage</div>
  <div class="main-num">12,345,678</div>
  <div class="unit">tokens · 03-01 ~ 03-07 · weekly total 1,235 万</div>
</div>
<div class="stats">
  <div class="stat"><div class="stat-label">Input</div><div class="stat-val" style="color:#ff6b35;">456 万</div><div class="stat-pct">37%</div></div>
  <div class="stat"><div class="stat-label">Output</div><div class="stat-val" style="color:#00e5a0;">123 万</div><div class="stat-pct">10%</div></div>
  <div class="stat"><div class="stat-label">Cache Read</div><div class="stat-val" style="color:#00d4ff;">656 万</div><div class="stat-pct">53%</div></div>
</div>
<div class="activity">
  <div class="act-item"><div class="act-num">800</div><div class="act-label">Messages</div></div>
  <div class="act-item" style="color:#333;font-size:24px;align-self:center;">/</div>
  <div class="act-item"><div class="act-num">750</div><div class="act-label">Replies</div></div>
  <div class="act-item" style="color:#333;font-size:24px;align-self:center;">/</div>
  <div class="act-item"><div class="act-num">500</div><div class="act-label">Tool Calls</div></div>
</div>
<div class="chart-header"><div class="chart-title">Daily Token Usage</div><div class="chart-hint">▲ Peak</div></div>
<div class="chart-area"><div class="chart">
  <div class="col"><div class="val">120 万</div><div class="bar" style="height:40px;"></div><div class="day">Sat<br><span>03-01</span></div></div>
  <div class="col"><div class="val">180 万</div><div class="bar" style="height:60px;"></div><div class="day">Sun<br><span>03-02</span></div></div>
  <div class="col"><div class="val">210 万</div><div class="bar" style="height:70px;"></div><div class="day">Mon<br><span>03-03</span></div></div>
  <div class="col"><div class="val peak">300 万 ⚡</div><div class="bar peak" style="height:340px;"></div><div class="day">Tue<br><span>03-04</span></div></div>
  <div class="col"><div class="val">150 万</div><div class="bar" style="height:50px;"></div><div class="day">Wed<br><span>03-05</span></div></div>
  <div class="col"><div class="val">135 万</div><div class="bar" style="height:45px;"></div><div class="day">Thu<br><span>03-06</span></div></div>
  <div class="col"><div class="val">140 万</div><div class="bar" style="height:47px;"></div><div class="day">Fri<br><span>03-07</span></div></div>
</div></div>
<div class="footer">Peak day: <span>batch operation triggered spike</span></div>
</body></html>

渲染代码：

python

from playwright.sync_api import sync_playwright
import time

with sync_playwright() as p:
    browser = p.chromium.launch(args=['--no-sandbox'])
    page = browser.new_page(viewport={"width": 750, "height": 1334})
    page.set_content(html_above)
    page.wait_for_load_state("networkidle")
    time.sleep(1.5)
    page.screenshot(path="output.png")
    page.close()
    browser.close()

调整间距技巧：

柱状图位置靠 chart-header 的 margin-top 控制（当前 70px）
各区块间距用固定 margin-bottom（24px / 28px）
不要用 flex:1 撑空间，会导致大片空白
柱状图高度 height:360px，峰值柱 340px，普通柱等比缩放

通用对比卡片图模板#

适用于任何多项目对比场景（费用对比、产品对比、方案对比等）。

布局结构#

text

顶部：标题 + 描述
┌─────────────────────────┐
│  标题                    │
│  副标题（数据来源/范围）   │
│  ═══ 概览条 ═══         │ ← 可选：构成条/比例条
└─────────────────────────┘

卡片区：每项一张卡片（从上到下排列）
┌─────────────────────────┐
│ │ 名称          ¥2.6/周 │ ← 左侧色条 + 名称 + 核心数字
│ │ 副标题         ¥81/月  │ ← 副标题 + 次要数字
│ │ 标签1  标签2   标签3  │ ← 价格/属性标签
│ │ 公式/详情...          │ ← 可展开的计算公式或说明
└─────────────────────────┘

底部：可视化对比
┌─────────────────────────┐
│ 名称 ████████████ $100  │ ← 横向条形图
│ 名称 ████ $25           │    宽度按数值比例缩放
└─────────────────────────┘

设计要点#

排序：从优到差排列（最便宜/最快/最高分在最上面）
左侧色条：4px 宽，每个项目用不同品牌色或强调色区分
核心数字：右侧大字显示（22px 加粗），次要信息小字灰色
标签行：用 background:rgba(255,255,255,0.04) 的小圆角标签
公式区：monospace 字体 + 半透明黑底，可折叠
底部条形图：宽度按比例，最便宜项为 100%，其余等比缩放
最小条宽：60px（ min-width:60px），避免最短项看不到
国旗/图标：emoji 在部分设备显示异常，用纯文字标签替代

CSS 骨架#

css

.card { background:rgba(15,20,40,0.7); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:18px 20px; margin-bottom:12px; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }  /* 左侧色条 */
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.card-name { font-size:18px; font-weight:700; }
.card-cost { text-align:right; }
.card-week { font-size:22px; font-weight:700; }  /* 核心数字 */
.card-month { font-size:11px; color:#888; }
.card-prices { display:flex; gap:12px; margin-bottom:10px; font-size:12px; color:#999; }
.card-prices span { background:rgba(255,255,255,0.04); padding:3px 8px; border-radius:4px; }
.card-formula { font-size:12px; color:#777; background:rgba(0,0,0,0.2); padding:8px 12px; border-radius:6px; font-family: monospace; line-height:1.5; }
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.bar-label { width:100px; font-size:13px; text-align:right; color:#aaa; }
.bar-track { flex:1; height:24px; background:rgba(255,255,255,0.04); border-radius:4px; }
.bar-fill { height:100%; border-radius:4px; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; font-size:11px; font-weight:700; }

使用 Nano Banana Pro (Gemini 3 Pro Image) 生成或编辑图像。支持文生图、图生图及 1K/2K/4K 分辨率，适用于图像创建、修改及编辑请求，使用 --input-image 指定输入图像。

设计多媒体需 API Key

★ 429↓ 11.7万3 个月前更新

使用 Whisper CLI 进行本地语音转文字（无需 API 密钥）

设计多媒体

★ 330↓ 9.4万3 个月前更新

使用 ffmpeg 从视频中提取帧或短片。

设计多媒体

★ 133↓ 5.3万3 个月前更新

提供 UI/UX 设计智能与实现指导，帮助打造精美界面。适用于 UI 设计、UX 流程、信息架构、视觉风格、设计系统/标记、组件规格、文案/微文案、无障碍及前端 UI（HTML/CSS/JS、React、Next.js、Vue、Svelte、Tailwind）生成/评审/改进。工作流包括：①新 UI 布局与样式生成；②现有 UI/UX 改进；③设计系统标记和组件规范产出；④ UX 建议转化为代码变更。

设计多媒体

★ 216↓ 4.7万3 个月前更新

Chinese Image Gen

中文竖屏图片生成技能#

技术方案#

Prerequisites#

和 AI 生图的区别#

适用场景#

操作流程#

1. 编写 HTML#

2. 设计规范#

3. 渲染截图#

4. 多图生成#

5. 质量检查#

⚠️ 踩过的坑#

自定义尺寸#

完整示例：Token 消耗周报图#

通用对比卡片图模板#

布局结构#

设计要点#

CSS 骨架#

Nano Banana Pro

Openai Whisper

Video Frames

UI/UX Pro Max

SuperDesign

diagram-generator

Chinese Image Gen

中文竖屏图片生成技能#

技术方案#

Prerequisites#

和 AI 生图的区别#

适用场景#

操作流程#

1. 编写 HTML#

2. 设计规范#

3. 渲染截图#

4. 多图生成#

5. 质量检查#

⚠️ 踩过的坑#

自定义尺寸#

完整示例：Token 消耗周报图#

通用对比卡片图模板#

布局结构#

设计要点#

CSS 骨架#

相关推荐

Nano Banana Pro

Openai Whisper

Video Frames

UI/UX Pro Max

SuperDesign

diagram-generator