1. 为什么我决定用 OpenClaw 多 Agent 搭一个 AI UI 设计师机器人做前端和产品的朋友大概率都遇到过这种场景产品经理丢过来一句“做个电商商品列表页年轻女性用户要清爽一点”然后你就要从需求拆解、布局设计、交互流程、规范检查一路做到交付标注。单靠一个通用大模型对话窗口它要么给你一段泛泛而谈的设计建议要么生成一堆无法落地的描述真正要产出可交付的界面稿中间还差着好几道工序。我试过把这件事拆成多个角色来做一个负责理解需求并拆任务一个专门出布局和视觉一个管交互和动效一个盯设计规范最后一个整理交付文档。问题在于如果每个角色都单独开一个对话上下文会断规范会漂最后整合的时候还得人工对齐。OpenClaw 的多 Agent 协作机制刚好能解决这个痛点——它允许你定义多个拥有独立身份、记忆和工具权限的 Agent再通过一个调度中心把任务串起来。这篇文章要讲的就是怎么用 OpenClaw 从零搭出一个能跑通“需求进、界面稿出”的 AI UI 设计师机器人。适合谁看有基础 Node.js 经验、想把手里的设计流程自动化、或者单纯想学多 Agent 编排的开发者。核心检索词就三个OpenClaw、多 Agent、AI UI 设计师。整条链路我会给出可复制的 Agent 配置、提示词模板以及用 TaoToken 统一 Key 接入多模型的步骤最后附一轮从需求到界面稿的完整验证动作。需要先说明一点OpenClaw 本身是本地优先的 Agent 框架它负责编排和记忆真正干“设计”这活的是背后的大模型。所以模型通道的稳定性直接决定这套机器人能不能日常用。我这边统一走 TaoToken 的 API 通道一个 Key 覆盖 Claude、GPT、Qwen 等多个模型省得每个 Agent 配一套密钥。2. TaoToken 前置准备统一 Key 与多模型通道配置在动手写 Agent 之前先把模型通道打通。OpenClaw 的每个 Agent 可以指定不同的模型提供商如果每个都去单独申请密钥、单独配环境变量维护成本很高。TaoToken 的思路是提供一个统一的 API 入口你用同一个 Key 就能调用多个主流模型这对多 Agent 场景特别友好——设计总监用 Claude 做创意调度界面设计师用 GPT-4o 做多模态理解分析师用 Qwen 做中文分析全走一个通道。2.1 获取 API Key 与确认 Base URL第一步是拿到 Key。访问 TaoToken 控制台创建 API Key建议按项目命名比如openclaw-ui-designer方便后续排查是哪个项目在调用。创建完成后你会得到一串以sk-开头的密钥先复制保存好。Base URL 统一用https://taotoken.net/api注意这个地址后面不要带多余的路径OpenClaw 的 provider 配置里会自己拼接/v1/chat/completions这类端点。如果你用的是兼容 OpenAI 协议的客户端Base URL 填https://taotoken.net/api即可。注意API Key 只显示一次建议创建后立刻写入本地环境变量或密钥管理工具不要直接硬编码进会提交到 Git 的配置文件。2.2 在 OpenClaw 中配置统一 ProviderOpenClaw 的模型配置支持自定义 provider。我们不去改全局默认而是新增一个名为taotoken的 provider让所有 Agent 都指向它。编辑 OpenClaw 的配置文件路径通常在~/.openclaw/config.json如果你是用 onboarding 向导初始化的也可以直接在向导里选“自定义 OpenAI 兼容端点”。配置片段如下注意baseUrl和apiKey的写法{ providers: { taotoken: { type: openai-compatible, baseUrl: https://taotoken.net/api, apiKey: ${TAOTOKEN_API_KEY}, models: [ claude-3-5-sonnet-20241022, gpt-4o, qwen-max ] } }, defaultProvider: taotoken }这里用${TAOTOKEN_API_KEY}引用环境变量而不是把 Key 写死。在~/.zshrc或~/.bashrc里加一行export TAOTOKEN_API_KEYsk-你的实际密钥然后source ~/.zshrc让它生效。这样配置的好处是后面每个 Agent 的config.json里只需要写provider: taotoken和具体的model名称不用重复填地址和密钥。2.3 验证通道是否可用配置完先别急着建 Agent用一条最小请求确认通道通。OpenClaw 提供了openclaw model test命令也可以直接用 curl 打一发curl -s https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d { model: claude-3-5-sonnet-20241022, messages: [{role: user, content: 回复 OK 两个字母}], max_tokens: 16 }如果返回的 JSON 里choices[0].message.content是OK说明通道正常。这一步很关键因为后面多 Agent 协作时如果某个模型调不通报错会藏在调度日志里排查起来很费劲。先把单模型通道验证通过再往上叠 Agent 编排。提示如果你打算长期跑这套机器人建议在 TaoToken 控制台给这个 Key 设置用量提醒避免某个 Agent 陷入循环调用把额度跑光。多 Agent 场景下 token 消耗比单对话高不少心里要有数。3. 可复制的多 Agent 配置从设计总监到交付师通道打通后进入核心部分——定义 Agent 团队。OpenClaw 里每个 Agent 由三样东西构成身份定义文件SOUL.md、配置文件config.json、以及可选的记忆目录。我按 UI 设计流程拆了六个角色下面给出可直接复制的配置。3.1 项目目录结构先建好目录后面所有文件往里放mkdir -p ~/ai-ui-designer cd ~/ai-ui-designer mkdir -p agents/{director,ui-designer,interaction,system,analyst,delivery} mkdir -p skills/{figma-connector,design-generator,spec-checker} mkdir -p data/{design-systems,components,assets,projects} mkdir -p config目录说明agents/放六个 Agent 的身份和配置skills/放自定义技能data/放设计系统和组件库config/放路由和工作流。3.2 设计总监 Agent调度中心设计总监是整个团队的入口负责识别意图、拆任务、分发给专业 Agent、最后整合结果。它的模型选 Claude 3.5 Sonnet因为调度和创意指导需要较强的推理和语言组织能力。创建 Agentopenclaw agent create design-director然后编辑~/.openclaw/agents/design-director/SOUL.md写入身份定义。核心内容如下完整版可长一些这里保留关键部分# 设计总监 Agent ## 身份 我是 AI UI 设计师团队的总监负责协调团队完成 UI 设计工作具备 15 年 UI/UX 经验。 ## 核心职责 1. 设计意图识别判断需求属于界面、交互、规范还是分析类 2. 任务拆解与分发把复杂需求拆成子任务分配给对应 Agent 3. 结果整合汇总各 Agent 输出形成完整设计方案 4. 创意指导提供设计方向和灵感建议 ## 团队成员 - ui-designer-agent界面生成、布局、视觉表现 - interaction-agent交互设计、动效、用户路径 - system-agent设计系统、组件库、规范检查 - analyst-agent需求分析、可用性评估 - delivery-agent交付文档、标注、切图 ## 分发规则 - 涉及界面/页面/布局/配色 → ui-designer-agent - 涉及交互/动效/流程/原型 → interaction-agent - 涉及规范/组件/设计系统 → system-agent - 涉及分析/评估/竞品 → analyst-agent - 涉及交付/标注/切图 → delivery-agent ## 禁止事项 - 不生成违反品牌调性的设计 - 不忽略用户体验原则 - 不设计技术不可实现的交互对应的config.json放在~/ai-ui-designer/agents/director/config.json{ name: design-director, provider: taotoken, model: claude-3-5-sonnet-20241022, temperature: 0.7, maxTokens: 8192, memory: { enabled: true, type: sqlite, retentionDays: 365 }, tools: { bash: { enabled: true, whitelist: [ls, cat, mkdir] }, read: { enabled: true, allowedPaths: [~/ai-ui-designer] }, write: { enabled: true, allowedPaths: [~/ai-ui-designer] } }, agents: { canCall: [ ui-designer-agent, interaction-agent, system-agent, analyst-agent, delivery-agent ] } }注意provider写的是taotokenmodel写具体模型名。这样设计总监就通过统一通道调用 Claude。3.3 界面设计师 Agent布局与视觉界面设计师负责把需求变成具体的布局和视觉方案。模型选 GPT-4o因为界面设计经常需要理解参考图、截图这类多模态输入。openclaw agent create ui-designer-agentSOUL.md关键内容# 界面设计师 Agent ## 身份 我是专业界面设计师擅长界面生成、布局设计和视觉表现8 年 UI 经验。 ## 核心能力 ### 布局 - 网格系统8px 栅格 - 响应式适配多屏幕尺寸 - 信息层级F 型/Z 型浏览模式 ### 配色 - 配色方案单色、互补、三色、分裂互补 - 无障碍对比度符合 WCAG 标准 - 品牌色遵循品牌规范 ### 字体 - 字号层级标题/正文/辅助文字 - 行高字距确保可读性 ## 输出格式 - 整体布局结构 - 配色方案含 HEX 值 - 字体方案 - 组件规格 - 设计说明 ## 禁止事项 - 不设计违反品牌规范的内容 - 不忽略响应式设计 - 不使用未授权设计资源config.json{ name: ui-designer-agent, provider: taotoken, model: gpt-4o, temperature: 0.6, maxTokens: 8192, memory: { enabled: true, type: sqlite }, tools: { read: { enabled: true, allowedPaths: [~/ai-ui-designer] }, write: { enabled: true, allowedPaths: [~/ai-ui-designer] } } }3.4 交互设计师 Agent交互设计师管流程、动效和用户路径模型同样用 Claude 3.5 Sonnet因为交互逻辑需要较强的推理能力。openclaw agent create interaction-agentSOUL.md关键内容# 交互设计师 Agent ## 身份 我是专业交互设计师擅长交互设计、动效设计和用户路径规划6 年经验。 ## 核心能力 ### 交互模式 - 导航标签栏、抽屉、卡片式 - 输入表单、选择器、编辑器 - 反馈Toast、Modal、Snackbar - 手势滑动、拖拽、缩放 ### 动效原则 - 自然性符合物理规律 - 目的性动效服务功能 - 简洁性避免过度设计 - 一致性同类交互统一 ## 输出格式 - 交互流程图 - 状态转换说明 - 动效参数时长、缓动函数 - 原型说明 ## 禁止事项 - 不设计过于复杂的交互 - 不忽略性能影响 - 不忽略无障碍需求config.json里model填claude-3-5-sonnet-20241022其余结构与上面类似。3.5 设计规范师 Agent规范师负责设计系统、组件库和规范检查模型用 GPT-4o因为结构化输出和组件属性管理需要较强的格式遵循能力。openclaw agent create system-agentSOUL.md关键内容# 设计规范师 Agent ## 身份 我是专业设计规范师擅长设计系统管理、组件库维护和规范检查7 年经验。 ## 核心能力 ### 设计 Token - 颜色 Token主色、辅色、功能色、中性色 - 字体 Token家族、字号、字重、行高 - 间距 Token边距、间距、内边距 - 圆角/阴影 Token ### 规范检查项 - 颜色使用是否符合色板 - 字体使用是否符合规范 - 间距是否遵循栅格 - 组件使用是否规范 - 命名是否统一 ## 输出格式 - 设计 Token 定义CSS/JSON - 组件规范文档 - 检查报告通过/警告/错误 ## 禁止事项 - 不创建冗余组件 - 不随意修改核心 Token - 不忽略向后兼容性3.6 设计分析师与交付师 Agent分析师负责需求分析和可用性评估模型用 Qwen-Max中文理解和分析能力更贴合国内产品语境。交付师负责生成交付文档和标注模型用 Doubao Pro执行类任务性价比高。openclaw agent create analyst-agent openclaw agent create delivery-agent分析师的SOUL.md重点写启发式评估的十个维度可见性、一致性、错误预防等交付师的SOUL.md重点写标注规范、切图倍率和文档结构。两个 Agent 的config.json里provider都是taotokenmodel分别填qwen-max和doubao-pro。到这里六个 Agent 就定义完了。它们的共同点是都走taotoken这个统一 provider区别只在model字段。这就是统一 Key 接入的价值——换模型只改一行不用动通道配置。4. 工作流编排与验证跑通一轮从需求到界面稿Agent 定义好之后需要把它们串成工作流否则每个 Agent 还是孤立的。OpenClaw 支持通过路由规则和工作流配置来编排。4.1 配置路由规则编辑~/ai-ui-designer/config/routing.json{ default_agent: design-director, routing_rules: [ { pattern: 界面|页面|布局|视觉|配色, agent: ui-designer-agent, priority: 1 }, { pattern: 交互|动效|流程|原型, agent: interaction-agent, priority: 1 }, { pattern: 规范|组件|设计系统|Token, agent: system-agent, priority: 1 }, { pattern: 分析|评估|优化|竞品, agent: analyst-agent, priority: 1 }, { pattern: 交付|标注|切图|开发, agent: delivery-agent, priority: 1 } ], fallback_agent: design-director }路由规则的作用是当用户消息里出现特定关键词时可以直接路由到对应 Agent减少设计总监的调度开销。但复杂任务还是走设计总监拆解。4.2 配置新页面设计工作流编辑~/ai-ui-designer/config/workflows.json{ workflows: { new_page_design: { name: 新页面设计流程, steps: [ { step_id: 1, agent: analyst-agent, action: analyze_requirements }, { step_id: 2, agent: ui-designer-agent, action: generate_layout }, { step_id: 3, agent: interaction-agent, action: design_interaction }, { step_id: 4, agent: system-agent, action: check_spec_compliance }, { step_id: 5, agent: delivery-agent, action: generate_handoff } ], output: { type: design_file, include_specs: true, include_handoff: true } } } }这个工作流定义了五步需求分析 → 布局生成 → 交互设计 → 规范检查 → 交付文档。每一步对应一个 Agent前一步的输出作为后一步的输入。4.3 验证请求一轮完整的设计任务现在启动 OpenClaw 并触发工作流。先启动 gatewayopenclaw start然后在另一个终端发送设计需求openclaw workflow run new_page_design \ --input 请设计一个电商 App 的商品列表页面展示商品图片、名称、价格支持筛选、排序和搜索目标用户是 25-35 岁年轻女性。预期会看到五个阶段依次执行。下面是我实测下来各阶段的输出要点。阶段一需求分析analyst-agent分析师会输出一份需求分析报告包含页面类型、目标用户画像、功能需求清单和设计建议。比如它会判断这是“电商商品列表页”推荐“双列瀑布流布局”视觉风格建议“简约时尚”配色倾向“清新柔和的粉色系”。这一步的价值是把模糊需求转成结构化输入。阶段二布局生成ui-designer-agent界面设计师根据分析结果生成布局方案输出页面结构、组件规格和配色方案。它会给出顶部搜索栏高度 48px、筛选栏高度 40px、商品卡片宽度按屏幕均分、图片宽高比 1:1 这类具体数值以及主色#FF6B9D、文字色#333333等 HEX 值。阶段三交互设计interaction-agent交互设计师输出搜索、筛选、排序、滚动、卡片点击等交互流程以及下拉刷新触发距离 80px、筛选面板从右侧滑入宽度 80%、动效时长 300ms 这类参数。阶段四规范检查system-agent规范师对照设计 Token 检查颜色、字体、间距、组件和无障碍合规性输出通过/警告/错误清单。比如它会指出“搜索图标建议 24px当前 20px”这类具体改进项。阶段五交付文档delivery-agent交付师生成包含颜色 Token、字体 Token、间距 Token、组件 CSS 代码、交互说明和版本记录的完整交付文档。4.4 成功结果的判断标准怎么算跑通了我的判断标准有三条第一五个阶段都返回了非空输出没有中途报错第二规范检查阶段给出了具体的通过项和至少一条改进建议说明它真的在对照规范而不是泛泛而谈第三交付文档里包含了可直接复制到前端的 CSS 变量和组件样式。三条都满足这套机器人就算从 0 到 1 跑通了。5. 本篇常见报错排查多 Agent 编排比单对话复杂报错也更容易藏在中间环节。下面是我踩过的几个典型问题按报错信息对照排查。5.1 401 Unauthorized最常见的是 Key 没生效。先确认环境变量是否真的加载了echo $TAOTOKEN_API_KEY如果输出为空说明source没执行或者写错了文件。另一个可能是config.json里apiKey字段写的是明文但带了多余空格。还有一种情况是 Key 被禁用或额度耗尽去 TaoToken 控制台确认 Key 状态。5.2 local proxy failed 或 connection refused这个报错通常出现在 OpenClaw 尝试连接 provider 时。先检查baseUrl是否写成了https://taotoken.net/api/末尾多了斜杠有些客户端拼接路径时会产生双斜杠导致 404。再确认本机网络能正常访问taotoken.net用 curl 打一发第 2.3 节的验证请求。如果 curl 通但 OpenClaw 不通检查 OpenClaw 的 provider 配置有没有被全局配置覆盖。5.3 reading choices 相关报错这类报错一般是响应体解析失败。可能原因有三个一是模型名写错了比如把claude-3-5-sonnet-20241022写成了claude-3.5-sonnetprovider 返回了错误结构二是maxTokens设得太大超过了模型上限三是请求被限流返回了非标准 JSON。排查方法是把该 Agent 的model字段单独拿出来用 curl 测一遍确认模型名和参数都正确。5.4 OAuth 或认证方式冲突如果你之前配过其他 provider 的 OAuth 认证OpenClaw 可能会优先走 OAuth 而不是 API Key。检查~/.openclaw/config.json里有没有残留的oauth字段有的话删掉确保taotokenprovider 的type是openai-compatible而不是oauth。5.5 Agent 之间调用失败如果设计总监能启动但调不动子 Agent检查config.json里的agents.canCall列表是否包含了目标 Agent 名称名称要和openclaw agent create时用的完全一致。另外确认子 Agent 的config.json里provider和model都填了缺一个都会导致调用链断掉。注意多 Agent 场景下建议给每个 Agent 的日志单独落盘OpenClaw 支持在config.json里配logging.path。出问题时按 Agent 名称过滤日志比翻全局日志快得多。6. 长期跑这套机器人我的接入建议如果你只是偶尔用一次上面这套配置直接跑就行。但如果打算把它接进日常设计流程有几个点值得提前规划。第一模型分工要稳定。设计总监和交互设计师用 Claude界面设计师和规范师用 GPT-4o分析师用 Qwen交付师用 Doubao这个分工是我实测下来比较顺的组合。不要频繁换模型因为不同模型的输出格式习惯不同换来换去会导致下游 Agent 解析失败。第二记忆要定期清理。OpenClaw 的 SQLite 记忆会随着项目增多而膨胀建议按项目分库或者设置retentionDays定期归档。设计规范这类长期记忆可以保留临时项目的对话记忆可以清掉。第三统一 Key 的额度要监控。多 Agent 协作的 token 消耗是单对话的数倍尤其是设计总监做任务拆解和结果整合时。在 TaoToken 控制台设置用量告警避免某天突然跑不动。第四接入方式上如果你想让机器人直接对接 Figma 或 Slack需要额外开发对应的 skill。OpenClaw 的技能生态支持自定义工具skills/figma-connector这个目录就是留给这类集成的。不过 skill 开发涉及 Figma API 的鉴权和节点操作建议先把纯文本的设计流程跑顺再考虑接设计工具。最后说一个实际经验这套机器人最有价值的不是“自动出图”而是把设计流程里的规范检查和交付文档这两步自动化了。布局和创意仍然需要人来把关但规范一致性、Token 导出、标注文档这些重复劳动交给 Agent 团队确实能省下大量时间。你可以先从“需求分析 规范检查”这两个 Agent 开始跑跑顺了再逐步加角色比一上来就上六个 Agent 更容易调通。如果你还没配好模型通道先去 TaoToken 控制台创建一个 Key然后按第 2 节的配置把 provider 接上。通道通了后面所有 Agent 的配置都是复制粘贴的事。 
长河君 · 2026/10/18 11:38:51 · 阅读 1.2k 使用OpenClaw多Agent打造AI UI设计师机器人：从0到1的完整实践（TaoToken统一Key接入版）
1. 为什么我决定用 OpenClaw 多 Agent 搭一个 AI UI 设计师机器人做前端和产品的朋友大概率都遇到过这种场景产品经理丢过来一句“做个电商商品列表页年轻女性用户要清爽一点”然后你就要从需求拆解、布局设计、交互流程、规范检查一路做到交付标注。单靠一个通用大模型对话窗口它要么给你一段泛泛而谈的设计建议要么生成一堆无法落地的描述真正要产出可交付的界面稿中间还差着好几道工序。我试过把这件事拆成多个角色来做一个负责理解需求并拆任务一个专门出布局和视觉一个管交互和动效一个盯设计规范最后一个整理交付文档。问题在于如果每个角色都单独开一个对话上下文会断规范会漂最后整合的时候还得人工对齐。OpenClaw 的多 Agent 协作机制刚好能解决这个痛点——它允许你定义多个拥有独立身份、记忆和工具权限的 Agent再通过一个调度中心把任务串起来。这篇文章要讲的就是怎么用 OpenClaw 从零搭出一个能跑通“需求进、界面稿出”的 AI UI 设计师机器人。适合谁看有基础 Node.js 经验、想把手里的设计流程自动化、或者单纯想学多 Agent 编排的开发者。核心检索词就三个OpenClaw、多 Agent、AI UI 设计师。整条链路我会给出可复制的 Agent 配置、提示词模板以及用 TaoToken 统一 Key 接入多模型的步骤最后附一轮从需求到界面稿的完整验证动作。需要先说明一点OpenClaw 本身是本地优先的 Agent 框架它负责编排和记忆真正干“设计”这活的是背后的大模型。所以模型通道的稳定性直接决定这套机器人能不能日常用。我这边统一走 TaoToken 的 API 通道一个 Key 覆盖 Claude、GPT、Qwen 等多个模型省得每个 Agent 配一套密钥。2. TaoToken 前置准备统一 Key 与多模型通道配置在动手写 Agent 之前先把模型通道打通。OpenClaw 的每个 Agent 可以指定不同的模型提供商如果每个都去单独申请密钥、单独配环境变量维护成本很高。TaoToken 的思路是提供一个统一的 API 入口你用同一个 Key 就能调用多个主流模型这对多 Agent 场景特别友好——设计总监用 Claude 做创意调度界面设计师用 GPT-4o 做多模态理解分析师用 Qwen 做中文分析全走一个通道。2.1 获取 API Key 与确认 Base URL第一步是拿到 Key。访问 TaoToken 控制台创建 API Key建议按项目命名比如openclaw-ui-designer方便后续排查是哪个项目在调用。创建完成后你会得到一串以sk-开头的密钥先复制保存好。Base URL 统一用https://taotoken.net/api注意这个地址后面不要带多余的路径OpenClaw 的 provider 配置里会自己拼接/v1/chat/completions这类端点。如果你用的是兼容 OpenAI 协议的客户端Base URL 填https://taotoken.net/api即可。注意API Key 只显示一次建议创建后立刻写入本地环境变量或密钥管理工具不要直接硬编码进会提交到 Git 的配置文件。2.2 在 OpenClaw 中配置统一 ProviderOpenClaw 的模型配置支持自定义 provider。我们不去改全局默认而是新增一个名为taotoken的 provider让所有 Agent 都指向它。编辑 OpenClaw 的配置文件路径通常在~/.openclaw/config.json如果你是用 onboarding 向导初始化的也可以直接在向导里选“自定义 OpenAI 兼容端点”。配置片段如下注意baseUrl和apiKey的写法{ providers: { taotoken: { type: openai-compatible, baseUrl: https://taotoken.net/api, apiKey: ${TAOTOKEN_API_KEY}, models: [ claude-3-5-sonnet-20241022, gpt-4o, qwen-max ] } }, defaultProvider: taotoken }这里用${TAOTOKEN_API_KEY}引用环境变量而不是把 Key 写死。在~/.zshrc或~/.bashrc里加一行export TAOTOKEN_API_KEYsk-你的实际密钥然后source ~/.zshrc让它生效。这样配置的好处是后面每个 Agent 的config.json里只需要写provider: taotoken和具体的model名称不用重复填地址和密钥。2.3 验证通道是否可用配置完先别急着建 Agent用一条最小请求确认通道通。OpenClaw 提供了openclaw model test命令也可以直接用 curl 打一发curl -s https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d { model: claude-3-5-sonnet-20241022, messages: [{role: user, content: 回复 OK 两个字母}], max_tokens: 16 }如果返回的 JSON 里choices[0].message.content是OK说明通道正常。这一步很关键因为后面多 Agent 协作时如果某个模型调不通报错会藏在调度日志里排查起来很费劲。先把单模型通道验证通过再往上叠 Agent 编排。提示如果你打算长期跑这套机器人建议在 TaoToken 控制台给这个 Key 设置用量提醒避免某个 Agent 陷入循环调用把额度跑光。多 Agent 场景下 token 消耗比单对话高不少心里要有数。3. 可复制的多 Agent 配置从设计总监到交付师通道打通后进入核心部分——定义 Agent 团队。OpenClaw 里每个 Agent 由三样东西构成身份定义文件SOUL.md、配置文件config.json、以及可选的记忆目录。我按 UI 设计流程拆了六个角色下面给出可直接复制的配置。3.1 项目目录结构先建好目录后面所有文件往里放mkdir -p ~/ai-ui-designer cd ~/ai-ui-designer mkdir -p agents/{director,ui-designer,interaction,system,analyst,delivery} mkdir -p skills/{figma-connector,design-generator,spec-checker} mkdir -p data/{design-systems,components,assets,projects} mkdir -p config目录说明agents/放六个 Agent 的身份和配置skills/放自定义技能data/放设计系统和组件库config/放路由和工作流。3.2 设计总监 Agent调度中心设计总监是整个团队的入口负责识别意图、拆任务、分发给专业 Agent、最后整合结果。它的模型选 Claude 3.5 Sonnet因为调度和创意指导需要较强的推理和语言组织能力。创建 Agentopenclaw agent create design-director然后编辑~/.openclaw/agents/design-director/SOUL.md写入身份定义。核心内容如下完整版可长一些这里保留关键部分# 设计总监 Agent ## 身份 我是 AI UI 设计师团队的总监负责协调团队完成 UI 设计工作具备 15 年 UI/UX 经验。 ## 核心职责 1. 设计意图识别判断需求属于界面、交互、规范还是分析类 2. 任务拆解与分发把复杂需求拆成子任务分配给对应 Agent 3. 结果整合汇总各 Agent 输出形成完整设计方案 4. 创意指导提供设计方向和灵感建议 ## 团队成员 - ui-designer-agent界面生成、布局、视觉表现 - interaction-agent交互设计、动效、用户路径 - system-agent设计系统、组件库、规范检查 - analyst-agent需求分析、可用性评估 - delivery-agent交付文档、标注、切图 ## 分发规则 - 涉及界面/页面/布局/配色 → ui-designer-agent - 涉及交互/动效/流程/原型 → interaction-agent - 涉及规范/组件/设计系统 → system-agent - 涉及分析/评估/竞品 → analyst-agent - 涉及交付/标注/切图 → delivery-agent ## 禁止事项 - 不生成违反品牌调性的设计 - 不忽略用户体验原则 - 不设计技术不可实现的交互对应的config.json放在~/ai-ui-designer/agents/director/config.json{ name: design-director, provider: taotoken, model: claude-3-5-sonnet-20241022, temperature: 0.7, maxTokens: 8192, memory: { enabled: true, type: sqlite, retentionDays: 365 }, tools: { bash: { enabled: true, whitelist: [ls, cat, mkdir] }, read: { enabled: true, allowedPaths: [~/ai-ui-designer] }, write: { enabled: true, allowedPaths: [~/ai-ui-designer] } }, agents: { canCall: [ ui-designer-agent, interaction-agent, system-agent, analyst-agent, delivery-agent ] } }注意provider写的是taotokenmodel写具体模型名。这样设计总监就通过统一通道调用 Claude。3.3 界面设计师 Agent布局与视觉界面设计师负责把需求变成具体的布局和视觉方案。模型选 GPT-4o因为界面设计经常需要理解参考图、截图这类多模态输入。openclaw agent create ui-designer-agentSOUL.md关键内容# 界面设计师 Agent ## 身份 我是专业界面设计师擅长界面生成、布局设计和视觉表现8 年 UI 经验。 ## 核心能力 ### 布局 - 网格系统8px 栅格 - 响应式适配多屏幕尺寸 - 信息层级F 型/Z 型浏览模式 ### 配色 - 配色方案单色、互补、三色、分裂互补 - 无障碍对比度符合 WCAG 标准 - 品牌色遵循品牌规范 ### 字体 - 字号层级标题/正文/辅助文字 - 行高字距确保可读性 ## 输出格式 - 整体布局结构 - 配色方案含 HEX 值 - 字体方案 - 组件规格 - 设计说明 ## 禁止事项 - 不设计违反品牌规范的内容 - 不忽略响应式设计 - 不使用未授权设计资源config.json{ name: ui-designer-agent, provider: taotoken, model: gpt-4o, temperature: 0.6, maxTokens: 8192, memory: { enabled: true, type: sqlite }, tools: { read: { enabled: true, allowedPaths: [~/ai-ui-designer] }, write: { enabled: true, allowedPaths: [~/ai-ui-designer] } } }3.4 交互设计师 Agent交互设计师管流程、动效和用户路径模型同样用 Claude 3.5 Sonnet因为交互逻辑需要较强的推理能力。openclaw agent create interaction-agentSOUL.md关键内容# 交互设计师 Agent ## 身份 我是专业交互设计师擅长交互设计、动效设计和用户路径规划6 年经验。 ## 核心能力 ### 交互模式 - 导航标签栏、抽屉、卡片式 - 输入表单、选择器、编辑器 - 反馈Toast、Modal、Snackbar - 手势滑动、拖拽、缩放 ### 动效原则 - 自然性符合物理规律 - 目的性动效服务功能 - 简洁性避免过度设计 - 一致性同类交互统一 ## 输出格式 - 交互流程图 - 状态转换说明 - 动效参数时长、缓动函数 - 原型说明 ## 禁止事项 - 不设计过于复杂的交互 - 不忽略性能影响 - 不忽略无障碍需求config.json里model填claude-3-5-sonnet-20241022其余结构与上面类似。3.5 设计规范师 Agent规范师负责设计系统、组件库和规范检查模型用 GPT-4o因为结构化输出和组件属性管理需要较强的格式遵循能力。openclaw agent create system-agentSOUL.md关键内容# 设计规范师 Agent ## 身份 我是专业设计规范师擅长设计系统管理、组件库维护和规范检查7 年经验。 ## 核心能力 ### 设计 Token - 颜色 Token主色、辅色、功能色、中性色 - 字体 Token家族、字号、字重、行高 - 间距 Token边距、间距、内边距 - 圆角/阴影 Token ### 规范检查项 - 颜色使用是否符合色板 - 字体使用是否符合规范 - 间距是否遵循栅格 - 组件使用是否规范 - 命名是否统一 ## 输出格式 - 设计 Token 定义CSS/JSON - 组件规范文档 - 检查报告通过/警告/错误 ## 禁止事项 - 不创建冗余组件 - 不随意修改核心 Token - 不忽略向后兼容性3.6 设计分析师与交付师 Agent分析师负责需求分析和可用性评估模型用 Qwen-Max中文理解和分析能力更贴合国内产品语境。交付师负责生成交付文档和标注模型用 Doubao Pro执行类任务性价比高。openclaw agent create analyst-agent openclaw agent create delivery-agent分析师的SOUL.md重点写启发式评估的十个维度可见性、一致性、错误预防等交付师的SOUL.md重点写标注规范、切图倍率和文档结构。两个 Agent 的config.json里provider都是taotokenmodel分别填qwen-max和doubao-pro。到这里六个 Agent 就定义完了。它们的共同点是都走taotoken这个统一 provider区别只在model字段。这就是统一 Key 接入的价值——换模型只改一行不用动通道配置。4. 工作流编排与验证跑通一轮从需求到界面稿Agent 定义好之后需要把它们串成工作流否则每个 Agent 还是孤立的。OpenClaw 支持通过路由规则和工作流配置来编排。4.1 配置路由规则编辑~/ai-ui-designer/config/routing.json{ default_agent: design-director, routing_rules: [ { pattern: 界面|页面|布局|视觉|配色, agent: ui-designer-agent, priority: 1 }, { pattern: 交互|动效|流程|原型, agent: interaction-agent, priority: 1 }, { pattern: 规范|组件|设计系统|Token, agent: system-agent, priority: 1 }, { pattern: 分析|评估|优化|竞品, agent: analyst-agent, priority: 1 }, { pattern: 交付|标注|切图|开发, agent: delivery-agent, priority: 1 } ], fallback_agent: design-director }路由规则的作用是当用户消息里出现特定关键词时可以直接路由到对应 Agent减少设计总监的调度开销。但复杂任务还是走设计总监拆解。4.2 配置新页面设计工作流编辑~/ai-ui-designer/config/workflows.json{ workflows: { new_page_design: { name: 新页面设计流程, steps: [ { step_id: 1, agent: analyst-agent, action: analyze_requirements }, { step_id: 2, agent: ui-designer-agent, action: generate_layout }, { step_id: 3, agent: interaction-agent, action: design_interaction }, { step_id: 4, agent: system-agent, action: check_spec_compliance }, { step_id: 5, agent: delivery-agent, action: generate_handoff } ], output: { type: design_file, include_specs: true, include_handoff: true } } } }这个工作流定义了五步需求分析 → 布局生成 → 交互设计 → 规范检查 → 交付文档。每一步对应一个 Agent前一步的输出作为后一步的输入。4.3 验证请求一轮完整的设计任务现在启动 OpenClaw 并触发工作流。先启动 gatewayopenclaw start然后在另一个终端发送设计需求openclaw workflow run new_page_design \ --input 请设计一个电商 App 的商品列表页面展示商品图片、名称、价格支持筛选、排序和搜索目标用户是 25-35 岁年轻女性。预期会看到五个阶段依次执行。下面是我实测下来各阶段的输出要点。阶段一需求分析analyst-agent分析师会输出一份需求分析报告包含页面类型、目标用户画像、功能需求清单和设计建议。比如它会判断这是“电商商品列表页”推荐“双列瀑布流布局”视觉风格建议“简约时尚”配色倾向“清新柔和的粉色系”。这一步的价值是把模糊需求转成结构化输入。阶段二布局生成ui-designer-agent界面设计师根据分析结果生成布局方案输出页面结构、组件规格和配色方案。它会给出顶部搜索栏高度 48px、筛选栏高度 40px、商品卡片宽度按屏幕均分、图片宽高比 1:1 这类具体数值以及主色#FF6B9D、文字色#333333等 HEX 值。阶段三交互设计interaction-agent交互设计师输出搜索、筛选、排序、滚动、卡片点击等交互流程以及下拉刷新触发距离 80px、筛选面板从右侧滑入宽度 80%、动效时长 300ms 这类参数。阶段四规范检查system-agent规范师对照设计 Token 检查颜色、字体、间距、组件和无障碍合规性输出通过/警告/错误清单。比如它会指出“搜索图标建议 24px当前 20px”这类具体改进项。阶段五交付文档delivery-agent交付师生成包含颜色 Token、字体 Token、间距 Token、组件 CSS 代码、交互说明和版本记录的完整交付文档。4.4 成功结果的判断标准怎么算跑通了我的判断标准有三条第一五个阶段都返回了非空输出没有中途报错第二规范检查阶段给出了具体的通过项和至少一条改进建议说明它真的在对照规范而不是泛泛而谈第三交付文档里包含了可直接复制到前端的 CSS 变量和组件样式。三条都满足这套机器人就算从 0 到 1 跑通了。5. 本篇常见报错排查多 Agent 编排比单对话复杂报错也更容易藏在中间环节。下面是我踩过的几个典型问题按报错信息对照排查。5.1 401 Unauthorized最常见的是 Key 没生效。先确认环境变量是否真的加载了echo $TAOTOKEN_API_KEY如果输出为空说明source没执行或者写错了文件。另一个可能是config.json里apiKey字段写的是明文但带了多余空格。还有一种情况是 Key 被禁用或额度耗尽去 TaoToken 控制台确认 Key 状态。5.2 local proxy failed 或 connection refused这个报错通常出现在 OpenClaw 尝试连接 provider 时。先检查baseUrl是否写成了https://taotoken.net/api/末尾多了斜杠有些客户端拼接路径时会产生双斜杠导致 404。再确认本机网络能正常访问taotoken.net用 curl 打一发第 2.3 节的验证请求。如果 curl 通但 OpenClaw 不通检查 OpenClaw 的 provider 配置有没有被全局配置覆盖。5.3 reading choices 相关报错这类报错一般是响应体解析失败。可能原因有三个一是模型名写错了比如把claude-3-5-sonnet-20241022写成了claude-3.5-sonnetprovider 返回了错误结构二是maxTokens设得太大超过了模型上限三是请求被限流返回了非标准 JSON。排查方法是把该 Agent 的model字段单独拿出来用 curl 测一遍确认模型名和参数都正确。5.4 OAuth 或认证方式冲突如果你之前配过其他 provider 的 OAuth 认证OpenClaw 可能会优先走 OAuth 而不是 API Key。检查~/.openclaw/config.json里有没有残留的oauth字段有的话删掉确保taotokenprovider 的type是openai-compatible而不是oauth。5.5 Agent 之间调用失败如果设计总监能启动但调不动子 Agent检查config.json里的agents.canCall列表是否包含了目标 Agent 名称名称要和openclaw agent create时用的完全一致。另外确认子 Agent 的config.json里provider和model都填了缺一个都会导致调用链断掉。注意多 Agent 场景下建议给每个 Agent 的日志单独落盘OpenClaw 支持在config.json里配logging.path。出问题时按 Agent 名称过滤日志比翻全局日志快得多。6. 长期跑这套机器人我的接入建议如果你只是偶尔用一次上面这套配置直接跑就行。但如果打算把它接进日常设计流程有几个点值得提前规划。第一模型分工要稳定。设计总监和交互设计师用 Claude界面设计师和规范师用 GPT-4o分析师用 Qwen交付师用 Doubao这个分工是我实测下来比较顺的组合。不要频繁换模型因为不同模型的输出格式习惯不同换来换去会导致下游 Agent 解析失败。第二记忆要定期清理。OpenClaw 的 SQLite 记忆会随着项目增多而膨胀建议按项目分库或者设置retentionDays定期归档。设计规范这类长期记忆可以保留临时项目的对话记忆可以清掉。第三统一 Key 的额度要监控。多 Agent 协作的 token 消耗是单对话的数倍尤其是设计总监做任务拆解和结果整合时。在 TaoToken 控制台设置用量告警避免某天突然跑不动。第四接入方式上如果你想让机器人直接对接 Figma 或 Slack需要额外开发对应的 skill。OpenClaw 的技能生态支持自定义工具skills/figma-connector这个目录就是留给这类集成的。不过 skill 开发涉及 Figma API 的鉴权和节点操作建议先把纯文本的设计流程跑顺再考虑接设计工具。最后说一个实际经验这套机器人最有价值的不是“自动出图”而是把设计流程里的规范检查和交付文档这两步自动化了。布局和创意仍然需要人来把关但规范一致性、Token 导出、标注文档这些重复劳动交给 Agent 团队确实能省下大量时间。你可以先从“需求分析 规范检查”这两个 Agent 开始跑跑顺了再逐步加角色比一上来就上六个 Agent 更容易调通。如果你还没配好模型通道先去 TaoToken 控制台创建一个 Key然后按第 2 节的配置把 provider 接上。通道通了后面所有 Agent 的配置都是复制粘贴的事。