| name | code-material-gen |
| description | 代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图。
不依赖任何AI图片API，100%代码生成，字体可控、像素精确、零成本。
Trigger: "代码生成素材", "配图生成", "素材生成", "code material", "render material".
|
| metadata | {"version":"1.0.0","author":"CCO Ives","domains":["content","design","automation"],"type":"production"} |
code-material-gen — 代码生成配图素材
HTML/CSS + Playwright 渲染，全中文手写字体，像素精确，零成本
定位
当素材需要全中文、手写字体、字迹清晰、可复现时使用。替代API生图方案（longform-visual-notes），不消耗任何API额度。
与其他skill的关系
| Skill | 关系 |
|---|
| longform-visual-notes | 互补：API生图 vs 代码生成 |
| content-cover-gen | 互补：封面场景可用code-material-gen |
| daily-gzh-content | 素材生成阶段调用 |
| daily-xhs-content | 小红书素材（比例改3:4） |
快速使用
python3 ~/clawd/skills/code-material-gen/scripts/generate.py \
--type list \
--title "三个核心建议" \
--items "建议一:先用Excel写规则" "建议二:手动执行30天" "建议三:追求稳定性" \
--font MaShanZheng \
--palette ink \
--size 1536x1024 \
--output /path/to/output.png
素材类型
| type | 用途 | items格式 |
|---|
timeline | 时间线/阶段图 | "阶段一:描述" "阶段二:描述" |
compare | 对比表格（表头第一项） | "指标|A|B" "胜率|59%|61%" |
list | 要点列表/编号卡片 | "标题:描述" |
quote | 金句/引用卡片 | "金句文字" "作者" |
cover | 文章封面 | "副标题" "标签1,标签2" |
chart | 数据展示（同list） | 同list |
手写字体
| 字体 | 风格 | 推荐场景 |
|---|
MaShanZheng | 马善政楷体 | ✅ 推荐，清晰有力，正文首选 |
ZCOOLKuaiLe | 站酷快乐体 | 圆润活泼，适合轻松内容 |
LiuJianMaoCao | 刘建毛草 | 草书风格，仅适合大标题 |
ZhiMangXing | 芝麻行书 | 行书风格，适合金句卡片 |
配色方案
| palette | 风格 | 适用 |
|---|
tech | 深色科技（深蓝底+亮蓝） | AI/科技/数据主题 |
warm | 暖色纸张（米色底+橙红） | 经验分享/生活类 |
ink | 水墨风（白底+红黑） | ✅ 推荐，文化感强 |
minimal | 极简白（白底+蓝） | 通用/商务 |
尺寸建议
| 平台 | 推荐 | 参数 |
|---|
| 公众号/抖音 | 16:9 | 1536x1024 |
| 小红书 | 3:4 | 1024x1365 |
| 封面 | 16:9 | 1920x1080 |
输出规范
- ✅ 全中文，无任何英文
- ✅ 手写字体，清晰可读
- ✅ 零成本，不消耗API
- ✅ 可复现，同样参数永远输出一样
- ✅ <1秒/张，批量生成极快
依赖
- Python 3 + Playwright（
pip install playwright）
- 中文字体文件在
~/.fonts/chinese-handwriting/
- 无需网络，无需API key
更新日志
- v1.0.0 (2026-04-18): 初始版本
- 5种素材类型（timeline/compare/list/quote/cover）
- 4种手写字体（马善政/站酷快乐/刘建毛草/芝麻行书）
- 4种配色方案（tech/warm/ink/minimal）
