xiaohongshu-publisher

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Xiaohongshu Publisher (小红书发布器)

小红书发布器

Publish images and notes to Xiaohongshu (小红书) Creator Platform using agent-browser with CDP (Chrome DevTools Protocol) mode.

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

Architecture: CDP Mode

架构：CDP模式

This skill uses CDP mode - connecting to an existing browser instance where the user is already logged in. This approach:

Eliminates QR code scanning - User logs in once in their browser
Leverages existing session - Uses the browser's cookies and auth state
More stable - No need to manage auth state files
agent-browser CLI - Simple command-line interface with
```
--cdp
```
flag

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

无需扫码登录：用户在浏览器中登录一次即可
复用现有会话：利用浏览器的Cookie和认证状态
更稳定：无需管理认证状态文件
agent-browser CLI：简单的命令行界面，使用
```
--cdp
```
参数

⚠️ IMPORTANT: Draft Mode by Default

⚠️ 重要提示：默认草稿模式

This skill ALWAYS saves notes as DRAFT by default. It will NEVER auto-publish.

Only click the "发布" (publish) button if the user EXPLICITLY requests immediate publishing with phrases like:

"直接发布" / "立即发布" / "马上发布"
"publish now" / "publish directly" / "publish immediately"
"不要草稿，直接发" / "不存草稿"

If unsure, ALWAYS save as draft and let user review before publishing.

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

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

"直接发布" / "立即发布" / "马上发布"
"publish now" / "publish directly" / "publish immediately"
"不要草稿，直接发" / "不存草稿"

若有任何不确定，始终保存为草稿，让用户审核后再发布。

Prerequisites

前置条件

1. Launch Chrome with Remote Debugging

1. 启动带远程调试的Chrome浏览器

Before using this skill, the user must launch Chrome with remote debugging enabled:

macOS:

bash

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

Or create an alias in ~/.zshrc or ~/.bashrc:

bash

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

Then simply run:

chrome-debug

使用本技能前，用户必须启动启用了远程调试的Chrome浏览器：

macOS：

bash

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

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

bash

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

之后只需运行：

chrome-debug

2. Login to Xiaohongshu

2. 登录小红书

In the Chrome browser (with debug port), navigate to:

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

Login using QR code scan with Xiaohongshu App. This only needs to be done once - the session persists in the browser.

Note: After login, you can minimize the browser window to the Dock. The browser must stay running (not closed) for CDP to work, but you don't need to see it.

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

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

使用小红书APP扫码登录。只需操作一次——会话会在浏览器中保持。

注意：登录后，您可以将浏览器窗口最小化到程序坞。浏览器必须保持运行状态（不能关闭）才能让CDP正常工作，但无需一直显示窗口。

3. Python Dependencies

3. Python依赖

bash

pip install Pillow pyobjc-framework-Cocoa

bash

pip install Pillow pyobjc-framework-Cocoa

agent-browser CDP Commands Reference

agent-browser CDP命令参考

All commands use the

--cdp 9222

flag to connect to the existing Chrome browser:

bash

undefined

所有命令都使用

--cdp 9222

参数来连接到现有Chrome浏览器：

bash

undefined

Navigation

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

npx agent-browser --cdp 9222 click @e5 # 通过元素引用点击元素 npx agent-browser --cdp 9222 fill @e2 "text" # 填充输入框 npx agent-browser --cdp 9222 type @e3 "text" # 在元素中输入文本 npx agent-browser --cdp 9222 upload @e4 "/path/to/file.jpg" # 上传文件

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

npx agent-browser --cdp 9222 press Enter # 按下按键 npx agent-browser --cdp 9222 wait 2000 # 等待指定毫秒数 npx agent-browser --cdp 9222 wait --text "发布" # 等待文本出现

Screenshot

截图

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


**Important**:
- Element refs (like @e5) come from `snapshot -i` output. Always take a snapshot before interacting.
- The `--cdp 9222` flag connects to the browser's debug port instead of launching a new browser.
- Do NOT use the `close` command as it would close the user's browser!

npx agent-browser --cdp 9222 screenshot # 截取屏幕截图


**重要提示**：
- 元素引用（如@e5）来自`snapshot -i`的输出。交互前务必先获取快照。
- `--cdp 9222`参数用于连接到浏览器的调试端口，而非启动新浏览器。
- 请勿使用`close`命令，否则会关闭用户的浏览器！

Scripts

脚本

Located in

~/.claude/skills/xiaohongshu-publisher/scripts/

脚本位于

~/.claude/skills/xiaohongshu-publisher/scripts/

：

parse_note.py

Parse Markdown and extract structured data for Xiaohongshu notes:

bash

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

Returns JSON with: title, content, images (list of paths), tags

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

bash

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

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

copy_to_clipboard.py

Copy image to system clipboard for pasting:

bash

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

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

bash

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

Workflow

工作流程

Phase 0: Verify Browser Connection

阶段0：验证浏览器连接

CRITICAL: First verify that the CDP browser is running and connected.

Check if browser is accessible:
bash
```
npx agent-browser --cdp 9222 snapshot -i
```
- If connection fails, tell user: "请先启动带调试端口的 Chrome 浏览器"

Provide startup command if needed:

bash

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

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

检查浏览器是否可访问：
bash
```
npx agent-browser --cdp 9222 snapshot -i
```
- 若连接失败，告知用户："请先启动带调试端口的Chrome浏览器"

必要时提供启动命令：

bash

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

Phase 1: Check Login Status

阶段1：检查登录状态

Navigate to creator page (if not already there):

bash

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

Take snapshot to check login status:
bash
```
npx agent-browser --cdp 9222 snapshot -i
```
- Look for "上传图片" button = logged in
- Look for QR code or login form = need to login
If login required:
- Tell user: "请在浏览器中扫码登录小红书，登录后告诉我"
- Wait for user confirmation
- Take new snapshot to verify login success

导航至创作者页面（若尚未在该页面）：

bash

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

获取快照以检查登录状态：
bash
```
npx agent-browser --cdp 9222 snapshot -i
```
- 若看到"上传图片"按钮 = 已登录
- 若看到二维码或登录表单 = 需要登录
若需要登录：
- 告知用户："请在浏览器中扫码登录小红书，登录后告诉我"
- 等待用户确认
- 获取新快照以验证登录成功

Phase 2: Parse Content

阶段2：解析内容

If user provides a markdown file, parse it:

bash

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

Output JSON:

json

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

若用户提供了Markdown文件，解析该文件：

bash

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

输出JSON：

json

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

Phase 3: Upload Images

阶段3：上传图片

Take snapshot to get current element refs:
bash
```
npx agent-browser --cdp 9222 snapshot -i
```
Find the upload input element (look for file input or "上传图片" area)

Upload images:

bash

# 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"

Wait for uploads to complete:
bash
```
npx agent-browser --cdp 9222 wait 3000
```
Take new snapshot after upload completes

获取快照以获取当前元素引用：
bash
```
npx agent-browser --cdp 9222 snapshot -i
```
找到上传输入元素（查找文件输入框或"上传图片"区域）

上传图片：

bash

# 单张图片
npx agent-browser --cdp 9222 upload @e<ref> "/path/to/image1.jpg"

# 多张图片（逗号分隔）
npx agent-browser --cdp 9222 upload @e<ref> "/path/to/img1.jpg,/path/to/img2.jpg,/path/to/img3.jpg"

等待上传完成：
bash
```
npx agent-browser --cdp 9222 wait 3000
```
上传完成后获取新快照

Phase 4: Fill Title and Content

阶段4：填写标题和内容

Find title input field from snapshot (placeholder usually contains "标题")

Fill title:

bash

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

Title limit: ~20 characters recommended

Find content/description field (placeholder usually contains "描述" or "正文")

Fill content:

bash

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

Content limit: ~1000 characters max

从快照中找到标题输入框（占位符通常包含"标题"）

填写标题：

bash

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

标题建议：约20个字符

找到内容/描述输入框（占位符通常包含"描述"或"正文"）

填写内容：

bash

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

内容限制：最多约1000个字符

Phase 5: Add Tags (Optional)

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

If tags are provided:

Find tag input area from snapshot

Add each tag:

bash

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

Repeat for each tag (max 5 recommended)

若提供了标签：

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

添加每个标签：

bash

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个）

Phase 6: Save as Draft (Default) or Publish

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

Default Action: Save as Draft

默认操作：保存为草稿

Find "存草稿" button from snapshot

Click draft button:

bash

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

Verify success - take snapshot or wait for confirmation

从快照中找到"存草稿"按钮

点击草稿按钮：

bash

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

验证成功 - 获取快照或等待确认信息

Only If User Explicitly Requests Publishing

仅当用户明确要求发布时

ONLY if user said "直接发布", "立即发布", or "publish now":

Find "发布" button from snapshot

Click publish button:

bash

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

When in doubt, ALWAYS save as draft.

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

从快照中找到"发布"按钮

点击发布按钮：

bash

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

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

Phase 7: Verify and Report

阶段7：验证并反馈

Take final snapshot to verify success:

bash

npx agent-browser --cdp 9222 snapshot -i

Report to user:
- Draft saved: "草稿已保存！请在小红书 App 中预览和发布。"
- Published: "笔记已发布成功！"

获取最终快照以验证成功：

bash

npx agent-browser --cdp 9222 snapshot -i

向用户反馈：
- 草稿已保存："草稿已保存！请在小红书APP中预览和发布。"
- 已发布："笔记已发布成功！"

Example Flows

示例流程

Example 1: Basic Image Publish

示例1：基础图片发布

User: "发布这些图片到小红书: /path/to/photo1.jpg, /path/to/photo2.jpg, 标题是'周末好去处'"

bash

undefined

用户："发布这些图片到小红书: /path/to/photo1.jpg, /path/to/photo2.jpg, 标题是'周末好去处'"

bash

undefined

1. Verify connection and check login

1. 验证连接并检查登录状态

npx agent-browser --cdp 9222 snapshot -i

2. Navigate to publish page (if needed)

2. 导航至发布页面（若需要）

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

3. Take snapshot, verify "上传图片" visible

3. 获取快照，验证"上传图片"按钮可见

npx agent-browser --cdp 9222 snapshot -i

4. Upload images

4. 上传图片

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

5. 获取新快照，填写标题

npx agent-browser --cdp 9222 snapshot -i npx agent-browser --cdp 9222 fill @e<title_ref> "周末好去处"

6. Save as draft

6. 保存为草稿

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

undefined

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

undefined

Example 2: Markdown File Publish

示例2：Markdown文件发布

User: "把这个 markdown 发到小红书: /path/to/note.md"

bash

undefined

用户："把这个markdown发到小红书: /path/to/note.md"

bash

undefined

1. Parse markdown

1. 解析Markdown

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

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

2. 从JSON输出中提取：标题、内容、图片、标签

3. Verify connection

3. 验证连接

npx agent-browser --cdp 9222 snapshot -i

4. Upload all images from parsed result

4. 上传解析结果中的所有图片

npx agent-browser --cdp 9222 upload @e<ref> "/path/to/img1.jpg,/path/to/img2.jpg"

5. Fill title and content

5. 填写标题和内容

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

6. 若有标签则添加

npx agent-browser --cdp 9222 fill @e<tag_ref> "tag1" npx agent-browser --cdp 9222 press Enter

7. Save as draft

7. 保存为草稿

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

undefined

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

undefined

Example 3: Direct Publish

示例3：直接发布

User: "直接发布这些图到小红书，不用草稿"

bash

undefined

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

bash

undefined

[Same as above until Step 6]

[上述步骤执行至第6步]

Find and click "发布" button (NOT 存草稿)

找到并点击"发布"按钮（而非"存草稿"）

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

undefined

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

undefined

Critical Rules

关键规则

🚨 NEVER AUTO-PUBLISH - ALWAYS save as draft by default
🔌 ALWAYS USE --cdp 9222 - Every command must include this flag
❌ NEVER USE close COMMAND - Would close user's browser!
📸 TAKE SNAPSHOTS FREQUENTLY - Page state changes, always get fresh refs
⏳ WAIT AFTER UPLOADS - Give time for images to process
🔄 HANDLE LOGIN GRACEFULLY - Guide user to login in browser if needed
📝 RESPECT CONTENT LIMITS - Title ~20 chars, Content ~1000 chars
🖼️ IMAGE LIMITS - 1-18 images per note

🚨 绝不自动发布 - 默认始终保存为草稿
🔌 始终使用--cdp 9222 - 每个命令都必须包含该参数
❌ 绝不使用close命令 - 否则会关闭用户的浏览器！
📸 频繁获取快照 - 页面状态会变化，始终获取最新的元素引用
⏳ 上传后等待 - 给图片处理留出时间
🔄 优雅处理登录 - 若需要，引导用户在浏览器中登录
📝 遵守内容限制 - 标题约20字符，内容约1000字符
🖼️ 图片限制 - 每条笔记1-18张图片

Troubleshooting

故障排除

CDP Connection Failed

CDP连接失败

snapshot

fails to connect:

Verify Chrome is running with debug port:
bash
```
lsof -i :9222
```

If not running, start Chrome:

bash

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

Check for port conflicts - another process might be using 9222

若

snapshot

无法连接：

验证Chrome是否带调试端口运行：
bash
```
lsof -i :9222
```

若未运行，启动Chrome：

bash

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

检查端口冲突 - 其他进程可能在使用9222端口

Session Expired

会话过期

If previously logged in but now seeing login page:

Tell user to re-login in browser: "您的登录状态已过期，请在浏览器中重新扫码登录"
Wait for user confirmation
Take new snapshot to verify

若之前已登录但现在显示登录页面：

告知用户重新在浏览器中登录："您的登录状态已过期，请在浏览器中重新扫码登录"
等待用户确认
获取新快照以验证

Upload Failed

上传失败

Check image file exists and is valid format (jpg, png, gif, webp)
Check file size (Xiaohongshu has limits)
Try uploading one at a time

Take screenshot to see actual error:

bash

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

检查图片文件是否存在且格式有效（jpg、png、gif、webp）
检查文件大小（小红书有大小限制）
尝试逐个上传图片

截图查看实际错误：

bash

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

Element Not Found

元素未找到

Page structure may have changed
Always take a fresh snapshot before interacting
Look for similar elements with different refs

页面结构可能已更改
交互前始终获取新快照
查找具有不同引用的相似元素

Why CDP Mode with agent-browser?

为什么选择带CDP模式的agent-browser？

Advantages:

优势：

No QR code scanning per session - Login persists in browser
User's own browser - Existing cookies and preferences
Simple CLI - Same agent-browser commands, just add
```
--cdp 9222
```
No MCP server - Direct CLI invocation
Reliable auth - Browser handles session management

无需每次会话扫码 - 登录状态在浏览器中持久保存
使用用户自身浏览器 - 现有Cookie和偏好设置
简单CLI - 相同的agent-browser命令，只需添加
```
--cdp 9222
```
无需MCP服务器 - 直接调用CLI
可靠的认证 - 浏览器处理会话管理

Trade-offs:

权衡：

Requires browser running - User must start Chrome with debug port
Single browser instance - One session at a time
Manual first login - User does initial QR scan in browser

需要浏览器保持运行 - 用户必须启动带调试端口的Chrome
单浏览器实例 - 一次只能处理一个会话
首次登录需手动操作 - 用户需在浏览器中完成首次扫码登录

Supported Content

支持的内容

Type	Details
Images	JPG, PNG, GIF, WebP (1-18 images)
Title	Up to ~20 characters recommended
Content	Up to ~1000 characters
Tags	Up to 5 tags recommended

类型	详情
图片	JPG、PNG、GIF、WebP（1-18张）
标题	建议最多约20个字符
内容	最多约1000个字符
标签	建议最多5个