企业官网建设流程全解析

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 中配置统一 Provider

OpenClaw 的模型配置支持自定义 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_KEY="sk-你的实际密钥"

然后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，因为调度和创意指导需要较强的推理和语言组织能力。

创建 Agent：

openclaw 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写的是taotoken，model写具体模型名。这样设计总监就通过统一通道调用 Claude。

3.3 界面设计师 Agent：布局与视觉

界面设计师负责把需求变成具体的布局和视觉方案。模型选 GPT-4o，因为界面设计经常需要理解参考图、截图这类多模态输入。

openclaw agent create ui-designer-agent

SOUL.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-agent

SOUL.md关键内容：

# 交互设计师 Agent ## 身份 我是专业交互设计师，擅长交互设计、动效设计和用户路径规划，6 年经验。 ## 核心能力 ### 交互模式 - 导航：标签栏、抽屉、卡片式 - 输入：表单、选择器、编辑器 - 反馈：Toast、Modal、Snackbar - 手势：滑动、拖拽、缩放 ### 动效原则 - 自然性：符合物理规律 - 目的性：动效服务功能 - 简洁性：避免过度设计 - 一致性：同类交互统一 ## 输出格式 - 交互流程图 - 状态转换说明 - 动效参数（时长、缓动函数） - 原型说明 ## 禁止事项 - 不设计过于复杂的交互 - 不忽略性能影响 - 不忽略无障碍需求

config.json里model填claude-3-5-sonnet-20241022，其余结构与上面类似。

3.5 设计规范师 Agent

规范师负责设计系统、组件库和规范检查，模型用 GPT-4o，因为结构化输出和组件属性管理需要较强的格式遵循能力。

openclaw agent create system-agent

SOUL.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都是taotoken，model分别填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 并触发工作流。先启动 gateway：

openclaw 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-sonnet，provider 返回了错误结构；二是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 的配置都是复制粘贴的事。