企业官网建设流程全解析

1. Trae 里做 umijs + Ant Design 项目，为什么还要拉上 UI UX Pro Max

先说清楚这篇在解决什么问题。你手上有一个 umijs 前端项目，组件库用的是 Ant Design，编辑器换成了 Trae。日常开发里最耗时的往往不是写业务逻辑，而是「这个页面骨架怎么搭才像样」——间距用多少、卡片圆角几像素、主色和中性色怎么配、表格和表单怎么排。Ant Design 本身有一套设计体系，但真到落地时，很多人还是凭感觉写 style，最后页面能用但不好看。

UI UX Pro Max 是一个可搜索的设计知识库，里面沉淀了 57 种 UI 风格、95 套行业调色板、56 组字体搭配、24 种图表类型、11 种技术栈最佳实践，还有 98 条用户体验指南。它本身不是组件库，而是给 AI 编程助手用的「技能包」——你让 AI 生成页面时，它会先去查这套设计数据库，再结合你的技术栈输出代码。对 umijs + Ant Design 这种组合来说，它能把「Ant Design 设计令牌 + 8px 网格 + 组件组合模式」这些规范固化进生成流程。

适合谁看：正在用 Trae 做中后台、SaaS 控制台、数据看板的前端同学；团队里想让 AI 生成的页面骨架统一风格、减少返工的负责人；以及已经装了 uipro-cli 但不知道怎么和 Trae 项目规则打通的人。整篇按「装工具 → 配规则 → 写任务脚本 → 验证 → 排错」的顺序走，每一步都能直接复制。

2. 前置准备：uipro-cli 安装与 TaoToken 统一 Key 通道

2.1 环境与 uipro-cli 安装

uipro-cli 是个 npm 全局包，装之前确认 Node 版本在 18 以上。Python 不是必须的，但 UI UX Pro Max 的部分脚本会用到，建议顺手装上。

# 确认 Node 版本 node -v # 建议 >= 18 # 全局安装 uipro-cli npm install -g uipro-cli # 验证安装 uipro --version

Python 环境按系统来：

# macOS brew install python3 # Ubuntu / Debian sudo apt update && sudo apt install python3 # Windows winget install Python.Python.3.12

装完后uipro init会在项目根目录生成.cursor和.shared两个目录。这里有个关键点：UI UX Pro Max 官方目前没有专门的 Trae 适配，但 Trae 兼容 Cursor 的部分配置格式，所以用--ai cursor参数初始化，真正起作用的是.shared目录里的设计数据库，.cursor下的 markdown 只是使用说明。

2.2 用 TaoToken 统一管理模型调用通道

Trae 里调用大模型生成页面时，如果每个成员各自配 Key，团队协作会很乱：额度分散、模型版本不一致、换人就得重新配。TaoToken 的作用是把 Key 和 API 通道统一起来，一个 Key 走多个模型，Base URL 固定，团队里谁用都指向同一套配置。

TaoToken 的 API 地址是https://taotoken.net/api，控制台在https://taotoken.net/console，Key 在https://taotoken.net/api-keys生成。模型对话入口在https://taotoken.net/models，长期编码或 Agent 场景可以看https://taotoken.net/coding-plan，接入文档在https://taotoken.net/doc。

在 Trae 里配置时，核心三件套是 Base URL、API Key、Model ID。Base URL 填https://taotoken.net/api，Key 填你在控制台生成的，Model ID 按你实际用的模型填。这样团队里所有人共用一套通道，切换模型只改 Model ID，不用动 Key。

注意：TaoToken 是统一的 API 通道管理服务，配置时只填官方给的 Base URL 和 Key，不要填任何来路不明的地址。

3. 可复制配置：Trae 项目规则 + uipro-cli 配置片段

3.1 初始化 uipro-cli 并保留 .shared

在 umijs 项目根目录执行：

# 初始化，选择 cursor 适配（Trae 兼容其配置格式） uipro init --ai cursor

执行完目录结构变成：

your-umijs-project/ ├── .cursor/ # 使用说明 markdown，可保留可删 ├── .shared/ # 设计数据库，核心，必须保留 ├── src/ ├── package.json └── ...

.shared目录里是 UI UX Pro Max 的设计数据，AI 生成页面时会从这里检索风格、配色、字体。.cursor目录下的 markdown 是给 Cursor 看的规则说明，Trae 不直接读它，但内容可以借鉴。

3.2 写 Trae 项目规则文件

在 Trae 里打开「设置 → 规则 → 项目规则」，新建.trae/rules/project_rules.md，把下面这段粘进去。这份规则的作用是告诉 Trae 里的 AI：遇到 UI/UX 相关请求时，先去查 UI UX Pro Max 数据库，再按 Ant Design 规范输出。

# UI/UX 设计自动优化规则 ## 自动激活条件 当用户请求涉及以下内容时，自动使用 UI-UX-Pro-Max 技能： - 界面设计、UI 设计、UX 设计 - 网页布局、页面设计、前端界面 - 样式优化、视觉效果、配色方案 - 组件库、设计系统、交互设计 - 响应式设计、移动端界面 ## 行为准则 1. 对于任何 UI/UX 相关请求，首先调用 UI-UX-Pro-Max 设计数据库 2. 根据项目类型和行业选择合适的设计方案 3. 优先使用现代设计原则：简洁性、一致性、可用性 4. 确保生成的代码包含专业的样式和交互效果 ## 技术栈偏好 - 前端框架：优先使用 React / umijs + Ant Design - 设计语言：遵循 Ant Design 设计体系 - 组件库：使用 Ant Design 组件库（antd） - 样式方案：使用 @ant-design/cssinjs 或 less 变量定制 - 响应式：默认支持移动端优先的响应式设计 - 可访问性：遵循 WCAG 无障碍设计标准 ## Ant Design 专用规范 - 使用 Ant Design 的 Design Tokens 进行样式定制 - 遵循 Ant Design 的组件组合模式 - 使用 Form、Table、Modal 等核心组件构建界面 - 应用 Ant Design 的图标体系（@ant-design/icons） - 遵循 Ant Design 的间距和排版规范（8px 网格系统） ## 质量要求 - 生成的界面代码应该具有专业水准 - 避免 "Demo" 级别的简陋样式 - 包含适当的动画和过渡效果（使用 Ant Design 的 motion 设计） - 确保跨浏览器兼容性 - 遵循 Ant Design 的设计价值观：自然、确定性、意义感、生长性

3.3 设计令牌落地：把 Ant Design Token 写进配置

光有规则还不够，设计令牌要落到代码里。umijs 项目里通常用config/config.ts或config/defaultSettings.ts管理主题。下面是一份可复制的 Ant Design Token 配置片段，放在src/theme/tokens.ts：

// src/theme/tokens.ts import type { ThemeConfig } from 'antd'; export const antdTheme: ThemeConfig = { token: { colorPrimary: '#1677ff', borderRadius: 6, fontSize: 14, controlHeight: 32, wireframe: false, }, components: { Layout: { headerHeight: 56, headerPadding: '0 24px', }, Card: { paddingLG: 24, }, Table: { cellPaddingBlock: 12, headerBg: '#fafafa', }, }, };

然后在 umijs 的src/app.tsx里挂上去：

// src/app.tsx import { ConfigProvider } from 'antd'; import { antdTheme } from './theme/tokens'; export function rootContainer(container: React.ReactNode) { return <ConfigProvider theme={antdTheme}>{container}</ConfigProvider>; }

这样 AI 生成页面时，只要引用 antd 组件，样式会自动走这套 Token，不会出现「这个页面圆角 4px、那个页面圆角 8px」的混乱。

3.4 Trae 任务脚本：一键生成页面骨架

Trae 支持自定义任务脚本。在.trae/tasks/下新建gen-page.md，内容是一段给 AI 的指令模板：

# 任务：生成 Ant Design 规范页面骨架 ## 输入 - 页面名称：{{pageName}} - 页面类型：{{pageType}} # 列表页 / 详情页 / 表单页 / 看板 - 业务领域：{{domain}} # SaaS / 电商 / 金融 / 医疗 ## 要求 1. 先检索 UI UX Pro Max 数据库，选择匹配 {{domain}} 的调色板和字体 2. 使用 umijs 路由约定，页面文件放在 src/pages/{{pageName}}/index.tsx 3. 使用 Ant Design 的 Layout、Card、Table、Form 等组件 4. 样式走 src/theme/tokens.ts 里的 Token，不写硬编码颜色 5. 间距遵循 8px 网格 6. 输出完整可运行代码，包含 import 和类型定义 ## 输出格式 - 文件路径 - 完整代码 - 用到的设计令牌说明

在 Trae 里调用时，把{{pageName}}等占位符替换成实际值，AI 就会按这套流程生成。实测下来，生成的列表页骨架基本能直接跑，表格列宽、分页、搜索栏位置都符合 Ant Design 习惯。

4. 验证请求：从 Prompt 到成功生成页面

4.1 用 Demo Prompt 实测

UI UX Pro Max 官网提供了大量 Demo Prompt，直接复制就能用。我拿分类里 AI/Chatbot 的第一个 Prompt 试过，粘贴到 Trae 对话框，等几分钟，它会先生成设计决策说明，再输出代码。

验证时重点看三件事：

第一，生成的代码有没有引用.shared里的设计数据。如果 AI 在回复里提到「根据 UI UX Pro Max 的 SaaS 调色板，主色选用 #1677ff」，说明检索生效了。

第二，组件是不是 Ant Design 的。如果出现<div className="card">这种手写样式，而不是<Card>，说明规则没吃进去，要回去检查.trae/rules/project_rules.md是否被 Trae 加载。

第三，Token 有没有走通。生成的页面里如果出现color: #1890ff这种硬编码，而不是引用 theme，说明ConfigProvider没挂上，或者 AI 没读到tokens.ts。

4.2 验证 API 通道是否正常

如果你在 Trae 里配置了 TaoToken 的 Base URL，可以用一个最小请求验证通道：

curl https://taotoken.net/api/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer $TAOTOKEN_API_KEY" \ -d '{ "model": "your-model-id", "messages": [{"role": "user", "content": "ping"}] }'

返回里有choices字段就说明通道正常。如果返回 401，检查 Key 是否复制完整；如果返回local proxy failed，检查 Base URL 是不是写成了https://taotoken.net/api（不要带多余路径）。

4.3 成功结果长什么样

一个正常的生成结果应该包含：页面文件路径、完整 TSX 代码、用到的 Ant Design 组件列表、引用的设计令牌。代码里能看到import { Card, Table, Button } from 'antd'，样式部分引用theme.useToken()或直接走 ConfigProvider。页面跑起来后，间距、圆角、主色和 Ant Design 官方示例一致，不需要手动调。

5. 本篇常见错排查：401、local proxy failed、reading choices、OAuth

5.1 401 Unauthorized

最常见。原因通常是 Key 没填对、Key 过期、或者 Base URL 和 Key 不匹配。排查顺序：先去https://taotoken.net/api-keys确认 Key 还在有效期内，然后检查 Trae 配置里 Base URL 是不是https://taotoken.net/api，最后确认请求头里Authorization: Bearer <key>格式正确，没有多余空格。

5.2 local proxy failed

这个报错一般出现在 Base URL 写错的时候。比如写成了https://taotoken.net/api/v1而实际应该用https://taotoken.net/api，或者本地网络环境有额外拦截。先确认 URL 和文档一致，再检查 Trae 的网络设置里有没有配额外的代理规则。如果团队里有人能通有人不通，大概率是本地环境差异，不是 Key 的问题。

5.3 reading 'choices' of undefined

这个报错说明请求发出去了，但返回结构不对。常见原因是 Model ID 填错，服务端返回了错误信息而不是正常的 completion 结构。去https://taotoken.net/models确认你用的 Model ID 拼写正确，注意大小写和连字符。另外检查请求体里messages字段格式，必须是数组，每项有role和content。

5.4 OAuth 相关报错

如果你用的是 Claude Code 或 Codex 这类需要 OAuth 的工具，报错通常和 token 刷新有关。检查~/.codex/auth.json或对应工具的凭证文件，确认 access token 没过期。如果用的是 TaoToken 统一通道，OAuth 流程由通道侧处理，你只需要保证 API Key 有效即可。CC Switch 这类工具切换配置时，记得三件套一起换：Base URL、Key、Model ID，只换一个容易出问题。

5.5 规则不生效

Trae 里规则文件放了但 AI 不遵守，先确认文件路径是.trae/rules/project_rules.md，不是.trae/project_rules.md。然后检查 Trae 设置里「项目规则」是否开启。最后，规则文件里的关键词要明确，比如「优先使用 Ant Design」比「尽量用好的组件库」有效得多。

6. 把通道和规则固化下来，团队协作才不返工

走到这一步，Trae 里的项目规则、uipro-cli 的设计数据库、Ant Design 的 Token 配置、TaoToken 的统一 Key 通道，四件事已经串起来了。团队里新成员拉下代码，装好 uipro-cli，配好.trae/rules/project_rules.md，在 Trae 设置里填上 TaoToken 的 Base URL 和 Key，就能直接生成符合规范的页面骨架，不用每个人重新摸索一遍。

后续如果要扩展，可以在.trae/tasks/下多写几个任务模板，比如「生成带筛选的表格页」「生成带步骤条的表单页」，把常用页面类型都固化下来。设计令牌那边，如果业务需要换主题色，只改src/theme/tokens.ts里的colorPrimary，所有页面自动跟着变，不用一个个文件改。

接入文档和 API Key 管理入口在https://taotoken.net/doc和https://taotoken.net/api-keys，模型列表在https://taotoken.net/models。长期做编码和 Agent 场景的话，https://taotoken.net/coding-plan里有对应的方案说明。配置过程中遇到通道问题，优先对照第 5 节的报错排查，大部分情况是 Base URL 或 Model ID 写错，改对就能通。