xiaohongshu-images

小红书图片技能

这项技能可将 Markdown、HTML 或文本内容转换为设计精美的 HTML 页面，并使用 AI 生成封面图片，然后截取整页连续截图，比例为 3:4，方便发布到小红书。

概述

这项技能会执行以下工作流：

1. 接收内容：接收用户提供的 Markdown、HTML 或 txt 格式内容
2. 加载提示词模板：读取此技能目录中的 prompts/default.md 提示词模板
3. 确定输出账号：确定要使用的账号文件夹（见下文“账号文件夹解析”）
4. 生成封面图片：使用 /baoyu-cover-image 技能，根据文章内容生成封面图片
5. 生成 HTML：按照提示词模板的规范创建设计精美的 HTML 页面
6. 保存输出：将 HTML 保存到 ~/Dev/obsidian/{account_folder}/articles/<date-title>/xhs-preview.html
7. 截取截图：以 3:4 的比例连续截取整页，不裁切文字

账号文件夹解析

这项技能按以下优先级确定输出账号文件夹：

优先级 1：显式指定 --account 参数

如果用户指定了 --account，则使用对应的文件夹：

/xiaohongshu-images <article> --account james-cn      # → 10_在悉尼和稀泥
/xiaohongshu-images <article> --account james-en      # → 11_BuildWithJames
/xiaohongshu-images <article> --account mom-reading-club  # → 12_妈妈在读

优先级 2：根据输入文件路径推断

如果未指定 --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/

优先级 3：回退到模板映射

如果无法从路径确定账号（例如，输入的是原始内容），则使用基于模板的映射：

模板	账号文件夹
default	10_在悉尼和稀泥
mom-reading-club	12_妈妈在读

账号文件夹映射参考

账号	文件夹
james-cn	10_在悉尼和稀泥
james-en	11_BuildWithJames
mom-reading-club	12_妈妈在读

用法

用户调用这项技能时，请按以下步骤操作：

步骤 1：识别输入内容

用户会提供以下内容之一：

• Markdown、HTML 或 txt 文件的路径（例如，/path/to/article.md）
• 直接在对话中提供的原始内容
• 用于获取内容的 URL

如果输入不明确，请让用户提供文件路径或 URL，或者直接粘贴内容。

步骤 2：读取提示词模板

从此技能目录中读取提示词模板：

{{SKILL_DIR}}/prompts/default.md

使用 Read 工具获取提示词模板内容。该模板定义了 HTML/CSS 样式规范。

步骤 3：提取文章标题和日期，并确定账号

从内容中提取：

• 标题：主标题（h1）或内容中的第一个重要标题
• 日期：当前日期，格式为 YYYY-MM-DD
• 账号文件夹：按上述优先级规则确定（--account → 路径推断 → 模板映射）

将输出文件夹路径设为：~/Dev/obsidian/{account_folder}/articles/<date>-<sanitized-title>/

• 将空格替换为连字符
• 删除特殊字符
• 标题长度应适中（最多 50 个字符）
• 所有图片均放在 _attachments/ 子文件夹中

步骤 4：使用 baoyu-cover-image 技能生成封面图

⚠️ 合规性检查：生成前，请确保图片构想符合小红书社区规范（提示词模板第 11 节）。图片必须：

• 适合全年龄段，不含暴露服装或暗示性姿势
• 避免政治符号、暴力、赌博、吸烟或酗酒
• 传递积极、建设性的信息
• 尊重文化差异，并具有原创性

使用 /baoyu-cover-image 技能生成封面图：

1. 调用技能，并提供文章内容：

/baoyu-cover-image ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/index.md --style <auto-or-specified> --no-title

如果内容尚未保存，也可以直接将内容传递给技能。

2. 选择风格：

   • 让 baoyu-cover-image 根据内容特征自动选择，或
   • 指定与文章基调相符的风格：
     • tech - AI、编程、数字主题
     • warm - 个人故事、情感内容
     • bold - 有争议、吸引眼球的主题
     • minimal - 简洁、禅意内容
     • playful - 有趣、轻松、适合初学者的内容
     • nature - 健康、养生、自然主题
     • retro - 历史、复古、传统主题
     • elegant - 商务、专业内容（默认）

   特别说明：Mom Reading Club 模板

   使用 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 标志，因为小红书封面通常使用不含文字的纯视觉图片。

4. 将生成的图片移至正确位置：

   • 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

步骤 5：生成 HTML

⚠️ 合规性检查：生成 HTML 前，请检查文本内容是否符合规范：

• 不得使用绝对化或最高级表述（最好、第一、国家级、最高级、全网最低价）
• 不得夸大效果（一分钟见效、吃完就变白）
• 不得提供虚假或未经核实的医疗/财务建议
• 不得包含诽谤或冒犯性语言
• 如涉及健康/投资主题，请添加免责声明

根据提示词模板和用户内容：

1. 解析内容，识别以下元素：

   • 标题（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>
    
    <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">
            
        </div>
    </div>
</body>
</html>

4. 将 HTML 保存到 ~/Dev/obsidian/{account_folder}/articles/<date>-<title>/xhs-preview.html

第 6 步：截取屏幕截图

生成 HTML 后，以精确的 3:4 宽高比，按顺序截取 .container 元素的屏幕截图：

截图规格：

• 容器视口：600px × 800px（3:4 宽高比）
• 输出分辨率：1200px × 1600px（2x 设备缩放系数）
• 每张截图仅截取 .container 元素，不包含整个页面

截取流程：

1. 打开 HTML 页面：使用 Playwright 浏览器，视口尺寸大于容器
2. 配置浏览器上下文：
   • 视口：800px × 1000px（大于容器，以确保容器完整可见）
   • 设备缩放系数：2x，以获得高分辨率输出
3. 在容器内滚动：
   • .container 元素设置了 overflow-y: auto，支持内部滚动
   • 从 scrollTop = 0 开始，逐步遍历内容
   • 每个滚动位置截取一张 3:4 宽高比的截图
4. 智能检测文本边界：
   • 每次截图前，分析可见的块级元素（p、h1-h6、li、blockquote、pre、img）
   • 如果某个元素会在底部边界被截断，则在该元素之前结束当前截图
   • 添加空白遮罩以覆盖不完整的内容，保持 3:4 的画面整洁
   • 下一张截图从被截断的元素顶部开始
5. 截取 .container 的全部内容：
   • 使用 container.screenshot() 仅截取容器元素（不包含页面背景）
   • 继续截取，直到内容全部捕获（scrollTop 达到 scrollHeight - clientHeight）
6. 将截图保存到 ~/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

脚本输出：

• 每张截图：精确为 1200×1600 像素（2x 缩放下的 3:4 宽高比）
• 仅截取奶油色卡片内容
• 截图之间不会截断文字

第 7 步：报告结果

完成后，向用户报告：

• HTML 文件位置
• 生成的截图数量
• 截图文件夹位置
• 第一张截图的预览（如果可以）

目录结构

{{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_妈妈在读

依赖项

此技能依赖：

• 用于生成封面图片的 /baoyu-cover-image 技能（必须安装在 ~/.claude/skills/ 中）

工作流示例

用户： 根据这段 Markdown 创建一个样式化文章页面：

# My Article Title

This is the introduction paragraph...

## Section 1

Content for section 1...

助手操作：

1. 从 prompts/default.md 读取提示词模板
2. 提取标题：“My Article Title”
3. 确定账户文件夹（未指定 --account，也无法从路径推断，使用默认模板 → 10_在悉尼和稀泥）
4. 创建输出文件夹：~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/
5. 使用 --no-title 标志调用 /baoyu-cover-image 技能生成封面图片
6. 将生成的封面从 imgs/cover.png 移动到 _attachments/cover-xhs.png
7. 按照模板规格生成样式化 HTML
8. 保存到 ~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/xhs-preview.html
9. 在浏览器中打开并截取 3:4 宽高比的截图
10. 将截图保存到 ~/Dev/obsidian/10_在悉尼和稀泥/articles/2024-01-14-my-article-title/_attachments/xhs-01.png 等路径
11. 报告完成情况及文件位置

使用 --account 参数的示例：

/xiaohongshu-images ~/path/to/article.md --account mom-reading-club --template mom-reading-club

助手操作：

1. 指定了 --account mom-reading-club → 使用 12_妈妈在读
2. 输出到：~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-article-title/

路径推断示例：

/xiaohongshu-images ~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/index.md

助手操作：

1. 未指定 --account
2. 输入路径包含 12_妈妈在读 → 推断账户文件夹
3. 输出到同一文件夹：~/Dev/obsidian/12_妈妈在读/articles/2024-01-14-xxx/

自定义提示词模板

用户可以通过以下方式提供自定义提示词模板：

1. 在 prompts/ 目录中放置 .md 文件
2. 调用技能时指定模板名称

示例：“为这篇文章使用 xiaohongshu-style 模板”

可用模板

模板	说明	适用场景
default	采用《纽约客》风格插画的标准样式	一般文章
mom-reading-club	采用书法与水墨风格，使用 TsangerJinKai02 字体	妈妈读书会品牌内容

妈妈读书会模板

所有“妈妈读书会”品牌内容都使用此模板：

/xiaohongshu-images <article> --template mom-reading-club

特点：

• 字体：标题使用 TsangerJinKai02（仓耳今楷02），需要本地安装
• 封面风格：中国书法与水墨插画风
• 美学风格：禅意简约、优雅克制、留白充足
• 点缀色：低调的金色（#C9A962）
• 目标受众：30 至 45 岁的有文化修养的母亲

错误处理

如果 /baoyu-cover-image 技能失败：

1. 向用户显示错误消息
2. 提供重试或不使用封面图片继续的选项
3. 如果选择不使用图片继续，则使用占位图或省略封面

如果截图捕获失败：

1. 确认 HTML 文件存在且有效
2. 检查浏览器依赖项
3. 向用户报告具体错误

系统要求

此技能需要：

• Python 3.8+
• 用于截图捕获的 Playwright（通过 pip 安装：pip install playwright && playwright install chromium）
• 安装在 ~/.claude/skills/ 中的 /baoyu-cover-image 技能

安装依赖项：

pip install playwright
playwright install chromium

注意事项

• 此技能会原样保留所有提供的原始内容
• 不会修改、简化或删除内容
• 封面图片根据文章主题生成
• 截图针对小红书的 3:4 宽高比进行了优化
• 截图中的文字不会被截断——边界会经过智能调整

社区规范合规（社区规范合规）

重要：所有生成内容都必须符合小红书社区规范。

快速参考——禁止内容：

类别	示例	处理方式
绝对化表述	最好、最佳、第一、国家级	删除或改写
夸大效果	一分钟见效、立刻瘦10斤	删除或添加免责声明
医疗/财务建议	健康提示、投资建议	添加免责声明：“本内容不构成医疗/投资建议”
不当图像	裸露、暴力、政治符号	使用恰当内容重新生成
虚假信息	伪科学、未经核实的说法	核实或删除
诽谤内容	攻击品牌/个人	完全删除

官方指南：

• 社区规范：https://www.xiaohongshu.com/crown/community/rules
• 社区公约：https://www.xiaohongshu.com/crown/community/agreement

合规工作流：

1. 生成图片前：检查主题是否恰当
2. 生成 HTML 前：检查文本中是否有禁止用语
3. 最终输出前：根据提示词模板中的合规检查清单（第 11.5 节）进行检查

新手上路（用户不知道该输入什么时，走这里）

触发：/小红书配图 新手、「这个怎么用」「第一次用」「能干嘛」「带我走一遍」， 以及用户输入了技能名却没有给任何任务的时候。

这个模式的铁律：不假设、不索取。用户可能什么都没准备， 不要一上来就问他要文件、要 API key、要具体需求。按下面四步走：

一、先说清楚这是什么（三句话以内）

一句话：把一段内容拆成一组小红书能直接发的 3:4 图片。 自动分页、排版、生成封面，出来就是能用的图， 不用再去改模板或者调字号。

二、给编号选项，让他按回车就能继续

不要问开放式问题（「你想做什么？」对新手是负担）。给 3 个选项加一个默认：

想先看哪个？（直接回车 = 1）
  1. 先看看做出来长什么样（示例）
  2. 把我的这段内容做成图
  3. 有哪些风格可以选

三、直接演示一遍，边做边解释

选完立刻做给他看，用示例数据，不需要他提供任何东西。 每做完一步，加一行「💡 刚才发生了什么」，一句话说明这步的意义。

四、毕业

演示完只问一个是非题：「要不要用你自己的内容真跑一遍？」 答是就进正常流程；答否就告诉他随时回来输 /小红书配图 新手。