Guizang Social Cards
op7418/guizang-social-card-skill
Produces social card sets for Xiaohongshu and WeChat: carousels, Live Photo motion cards and puzzle layouts, and WeChat cover pairs, rendered from single-file HTML.
Creates a Xiaohongshu-style 3:4 cover image from a title by building an HTML page in one of six visual styles and capturing it with Playwright.
SKILL.md written in Chinese; this summary is our English description.
$ npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install chenxiachan/xhs-claude-skills xhs-cover --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/chenxiachan/xhs-claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/xhs-cover .claude/skills/xhs-cover && rm -rf skills-srcUse ~/.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/
Install the "xhs-cover" agent skill from https://github.com/chenxiachan/xhs-claude-skills/tree/master/skills/xhs-cover into .claude/skills/xhs-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "xhs-cover", 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 install https://github.com/chenxiachan/xhs-claude-skills/tree/master/skills/xhs-coverType 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.
$ npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install chenxiachan/xhs-claude-skills xhs-cover --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/chenxiachan/xhs-claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/xhs-cover .agents/skills/xhs-cover && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "xhs-cover" agent skill from https://github.com/chenxiachan/xhs-claude-skills/tree/master/skills/xhs-cover into .agents/skills/xhs-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "xhs-cover", 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.
$ npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install chenxiachan/xhs-claude-skills xhs-cover --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/chenxiachan/xhs-claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/xhs-cover .cursor/skills/xhs-cover && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "xhs-cover" agent skill from https://github.com/chenxiachan/xhs-claude-skills/tree/master/skills/xhs-cover into .cursor/skills/xhs-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "xhs-cover", 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 https://github.com/chenxiachan/xhs-claude-skills.git --path skills/xhs-cover--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install chenxiachan/xhs-claude-skills xhs-cover --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/chenxiachan/xhs-claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/xhs-cover .gemini/skills/xhs-cover && rm -rf skills-srcUse ~/.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/
Install the "xhs-cover" agent skill from https://github.com/chenxiachan/xhs-claude-skills/tree/master/skills/xhs-cover into .gemini/skills/xhs-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "xhs-cover", 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.
$ gh skill install chenxiachan/xhs-claude-skills xhs-coverInstalls 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).
$ npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/chenxiachan/xhs-claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/xhs-cover .github/skills/xhs-cover && rm -rf skills-srcUse ~/.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/
Install the "xhs-cover" agent skill from https://github.com/chenxiachan/xhs-claude-skills/tree/master/skills/xhs-cover into .github/skills/xhs-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "xhs-cover", 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.
$ npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install chenxiachan/xhs-claude-skills xhs-cover --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/chenxiachan/xhs-claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/xhs-cover .opencode/skills/xhs-cover && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "xhs-cover" agent skill from https://github.com/chenxiachan/xhs-claude-skills/tree/master/skills/xhs-cover into .opencode/skills/xhs-cover/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "xhs-cover", 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.
xhs-coverCreates a Xiaohongshu-style 3:4 cover image from a title by building an HTML page in one of six visual styles and capturing it with Playwright.
The skill takes a title of up to 30 characters, plus an optional --style flag, and produces a cover image for a Xiaohongshu post. Six styles are defined, each with its own gradient and accent colors and a suggested kind of content: morandi, academic, dark, mint, sunset and bw. If no style is given, the agent picks one from the topic, for example academic for papers and mint for tools.
It writes the copy first: a main title, a subtitle, three short tags, a corner badge and a footer of keywords. It then renders an HTML and CSS page at a 3:4 ratio of 1080 by 1440 pixels, with text filling most of the frame and no more than three colors. A Python Playwright script takes the screenshot, which is saved by default into an Obsidian Vault folder, and the agent shows you the image and asks whether to adjust it.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit e140727. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
BashReadWriteEditFrom allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are html and python).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Xiaohongshu Cover Generator loads about 1.1k tokens when it runs. Until then it costs about 11 tokens; SKILL.md has 103 words of instructions outside code blocks.
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.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: Bash, Read, Write, EditAutomated 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); files beside SKILL.md are not scanned.
The full file from chenxiachan/xhs-claude-skills at commit e140727, republished under its MIT licence (© chenxiachan). 103 words, ~1,068 tokens.
.claude/skills/xhs-cover/SKILL.md (or your agent's skills folder).为用户生成一张小红书风格封面图。
用户提供的内容: $ARGUMENTS
解析输入:
--style 风格名,默认自动选择温柔高级,低饱和度,适合知识分享、方法论、生活方式
背景: linear-gradient(155deg, #f0e6d8, #e8dcd0, #d6cfc8)
主色: #c45c4a(暖红)
副色: #5b5080(灰紫)
辅助: #4a7a6a(灰绿)
文字: #3d3328(深棕)
标签背景: rgba(255,255,255,0.55)冷静专业,适合论文解读、科研分享、技术分析
背景: linear-gradient(155deg, #e4eaf2, #d8e2ee, #cdd8e8)
主色: #2563eb(学术蓝)
副色: #7c3aed(紫)
辅助: #0891b2(青)
文字: #1e293b(深蓝灰)
标签背景: rgba(255,255,255,0.6)硬核科技感,适合 AI/编程/开源项目、技术深度内容
背景: linear-gradient(155deg, #1a1a2e, #16213e, #0f3460)
主色: #a78bfa(亮紫)
副色: #38bdf8(天蓝)
辅助: #34d399(绿)
文字: #f1f5f9(近白)
标签背景: rgba(255,255,255,0.08), border: rgba(255,255,255,0.2)清爽自然,适合工具推荐、效率方法、学习笔记
背景: linear-gradient(155deg, #ecfdf5, #e0f7ed, #d1f0e4)
主色: #059669(翠绿)
副色: #7c3aed(紫)
辅助: #d97706(琥珀)
文字: #1a3a2a(深绿灰)
标签背景: rgba(255,255,255,0.6)温暖有活力,适合个人感悟、项目发布、里程碑分享
背景: linear-gradient(155deg, #fef3e2, #fde8d0, #fcdcc4)
主色: #ea580c(橘红)
副色: #7c3aed(紫)
辅助: #0891b2(青)
文字: #431407(深棕)
标签背景: rgba(255,255,255,0.55)高级克制,适合观点输出、争议话题、深度思考
背景: linear-gradient(155deg, #f5f5f5, #ebebeb, #e0e0e0)
主色: #18181b(纯黑)
副色: #52525b(灰)
辅助: #a1a1aa(浅灰)
文字: #18181b(纯黑)
标签背景: rgba(255,255,255,0.7), border: #d4d4d8从用户输入提取:
--style,使用对应风格写入 /tmp/xhs-cover.html,遵循以下模板结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 1080px; height: 1440px; overflow: hidden;
font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; }
.canvas {
width: 1080px; height: 1440px;
background: {风格背景};
display: flex; flex-direction: column; justify-content: center;
padding: 60px 70px; gap: 36px; position: relative;
}
/* 角标 */
.badge { display: inline-flex; align-items: center; gap: 10px;
background: {主色 alpha 0.12}; border: 1.5px solid {主色 alpha 0.2};
border-radius: 10px; padding: 12px 24px; font-size: 28px;
font-weight: 700; color: {主色}; letter-spacing: 3px; width: fit-content; }
/* 主标题行 */
.title-row { display: flex; align-items: baseline; gap: 20px; white-space: nowrap; }
.title-main { font-size: 120-130px; font-weight: 900; color: {主色}; letter-spacing: -2px; }
.title-secondary { font-size: 110-120px; font-weight: 900; color: {副色}; }
/* 分隔线 */
.divider { width: 80px; height: 5px;
background: linear-gradient(90deg, {主色}, {副色});
border-radius: 3px; margin: 10px 0; }
/* 副标题 */
.tagline { font-size: 76-82px; font-weight: 800; color: {文字色};
letter-spacing: 8px; line-height: 1.4; }
.tagline .accent { color: {主色 或副色 淡化}; }
/* 标签 */
.chip { background: {标签背景}; border-radius: 14px; padding: 18px 32px;
font-size: 34px; font-weight: 700; letter-spacing: 2px; }
/* 底部 */
.footer { font-size: 30px; color: {文字色 淡化}; font-weight: 600; letter-spacing: 2px; }
</style>
</head>
<body>
<!-- 按上面的结构填充内容 -->
</body>
</html>关键设计约束:
用 Playwright 截图保存:
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": 1080, "height": 1440})
page.goto("file:///tmp/xhs-cover.html")
page.wait_for_timeout(500)
page.screenshot(path="<输出路径>", full_page=False)
browser.close()默认保存到 ~/Documents/Obsidian Vault/xhs/img/cover-{简短标识}.png。
用 Read 工具展示生成的图片给用户,询问是否需要调整。
© chenxiachan, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/xhs-cover of chenxiachan/xhs-claude-skills.
Open the folder on GitHubat commit e140727
Xiaohongshu Cover Generator 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Xiaohongshu Cover Generator this skillchenxiachan/xhs-claude-skills | 421 | — | ~1.1k | Automated safety check: Notes | MIT | |
| Guizang Social Cardsop7418/guizang-social-card-skill | 7.4k | 1 repos | ~7.8k | Automated safety check: Pass | AGPL-3.0 | |
| BLCaptain Card Setsdososo/blcaptain-style-skill | 167 | — | ~1.4k | Automated safety check: Pass | Custom licence | |
| Xiaohongshu Multi-Page HTML CardsSpaceZephyr/creator-buddy | 1.6k | — | ~928 | Automated safety check: Pass | None | |
| Cover Anchor Systemponyodong2026/ponyo-cover-anchor-system | 190 | — | ~1.1k | Automated safety check: Pass | None | |
| Xiaohongshu Cover Image GeneratorSpaceZephyr/creator-buddy | 1.6k | — | ~889 | Automated safety check: Pass | None |
op7418/guizang-social-card-skill
Produces social card sets for Xiaohongshu and WeChat: carousels, Live Photo motion cards and puzzle layouts, and WeChat cover pairs, rendered from single-file HTML.
dososo/blcaptain-style-skill
Turns Chinese content into image-text card sets for Xiaohongshu and WeChat covers, with three visual styles rendered from a brief.json the agent writes.
SpaceZephyr/creator-buddy
Turns an article, SOP, or tutorial into a self-contained, multi-page 3:4 HTML deck of image cards meant to be screenshotted page by page.
ponyodong2026/ponyo-cover-anchor-system
Designs Xiaohongshu and WeChat article covers around information density and a visual anchor, then writes a complete image prompt, color plan and critique.
SpaceZephyr/creator-buddy
Generates a 3:4 Xiaohongshu post cover from a topic, title and optional portrait or product photo, choosing a layout and color style and keeping the subject's likeness intact.
chubbyguan/chubbyskills
小红书笔记采集 → 统一 frontmatter Markdown → 爆款拆解 + 衍生选题. An agent skill from chubbyguan/chubbyskills.
chenxiachan/xhs-claude-skills
Pulls a Xiaohongshu post's text, image text and video subtitles or transcript into a Markdown note saved in an Obsidian folder, in Chinese.
chenxiachan/xhs-claude-skills
分析已提取的小红书收藏内容,做 AI 总结、对比、提炼
chenxiachan/xhs-claude-skills
批量提取小红书帖子,整理为本地 Markdown 知识库
Works with
Categories
Creates a Xiaohongshu-style 3:4 cover image from a title by building an HTML page in one of six visual styles and capturing it with Playwright. The skill takes a title of up to 30 characters, plus an optional --style flag, and produces a cover image for a Xiaohongshu post. Six styles are defined, each with its own gradient and accent colors and a suggested kind of content: morandi, academic, dark, mint, sunset and bw.
Xiaohongshu Cover Generator fits situations like: making a cover image for a Xiaohongshu note or post; turning a paper summary or tool recommendation into a styled cover; trying the same title in a different visual style.
Run `npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a claude-code`. Or copy the skill folder (skills/xhs-cover in chenxiachan/xhs-claude-skills) into .claude/skills/xhs-cover in your project. Claude Code loads it when a task matches its description.
Run `npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a codex`. Or copy the skill folder (skills/xhs-cover in chenxiachan/xhs-claude-skills) into .agents/skills/xhs-cover in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/xhs-cover, .gemini/skills/xhs-cover, .github/skills/xhs-cover and .opencode/skills/xhs-cover in your project.
SKILL.md names no scripts, command-line tools or credentials: Xiaohongshu Cover Generator is instructions for the agent only. Our summary lists: Python with Playwright and a Chromium browser; Write access to the default Obsidian Vault output folder, or another folder you choose. Its frontmatter pre-approves these tools: Bash, Read, Write, Edit.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
Xiaohongshu Cover Generator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Xiaohongshu Cover Generator: Guizang Social Cards (op7418/guizang-social-card-skill, 7.4k stars), BLCaptain Card Sets (dososo/blcaptain-style-skill, 167 stars), Xiaohongshu Multi-Page HTML Cards (SpaceZephyr/creator-buddy, 1.6k stars) and Cover Anchor System (ponyodong2026/ponyo-cover-anchor-system, 190 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
chenxiachan (a GitHub user) maintains it in chenxiachan/xhs-claude-skills, which has 421 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on August 14, 2026.
Source: chenxiachan/xhs-claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.