code-material-gen

Q: What does this skill do?

代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图。 不依赖任何AI图片API，100%代码生成，字体可控、像素精确、零成本。 Trigger: "代码生成素材", "配图生成", "素材生成", "code material", "render material".

代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图。不依赖任何AI图片API，100%代码生成，字体可控、像素精确、零成本。 Trigger: "代码生成素材", "配图生成", "素材生成", "code material", "render material".

33 stars

byaAAaqwq

View on GitHub Installation ↓

Best use case

code-material-gen is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using code-material-gen should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/code-material-gen/SKILL.md --create-dirs "https://raw.githubusercontent.com/aAAaqwq/AGI-Super-Team/main/skills/code-material-gen/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/code-material-gen/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How code-material-gen Compares

Feature / Agent	code-material-gen	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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） |

## 快速使用

```bash
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）

Related Skills

article-material-collect

from aAAaqwq/AGI-Super-Team

上层编排 Skill，通过 **Brave Search 发现 → 智能选择浏览器截图** 完成结构化素材采集。

wemp-operator

from aAAaqwq/AGI-Super-Team

> 微信公众号全功能运营——草稿/发布/评论/用户/素材/群发/统计/菜单/二维码 API 封装

Content & Documentation

zsxq-smart-publish

from aAAaqwq/AGI-Super-Team

Publish and manage content on 知识星球 (zsxq.com). Supports talk posts, Q&A, long articles, file sharing, digest/bookmark, homework tasks, and tag management. Use when publishing content to 知识星球, creating/editing posts, uploading files/images/audio, managing digests, batch publishing, or formatting content for 知识星球.

zoom-automation

from aAAaqwq/AGI-Super-Team

Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.

zoho-crm-automation

from aAAaqwq/AGI-Super-Team

Automate Zoho CRM tasks via Rube MCP (Composio): create/update records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.

ziliu-publisher

from aAAaqwq/AGI-Super-Team

字流(Ziliu) - AI驱动的多平台内容分发工具。用于一次创作、智能适配排版、一键分发到16+平台（公众号/知乎/小红书/B站/抖音/微博/X等）。当用户需要多平台发布、内容排版、格式适配时使用。触发词：字流、ziliu、多平台发布、一键分发、内容分发、排版发布。

zhihu-post-skill

from aAAaqwq/AGI-Super-Team

> 知乎文章发布——知乎平台内容创作与发布自动化

zendesk-automation

from aAAaqwq/AGI-Super-Team

Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.

youtube-knowledge-extractor

from aAAaqwq/AGI-Super-Team

This skill performs deep analysis of YouTube videos through **both information channels** Multimodal YouTube video analysis through both audio (transcript) and visual (frame extraction + image analysis) channels. Especially powerful for HowTo videos, tutorials, demos, and explainer videos where what is SHOWN (screenshots, UI demos, diagrams, code, physical actions) is just as important as what is SAID. Use this skill whenever a user wants to analyze, summarize, or create step-by-step guides from YouTube videos, or when they share a YouTube URL and want to understand what happens in the video. Triggers on requests like "Analyze this YouTube video", "Create a step-by-step guide from this video", "What does this video show?", "Summarize this tutorial", or any YouTube URL shared with analysis intent.

youtube-factory

from aAAaqwq/AGI-Super-Team

Generate complete YouTube videos from a single prompt - script, voiceover, stock footage, captions, thumbnail. Self-contained, no external modules. 100% free tools.

youtube-automation

from aAAaqwq/AGI-Super-Team

Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools first for current schemas.

xlsx

from aAAaqwq/AGI-Super-Team

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas