一键发布！用 Claude Skills 将 Markdown 文章自动发布到 X 平台

前言

作为内容创作者，你是否也遇到过这样的烦恼：

• 在本地用 Markdown 写好了文章，却要手动复制粘贴到 X 平台
• 图片需要一张张上传，还要调整位置
• 格式总是对不齐，标题、加粗、代码块需要重新设置
• 一篇文章发布下来，耗费大量时间在这些重复劳动上

今天要介绍的 blog-to-x Claude Skill，就是为了解决这些痛点而生的。它可以让你一键将 Markdown 文章发布到 X 平台，自动处理格式转换和图片上传，真正做到”写完即发布”。

什么是 blog-to-x？

blog-to-x 是一个 Claude Skill，它利用 Claude Code 和 Playwright MCP 浏览器自动化工具，实现了从 Markdown 文件到 X Articles 的自动发布流程。

核心功能

✅ 智能解析 Markdown：自动提取标题、封面图、内容图片和 HTML 格式
✅ 封面图上传：自动识别第一张图片作为封面
✅ 精确图片定位：使用 block index 技术精确定位每张图片的插入位置
✅ 格式保留：支持 H2 标题、加粗、链接、列表、代码块等格式
✅ 剪贴板技术：通过系统剪贴板高效传输 HTML 和图片
✅ 草稿保存：自动保存为草稿，不会意外发布

开始使用前的准备

系统要求

在开始之前，请确保你的系统满足以下要求：

1. **Node.js 18+**（用于 Playwright MCP）
2. **Python 3.9+**（用于 Markdown 解析和剪贴板操作）
3. X Premium Plus 订阅（X Articles 功能需要）
4. Claude Code（运行 Skills 的环境）

依赖安装

1. 安装 Python 依赖

根据你的操作系统，安装相应的依赖包：

macOS 用户：

pip install Pillow pyobjc-framework-Cocoa

Windows 用户：

pip install Pillow pywin32 clip-util

这些依赖用于：

• Pillow：图片格式转换和压缩
• pyobjc-framework-Cocoa（macOS）：访问 macOS 剪贴板
• pywin32 和 clip-util（Windows）：访问 Windows 剪贴板

2. 配置 Playwright MCP 服务器

blog-to-x 依赖 Playwright MCP 来实现浏览器自动化。你需要在 Claude Code 的 MCP 配置文件中添加 Playwright 服务器。

找到你的 MCP 配置文件（通常在 ~/.config/claude-code/mcp_settings.json 或类似位置），添加以下配置：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

配置完成后，重启 Claude Code 使配置生效。

安装 blog-to-x Skill

步骤 1：克隆项目

git clone https://github.com/kkhh26864/claude-skills.git

步骤 2：放置到 Claude Code 可访问的位置

将克隆的项目放置到 Claude Code 可以访问的位置。通常情况下，你可以将其放在：

~/.claude/skills/

或者直接将 .claude/skills 目录复制到你的项目目录中。

步骤 3：配置 Claude Code 识别 Skills

确保 Claude Code 配置中指向了正确的 skills 目录。具体配置方法请参考 Claude Code 官方文档。

如何使用 blog-to-x

使用非常简单，只需要用自然语言告诉 Claude 你想做什么即可。

触发关键词

以下表达方式都可以触发 blog-to-x：

• “Publish to X”
• “Post article to Twitter”
• “X article”
• “X Premium article publishing”
• “发布到 X”
• “发布文章到 Twitter”

完整发布流程

假设你有一篇文章 my-article.md，想要发布到 X 平台：

在 Claude Code 中输入：

请将 /Users/yourname/my-article.md 发布到 X

自动化流程：

Claude 会自动执行以下步骤：

1. 解析 Markdown 文件

   • 提取标题（从 H1/H2 或第一行）
   • 识别封面图（第一张图片）
   • 提取内容图片及其 block index 位置
   • 将 Markdown 转换为 HTML

2. 打开浏览器并导航

   • 打开 X Articles 编辑器
   • 点击创建按钮

3. 上传封面图

   • 将封面图复制到剪贴板
   • 粘贴上传

4. 填充标题和内容

   • 输入文章标题
   • 将 HTML 内容复制到剪贴板
   • 粘贴到编辑器（保留富文本格式）

5. 插入内容图片

   • 按照 block index 从高到低的顺序插入图片
   • 确保每张图片出现在正确的位置

6. 保存草稿

   • 自动保存为草稿（不会自动发布）

Markdown 文件格式要求

为了获得最佳效果，你的 Markdown 文件应该遵循以下格式：

---
title: 文章标题（可选）
---

# 文章标题

![封面图](cover.jpg)

这是第一段内容。

## 小标题

这是第二段内容。

![内容图片](image1.jpg)

**加粗文本**和[链接](https://example.com)

- 列表项 1
- 列表项 2

```代码块```

支持的 Markdown 格式

blog-to-x 支持以下 Markdown 格式的自动转换：

Markdown 格式	X Articles 效果	说明
# 标题	文章标题	H1 会被提取为标题
## 二级标题	H2 标题	保留 H2 格式
**加粗**	加粗	富文本加粗
[链接](URL)	超链接	可点击链接
- 列表项	无序列表	保留列表格式
1. 列表项	有序列表	保留列表格式
```代码```	引用块	转换为 blockquote
> 引用	引用块	blockquote 格式
	内容图片	自动上传和定位

注意： 代码块在 X Articles 中会被转换为引用块（blockquote），因为 X 平台不支持原生代码块格式。

工作原理详解

1. Markdown 解析（parse_markdown.py）

parse_markdown.py 脚本负责解析 Markdown 文件，主要功能包括：

• 分块处理：将 Markdown 分割成逻辑块（段落、标题、代码块等）
• 提取标题：从 H1/H2 或第一行提取标题，并移除 H1 避免重复
• 图片定位：为每张图片分配 block index，记录其在文档中的位置
• HTML 转换：将 Markdown 转换为适合 X Articles 的 HTML 格式

输出 JSON 结构：

{
  "title": "文章标题",
  "cover_image": "/path/to/cover.jpg",
  "content_images": [
    {
      "path": "/path/to/image1.jpg",
      "block_index": 5
    }
  ],
  "html_content": "<h2>标题</h2><p>内容...</p>",
  "total_blocks": 10
}

2. 剪贴板操作（copy_to_clipboard.py）

copy_to_clipboard.py 脚本提供跨平台的剪贴板操作：

图片复制：

• 支持 JPG、PNG、GIF、WebP 格式
• 可选压缩（quality 参数）
• 自动调整尺寸（max 2000x2000）

HTML 复制：

• 保留富文本格式
• 支持从文件或标准输入读取

使用示例：

# 复制图片
python copy_to_clipboard.py image /path/to/image.jpg --quality 80

# 复制 HTML
python copy_to_clipboard.py html "<p>Hello</p>"
python copy_to_clipboard.py html --file content.html

3. 浏览器自动化（Playwright MCP）

Playwright MCP 使用可访问性快照（accessibility snapshots）而非截图，这使得：

• 响应更快（基于结构化数据而非像素）
• 更可靠（确定性操作，避免视觉识别的模糊性）
• 无需视觉模型（直接操作 DOM 元素）

4. 图片插入策略

blog-to-x 使用反向插入策略（从高到低的 block index）：

• 避免位置偏移：先插入后面的图片，前面的 block index 不会变化
• 提高效率：减少重新计算位置的需要
• 确保准确：每张图片都能插入到正确的位置

常见问题解答

Q1: 我没有 X Premium Plus 订阅可以用吗？

不行。X Articles 功能只对 Premium Plus 用户开放，这是 X 平台的限制。

Q2: 为什么图片需要通过剪贴板上传？

这是 X Articles 编辑器的限制。通过剪贴板上传是最可靠的方式，可以保证图片格式和质量。

Q3: 代码块为什么变成了引用块？

X Articles 不支持原生代码块格式。为了保留代码的可读性，blog-to-x 将代码块转换为引用块（blockquote）。

Q4: 文章会自动发布吗？

不会。blog-to-x 只会保存为草稿，你需要手动检查并点击发布按钮。这是出于安全考虑的设计。

Q5: 支持 YAML frontmatter 吗？

支持。你可以在 Markdown 文件开头使用 YAML frontmatter 定义标题等元数据。

Q6: 图片路径支持相对路径吗？

支持。脚本会自动处理相对路径和绝对路径。

效率优化技巧

blog-to-x 采用了多项效率优化策略：

1. 减少等待时间：只在必要时使用 browser_wait_for（如上传完成、页面加载）
2. 避免冗余快照：直接使用操作返回的页面状态，而非单独调用快照
3. 并行处理：将无依赖的操作同时执行
4. 前置准备：在浏览器自动化前完成所有数据解析
5. 智能插入：反向插入图片避免位置计算

这些优化使得发布过程更快、更稳定。

实用场景

场景 1：技术博客发布

你在本地用 Markdown 写技术文章，包含代码示例和技术图表。blog-to-x 可以保持代码格式（转为引用块）和图片排版。

场景 2：定期内容更新

如果你有定期发布文章的习惯，blog-to-x 可以大幅减少发布时间，让你专注于写作。

场景 3：多平台内容管理

虽然 blog-to-x 目前只支持 X，但 Markdown 格式的文章可以轻松发布到其他平台，实现多平台内容管理。

总结

blog-to-x 是一个高效、可靠的自动化工具，它让 Markdown 文章发布到 X 平台变得异常简单。通过智能的 Markdown 解析、剪贴板技术和浏览器自动化，实现了真正的”写完即发布”。

项目地址

• GitHub：https://github.com/kkhh26864/claude-skills
• 欢迎 Star 和贡献代码！

开始你的自动化发布之旅

现在就安装 blog-to-x，体验一键发布的效率提升！如果遇到任何问题，欢迎在 GitHub 提 Issue。

---

写在最后：自动化工具的意义在于让我们从重复劳动中解放出来，把时间和精力投入到更有创造性的工作中。希望 blog-to-x 能成为你内容创作路上的好帮手！