新闻详情

新闻详情

首页 / 资讯中心 / 详情

Claude Code Skill 实战:用 Playwright 搭建内容创作自动化工具,从规划到多平台发布全链路

发布时间:2026/10/2 20:27:13来源:尧图网络
Claude Code Skill 实战:用 Playwright 搭建内容创作自动化工具,从规划到多平台发布全链路
1. 为什么我要把内容创作拆成 Claude Code Skill 加 Playwright 两条腿先说清楚这套东西是什么、能做什么、适合谁。Claude Code Skill 是 Claude Code 里的一种扩展机制本质是一个放在~/.claude/skills/下的目录里面用SKILL.md定义子命令和工作流配合references/、scripts/、templates/提供知识、脚本和模板。Playwright 是浏览器自动化库能驱动真实 Chrome 完成点击、填表、截图。把两者拼起来就得到一个「内容创作自动化工具」给一个主题它帮你规划系列大纲、按平台生成不同形态的内容、再用浏览器自动化把稿子发出去。适合谁需要跨平台分发的开发者与创作者。比如你要写一个「Claude Code 30 天课程」系列同一批知识点要同时出现在 CSDN、小红书、抖音、知识星球。每个平台的标题规则、正文结构、字数范围、标签策略都不一样纯手工改稿会把人耗死。我试过连续两周手动搬运最后的结果是 CSDN 更新了三篇小红书断更抖音脚本只写了个开头。核心矛盾有三个。第一是规划难一个主题要拆成入门、基础、进阶、精通四段每段还得有具体选题靠脑子想容易漏。第二是适配烦同一个知识点在 CSDN 是 3000 字技术长文在小红书是 300 字加五张卡片图在抖音是 60 秒口播脚本形态差异极大。第三是发布累登录态、编辑器类型、发布按钮位置每个平台都不同复制粘贴加手动排版一篇稿子发四个平台要半小时以上。我的解法是让每一层只做自己擅长的事。Claude 负责内容规划和文字生成因为它理解知识体系、会组织语言。WebSearch 负责搜集最新素材保证时效性。Python 脚本加 Playwright 负责浏览器自动化发布因为它是确定性的机械操作。content-plan.md作为单一数据源记录所有进度状态避免多个配置文件互相打架。这套结构里Skill 是入口和编排层Playwright 是执行层。你不需要一次性全做完可以只用规划不发布也可以只生成 CSDN 不管小红书。每个环节都能单独跑这是它比「一键全自动黑盒」更实用的地方。下面我从 Skill 目录结构开始一步步把可复制的配置和脚本给你。2. TaoToken 前置给 Claude Code 接上稳定的模型通道在写 Skill 之前得先保证 Claude Code 能正常调用模型。Claude Code 默认走 Anthropic 官方通道但很多人在国内网络环境下会遇到连接不稳定、请求超时的问题。这时候可以用 TaoToken 作为模型接入层它提供兼容 Anthropic 的 API 端点把 Base URL 指过去就能用。你需要准备三样东西Base URL、API Key、Model ID。Base URL 是https://taotoken.net/apiAPI Key 在控制台的 API Keys 页面创建Model ID 填你套餐里支持的 Claude 模型标识。这三件套在后面的 Claude Code 配置、Cline MCP、Codex auth.json 里都会反复出现先记牢。具体操作打开 https://taotoken.net/api-keys 创建 Key复制保存。然后配置 Claude Code 的环境变量。在~/.claude/settings.json里加入{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } }如果你用的是 Claude Code 的 Anthropic 兼容模式也可以直接在终端里 exportexport ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的Key export ANTHROPIC_MODELclaude-sonnet-4-20250514配置完先验证一下通道是否通。用 curl 发一个最小请求curl https://taotoken.net/api/v1/messages \ -H x-api-key: sk-你的Key \ -H anthropic-version: 2023-06-01 \ -H content-type: application/json \ -d { model: claude-sonnet-4-20250514, max_tokens: 64, messages: [{role: user, content: 回复 OK}] }返回里能看到content字段和OK就说明通道正常。如果返回 401检查 Key 是否复制完整、有没有多余空格。如果返回 model not found检查 Model ID 是否和套餐匹配。这一步为什么放在最前面因为 Skill 里的规划、生成、WebSearch 全都依赖模型调用。通道不稳后面所有步骤都会卡住。我踩过的坑是 Key 里混进了一个换行符排查了半小时才发现。建议创建后先粘到纯文本编辑器里看一眼。通道通了之后Claude Code 就能正常执行/content-studio plan这类命令。接下来我们进入 Skill 的目录结构和配置骨架。3. 可复制配置Skill 目录骨架与 settings 片段这一节给你可以直接复制的文件结构和配置。Skill 安装在~/.claude/skills/content-studio/下一共 13 个文件分四层入口、参考、脚本、模板。目录结构如下content-studio/ ├── SKILL.md ├── references/ │ ├── platform-formats.md │ ├── course-planning.md │ └── book-breakdown.md ├── scripts/ │ ├── content_manager.py │ ├── publish_csdn.py │ ├── publish_xiaohongshu.py │ ├── publish_douyin.py │ └── publish_zsxq.py ├── templates/ │ ├── content-plan-template.md │ └── card-template.html └── docs/ ├── design.md └── usage.mdSKILL.md是主入口控制在 2000 字以内只定义 6 个子命令init、plan、create、publish、auto、status。详细内容放references/按需加载不浪费上下文窗口。这是 Claude Code Skill 的最佳实践入口轻量细节外置。SKILL.md的核心片段--- name: content-studio description: 内容创作自动化工具从规划到多平台发布全链路 --- # Content Studio ## 子命令 - /content-studio init 初始化工作目录和配置 - /content-studio plan 主题 --mode course --days 30 规划系列 - /content-studio create --day today 生成今日多平台内容 - /content-studio publish --day today --platforms csdn 发布 - /content-studio auto --day today 生成加发布 - /content-studio status 查看进度 ## 工作流 1. 读取 content-plan.md 获取当前进度 2. 按平台格式规范生成内容 3. 调用 scripts/ 下的发布脚本 4. 更新 content-plan.md 状态初始化后会生成~/.content-studio/config.yamlworkspace: ~/content-studio-output platforms: csdn: enabled: true method: playwright profile_dir: ~/.content-studio/browser/csdn xiaohongshu: enabled: true method: playwright profile_dir: ~/.content-studio/browser/xhs douyin: enabled: true method: playwright profile_dir: ~/.content-studio/browser/douyin zhishixingqiu: enabled: true method: api group_id: cookie: preferences: language: zh-CN tone: professional-casual code_examples: true default_platforms: [csdn, xiaohongshu] playwright: headless: false slow_mo: 500 browser: chromium如果你用 Cline 的 MCP 模式接入配置片段是{ mcpServers: { content-studio: { command: python, args: [~/.claude/skills/content-studio/scripts/content_manager.py], env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-20250514 } } } }注意三件套必须齐全Base URL 指向https://taotoken.net/apiKey 用你创建的Model ID 填套餐支持的模型。缺任何一个都会在调用时报错。references/platform-formats.md是平台格式规范300 多行包含标题规则、正文结构、字数范围、标签策略、发布时间建议。比如 CSDN 要求 3000 到 5000 字技术长文含代码块和表格小红书要求 300 字精炼加五张 1080x1440 卡片图抖音要求 60 秒口播脚本Hook 3 秒、痛点 5 秒、演示 30 秒、总结 10 秒。templates/card-template.html是小红书卡片模板内置四种样式封面卡片、内容卡片、代码卡片、总结卡片。全部 1080x1440pxCSS 内联无外部依赖。用 Playwright 截图就能生成 PNG。配置写完后运行/content-studio init验证目录是否生成。如果报ModuleNotFoundError: No module named yaml执行pip install pyyaml playwright。如果报 Chromium 未安装先别急着下载 170MB看下一节的系统 Chrome 方案。4. 验证请求从规划到发布跑通一次完整链路配置就绪后跑一次完整链路验证。先规划一个 30 天课程/content-studio plan Claude Code --mode course --days 30 \ --platforms csdn,xiaohongshu,douyin,zhishixingqiuClaude 会通过 WebSearch 搜集该主题的社区热门问题、竞品文章、最新动态然后按四阶段递进规划。入门篇占 20%基础篇 30%进阶篇 30%精通篇 20%。生成的content-plan.md片段## Phase 1: 入门篇 (Day 1-6) - Day 1: Claude Code 是什么5 分钟快速了解 - Day 2: 安装配置全攻略Windows/Mac/Linux - Day 3: 你的第一次 AI 编程体验 - Day 4: Claude Code vs Cursor vs GitHub Copilot 横评 - Day 5: 核心概念Tool、Skill、MCP 三大支柱 - Day 6: 【实战】用 Claude Code 完成一个 TODO 应用每条包含标题、大纲、案例方向、目标平台、状态追踪。状态字段是单一数据源create和publish都读它。然后生成今日内容/content-studio create --day today输出目录结构~/content-studio-output/ ├── content-plan.md ├── output/ │ └── 2026-04-03/ │ ├── csdn/ │ │ └── claude-code-intro.md │ ├── xiaohongshu/ │ │ ├── claude-code-intro.md │ │ └── cards/ │ │ ├── card-1-cover.html │ │ ├── card-1.png │ │ ├── card-2.html │ │ └── card-2.png │ ├── douyin/ │ │ └── script.md │ └── zhishixingqiu/ │ └── post.mdCSDN 版是 3000 到 5000 字技术长文含完整代码示例和架构图描述。小红书版是 300 字精炼加五张卡片图。抖音版是 60 秒口播脚本。知识星球版是实战经验帖加踩坑记录。发布到 CSDN/content-studio publish --day today --platforms csdn发布脚本用 Playwright 持久化登录。首次运行加--login弹出 Chrome 让你手动登录登录态自动保存到~/.content-studio/browser/csdn/。之后每次发布自动复用不需要反复复制 Cookie。为什么用系统 Chrome 而不是 Playwright 自带的 Chromium自带 Chromium 需要额外下载 170MB 以上而且部分网站会检测自动化浏览器特征。直接用系统已安装的 Chrome加channelchrome参数更快更稳context await p.chromium.launch_persistent_context( profile_dir, channelchrome, headlessFalse, args[--disable-blink-featuresAutomationControlled] )CSDN 编辑器不是简单的 textarea用的是复杂富文本编辑器。第一版只找 CodeMirror结果报Editor not found, content may need manual paste。改进后做多类型检测result await page.evaluate(() { const cms document.querySelectorAll(.CodeMirror); for (const cm of cms) { if (cm.CodeMirror) return { found: true, type: codemirror }; } if (window.monaco) return { found: true, type: monaco }; const ce document.querySelector([contenteditabletrue]); if (ce) return { found: true, type: contenteditable }; return { found: false, type: none }; })根据类型用不同方式填充CodeMirror 用.setValue()Monaco 用editors[0].setValue()contenteditable 用keyboard.type()。成功发布的日志Title: 我用 Claude Code 做了一个内容创作自动化 Skill Length: 3885 chars Tags: Claude Code, AI工具, 内容创作, 自动化, Skill Mode: Publish Title filled Editor type detected: contenteditable Content filled (3885 chars) Publish panel opened 内容已填入编辑器等待 30 秒... 流程完成. 当前页面: https://mp.csdn.net/mp_blog/creation/success/159797281文章 ID 159797281发布成功。验证请求这一步的关键是看日志里有没有Editor type detected和Content filled这两个字段确认内容真的进了编辑器而不是只打开了页面。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth这一节对照真实报错给你排查路径。这些错误我在调试过程中都遇到过按顺序排查基本能解决。401 Unauthorized。最常见的原因是 API Key 无效或过期。检查三件套Base URL 是否为https://taotoken.net/apiKey 是否从 https://taotoken.net/api-keys 正确复制Model ID 是否和套餐匹配。如果 Key 里有换行符或空格请求会直接 401。用 curl 单独测一次排除 Claude Code 配置层的干扰。local proxy failed。这个报错通常出现在 Claude Code 启动时说明它尝试走本地代理但连不上。检查settings.json里有没有残留的HTTP_PROXY或HTTPS_PROXY环境变量。如果有清掉再试。另外确认ANTHROPIC_BASE_URL没有被其他配置覆盖。多个配置文件同时存在时优先级容易乱建议只保留一处配置。reading choices 报错。这个出现在解析模型返回时通常是返回体结构不符合预期。可能原因有两个一是 Model ID 填错返回了错误信息而不是正常 content二是 max_tokens 设得太小返回被截断。把 max_tokens 调到 1024 以上再试。如果还报错打印完整返回体看结构。OAuth 相关报错。Claude Code 某些版本会走 OAuth 流程如果配置了 API Key 模式但 OAuth 缓存还在会冲突。解决方法是清掉~/.claude/下的 OAuth 缓存文件或者显式设置ANTHROPIC_AUTH_MODEapi_key。如果你用 Codex 的 auth.json确保里面只保留一种认证方式{ auth_mode: api_key, api_key: sk-你的Key, base_url: https://taotoken.net/api, model: claude-sonnet-4-20250514 }Playwright 相关报错。Executable doesnt exist at ...chrome-headless-shell.exe说明 Chromium 没装。两个方案一是playwright install chromium下载 170MB二是用系统 Chrome 加channelchrome。推荐第二个省时间还更稳。Windows GBK 编码报错。UnicodeEncodeError: gbk codec cant encode character是因为 Python 在 Windows 上默认用 GBK 输出遇到 emoji 就崩。脚本开头加import sys if sys.platform win32: sys.stdout.reconfigure(encodingutf-8, errorsreplace) sys.stderr.reconfigure(encodingutf-8, errorsreplace)Claude Code Bash 不支持交互式输入。原来的登录流程用input()等用户按回车但 Claude Code 的 Bash 工具没有 stdin直接 EOFError。改成自动轮询检测登录状态for i in range(180): await page.wait_for_timeout(1000) if passport not in page.url and login not in page.url: break最多等 3 分钟URL 不再包含登录页特征就认为登录成功。编辑器找不到。CSDN 编辑器类型会变用前面说的多类型检测。如果三种都没检测到可能是页面还没加载完加await page.wait_for_load_state(networkidle)再检测。排查顺序建议先确认模型通道通curl 测试再确认 Skill 目录结构完整最后确认 Playwright 能启动浏览器。三层分开排查比一上来就怀疑代码有效得多。6. 语义一致 CTA把这条链路接到你自己的项目里这套 Content Studio 的核心价值是把规划、生成、发布三段串成一条可复用的链路。规划难它自动生成从入门到精通的课程大纲适配烦同一知识点自动转成四种平台格式发布累Playwright 一键发到多个平台断更多定时任务自动执行保持更新节奏。如果你也在用 Claude Code这个 Skill 可以直接复用。把content-studio/目录拷贝到你的~/.claude/skills/下改一下config.yaml里的 workspace 路径和平台开关就能跑。首次发布记得加--login手动登录一次之后自动复用登录态。模型通道这块如果你遇到连接不稳定可以用 TaoToken 的兼容端点。三件套记牢Base URL 用https://taotoken.net/apiKey 在 https://taotoken.net/api-keys 创建Model ID 填套餐支持的模型。配置文档在 https://taotoken.net/doc 有详细说明。想先验证模型效果可以去 https://taotoken.net/chat 直接对话测试。长期做编码和 Agent 任务的话Coding Plan 在 https://taotoken.net/coding-plan 有套餐说明。后续我计划把发布脚本从 Python Playwright 迁移到 agent-browser CLI它用命令行直接操作浏览器snapshot命令输出无障碍树让 AI 能「看到」页面record命令能录制操作过程比写脚本更灵活。另外小红书和抖音的发布还在实测调优数据分析和 AI 配图也在规划中。这套东西不是一次写完的是边用边改出来的。你先跑通 CSDN 一条链路再逐步加平台比一上来全铺开要稳。
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

Mac剪贴板预测工具Paste:用上下文智能替代历史列表 2026/10/2 23:04:15

Mac剪贴板预测工具Paste:用上下文智能替代历史列表

1. 项目概述:Paste 是什么?它解决的是 Mac 用户每天都在经历却从未被正视的“剪贴板疲劳”Paste 这个名字乍看平平无奇,但当你把它和 “Show HN” 这个 Hacker News 的标志性前缀放在一起,再结合它在 Mac 平台上的具体行为——“s…

阅读更多 →
AI agent生产级地基:四层架构与并发实战 2026/10/2 23:04:15

AI agent生产级地基:四层架构与并发实战

1. 从9月22日热榜说起:三个项目为什么都在给AI agent造地基9月22日的GitHub热榜有个很明显的信号:前五名里有三个项目,方向都指向同一件事——给AI agent搭底层设施。不是做应用层,不是做UI,而是做“地基”。这个现象值…

阅读更多 →
AI Agent地基:四层基建拆解与从0到1落地路径 2026/10/2 23:04:14

AI Agent地基:四层基建拆解与从0到1落地路径

9.22 那期的 GitHub 热榜,我翻了好几遍,越看越觉得这期特别有代表性。前五名里三个项目,本质上都在做同一件事:给 AI agent 造地基。放在一年前,热榜前排通常被"当天就能跑出惊艳 demo"的应用型项目占领&…

阅读更多 →
DIY开放式硬件测试平台OpenRig:模块化铝型材机架全解析 2026/10/2 23:03:42

DIY开放式硬件测试平台OpenRig:模块化铝型材机架全解析

1. 为什么我把手头的机箱换成开放式裸测平台1.1 被机箱耽误的三个真实瞬间做硬件相关的工作,完全绕不开“机箱空间不够”这件事。去年年中,我接了一个深度学习工作站的升级任务,原本配置没问题,但要把显卡从旧卡换成40系列的越肩大…

阅读更多 →
VMware与Credential Guard冲突原理及彻底解决指南 2026/10/2 23:03:41

VMware与Credential Guard冲突原理及彻底解决指南

1. 问题本质与真实影响范围:这不是VMware的bug,而是Windows安全机制的主动拦截 “VMware Workstation 与 Device/Credential Guard 不兼容”——这行报错文字,过去三年里几乎成了Windows 10/11专业版用户安装VMware时的“默认开场白”。它不像…

阅读更多 →
C++红黑树从原理到实现:平衡二叉树为何默认是它? 2026/10/2 23:03:31

C++红黑树从原理到实现:平衡二叉树为何默认是它?

在C里提到平衡二叉树,十有八九指的并不是AVL树,而是红黑树。不管你是用std::map、std::set还是std::multiset,底层容器都是同一棵红黑树。我最早真正读红黑树源码,是翻开源STL的rb_tree,第一感觉就是:这堆旋…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉