Agent skill

Code Material Gen

by aAAaqwq in aAAaqwq/AGI-Super-Team

代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图. An agent skill from aAAaqwq/AGI-Super-Team.

MITAuto-check passedTesting & QA

Install Code Material Gen

skills CLI
$ npx skills add aAAaqwq/AGI-Super-Team --skill code-material-gen -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install aAAaqwq/AGI-Super-Team code-material-gen --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/aAAaqwq/AGI-Super-Team.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/code-material-gen .claude/skills/code-material-gen && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
code-material-gen
GitHub stars
105
Token cost
~554 tokens
SKILL.md length
115 words
Files
8 (incl. scripts)
Skills in repo
161
Repo updated
First seen
Licence
MIT

At a glance

代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图. An agent skill from aAAaqwq/AGI-Super-Team.

  • Tasks that involve Browser testing
  • SKILL.md covers 定位, 与其他skill的关系, 快速使用 and 素材类型, plus 6 more sections
  • Runs Python scripts from its folder; calls python3 and pip

What it does

Code Material Gen is an agent skill from aAAaqwq/AGI-Super-Team. 代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图。 不依赖任何AI图片API,100%代码生成,字体可控、像素精确、零成本。 Trigger: "代码生成素材", "配图生成", "素材生成", "code material", "render material".

Its SKILL.md is about 550 tokens, which your agent loads only when the skill is triggered. The skill folder holds 17 other files, including scripts (for example `scripts/generate.py`).

It sits in Testing & QA, covering Browser testing. It works with Playwright. The repository describes itself as: An installable, cross-framework AI organization: C-suite agents, expert subagents, curated skills, independent review, and one-command setup across 18 AI client/runtime adapters. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser testing

Example prompts

  • “代码生成素材”
  • “code material”
  • “render material”
  • “/code-material-gen”

Requirements

  • Python 3

What it can do on your machine

Read from SKILL.md and the folder at commit 331ecd3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 7 files in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • pip

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pip, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Code Material Gen loads about 554 tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 115 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~42
When it runs · the whole SKILL.md, loaded when a task matches
~554

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from aAAaqwq/AGI-Super-Team at commit 331ecd3, republished under its MIT licence (© aAAaqwq). 115 words, ~554 tokens.

Download SKILL.mdSave it as .claude/skills/code-material-gen/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
code-material-gen
description
代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图。 不依赖任何AI图片API,100%代码生成,字体可控、像素精确、零成本。 Trigger: "代码生成素材", "配图生成", "素材生成", "code material", "render material".
metadata.version
1.0.0
metadata.author
CCO Ives
metadata.domains
content, design, automation
metadata.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)

快速使用

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:91536x1024
小红书3:41024x1365
封面16:91920x1080

输出规范

  • ✅ 全中文,无任何英文
  • ✅ 手写字体,清晰可读
  • ✅ 零成本,不消耗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)

© aAAaqwq, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (scripts) in skills/code-material-gen of aAAaqwq/AGI-Super-Team.

  • SKILL.md
  • scripts/generate.py
  • scripts/~/clawd/projects/MediaClaw/output/articles/2026-04-18/ai-quant-real-review/素材/01-三阶段时间线.png
  • scripts/~/clawd/projects/MediaClaw/output/articles/2026-04-18/ai-quant-real-review/素材/02-阶段数据对比.png
  • scripts/~/clawd/projects/MediaClaw/output/articles/2026-04-18/ai-quant-real-review/素材/03-三个真实认知.png
  • scripts/~/clawd/projects/MediaClaw/output/articles/2026-04-18/ai-quant-real-review/素材/04-五个实用建议.png
  • scripts/~/clawd/projects/MediaClaw/output/articles/2026-04-18/ai-quant-real-review/素材/05-风控规则.png
  • scripts/~/clawd/projects/MediaClaw/output/articles/2026-04-18/ai-quant-real-review/素材/06-金句.png

Open the folder on GitHubat commit 331ecd3

Compare with similar skills

Code Material Gen next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Code Material Gen compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Code Material Gen this skillaAAaqwq/AGI-Super-Team105—~554Automated safety check: PassMIT
Web Application Testinganthropics/skills180k51 repos~966Automated safety check: PassApache-2.0
Playwright CLIsanity-io/sanity6.4k18 repos~1.9kAutomated safety check: PassMIT
playwright-cli Browser Automationgithub/gh-aw5.3k23 repos~2.8kAutomated safety check: PassMIT
Write and Verify Playwright Testsappsmithorg/appsmith41k—~2.9kAutomated safety check: NotesApache-2.0
Cucumber and Playwright E2E Testslanggenius/dify158k—~682Automated safety check: PassCustom licence

Similar skills

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed
  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Testing & QAAuto-check passed
  • Official

    Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.

    5.3k GitHub starsUsed in 23 repos~2.8k tokens
    Testing & QAAuto-check passed
  • Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.

    41k GitHub stars~2.9k tokensUpdated today
    Testing & QAAuto-check: notes
  • Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.

    158k GitHub stars~682 tokensUpdated today
    Testing & QAAuto-check passed
  • E2E Testing

    langflow-ai/langflow

    Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.

    156k GitHub stars~3.3k tokensUpdated today
    Testing & QAAuto-check passed

More from aAAaqwq/AGI-Super-Team

All 161 skills in this repo
  • Content Creator

    aAAaqwq/AGI-Super-Team

    Create SEO-optimized marketing content with consistent brand voice.

    105 GitHub starsUsed in 3 repos~1.9k tokens
    Auto-check passed
  • Financial Calculator

    aAAaqwq/AGI-Super-Team

    Advanced financial calculator with future value tables, present value, discount calculations, markup pricing, and compound interest.

    105 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed
  • Performing Security Code Review

    aAAaqwq/AGI-Super-Team

    This skill provides automated assistance for security agent tasks Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    105 GitHub starsUsed in 1 repo~920 tokens
    Auto-check passed
  • Frontend Design Ultimate

    aAAaqwq/AGI-Super-Team

    Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.

    105 GitHub starsUsed in 2 repos~2.7k tokens
    Auto-check passed
  • Sysadmin Toolbox

    aAAaqwq/AGI-Super-Team

    Tool discovery and shell one-liner reference for sysadmin, DevOps, and security tasks.

    105 GitHub starsUsed in 2 repos~775 tokens
    Auto-check passed
  • Zsxq Smart Publish

    aAAaqwq/AGI-Super-Team

    Publish and manage content on 知识星球 (zsxq.com). An agent skill from aAAaqwq/AGI-Super-Team.

    105 GitHub stars~1.5k tokensUpdated 10 days ago
    Auto-check passed

Works with

Categories

Questions about Code Material Gen

What does Code Material Gen do?

代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图. An agent skill from aAAaqwq/AGI-Super-Team. Code Material Gen is an agent skill from aAAaqwq/AGI-Super-Team. 代码生成配图素材。用 HTML/CSS + Playwright 渲染高质量中文配图。 不依赖任何AI图片API,100%代码生成,字体可控、像素精确、零成本。 Trigger: "代码生成素材", "配图生成", "素材生成", "code material", "render material".

When should I use Code Material Gen?

Code Material Gen fits situations like: tasks that involve Browser testing.

How do I install Code Material Gen in Claude Code?

Run `npx skills add aAAaqwq/AGI-Super-Team --skill code-material-gen -a claude-code`. Or copy the skill folder (skills/code-material-gen in aAAaqwq/AGI-Super-Team) into .claude/skills/code-material-gen in your project. Claude Code loads it when a task matches its description.

How do I install Code Material Gen in Codex?

Run `npx skills add aAAaqwq/AGI-Super-Team --skill code-material-gen -a codex`. Or copy the skill folder (skills/code-material-gen in aAAaqwq/AGI-Super-Team) into .agents/skills/code-material-gen in your project. Codex loads it when a task matches its description.

Can I use Code Material Gen in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aAAaqwq/AGI-Super-Team --skill code-material-gen -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code-material-gen, .gemini/skills/code-material-gen, .github/skills/code-material-gen and .opencode/skills/code-material-gen in your project.

What does Code Material Gen need to run?

Going by SKILL.md and its folder, Code Material Gen needs Python for the scripts in its folder and the command-line tools its instructions call (python3 and pip). Our summary lists: Python 3.

Does Code Material Gen access the network?

SKILL.md contains no URLs. Its commands use pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Code Material Gen safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Code Material Gen use?

Code Material Gen is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Code Material Gen use?

About 554 tokens (SKILL.md is roughly 2.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Code Material Gen?

Skills that share tags, products or a category with Code Material Gen: Web Application Testing (anthropics/skills, 180k stars), Playwright CLI (sanity-io/sanity, 6.4k stars), playwright-cli Browser Automation (github/gh-aw, 5.3k stars) and Write and Verify Playwright Tests (appsmithorg/appsmith, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Code Material Gen?

aAAaqwq (a GitHub user) maintains it in aAAaqwq/AGI-Super-Team, which has 105 GitHub stars. The repository holds 161 skills in this directory. The repository was last updated on September 27, 2026.

Source: aAAaqwq/AGI-Super-Team on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.