xiaohongshu-images by iamzifei/xiaohongshu-images-skill
npx skills add https://github.com/iamzifei/xiaohongshu-images-skill --skill xiaohongshu-images此技能可将 Markdown、HTML 或文本内容转换为样式精美的 HTML 页面,并配以 AI 生成的封面图,然后以 3:4 的比例捕获为连续截图,用于小红书发布。
该技能执行以下工作流程:
prompts/default.md 读取提示词模板/baoyu-cover-image 技能根据文章内容生成封面图~/Dev/obsidian/{account_folder}/articles/<date-title>/xhs-preview.html该技能按以下优先级确定输出账户文件夹:
--account 参数如果用户指定了 --account,则使用对应的文件夹:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
/xiaohongshu-images <article> --account james-cn # → 10_在悉尼和稀泥
/xiaohongshu-images <article> --account james-en # → 11_BuildWithJames
/xiaohongshu-images <article> --account mom-reading-club # → 12_妈妈在读
如果未指定 --account,则尝试从输入文件路径推断:
Input: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/index.md
→ Output to: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/
Input: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/index.md
→ Output to: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/
如果无法从路径确定账户(例如,原始内容输入),则使用基于模板的映射:
| 模板 | 账户文件夹 |
|---|---|
default | 10_在悉尼和稀泥 |
mom-reading-club | 12_妈妈在读 |
| 账户 | 文件夹 |
|---|---|
james-cn | 10_在悉尼和稀泥 |
james-en | 11_BuildWithJames |
mom-reading-club | 12_妈妈在读 |
当用户调用此技能时,请遵循以下步骤:
用户将提供以下内容之一:
/path/to/article.md)如果输入不明确,请要求用户提供文件路径、URL 或直接粘贴内容。
从本技能目录读取提示词模板:
{{SKILL_DIR}}/prompts/default.md
使用 Read 工具获取提示词模板内容。此模板定义了 HTML/CSS 样式规范。
从内容中提取:
创建输出文件夹路径:~/Dev/obsidian/{account_folder}/articles/<date>-<sanitized-title>/
_attachments/ 子文件夹中⚠️ 合规性检查:在生成之前,请确保图片概念符合小红书社区指南(提示词模板第 11 节)。图片必须:
使用 /baoyu-cover-image 技能生成封面图:
/baoyu-cover-image ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/index.md --style <auto-or-specified> --no-title
或者,如果内容尚未保存,直接将内容传递给该技能。
* 让 baoyu-cover-image 根据内容信号自动选择,或者
* 指定与文章基调匹配的风格:
* `tech` - AI、编程、数字主题
* `warm` - 个人故事、情感内容
* `bold` - 争议性、吸引注意力的主题
* `minimal` - 简单、禅意内容
* `playful` - 有趣、随意、新手友好的内容
* `nature` - 健康、养生、有机主题
* `retro` - 历史、复古、传统主题
* `elegant` - 商业、专业内容(默认)
特殊:妈妈读书会模板
使用 mom-reading-club 模板时,使用书法水墨风覆盖默认封面风格:
/baoyu-cover-image <article> --style minimal --no-title --custom-prompt "Chinese calligraphy and ink-wash illustration style (书法水墨风). Zen-like simplicity with generous white space (留白). Include subtle ink-wash brush strokes as background texture. Minimalist botanical elements (bamboo, plum blossoms, orchids, lotus) when appropriate. Color palette: ink black (#1a1a1a), warm gray (#666666), subtle gold accents (#C9A962), warm off-white background (#F5F3EE). If human figures are included, depict an elegant woman aged 30-45 with a contemplative, refined demeanor. NO TEXT on the cover."
3. 使用--no-title标志,因为小红书封面通常使用纯视觉图片,不嵌入文字。
* baoyu-cover-image 将图片保存到相对于文章的 `imgs/cover.png`
* 移动/复制到 `~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png`
mv ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/imgs/cover.png ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png
⚠️ 合规性检查:在生成 HTML 之前,检查文本内容是否符合规定:
使用提示词模板和用户内容:
* 标题(h1)
* 副标题(h2-h6)
* 段落
* 列表
* 代码块
* 链接
* 强调/粗体文本
* 引用块
2. 生成完整的 HTML,遵循模板规范:
* 深色渐变背景
* 600px × 800px 米色卡片
* 使用 Google Fonts(Noto Serif SC、Inter、JetBrains Mono)的合适排版
* 顶部放置封面图
* 为文本、链接、列表、代码块等指定所有样式
* 移动端响应式设计
3. 重要的 HTML 结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Title</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&family=Inter:wght@300;400;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* All CSS styles inline */
</style>
</head>
<body>
<div class="container">
<img src="_attachments/cover-xhs.png" class="cover-image" alt="Cover">
<div class="content">
<!-- Article content -->
</div>
</div>
</body>
</html>
4. 将 HTML 保存到 ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html
生成 HTML 后,以精确的 3:4 宽高比捕获 .container 元素的连续截图:
截图规格:
.container 元素,而非整个页面捕获过程:
.container 元素具有 overflow-y: auto,使其内部可滚动
* 从 scrollTop = 0 开始,逐步滚动内容
* 每个滚动位置捕获一张 3:4 比例的截图.container内容:
* 使用 container.screenshot() 仅捕获容器元素(排除页面背景)
* 继续直到所有内容都被捕获(scrollTop 达到 scrollHeight - clientHeight)~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/:
* 顺序命名:xhs-01.png、xhs-02.png、xhs-03.png 等使用截图脚本:
cd {{SKILL_DIR}} && python scripts/screenshot.py ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html
脚本输出:
完成后,向用户报告:
{{SKILL_DIR}}/
├── SKILL.md # 本文件
├── prompts/
│ └── default.md # 默认 HTML/CSS 样式提示词
│ └── mom-reading-club.md # 妈妈读书会样式提示词
├── scripts/
│ └── screenshot.py # 截图捕获脚本
└── .gitignore
Output directory (outside skill folder):
~/Dev/obsidian/{account_folder}/articles/<date>-<title>/
├── xhs-preview.html # 样式化 HTML 预览页面
├── imgs/ # 由 baoyu-cover-image 创建
│ ├── prompts/
│ │ └── cover.md # 封面图提示词
│ └── cover.png # 生成的封面图(移动到 _attachments/)
└── _attachments/ # Obsidian 风格附件文件夹
├── cover-xhs.png # 封面图(从 imgs/cover.png 移动而来)
├── xhs-01.png # 截图第 1 页(1200×1600)
├── xhs-02.png # 截图第 2 页
└── ...
Account folder mapping:
- james-cn → 10_在悉尼和稀泥
- james-en → 11_BuildWithJames
- mom-reading-club → 12_妈妈在读
此技能依赖于:
/baoyu-cover-image 技能用于封面图生成(必须安装在 ~/.claude/skills/ 中)用户: 根据此 Markdown 创建样式化文章页面:
# My Article Title
This is the introduction paragraph...
## Section 1
Content for section 1...
助手操作:
prompts/default.md 读取提示词模板10_在悉尼和稀泥)~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/--no-title 标志调用 /baoyu-cover-image 技能生成封面图imgs/cover.png 移动到 _attachments/cover-xhs.png~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/xhs-preview.html~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/_attachments/xhs-01.png 等位置使用 --account 参数的示例:
/xiaohongshu-images ~/path/to/article.md --account mom-reading-club --template mom-reading-club
助手操作:
--account mom-reading-club → 使用 12_妈妈在读~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-article-title/使用路径推断的示例:
/xiaohongshu-images ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/index.md
助手操作:
12_妈妈在读 → 推断账户文件夹~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/用户可以通过以下方式提供自定义提示词模板:
.md 文件放在 prompts/ 目录中示例:"对这篇文章使用 xiaohongshu-style 模板"
| 模板 | 描述 | 最适合 |
|---|---|---|
default | 标准风格,带有《纽约客》风格插图 | 通用文章 |
mom-reading-club | 书法水墨风格,使用 TsangerJinKai02 字体 | 妈妈读书会品牌内容 |
对所有"妈妈读书会"品牌内容使用此模板:
/xiaohongshu-images <article> --template mom-reading-club
特点:
如果 /baoyu-cover-image 技能失败:
如果截图捕获失败:
此技能需要:
pip install playwright && playwright install chromium)/baoyu-cover-image 技能安装在 ~/.claude/skills/ 中安装依赖项:
pip install playwright
playwright install chromium
重要提示:所有生成的内容必须符合小红书社区指南。
| 类别 | 示例 | 操作 |
|---|---|---|
| 绝对化表述 | 最好、最佳、第一、国家级 | 移除或重新措辞 |
| 夸大效果 | 一分钟见效、立刻瘦10斤 | 移除或添加免责声明 |
| 医疗/财务建议 | 健康提示、投资建议 | 添加免责声明:"本内容不构成医疗/投资建议" |
| 不当图像 | 裸露、暴力、政治符号 | 使用适当内容重新生成 |
| 虚假信息 | 伪科学、未经证实的主张 | 验证或移除 |
| 诽谤性内容 | 攻击品牌/个人 | 完全移除 |
每周安装数
980
仓库
GitHub Stars
5
首次出现
Jan 22, 2026
安全审计
安装于
opencode924
gemini-cli897
codex895
cursor889
github-copilot871
kimi-cli853
This skill transforms markdown, HTML, or text content into beautifully styled HTML pages with AI-generated cover images, then captures them as sequential screenshots at 3:4 ratio for Xiaohongshu posting.
The skill performs the following workflow:
prompts/default.md in this skill's directory/baoyu-cover-image skill to generate a cover image based on the article content~/Dev/obsidian/{account_folder}/articles/<date-title>/xhs-preview.htmlThe skill determines the output account folder using the following priority:
--account ParameterIf the user specifies --account, use the corresponding folder:
/xiaohongshu-images <article> --account james-cn # → 10_在悉尼和稀泥
/xiaohongshu-images <article> --account james-en # → 11_BuildWithJames
/xiaohongshu-images <article> --account mom-reading-club # → 12_妈妈在读
If no --account is specified, try to infer from the input file path:
Input: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/index.md
→ Output to: ~/Dev/obsidian/12_妈妈在读/articles/2026-01-20-xxx/
Input: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/index.md
→ Output to: ~/Dev/obsidian/10_在悉尼和稀泥/articles/2026-01-20-xxx/
If the account cannot be determined from the path (e.g., raw content input), use template-based mapping:
| Template | Account Folder |
|---|---|
default | 10_在悉尼和稀泥 |
mom-reading-club | 12_妈妈在读 |
| Account | Folder |
|---|---|
james-cn | 10_在悉尼和稀泥 |
james-en | 11_BuildWithJames |
mom-reading-club | 12_妈妈在读 |
When the user invokes this skill, follow these steps:
The user will provide one of the following:
/path/to/article.md)If the input is unclear, ask the user to provide either a file path, URL, or paste the content directly.
Read the prompt template from this skill's directory:
{{SKILL_DIR}}/prompts/default.md
Use the Read tool to get the prompt template content. This template defines the HTML/CSS styling specifications.
From the content, extract:
Create the output folder path as: ~/Dev/obsidian/{account_folder}/articles/<date>-<sanitized-title>/
_attachments/ subfolder⚠️ COMPLIANCE CHECK : Before generating, ensure the image concept complies with Xiaohongshu community guidelines (Section 11 of the prompt template). The image must:
Use the /baoyu-cover-image skill to generate the cover image:
/baoyu-cover-image ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/index.md --style <auto-or-specified> --no-title
Or if the content is not yet saved, pass the content directly to the skill.
Style Selection :
tech - AI, coding, digital topicswarm - Personal stories, emotional contentbold - Controversial, attention-grabbing topicsminimal - Simple, zen-like contentplayful - Fun, casual, beginner-friendly contentnature - Wellness, health, organic topicsretro - History, vintage, traditional topicselegant - Business, professional content (default)Special: Mom Reading Club Template
When using the mom-reading-club template, override the default cover style with calligraphy & ink-wash illustration (书法水墨风):
/baoyu-cover-image <article> --style minimal --no-title --custom-prompt "Chinese calligraphy and ink-wash illustration style (书法水墨风). Zen-like simplicity with generous white space (留白). Include subtle ink-wash brush strokes as background texture. Minimalist botanical elements (bamboo, plum blossoms, orchids, lotus) when appropriate. Color palette: ink black (#1a1a1a), warm gray (#666666), subtle gold accents (#C9A962), warm off-white background (#F5F3EE). If human figures are included, depict an elegant woman aged 30-45 with a contemplative, refined demeanor. NO TEXT on the cover."
3. Use--no-title flag since Xiaohongshu covers typically use visual-only images without embedded text.
Move the generated image to the correct location:
imgs/cover.png relative to the article~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.pngmv ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/imgs/cover.png ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/cover-xhs.png
⚠️ COMPLIANCE CHECK : Before generating HTML, review the text content for compliance:
Using the prompt template and the user's content:
Parse the content to identify:
Generate complete HTML following the template specifications:
Important HTML Structure :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Title</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700&family=Inter:wght@300;400;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* All CSS styles inline */
</style>
</head>
<body>
<div class="container">
<img src="_attachments/cover-xhs.png" class="cover-image" alt="Cover">
<div class="content">
<!-- Article content -->
</div>
</div>
</body>
</html>
4. Save the HTML to ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html
After generating the HTML, capture sequential screenshots of the .container element at exact 3:4 aspect ratio :
Screenshot Specifications:
.container element, not the full pageCapture Process:
.container element has overflow-y: auto, making it internally scrollablescrollTop = 0 and increment through the content.container content:
Use the screenshot script:
cd {{SKILL_DIR}} && python scripts/screenshot.py ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html
Script Output:
After completion, report to the user:
{{SKILL_DIR}}/
├── SKILL.md # This file
├── prompts/
│ └── default.md # Default HTML/CSS styling prompt
│ └── mom-reading-club.md # Mom Reading Club styling prompt
├── scripts/
│ └── screenshot.py # Screenshot capture script
└── .gitignore
Output directory (outside skill folder):
~/Dev/obsidian/{account_folder}/articles/<date>-<title>/
├── xhs-preview.html # Styled HTML preview page
├── imgs/ # Created by baoyu-cover-image
│ ├── prompts/
│ │ └── cover.md # Cover image prompt
│ └── cover.png # Generated cover (moved to _attachments/)
└── _attachments/ # Obsidian-style attachments folder
├── cover-xhs.png # Cover image (moved from imgs/cover.png)
├── xhs-01.png # Screenshot page 1 (1200×1600)
├── xhs-02.png # Screenshot page 2
└── ...
Account folder mapping:
- james-cn → 10_在悉尼和稀泥
- james-en → 11_BuildWithJames
- mom-reading-club → 12_妈妈在读
This skill depends on:
/baoyu-cover-image skill for cover image generation (must be installed in ~/.claude/skills/)User: Create a styled article page from this markdown:
# My Article Title
This is the introduction paragraph...
## Section 1
Content for section 1...
Assistant Actions:
prompts/default.md10_在悉尼和稀泥)~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title//baoyu-cover-image skill with --no-title flag to generate cover imageimgs/cover.png to _attachments/cover-xhs.png~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/xhs-preview.htmlExample with --account parameter:
/xiaohongshu-images ~/path/to/article.md --account mom-reading-club --template mom-reading-club
Assistant Actions:
--account mom-reading-club specified → use 12_妈妈在读~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-article-title/Example with path inference:
/xiaohongshu-images ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/index.md
Assistant Actions:
12_妈妈在读 → infer account folder~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/Users can provide custom prompt templates by:
.md file in the prompts/ directoryExample: "Use the xiaohongshu-style template for this article"
| Template | Description | Best For |
|---|---|---|
default | Standard style with New Yorker-style illustrations | General articles |
mom-reading-club | Calligraphy & ink-wash style with TsangerJinKai02 font | Mom Reading Club (妈妈读书会) brand content |
Use this template for all "Mom Reading Club" branded content:
/xiaohongshu-images <article> --template mom-reading-club
Features:
If the /baoyu-cover-image skill fails:
If screenshot capture fails:
This skill requires:
pip install playwright && playwright install chromium)/baoyu-cover-image skill installed in ~/.claude/skills/Install dependencies:
pip install playwright
playwright install chromium
IMPORTANT : All generated content must comply with Xiaohongshu community guidelines.
| Category | Examples | Action |
|---|---|---|
| Absolute claims | 最好、最佳、第一、国家级 | Remove or rephrase |
| Exaggerated effects | 一分钟见效、立刻瘦10斤 | Remove or add disclaimers |
| Medical/Financial advice | Health tips, investment suggestions | Add disclaimer: "本内容不构成医疗/投资建议" |
| Inappropriate imagery | Nudity, violence, political symbols | Regenerate with appropriate content |
| False information | Pseudoscience, unverified claims | Verify or remove |
| Defamatory content | Attacks on brands/individuals | Remove entirely |
Weekly Installs
980
Repository
GitHub Stars
5
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykWarn
Installed on
opencode924
gemini-cli897
codex895
cursor889
github-copilot871
kimi-cli853
超能力技能使用指南:AI助手技能调用优先级与工作流程详解
37,500 周安装
Grimoire CLI 使用指南:区块链法术编写、验证与执行全流程
940 周安装
Grimoire Uniswap 技能:查询 Uniswap 元数据与生成代币/资金池快照的 CLI 工具
940 周安装
Grimoire Aave 技能:查询 Aave V3 元数据和储备快照的 CLI 工具
941 周安装
Railway CLI 部署指南:使用 railway up 命令快速部署代码到 Railway 平台
942 周安装
n8n Python 代码节点使用指南:在自动化工作流中编写 Python 脚本
943 周安装
Flutter Platform Views 实现指南:Android/iOS/macOS原生视图与Web嵌入教程
943 周安装
container.screenshot()~/Dev/obsidian/{account_folder}/articles/<date>-<title>/_attachments/:
xhs-01.png, xhs-02.png, xhs-03.png, etc.~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/_attachments/xhs-01.png, etc.