Agent skill

Huashu Wechat Image

by alchaincyf in alchaincyf/huashu-skills

为微信公众号文章生成高质量配图。支持封面图（2.35:1）、正文插图（16:9/4:3）、信息图。提供两条路径：AI生成（视觉创意型）和HTML渲染（文字精确型）。当用户提到"公众号配图"、"公众号封面"、"文章配图"、"正文插图"、"公众号图片"时使用此技能。

MITAuto-check: notesProductivity & Automation

Install Huashu Wechat Image

skills CLI

$ npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a claude-code

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

GitHub CLI

$ gh skill install alchaincyf/huashu-skills huashu-wechat-image --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/alchaincyf/huashu-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/huashu-wechat-image .claude/skills/huashu-wechat-image && 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/

Paste into Claude Code

Install the "huashu-wechat-image" agent skill from https://github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-image into .claude/skills/huashu-wechat-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "huashu-wechat-image", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-image

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install alchaincyf/huashu-skills huashu-wechat-image --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/alchaincyf/huashu-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/huashu-wechat-image .agents/skills/huashu-wechat-image && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "huashu-wechat-image" agent skill from https://github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-image into .agents/skills/huashu-wechat-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "huashu-wechat-image", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install alchaincyf/huashu-skills huashu-wechat-image --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/alchaincyf/huashu-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/huashu-wechat-image .cursor/skills/huashu-wechat-image && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "huashu-wechat-image" agent skill from https://github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-image into .cursor/skills/huashu-wechat-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "huashu-wechat-image", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/alchaincyf/huashu-skills.git --path huashu-wechat-image

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install alchaincyf/huashu-skills huashu-wechat-image --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/alchaincyf/huashu-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/huashu-wechat-image .gemini/skills/huashu-wechat-image && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "huashu-wechat-image" agent skill from https://github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-image into .gemini/skills/huashu-wechat-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "huashu-wechat-image", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install alchaincyf/huashu-skills huashu-wechat-image

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/alchaincyf/huashu-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/huashu-wechat-image .github/skills/huashu-wechat-image && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "huashu-wechat-image" agent skill from https://github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-image into .github/skills/huashu-wechat-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "huashu-wechat-image", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install alchaincyf/huashu-skills huashu-wechat-image --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/alchaincyf/huashu-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/huashu-wechat-image .opencode/skills/huashu-wechat-image && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "huashu-wechat-image" agent skill from https://github.com/alchaincyf/huashu-skills/tree/master/huashu-wechat-image into .opencode/skills/huashu-wechat-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "huashu-wechat-image", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: huashu-wechat-image
GitHub stars: 1.7k
Token cost: ~2.4k tokens
SKILL.md length: 537 words
Files: 4 (incl. scripts, references)
Skills in repo: 21
Repo updated: Sep 22, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Works in 5 steps: 确定配图需求 ✅ 用户确认 → 风格选择 ✅ 用户确认 → 选择生成路径 ✅ 用户确认 → …
Tasks that involve Messaging and chat bots
SKILL.md covers ⚠️ 核心原则：先提案，后生成, 核心参数, Step 0: 确定配图需求 ✅ 用户确认 and Step 1: 风格选择 ✅ 用户确认, plus 6 more sections
Runs Python scripts from its folder; calls npx, uv and python3; needs GEMINI_API_KEY

What it does

Huashu Wechat Image is an agent skill from alchaincyf/huashu-skills. 为微信公众号文章生成高质量配图。支持封面图（2.35:1）、正文插图（16:9/4:3）、信息图。提供两条路径：AI生成（视觉创意型）和HTML渲染（文字精确型）。当用户提到"公众号配图"、"公众号封面"、"文章配图"、"正文插图"、"公众号图片"时使用此技能。

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including scripts and reference files (for example `references/design-guidelines.md`, `references/style-gallery.md` and `scripts/generate_image.py`).

It sits in Productivity & Automation, covering Messaging and chat bots. It works with WeChat. The repository describes itself as: 花叔全部开源 Agent Skills 总目录：16 旗舰 + 14 人物视角 + 22 内置共 52 个 skill，分层分类 + AI Agent 安装协议 + 机器可读 skills.json + 更新检查机制. The licence is MIT.

When your agent uses it

Tasks that involve Messaging and chat bots

Example prompts

“/huashu-wechat-image”

Requirements

Python 3
Node.js
A credential in GEMINI_API_KEY

Workflow steps

5 steps, taken from the step headings in SKILL.md.

确定配图需求 ✅ 用户确认
风格选择 ✅ 用户确认
选择生成路径 ✅ 用户确认
生成图片
上传图床

What it can do on your machine

Read from SKILL.md and the folder at commit 2efea35. 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 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
- npx
- uv
- python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx and uv, 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 these keys or tokens, usually read from environment variables:
- GEMINI_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Huashu Wechat Image loads about 2.4k tokens when it runs, and up to ~6.3k if it reads all its reference files. Until then it costs about 38 tokens; SKILL.md has 537 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~38
When it runs · the whole SKILL.md, loaded when a task matches: ~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~6.3k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

NoteMentions a .env fileSKILL.md:289

export $(grep GEMINI_API_KEY ~/.claude/.env) && \

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 alchaincyf/huashu-skills at commit 2efea35, republished under its MIT licence (© alchaincyf). 537 words, ~2,390 tokens.

Download SKILL.mdSave it as .claude/skills/huashu-wechat-image/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.

name: huashu-wechat-image
description: 为微信公众号文章生成高质量配图。支持封面图（2.35:1）、正文插图（16:9/4:3）、信息图。提供两条路径：AI生成（视觉创意型）和HTML渲染（文字精确型）。当用户提到"公众号配图"、"公众号封面"、"文章配图"、"正文插图"、"公众号图片"时使用此技能。

公众号配图工作流

⚠️ 核心原则：先提案，后生成

绝对不能跳过设计提案直接出图。 正确流程：

理解内容 → 设计提案（2-3个方向）→ 用户选择 → 生成 → 预览确认 → 上传

设计审美画像和提案格式见姊妹skill xhs-image/SKILL.md，公众号配图同样适用。

核心参数

图片类型	尺寸	比例	Playwright viewport	AI Prompt 长宽比声明
头条封面	1800 x 766 px	2.35:1	`--viewport-size=1800,766`	`2.35:1 ultra-wide landscape, 1800x766 pixels`
正文宽图	1920 x 1080 px	16:9	`--viewport-size=1920,1080`	`16:9 landscape, 1920x1080 pixels`
正文方图	1440 x 1080 px	4:3	`--viewport-size=1440,1080`	`4:3 landscape, 1440x1080 pixels`
信息图	1080 x 自由	自由	`--viewport-size=1080,N`	按内容定

Step 0: 确定配图需求 ✅ 用户确认

向用户展示选项，等待确认：

类型	说明	图片数量	推荐路径
A. 仅封面	头条封面图	1张	AI 生成
B. 正文配图	章节配图，辅助阅读理解	3-8张	AI 生成为主
C. 全套配图	封面 + 正文全部	4-10张	AI 生成为主
D. 纯信息图	数据对比、流程图、清单	1-5张	AI 生成（精确数据表格用HTML兜底）

问用户：

做封面、正文插图、还是全套？
文章路径/内容是什么？（分析内容确定配图位置）
总共需要几张图？

配图数量建议

文章长度	推荐配图数	包含
< 1500字	2-3张	封面 + 1-2张正文
1500-3000字	4-6张	封面 + 每个核心章节1张
3000-5000字	6-8张	封面 + 章节图 + 信息图
> 5000字	8-10张	不超过10张，避免过度打断

Step 1: 风格选择 ✅ 用户确认

根据用户的文章类型，推荐 3 种风格供选择。

按文章类型自动推荐

文章类型	第一推荐	第二推荐	第三推荐
AI工具评测	极简专业	编辑杂志	数据信息图
技术教程	极简专业	手绘白板	编辑杂志
产品发布	编辑杂志	大字报	极简专业
深度分析	编辑杂志	数据信息图	极简专业
个人故事	Snoopy温暖漫画	温暖叙事	编辑杂志
行业观察	大字报	编辑杂志	数据信息图

向用户展示 3 个推荐风格，每个包含：

风格名 + 一句话描述
适用场景
色彩倾向

问用户：选哪个风格？或者你有自己想要的参考？

完整风格库： references/style-gallery.md

Step 2: 选择生成路径 ✅ 用户确认

根据内容特征推荐路径，向用户展示对比：

	Path A: HTML → 截图	Path B: AI 生成
文字准确度	100%（代码控制）	中文可能出错（需验证）
布局控制	像素级精确	AI 自由发挥
视觉创意	中（靠设计能力）	高（AI 有创造力）
API 成本	零（纯本地）	每张消耗 Gemini API
速度	快（几秒）	慢（10-30秒/张）
适合	文字多、数据多、清单、信息图	封面、氛围图、创意插画
可编辑性	改 HTML 重新截图即可	需要重新生成
深色模式	CSS 直接控制配色	需在 prompt 中声明

⚠️ 花叔偏好：AI生成优先

HTML截图效果太平面、像PPT模板，缺少质感和设计感。AI生成的图片有丰富的视觉细节，品质远胜HTML。 默认走AI生成路径，只有「必须逐字精确的复杂数据表格」才用HTML兜底。

路径推荐规则

图片类型	推荐路径	理由
头条封面	AI	视觉冲击力强，质感好
正文氛围/场景图	AI	创意性强
正文信息图	AI	AI能做出设计感的信息图
流程图/步骤图	AI	AI能加入视觉层次
对比图	AI	视觉品质更高
精确数据表格（10+单元格）	HTML	唯一需要HTML的场景：大量精确数字

默认推荐AI路径，不再逐次询问路径选择。

Step 3: 生成图片

Path A: HTML → Playwright 截图

3-A-1. 创建 HTML

根据选定风格和用户提供的内容，生成 HTML 文件。

HTML 模板要求：

画布尺寸：根据图片类型选择（封面 1800x766，正文宽图 1920x1080，正文方图 1440x1080）
字体：font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
深色模式友好：用 #F5F5F5 代替纯白，用 #1A1A2E 代替纯黑
封面安全区：核心信息集中在中央正方形区域（766x766）

封面大字报模板示例（2.35:1）：

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1800px; height: 766px;
    background: #1A1A2E;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 60px 400px; /* 左右大padding确保内容在安全区 */
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  }
  .title {
    font-size: 96px; font-weight: 900;
    color: #FFFFFF; text-align: center;
    line-height: 1.3; letter-spacing: 4px;
  }
  .subtitle {
    font-size: 36px; font-weight: 400;
    color: #E2B714; text-align: center;
    margin-top: 30px;
  }
  .accent-line {
    width: 200px; height: 4px;
    background: #E2B714;
    margin: 30px auto;
  }
</style>
</head>
<body>
  <div class="title">Claude vs Codex</div>
  <div class="accent-line"></div>
  <div class="subtitle">重度用户的20分钟实战对比</div>
</body>
</html>

正文信息图模板示例（4:3）：

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1440px; height: 1080px;
    background: #F5F5F5;
    padding: 60px 80px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  }
  .heading {
    font-size: 56px; font-weight: 800;
    color: #1A1A1A; margin-bottom: 40px;
    line-height: 1.3;
  }
  .item {
    display: flex; align-items: flex-start;
    margin-bottom: 28px; gap: 20px;
  }
  .num {
    font-size: 40px; font-weight: 900;
    color: #4A90D9; min-width: 50px;
  }
  .text {
    font-size: 32px; color: #333;
    line-height: 1.5;
  }
  .highlight { color: #FF6B35; font-weight: 700; }
</style>
</head>
<body>
  <div class="heading">Claude Code 五大优势</div>
  <div class="item"><span class="num">01</span><span class="text"><span class="highlight">Agent模式</span>自主规划执行复杂任务</span></div>
  <div class="item"><span class="num">02</span><span class="text">原生<span class="highlight">终端集成</span>直接操作文件系统</span></div>
  <div class="item"><span class="num">03</span><span class="text"><span class="highlight">多文件编辑</span>一次修改整个项目</span></div>
</body>
</html>

3-A-2. 截图

bash

npx playwright screenshot "file:///path/to/card.html" output.png \
  --viewport-size=[宽],[高] --wait-for-timeout=1000

封面：--viewport-size=1800,766
正文宽图：--viewport-size=1920,1080
正文方图：--viewport-size=1440,1080

3-A-3. ✅ 预览确认

用 Read 工具向用户展示截图结果。

问用户：

文字内容对吗？
布局和配色满意吗？
封面的核心信息在安全区内吗？（封面图特有）
需要调整什么？

如需调整：修改 HTML → 重新截图 → 再次确认。（HTML 路径迭代成本极低）

Path B: AI 生成（Gemini 3 Pro Image）

3-B-1. 构建 Prompt

封面 Base Style Prompt：

[Base Style]:
VISUAL REFERENCE: [一句话描述具体风格美学]
CANVAS: 2.35:1 ultra-wide landscape, 1800x766 pixels, high quality rendering.
SAFE ZONE: Center square (766x766) contains all key text and visuals.
COLOR SYSTEM: [描述色彩情绪，不指定比例]
TEXT RENDERING: Chinese text must be large, clear, readable. Title in center safe zone.

正文 Base Style Prompt：

[Base Style]:
VISUAL REFERENCE: [一句话描述具体风格美学]
CANVAS: [16:9 landscape, 1920x1080 pixels / 4:3 landscape, 1440x1080 pixels], high quality rendering.
COLOR SYSTEM: [描述色彩情绪]
DARK MODE: Use medium-tone backgrounds, avoid pure white (#FFFFFF) and pure black (#000000).

Per-Image Prompt：

Create a [style] [cover/illustration] for a WeChat article about [topic].

[Base Style]

DESIGN INTENT: [用户看到后应该产生什么情绪/行为]

TEXT TO RENDER:
- Title: "[标题，封面≤10字，正文可少或无]"
- [其他文字]

[1-2句画面情绪描述，让 AI 自由发挥构图]

3-B-2. ✅ Prompt 确认

向用户展示即将使用的 prompt，等待确认或修改。特别确认：

要渲染的文字内容是否正确
设计意图是否准确
是否有其他要求

Show full SKILL.md (216 more words)Show less

3-B-3. 生成

bash

export $(grep GEMINI_API_KEY ~/.claude/.env) && \
uv run /Users/alchain/Documents/写作/.claude/skills/wechat-image/scripts/generate_image.py \
  --prompt "[完整prompt]" \
  --filename "[timestamp]-wechat-[类型]-[描述].png" \
  --aspect [cover|wide|standard|square]

--aspect cover → 2.35:1 头条封面
--aspect wide → 16:9 正文宽图（默认）
--aspect standard → 4:3 正文方图
--aspect square → 1:1 方图

多张图可并行生成（run_in_background=true）。

3-B-4. ✅ 预览确认

用 Read 工具向用户展示生成结果。

检查项：

文字准确吗？（中文无乱码/错字）
比例正确吗？（封面 2.35:1、正文 16:9 或 4:3）
封面安全区：核心信息在中央正方形内？（封面特有）
深色模式：是否避免了纯白底和纯黑底？
风格满意吗？

问用户：满意 / 重新生成 / 调整 prompt？

Path C: 混合路径（全套配图推荐）

适用于全套配图：封面用 AI 生成（抓眼球），正文信息图用 HTML 渲染（信息精确），正文氛围图用 AI 生成。

执行顺序：

先按 Path B 生成封面 → 用户确认
从封面的配色/氛围提取一致的风格
正文氛围图用 Path B → 用户确认
正文信息图/数据图用 Path A → 用户确认

Step 4: 上传图床

bash

python3 /Users/alchain/Documents/写作/tools/upload_image.py "[图片路径]"

返回 ImgBB 永久链接。公众号文章必须使用网络链接，本地路径在发布后失效。

快速参考

封面安全区域

┌─────────────────────────────────────┐
│         │ 766x766  │               │
│  装饰区  │ 安全区域  │  装饰区       │ 1800 x 766
│         │ （核心）  │               │
└─────────────────────────────────────┘
           ↑ 朋友圈裁切区域 ↑

深色模式适配要点

底色用 #F5F5F5（浅灰）代替纯白
底色用 #1A1A2E（暗紫灰）代替纯黑
正文字色用 #595959 或 #3F3F3F，不用纯黑 #000000
避免阴影效果、白色边框
使用低饱和度配色

中文文字渲染（AI 路径特有）

封面标题 ≤ 10 字
正文图上文字 ≤ 20 字/行
信息图文字用 HTML 渲染更可靠
必须逐张验证

字体推荐（HTML 路径特有）

标题："PingFang SC" Bold / "Microsoft YaHei" Bold
正文："PingFang SC" Regular
商用安全替代：阿里巴巴普惠体、思源黑体

花叔科技账号配色

方案名	底色	主色	强调色	适用	深色模式
暖灰专业	#F5F0EB	#D97706	#4A90D9	AI工具、分享	好
极简专业	#F5F5F5	#4A90D9	#FF6B35	教程、对比	中
暗夜金	#1A1A2E	#E2B714	#FFFFFF	产品发布	好
终端绿	#1A1A1A	#00FF41	#888888	编程相关	好

Golden Rules

封面核心信息放在中央正方形安全区
正文图用中间色调背景（适配深色模式）
信息图优先 HTML → 截图（文字精确）
氛围图优先 AI 生成（创意性强）
图片上传到图床获取永久链接
同一文章插图风格统一
每 800-1200 字配一张图
每个 H2 章节至少一张

配图位置策略

位置	必要性	类型
标题下方（封面）	必须	封面图 / 氛围图
每个 H2 标题后	推荐	章节插图
数据/对比处	推荐	信息图
产品/工具介绍处	可选	截图 / AI 概念图
文末总结前	可选	收尾插图

决策流程图

用户需求 → Step 0 确定需求
                ↓
         Step 1 选风格（展示3个选项）
                ↓
         Step 2 默认AI生成（仅精确数据表格走HTML）
                ↓
         Step 3 生成 → 预览 → 用户确认
           ├→ 满意 → Step 4 上传
           ├→ 文字渲染有误 → 该张改用HTML兜底
           └→ 不满意 → 调整prompt重新生成

Skill	作用
`xhs-image`	小红书配图（姊妹 skill）
`image-to-slides`	PPT 配图（风格库来源）

参考文件

references/style-gallery.md — 完整风格库与 prompt 模板
references/design-guidelines.md — 公众号平台设计规范

花叔出品 | AI Native Coder · 独立开发者公众号「花叔」| 30万+粉丝 | AI工具与效率提升代表作：小猫补光灯（AppStore付费榜Top1）·《一本书玩转DeepSeek》

Files

SKILL.md and 3 other files (scripts, references) in huashu-wechat-image of alchaincyf/huashu-skills.

SKILL.md
references/design-guidelines.md
references/style-gallery.md
scripts/generate_image.py

Open the folder on GitHubat commit 2efea35

Compare with similar skills

Huashu Wechat Image 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.

Huashu Wechat Image compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Huashu Wechat Image this skillalchaincyf/huashu-skills	1.7k	—	~2.4k	Automated safety check: Notes	MIT	18 days ago
Wechat Article Browserusedracohu2025-cloud/draco-skills-collection	227	—	~513	Automated safety check: Pass	MIT	23 days ago
Scrapling Skilldaymade/claude-code-skills	1.4k	—	~1.4k	Automated safety check: Warn	MIT	yesterday
She Love Me863401402/she-love-me	931	1 repos	~1.3k	Automated safety check: Pass	MIT	9 days ago
Claude To Imop7418/Claude-to-IM-skill	2.9k	—	~3.4k	Automated safety check: Notes	MIT	6 mo ago
Yichen Mac Wechat Dual Openmcncarl/yichen-skills	4.4k	—	~1.5k	Automated safety check: Pass	Custom licence	7 days ago

Similar skills

Wechat Article Browseruse
dracohu2025-cloud/draco-skills-collection
使用 BrowserUse 云浏览器 + Playwright CDP 抓取微信公众号文章，并可直接发布到飞书原生文档。
227 GitHub stars~513 tokensUpdated 23 days ago
Productivity & AutomationAuto-check passed
Scrapling Skill
daymade/claude-code-skills
Install, troubleshoot, and use Scrapling CLI to extract HTML, Markdown, or text from webpages.
1.4k GitHub stars~1.4k tokensUpdated yesterday
Productivity & AutomationAuto-check: warnings
She Love Me
863401402/she-love-me
Acquire, import, and analyze WeChat or QQ chat histories, including installing supported exporters, guiding required login or contact selection, converting exports, assessing relationship dynamics…
931 GitHub starsUsed in 1 repo~1.3k tokens
Productivity & AutomationAuto-check passed
Claude To Im
op7418/Claude-to-IM-skill
Bridge THIS Claude Code or Codex session to Telegram, Discord, Feishu/Lark, QQ, or WeChat so the user can chat with Claude from their phone.
2.9k GitHub stars~3.4k tokensUpdated 6 mo ago
Productivity & AutomationAuto-check: notes
Yichen Mac Wechat Dual Open
mcncarl/yichen-skills
Create, inspect, repair, and polish a second WeChat app on macOS by copying WeChat, changing the bundle identifier, ad-hoc re-signing, preparing it for the user to open manually, setting Chinese…
4.4k GitHub stars~1.5k tokensUpdated 7 days ago
Productivity & AutomationAuto-check passed
Create Ex
perkfly/ex-skill
Distill an ex-girlfriend into an AI Skill. An agent skill from perkfly/ex-skill.
2.5k GitHub stars~3.7k tokensUpdated 6 mo ago
Productivity & AutomationAuto-check: notes

Questions about Huashu Wechat Image

What does Huashu Wechat Image do?

为微信公众号文章生成高质量配图。支持封面图（2.35:1）、正文插图（16:9/4:3）、信息图。提供两条路径：AI生成（视觉创意型）和HTML渲染（文字精确型）。当用户提到"公众号配图"、"公众号封面"、"文章配图"、"正文插图"、"公众号图片"时使用此技能。. Huashu Wechat Image is an agent skill from alchaincyf/huashu-skills.

When should I use Huashu Wechat Image?

Huashu Wechat Image fits situations like: tasks that involve Messaging and chat bots.

How do I install Huashu Wechat Image in Claude Code?

Run `npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a claude-code`. Or copy the skill folder (huashu-wechat-image in alchaincyf/huashu-skills) into .claude/skills/huashu-wechat-image in your project. Claude Code loads it when a task matches its description.

How do I install Huashu Wechat Image in Codex?

Run `npx skills add alchaincyf/huashu-skills --skill huashu-wechat-image -a codex`. Or copy the skill folder (huashu-wechat-image in alchaincyf/huashu-skills) into .agents/skills/huashu-wechat-image in your project. Codex loads it when a task matches its description.

Can I use Huashu Wechat Image 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 alchaincyf/huashu-skills --skill huashu-wechat-image -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/huashu-wechat-image, .gemini/skills/huashu-wechat-image, .github/skills/huashu-wechat-image and .opencode/skills/huashu-wechat-image in your project.

What does Huashu Wechat Image need to run?

Going by SKILL.md and its folder, Huashu Wechat Image needs Python for the scripts in its folder, the command-line tools its instructions call (npx, uv and python3) and credentials named GEMINI_API_KEY. Our summary lists: Python 3; Node.js; A credential in GEMINI_API_KEY.

Does Huashu Wechat Image access the network?

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

Is Huashu Wechat Image safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. 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 Huashu Wechat Image use?

Huashu Wechat Image 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 Huashu Wechat Image use?

About 2.4k tokens (SKILL.md is roughly 9.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.9k tokens, read only when the agent opens those files.

What are the alternatives to Huashu Wechat Image?

Skills that share tags, products or a category with Huashu Wechat Image: Wechat Article Browseruse (dracohu2025-cloud/draco-skills-collection, 227 stars), Scrapling Skill (daymade/claude-code-skills, 1.4k stars), She Love Me (863401402/she-love-me, 931 stars) and Claude To Im (op7418/Claude-to-IM-skill, 2.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Huashu Wechat Image?

alchaincyf (a GitHub user) maintains it in alchaincyf/huashu-skills, which has 1,695 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on September 22, 2026.

Source: alchaincyf/huashu-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Huashu Wechat Image

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

公众号配图工作流

⚠️ 核心原则：先提案，后生成

核心参数

Step 0: 确定配图需求 ✅ 用户确认

配图数量建议

Step 1: 风格选择 ✅ 用户确认

按文章类型自动推荐

Step 2: 选择生成路径 ✅ 用户确认

⚠️ 花叔偏好：AI生成优先

路径推荐规则

Step 3: 生成图片

Path A: HTML → Playwright 截图

3-A-1. 创建 HTML

3-A-2. 截图

3-A-3. ✅ 预览确认

Path B: AI 生成（Gemini 3 Pro Image）

3-B-1. 构建 Prompt

3-B-2. ✅ Prompt 确认

3-B-3. 生成

3-B-4. ✅ 预览确认

Path C: 混合路径（全套配图推荐）

Step 4: 上传图床

快速参考

封面安全区域

深色模式适配要点

中文文字渲染（AI 路径特有）

字体推荐（HTML 路径特有）

花叔科技账号配色

Golden Rules

配图位置策略

决策流程图

相关 Skills

参考文件

Files

Compare with similar skills

Similar skills

More from alchaincyf/huashu-skills

Related

Questions about Huashu Wechat Image