Agent skill

Xiaohongshu Cover Generator

by chenxiachan in chenxiachan/xhs-claude-skills

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.

MITAuto-check: notesMedia & Creative

SKILL.md written in Chinese; this summary is our English description.

Install Xiaohongshu Cover Generator

skills CLI
$ npx skills add chenxiachan/xhs-claude-skills --skill xhs-cover -a claude-code

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

GitHub CLI
$ gh skill install chenxiachan/xhs-claude-skills xhs-cover --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/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-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
xhs-cover
GitHub stars
421
Token cost
~1.1k tokens
SKILL.md length
103 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 6 steps: morandi(莫兰迪) → academic(学术蓝) → dark(暗夜科技) → …
  • Making a cover image for a Xiaohongshu note or post
  • SKILL.md covers 输入, 可用风格 and 生成流程
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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.

When your agent uses it

  • 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

Example prompts

  • “Make a Xiaohongshu cover for my post about five free note-taking tools, mint style.”
  • “Generate a dark-style cover titled Open source LLM tools worth trying.”
  • “Create a cover for my paper walkthrough and let the style be chosen automatically.”

Requirements

  • Python with Playwright and a Chromium browser
  • Write access to the default Obsidian Vault output folder, or another folder you choose
  • Pre-approved tools (allowed-tools): Bash, Read, Write, Edit

Workflow steps

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

  1. morandi(莫兰迪)
  2. academic(学术蓝)
  3. dark(暗夜科技)
  4. mint(薄荷清新)
  5. sunset(日落暖橘)
  6. bw(极简黑白)

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Write
    • Edit

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    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.

  • Network

    No URLs in SKILL.md.

    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

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.

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

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.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Write, Edit

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from chenxiachan/xhs-claude-skills at commit e140727, republished under its MIT licence (© chenxiachan). 103 words, ~1,068 tokens.

Download SKILL.mdSave it as .claude/skills/xhs-cover/SKILL.md (or your agent's skills folder).
name
xhs-cover
description
生成小红书封面图(HTML+CSS → Playwright 截图)
allowed-tools
Bash, Read, Write, Edit
user-invocable
true
argument-hint
<标题文案> [--style 风格名]

为用户生成一张小红书风格封面图。

输入

用户提供的内容: $ARGUMENTS

解析输入:

  • 标题文案(必须):从输入中提取核心文案,不超过 30 字
  • 风格(可选):--style 风格名,默认自动选择

可用风格

1. morandi(莫兰迪)

温柔高级,低饱和度,适合知识分享、方法论、生活方式

背景: linear-gradient(155deg, #f0e6d8, #e8dcd0, #d6cfc8)
主色: #c45c4a(暖红)
副色: #5b5080(灰紫)
辅助: #4a7a6a(灰绿)
文字: #3d3328(深棕)
标签背景: rgba(255,255,255,0.55)
2. academic(学术蓝)

冷静专业,适合论文解读、科研分享、技术分析

背景: linear-gradient(155deg, #e4eaf2, #d8e2ee, #cdd8e8)
主色: #2563eb(学术蓝)
副色: #7c3aed(紫)
辅助: #0891b2(青)
文字: #1e293b(深蓝灰)
标签背景: rgba(255,255,255,0.6)
3. dark(暗夜科技)

硬核科技感,适合 AI/编程/开源项目、技术深度内容

背景: linear-gradient(155deg, #1a1a2e, #16213e, #0f3460)
主色: #a78bfa(亮紫)
副色: #38bdf8(天蓝)
辅助: #34d399(绿)
文字: #f1f5f9(近白)
标签背景: rgba(255,255,255,0.08), border: rgba(255,255,255,0.2)
4. mint(薄荷清新)

清爽自然,适合工具推荐、效率方法、学习笔记

背景: linear-gradient(155deg, #ecfdf5, #e0f7ed, #d1f0e4)
主色: #059669(翠绿)
副色: #7c3aed(紫)
辅助: #d97706(琥珀)
文字: #1a3a2a(深绿灰)
标签背景: rgba(255,255,255,0.6)
5. sunset(日落暖橘)

温暖有活力,适合个人感悟、项目发布、里程碑分享

背景: linear-gradient(155deg, #fef3e2, #fde8d0, #fcdcc4)
主色: #ea580c(橘红)
副色: #7c3aed(紫)
辅助: #0891b2(青)
文字: #431407(深棕)
标签背景: rgba(255,255,255,0.55)
6. bw(极简黑白)

高级克制,适合观点输出、争议话题、深度思考

背景: linear-gradient(155deg, #f5f5f5, #ebebeb, #e0e0e0)
主色: #18181b(纯黑)
副色: #52525b(灰)
辅助: #a1a1aa(浅灰)
文字: #18181b(纯黑)
标签背景: rgba(255,255,255,0.7), border: #d4d4d8

生成流程

步骤 1:设计文案

从用户输入提取:

  • 主标题(最大字,1 行,核心概念/产品名/关键词)
  • 副标题(次大字,1-2 行,核心洞察或 tagline)
  • 标签(3 个功能/关键词标签,每个 2-4 字)
  • 角标(左上小字,身份标签如 OPEN SOURCE / 论文解读 / 工具推荐)
  • 底部(小字,3 个关键词用 · 分隔)
步骤 2:选择风格
  • 如果用户指定了 --style,使用对应风格
  • 否则根据内容自动选择:
    • 论文/科研 → academic
    • AI/编程/开源 → dark 或 morandi
    • 工具/效率 → mint
    • 个人感悟/发布 → sunset
    • 观点/思考 → bw
步骤 3:生成 HTML

写入 /tmp/xhs-cover.html,遵循以下模板结构:

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>

关键设计约束:

  • 3:4 比例(1080×1440px)
  • 文字占画面 70% 以上
  • 主标题尽量一行放下(必要时缩小字号或拆行)
  • 2-3 级文字层级:主标题 > 副标题 > 标签/底部
  • 所有中文用 font-weight: 700-900
  • 颜色最多用 3 种(主+副+辅助),不杂乱
步骤 4:截图

用 Playwright 截图保存:

python
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。

步骤 5:展示

用 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

Files

Just SKILL.md in skills/xhs-cover of chenxiachan/xhs-claude-skills.

Open the folder on GitHubat commit e140727

Compare with similar skills

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.

Xiaohongshu Cover Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Xiaohongshu Cover Generator this skillchenxiachan/xhs-claude-skills421—~1.1kAutomated safety check: NotesMIT
Guizang Social Cardsop7418/guizang-social-card-skill7.4k1 repos~7.8kAutomated safety check: PassAGPL-3.0
BLCaptain Card Setsdososo/blcaptain-style-skill167—~1.4kAutomated safety check: PassCustom licence
Xiaohongshu Multi-Page HTML CardsSpaceZephyr/creator-buddy1.6k—~928Automated safety check: PassNone
Cover Anchor Systemponyodong2026/ponyo-cover-anchor-system190—~1.1kAutomated safety check: PassNone
Xiaohongshu Cover Image GeneratorSpaceZephyr/creator-buddy1.6k—~889Automated safety check: PassNone

Similar skills

  • 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.

    7.4k GitHub starsUsed in 1 repo~7.8k tokens
    Media & CreativeAuto-check passed
  • BLCaptain Card Sets

    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.

    167 GitHub stars~1.4k tokensUpdated 3 mo ago
    Media & CreativeAuto-check passed
  • Xiaohongshu Multi-Page HTML Cards

    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.

    1.6k GitHub stars~928 tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • Cover Anchor System

    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.

    190 GitHub stars~1.1k tokensUpdated 3 mo ago
    Media & CreativeAuto-check passed
  • Xiaohongshu Cover Image Generator

    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.

    1.6k GitHub stars~889 tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • Xiaohongshu Ingest

    chubbyguan/chubbyskills

    小红书笔记采集 → 统一 frontmatter Markdown → 爆款拆解 + 衍生选题. An agent skill from chubbyguan/chubbyskills.

    1.2k GitHub stars~613 tokensUpdated 3 days ago
    Media & CreativeAuto-check: notes

More from chenxiachan/xhs-claude-skills

  • Xiaohongshu Post Extractor

    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.

    421 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check: warnings
  • Xhs Analyze

    chenxiachan/xhs-claude-skills

    分析已提取的小红书收藏内容,做 AI 总结、对比、提炼

    421 GitHub stars~153 tokensUpdated 1 mo ago
    Auto-check: notes
  • Xhs Batch

    chenxiachan/xhs-claude-skills

    批量提取小红书帖子,整理为本地 Markdown 知识库

    421 GitHub stars~187 tokensUpdated 1 mo ago
    Auto-check: notes

Questions about Xiaohongshu Cover Generator

What does Xiaohongshu Cover Generator do?

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.

When should I use Xiaohongshu Cover Generator?

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.

How do I install Xiaohongshu Cover Generator in Claude Code?

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.

How do I install Xiaohongshu Cover Generator in Codex?

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.

Can I use Xiaohongshu Cover Generator 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 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.

What does Xiaohongshu Cover Generator need to run?

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.

Does Xiaohongshu Cover Generator access the network?

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.

Is Xiaohongshu Cover Generator safe to install?

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.

What licence does Xiaohongshu Cover Generator use?

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.

How many tokens does Xiaohongshu Cover Generator use?

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.

What are the alternatives to Xiaohongshu Cover Generator?

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.

Who maintains Xiaohongshu Cover Generator?

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.