【解构】Anthropic 发了 Claude Design,我们用 CodeBuddy subagent 复刻了一个同款

发布时间:2026/10/3 22:06:25
【解构】Anthropic 发了 Claude Design,我们用 CodeBuddy subagent 复刻了一个同款 1. 从 Claude Design 到 CodeBuddy subagent设计智能体复刻的真实场景Anthropic 发布 Claude Design 之后我第一时间去拆了它的系统提示词。原因很简单这东西本质上不是新模型而是一套被精心编排过的设计工作流。它做的事情包括强制澄清需求、读取设计系统、一次产出多个变体、用独立子代理做验证最后再交付。这套流程如果只锁在官方产品里对国内用 CodeBuddy、Cursor 这类工具的开发者来说就太可惜了。我关心的核心问题是能不能把 Claude Design 的系统提示词和工具编排逻辑原样搬进 CodeBuddy 的 subagent 机制里在本地复现一个可运行的设计助手。答案是能而且不需要训练模型也不需要额外订阅。你需要的只是把对的 prompt 装到对的位置再把 endpoint 指向一个稳定的调用入口。这篇文章会给出完整的 subagent 配置片段、系统提示词骨架、逐项验证动作以及如何把请求 endpoint 改到 TaoToken 统一调用。适合已经用 CodeBuddy 做日常开发、想给自己加一个设计子代理的人。如果你还没配过 subagent跟着步骤走也能跑通。先说清楚 Claude Design 到底特别在哪。普通 AI 出图是「你说一句它给一张」满意率靠运气。Claude Design 的差异在于工作流先问 10 个以上问题澄清需求再去读你的品牌素材和 UI Kit然后一次给 3 个以上变体每个变体换一个核心视觉维度最后还有一个独立验证子代理来挑刺。这套流程把「和 AI 的迭代回合数」这个真正的瓶颈压了下来。CodeBuddy 的 subagent 机制刚好能承载这套逻辑。subagent 本质是一个带独立系统提示词和工具集的子代理你在对话里用 召唤它主代理会把任务转交过去。把 Claude Design 的提示词塞进一个 subagent就等于在 CodeBuddy 里内置了一个设计师模式。下面进入具体配置。2. TaoToken 前置准备统一 endpoint 与 API Key 获取在写 subagent 配置之前先把调用入口准备好。CodeBuddy 的 subagent 最终还是要发请求给模型如果你希望用统一的 endpoint 管理调用可以把 Base URL 指向 TaoToken。它的 API 地址是 https://taotoken.net/api官网是 https://taotoken.net/。这样做的好处是subagent 配置里只写一个 Base URL模型切换、额度管理都在一个地方完成不用每个工具单独配一遍。第一步是拿到 API Key。打开 https://taotoken.net/api-keys 登录后创建一个新的 Key。建议按用途命名比如 codebuddy-design-agent方便以后排查是哪个工具在调用。创建后立刻复制保存页面刷新后完整 Key 不会再显示。第二步是确认你要用的 Model ID。Claude Design 的提示词是为 Claude 系列模型写的所以选一个 Claude 系的模型 ID 最稳妥。具体可用的模型列表在 https://taotoken.net/doc 里有说明按文档里写的 ID 填就行不要自己猜名字。Model ID 填错是最常见的 404 来源。第三步是记下三个关键值后面配置里会反复用到Base URL 填 https://taotoken.net/api API Key 填你刚创建的那串Model ID 填文档里对应的模型名。这三件套是 CodeBuddy subagent 能跑起来的最小集合。这里有个容易踩的坑Base URL 末尾不要多加斜杠也不要写成 /v1 之外的路径。CodeBuddy 内部会自己拼接 /v1/messages 这类路径你多写一层就会变成双斜杠请求直接失败。我试过在末尾手滑加了个 /排查了十几分钟才发现。另外提醒一句API Key 不要写进会提交到 git 的文件里。subagent 配置如果放在项目根目录记得把含 Key 的部分用环境变量引用或者把配置文件加进 .gitignore。下面配置片段里我会用占位符表示你替换成自己的真实值。准备好这三件套之后就可以进入 CodeBuddy 的 subagent 配置环节了。整个复刻的核心就在下一步的配置文件里。3. 可复制配置CodeBuddy subagent 与 settings 片段CodeBuddy 的 subagent 配置放在项目根目录的 .codebuddy/agents/ 下每个 subagent 一个 markdown 文件。文件名就是召唤时用的名字比如 claudecode.md对话里就用 claudecode 召唤。文件结构是 YAML frontmatter 加正文提示词。先建目录和文件mkdir -p .codebuddy/agents touch .codebuddy/agents/claudecode.md然后写入 frontmatter。这段是元信息决定 subagent 的名字、可用工具和运行模式--- name: claudecode description: 设计智能体复刻 Claude Design 工作流用于海报、PPT、原型、动效、UI Kit 与多格式导出 tools: - read_file - write_file - list_dir - run_command agentMode: primary model: claude-sonnet-4-20250514 ---model 这一行填你在 TaoToken 文档里确认的 Model ID。tools 列表按你实际需要增减做设计助手至少要能读写文件和列目录run_command 用于本地预览。接下来是系统提示词骨架。这是复刻的核心我把它拆成五段每段对应 Claude Design 的一个工作流环节。你直接粘在 frontmatter 下面你是一名资深设计师工作流严格遵循以下五步不得跳步。 第一步 澄清在动手前必须提出至少 10 个澄清问题覆盖目标受众、使用场景、品牌调性、尺寸规格、必须包含的元素、禁止出现的元素、参考风格、交付格式、截止时间、成功标准。问题没问够 10 个不许进入下一步。 第二步 取材读取项目内的设计系统文件包括色板、字号阶梯、组件库、间距规范。如果项目里没有先询问用户是否有品牌素材没有则声明将使用默认设计令牌。 第三步 出变体一次产出至少 3 个方案每个方案换一个核心视觉维度例如一个偏排版、一个偏色彩、一个偏图形。每个方案附一句设计意图说明。 第四步 自检以独立验证者视角审查自己的产出列出至少 3 条潜在问题例如对比度不足、层级混乱、移动端适配缺失。发现问题必须修正后再交付。 第五步 交付输出 HTML 作为唯一真相源并说明可导出的下游格式PPTX、PDF、PNG、MP4。这段骨架的关键在于「强制」二字。第一步的 10 个问题、第三步的 3 个变体、第四步的 3 条自检都是硬性数量要求。数量约束是让工作流真正跑起来的开关少了它模型会偷懒直接出图。如果你要把 endpoint 统一到 TaoToken还需要在 CodeBuddy 的全局 settings 里配 Base URL 和 Key。配置文件路径通常是 ~/.codebuddy/settings.json写入{ model: { baseUrl: https://taotoken.net/api, apiKey: sk-你的真实Key, modelId: claude-sonnet-4-20250514 } }三件套在这里齐了baseUrl 是 https://taotoken.net/api apiKey 是你的 KeymodelId 是模型 ID。保存后重启 CodeBuddy 让配置生效。配置写完下一步就是验证它到底跑不跑得通。4. 验证请求与成功结果逐项检查 subagent 是否生效配置写完不代表能用必须逐项验证。我按从易到难的顺序列了四个检查动作每个都有明确的成功标志。第一个动作验证 subagent 被正确加载。在 CodeBuddy 对话里输入 看补全列表里有没有 claudecode。如果没出现说明 frontmatter 格式有问题最常见的是 YAML 缩进错了或者 --- 没闭合。成功标志claudecode 出现在补全列表里。第二个动作验证澄清环节。召唤它并给一个模糊需求比如「claudecode 帮我做张海报」。正确行为是它先反问一堆问题而不是直接出图。如果它直接开始生成说明第一步的强制约束没生效回去检查提示词里「至少 10 个」这句是不是被截断了。成功标志它连续提出多个澄清问题。第三个动作验证变体产出。回答完澄清问题后观察它是否一次给 3 个方案。成功标志输出里能看到三个不同视觉维度的方案每个带设计意图说明。第四个动作验证 endpoint 连通。如果前面都正常但生成中断多半是请求层的问题。可以在终端直接发一个最小请求确认 Key 和 Base URL 可用curl https://taotoken.net/api/v1/messages \ -H Content-Type: application/json \ -H x-api-key: sk-你的真实Key \ -H anthropic-version: 2023-06-01 \ -d { model: claude-sonnet-4-20250514, max_tokens: 64, messages: [{role: user, content: 回复 OK}] }成功标志返回 JSON 里 content 字段有内容。如果返回 401是 Key 问题返回 404是 Model ID 或路径问题。四个动作全过说明你的 claudecode 已经能按 Claude Design 的工作流干活了。这时候可以拿一个真实任务压测比如让它做一份 10 页的产品介绍 PPT看它是否走完澄清、取材、变体、自检、交付五步。验证过程中如果某一步卡住对照下一节的报错清单排查。5. 本篇常见错排查401、local proxy failed 与 reading choices复刻过程中我遇到的报错集中在四类逐个说清楚原因和解法。第一类401 Unauthorized。返回体里通常带 invalid api key 或 authentication_error。原因有三个Key 复制时带了空格、Key 已被删除、请求头字段名写错。Anthropic 风格的接口用 x-api-key 头不是 Authorization: Bearer。检查你的 settings.json 里 apiKey 字段有没有多余空格再确认请求头用的是 x-api-key。第二类local proxy failed。这个报错说明 CodeBuddy 尝试走本地代理转发但没连上。常见原因是 settings.json 里 baseUrl 写成了 localhost 或某个本地端口而那个服务没启动。解法是把 baseUrl 直接改成 https://taotoken.net/api 不要经过本地中转。改完重启 CodeBuddy。第三类reading choices 相关报错。这通常出现在响应解析阶段提示读取 choices 字段失败。原因是返回体格式和客户端预期不一致多半是 Model ID 填成了非对话模型或者 baseUrl 路径多写了一层导致返回了错误页面的 HTML。确认 modelId 是文档里标注的对话模型baseUrl 末尾没有多余斜杠。第四类OAuth 相关报错。如果你之前用官方账号登录过 CodeBuddy它可能缓存了 OAuth token 并优先使用导致你配的 API Key 没生效。解法是在 CodeBuddy 里退出官方账号登录或者清除 ~/.codebuddy/ 下的凭证缓存文件强制它走 settings.json 里的 Key。把这几类报错和现象对照一下报错关键词最可能原因解法401 / invalid api keyKey 错误或请求头字段名错用 x-api-key 头检查 Key 空格local proxy failedbaseUrl 指向未启动的本地服务改为 https://taotoken.net/apireading choicesModel ID 非对话模型或路径错误核对文档 Model ID去掉多余斜杠OAuth缓存了官方登录凭证退出登录或清缓存排查顺序建议从 endpoint 开始先用第 4 节的 curl 确认 Key 和 Base URL 通再回头看 CodeBuddy 配置。请求层通了问题基本都在配置格式上。6. 语义一致 CTA把设计子代理接入你的日常编码流跑通之后claudecode 就成了你 CodeBuddy 里的常驻设计子代理。做海报、拆 PPT、出原型、建 UI Kit都可以直接召唤。它的价值不在于模型更强而在于那套被固化下来的工作流先澄清、再取材、出变体、自检、交付。这套流程抽出来其实可以注入你任何一个 AI 工具。如果你在接入过程中卡在 Key 或 endpoint 上先去 https://taotoken.net/api-keys 重新确认 Key再对照 https://taotoken.net/doc 检查 Model ID 和请求格式。排障和接入相关的细节文档里写得比我这里更全。想先验证模型对话是否正常可以直接在 https://taotoken.net/chat 里发一条消息试试确认账号和模型都可用再回到 CodeBuddy 配 subagent。如果你打算长期用这套设计工作流做编码和 Agent 任务Coding Plan 会更划算入口在 https://taotoken.net/coding-plan 。最后留一个实用技巧把 claudecode.md 里的系统提示词骨架单独存一份到你的笔记里。下次换工具、换 IDE只要那个工具支持自定义系统提示词你就能在几分钟内把同一个设计助手复刻过去。工作流是可以迁移的资产模型只是执行者。

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询