xiaohongshu-publisher

小红书发布器（小红书发布器）

使用 agent-browser 的 CDP（Chrome DevTools Protocol）模式，将图片和笔记发布到小红书创作平台。

架构：CDP 模式

此技能使用 CDP 模式——连接到用户已登录的现有浏览器实例。这种方式：

• 无需扫描二维码——用户只需在浏览器中登录一次
• 利用现有会话——使用浏览器的 Cookie 和身份验证状态
• 更加稳定——无需管理身份验证状态文件
• agent-browser CLI——通过 --cdp 标志提供简单的命令行界面

⚠️ 重要：默认保存为草稿

此技能始终默认将笔记保存为草稿。绝不会自动发布。

只有当用户明确要求立即发布，并使用类似以下表述时，才点击“发布”按钮：

• “直接发布”／“立即发布”／“马上发布”
• “publish now”／“publish directly”／“publish immediately”
• “不要草稿，直接发”／“不存草稿”

如果不确定，始终保存为草稿，让用户先审核再发布。

前置条件

1. 启动带远程调试功能的 Chrome

使用此技能前，用户必须启用远程调试功能启动 Chrome：

macOS：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

或者在 ~/.zshrc 或 ~/.bashrc 中创建别名：

alias chrome-debug='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222'

然后只需运行：chrome-debug

2. 登录小红书

在 Chrome 浏览器中（带调试端口），访问：

https://creator.xiaohongshu.com/publish/publish

使用小红书 App 扫描二维码登录。只需登录一次——会话会保留在浏览器中。

注意：登录后，可以将浏览器窗口最小化到 Dock。CDP 正常工作要求浏览器保持运行（不要关闭），但无需让浏览器窗口保持显示。

3. Python 依赖

pip install Pillow pyobjc-framework-Cocoa

agent-browser CDP 命令参考

所有命令都使用 --cdp 9222 标志连接到现有的 Chrome 浏览器：

# Navigation
npx agent-browser --cdp 9222 open <url>          # Navigate to URL
npx agent-browser --cdp 9222 snapshot -i         # Get page snapshot with element refs

# Element Interaction
npx agent-browser --cdp 9222 click @e5           # Click element by ref
npx agent-browser --cdp 9222 fill @e2 "text"     # Fill input field
npx agent-browser --cdp 9222 type @e3 "text"     # Type text into element
npx agent-browser --cdp 9222 upload @e4 "/path/to/file.jpg"  # Upload file

# Keyboard & Wait
npx agent-browser --cdp 9222 press Enter         # Press key
npx agent-browser --cdp 9222 wait 2000           # Wait milliseconds
npx agent-browser --cdp 9222 wait --text "发布"  # Wait for text

# Screenshot
npx agent-browser --cdp 9222 screenshot          # Take screenshot

重要：

• 元素引用（如 @e5）来自 snapshot -i 的输出。交互前务必先获取快照。
• --cdp 9222 标志会连接到浏览器的调试端口，而不是启动新浏览器。
• 不要使用 close 命令，否则会关闭用户的浏览器！

脚本

位于 ~/.claude/skills/xiaohongshu-publisher/scripts/：

parse_note.py

解析 Markdown，并提取小红书笔记的结构化数据：

python parse_note.py <markdown_file> [--output json]

返回包含以下内容的 JSON：标题、正文、图片（路径列表）、标签

copy_to_clipboard.py

将图片复制到系统剪贴板，以便粘贴：

python copy_to_clipboard.py image /path/to/image.jpg [--quality 80]

工作流

阶段 0：验证浏览器连接

关键：首先验证 CDP 浏览器是否正在运行并已连接。

1. 检查浏览器是否可访问：

   npx agent-browser --cdp 9222 snapshot -i
   

   • 如果连接失败，告诉用户：“请先启动带调试端口的 Chrome 浏览器”

2. 需要时提供启动命令：

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

阶段 1：检查登录状态

1. 导航到创作页面（如果当前不在该页面）：

   npx agent-browser --cdp 9222 open "https://creator.xiaohongshu.com/publish/publish"
   

2. 获取快照以检查登录状态：

   npx agent-browser --cdp 9222 snapshot -i
   

   • 查找“上传图片”按钮 = 已登录
   • 查找二维码或登录表单 = 需要登录

3. 如果需要登录：

   • 告诉用户：“请在浏览器中扫码登录小红书，登录后告诉我”
   • 等待用户确认
   • 获取新快照以验证登录是否成功

阶段 2：解析内容

如果用户提供了 Markdown 文件，请进行解析：

python ~/.claude/skills/xiaohongshu-publisher/scripts/parse_note.py /path/to/note.md

输出 JSON：

{
  "title": "Note Title",
  "content": "Note description/content text...",
  "images": ["/path/to/img1.jpg", "/path/to/img2.jpg"],
  "tags": ["tag1", "tag2"]
}

阶段 3：上传图片

1. 获取快照，查看当前元素引用：

   npx agent-browser --cdp 9222 snapshot -i
   

2. 查找上传输入元素（查找文件输入框或“上传图片”区域）

3. 上传图片：

   # Single image
   npx agent-browser --cdp 9222 upload @e<ref> "/path/to/image1.jpg"
   
   # Multiple images (comma-separated)
   npx agent-browser --cdp 9222 upload @e<ref> "/path/to/img1.jpg,/path/to/img2.jpg,/path/to/img3.jpg"
   

4. 等待图片上传完成：

   npx agent-browser --cdp 9222 wait 3000
   

5. 上传完成后获取新快照

阶段 4：填写标题和正文

1. 从快照中查找标题输入框（占位符通常包含“标题”）

2. 填写标题：

   npx agent-browser --cdp 9222 fill @e<title_ref> "Your Note Title"
   

   • 建议标题长度：约 20 个字符

3. 查找正文／描述输入框（占位符通常包含“描述”或“正文”）

4. 填写正文：

   npx agent-browser --cdp 9222 fill @e<content_ref> "Your note content here..."
   

   • 正文长度上限：约 1000 个字符

阶段 5：添加标签（可选）

如果提供了标签：

1. 从快照中找到标签输入区域

2. 添加每个标签：

   npx agent-browser --cdp 9222 click @e<add_tag_ref>
   npx agent-browser --cdp 9222 fill @e<tag_input_ref> "tag1"
   npx agent-browser --cdp 9222 press Enter
   

   • 每个标签重复此操作（建议最多 5 个）

阶段 6：保存为草稿（默认）或发布

默认操作：保存为草稿

1. 从快照中找到“存草稿”按钮

2. 点击草稿按钮：

   npx agent-browser --cdp 9222 click @e<draft_button_ref>
   

3. 验证是否成功——拍摄快照或等待确认

仅当用户明确要求发布时

仅当用户说“直接发布”“立即发布”或“publish now”时：

1. 从快照中找到“发布”按钮

2. 点击发布按钮：

   npx agent-browser --cdp 9222 click @e<publish_button_ref>
   

如有疑问，始终保存为草稿。

阶段 7：验证并报告

1. 拍摄最终快照以验证是否成功：

   npx agent-browser --cdp 9222 snapshot -i
   

2. 向用户报告：

   • 草稿已保存：“草稿已保存！请在小红书 App 中预览和发布。”
   • 已发布：“笔记已发布成功！”

示例流程

示例 1：发布基本图片

用户：“把这些图片发布到小红书：/path/to/photo1.jpg、/path/to/photo2.jpg，标题是‘周末好去处’”

# 1. Verify connection and check login
npx agent-browser --cdp 9222 snapshot -i

# 2. Navigate to publish page (if needed)
npx agent-browser --cdp 9222 open "https://creator.xiaohongshu.com/publish/publish"

# 3. Take snapshot, verify "上传图片" visible
npx agent-browser --cdp 9222 snapshot -i

# 4. Upload images
npx agent-browser --cdp 9222 upload @e<ref> "/path/to/photo1.jpg,/path/to/photo2.jpg"
npx agent-browser --cdp 9222 wait 3000

# 5. Take new snapshot, fill title
npx agent-browser --cdp 9222 snapshot -i
npx agent-browser --cdp 9222 fill @e<title_ref> "周末好去处"

# 6. Save as draft
npx agent-browser --cdp 9222 click @e<draft_ref>

示例 2：发布 Markdown 文件

用户：“把这个 Markdown 发到小红书：/path/to/note.md”

# 1. Parse markdown
python ~/.claude/skills/xiaohongshu-publisher/scripts/parse_note.py /path/to/note.md

# 2. Extract: title, content, images, tags from JSON output

# 3. Verify connection
npx agent-browser --cdp 9222 snapshot -i

# 4. Upload all images from parsed result
npx agent-browser --cdp 9222 upload @e<ref> "/path/to/img1.jpg,/path/to/img2.jpg"

# 5. Fill title and content
npx agent-browser --cdp 9222 fill @e<title_ref> "parsed title"
npx agent-browser --cdp 9222 fill @e<content_ref> "parsed content"

# 6. Add tags if present
npx agent-browser --cdp 9222 fill @e<tag_ref> "tag1"
npx agent-browser --cdp 9222 press Enter

# 7. Save as draft
npx agent-browser --cdp 9222 click @e<draft_ref>

示例 3：直接发布

用户：“直接发布这些图到小红书，不用草稿”

# [Same as above until Step 6]

# Find and click "发布" button (NOT 存草稿)
npx agent-browser --cdp 9222 click @e<publish_ref>

重要规则

1. 🚨 切勿自动发布——默认始终保存为草稿
2. 🔌 始终使用 --cdp 9222——每条命令都必须包含此标志
3. ❌ 切勿使用 close 命令——这会关闭用户的浏览器！
4. 📸 经常拍摄快照——页面状态会变化，始终获取最新的引用
5. ⏳ 上传后等待——留出时间处理图片
6. 🔄 妥善处理登录——如有需要，引导用户在浏览器中登录
7. 📝 遵守内容限制——标题约 20 个字符，正文约 1000 个字符
8. 🖼️ 图片限制——每篇笔记 1–18 张图片

故障排查

CDP 连接失败

如果 snapshot 无法连接：

1. 确认 Chrome 正在使用调试端口运行：

   lsof -i :9222
   

2. 如果未运行，请启动 Chrome：

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

3. 检查端口冲突——可能有其他进程正在使用 9222

会话过期

如果之前已登录，但现在看到登录页面：

1. 告诉用户在浏览器中重新登录：“您的登录状态已过期，请在浏览器中重新扫码登录”

2. 等待用户确认

3. 拍摄新快照进行验证

上传失败

• 检查图片文件是否存在且格式有效（jpg、png、gif、webp）
• 检查文件大小（小红书有大小限制）
• 尝试逐张上传
• 截图查看实际错误：

  npx agent-browser --cdp 9222 screenshot error.png
  

找不到元素

• 页面结构可能已更改
• 交互前始终拍摄最新快照
• 查找引用不同的相似元素

为什么使用 agent-browser 的 CDP 模式？

优势：

1. 每个会话无需扫描二维码——登录状态会保留在浏览器中
2. 使用用户自己的浏览器——沿用现有 Cookie 和偏好设置
3. 命令行简单——使用相同的 agent-browser 命令，只需添加 --cdp 9222
4. 无需 MCP 服务——直接调用 CLI
5. 身份验证可靠——由浏览器管理会话

权衡：

1. 需要浏览器正在运行——用户必须使用调试端口启动 Chrome
2. 单个浏览器实例——一次只能有一个会话
3. 首次登录需手动完成——用户需在浏览器中首次扫描二维码

支持的内容

类型	详情
图片	JPG、PNG、GIF、WebP（1–18 张图片）
标题	建议不超过约 20 个字符
正文	不超过约 1000 个字符
标签	建议最多添加 5 个标签

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

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

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

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

一句话：把图文直接发到小红书草稿箱。 它连接的是你已经登录的浏览器，不需要你交出账号密码， 而且永远只存草稿，是否发布由你在小红书里决定。

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

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

想先看哪个？（直接回车 = 1）
  1. 先看看整个流程长什么样（示例）
  2. 把这组图发成草稿
  3. 先讲讲要准备什么

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

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

四、毕业

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

关于前置条件：这个技能需要一个启用了调试端口的 Chrome，并且已登录小红书创作服务平台。 新手模式下不要提前索取——先用示例数据演示完，到第四步真正运行时再引导他配置， 并说清楚在哪里配置、如何获取。新手最容易在这一步流失。