企业官网建设流程全解析

1. 只给「登录、定价、页脚」为什么一定会丑：Agent 的平均审美来自哪里

如果你只给 Agent 一份「登录、定价、页脚」的功能清单，它大概率会还你紫渐变、圆角卡片三连排、Inter 标题。这不是模型不聪明，而是它没有设计说明书。把 ui-ux-pro-max 这类查参 Skill 接进工作流，再配合 TaoToken 的 Key（官网：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=agent-ui-start）补齐 Base URL，Agent 才能从平均审美走到你的品牌审美。

很多人第一次用 Agent 做官网或小程序首页，会经历一个很典型的循环：换模型、换提示词、换框架，出来还是同一张「模板脸」。能点、能滚、能响应式，但不像你的产品。问题往往不在模型够不够聪明，而在你只说了「做什么」，没说「按什么审美做」。Agent 缺少默认美学时，就会回到训练数据里出现最多的那张脸：高饱和紫、三列均等卡片、无衬线字体、大圆角、漂浮阴影。

前面已经有很多文章介绍过 Skill 是什么。你可以把 Skill 理解成「把某类任务的标准作业程序固化下来」：定方向、查参数、拆组件、查卡顿、清单终审。单独一个 Skill 只能解决一个点，五个串起来才像一条流水线：frontend-design 负责定方向，ui-ux-pro-max 负责查参数，composition-patterns 负责理结构，react-best-practices 负责顺体感，web-design-guidelines 负责终审。

但这里有一个容易被忽略的工程问题：Skill 本身只是提示词资产，真正执行它们的仍然是模型。模型从哪里来、Key 怎么管、Base URL 填什么，决定了这套工作流能不能稳定复现。本文不打算只列五个 Skill 清单，而是把重点放在「怎么把 ui-ux-pro-max 的查参能力接进你的 Agent」，并且用 TaoToken 的 Key 把模型调用统一起来。你可以在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=agent-ui-start 拿到 Key，工具侧 Base URL 填https://taotoken.net/api，Key 占位符用YOUR_API_KEY。

先把丑的根因拆开看：

• 只给功能清单：登录、定价、页脚、导航、CTA，Agent 只能用互联网平均审美填空。
• 形容词太虚：「高级一点」「有设计感」「像苹果」没有可执行约束，等于没说。
• 一次又美又快又规范：上下文里同时塞风格、性能、可访问性，最后哪边都糊。
• 写完不审：对比度、触控热区、动效、键盘焦点乱飞，自己扫一眼也发现不了。

Skill 补的是「缺说明书」。而 ui-ux-pro-max 补的是说明书里最硬的一块：风格关键词、主色辅色、字体建议、字号层级、UX 注意事项、禁区。方向有了，参数没有，页面还是会飘；参数有了，结构没拆，改一处就全局炸；结构拆了，体感不查，一滚就卡。所以五个 Skill 不是「五个可选项」，而是一条有顺序的流水线。

这条流水线里，最消耗 Token 的环节恰恰不是生成页面，而是「查参数」。因为查参不是一句「给我个好看的颜色」就结束，它需要把平台、产品类型、用户场景、品牌气质、禁止项都带进去，再把返回的风格词、色板、字体、UX 清单写进上下文。上下文越长，后续每一步生成越容易带上这些约束，也越费 Token。这也是为什么本文把视角放在「补参数的 Agent 消耗 Token」上：你得知道钱花在哪，才知道怎么省。

2. 补参数的 Agent 更烧 Token：ui-ux-pro-max 查询到底返回了什么

ui-ux-pro-max 的价值在于「查库」，而不是「拍脑袋」。当你对 Agent 说「给我一套视觉方案」，它返回的不应该只是「科技蓝、简洁、现代」这种废话，而应该是一组可落地的参数。一个合格的查参结果通常包含：

• 风格关键词：例如 editorial、lab notebook、soft brutalist、quiet luxury、retro terminal。
• 主色与辅色：主色 HEX、辅色 HEX、背景色、文字色、边框色、状态色。
• 字体建议：标题字体、正文字体、等宽字体，以及是否使用系统字体栈。
• 字号层级：H1、H2、正文、辅助文字、按钮文字。
• 间距与圆角：基准间距、卡片圆角、按钮圆角。
• UX 注意：3 条左右，例如首屏密度、导航可发现性、表单错误提示。
• 禁区：2 条左右，例如不要紫渐变、不要三列均等大卡片、不要 Inter 默认标题。

这些东西一旦进入上下文，后续每一次生成页面都会带上它们。好处是风格稳定，坏处是 Token 消耗上升。如果你还让 Agent 在网页和小程序两套之间反复横跳，或者每改一次页面就重新查一次库，Token 会以肉眼可见的速度增加。更麻烦的是，上下文一长，模型可能开始「忘记」早期的约束，出现风格漂移：明明 DESIGN.md 里写了主色是墨绿，生成到第三屏又变回了紫色。

所以正确姿势不是「一次查个够」，而是「查一次，落盘，引用文件」。让 ui-ux-pro-max 的输出写进项目里的DESIGN.md，后续生成页面时只引用这个文件，不再重复查询。需要局部调整时，只针对某个组件或某个页面重新查，而不是全量重查。

这时候稳定的模型入口就很重要。你可以在 TaoToken 官网（https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=token-budget）获取 Key，把 Base URL 统一填成https://taotoken.net/api。不管你是用 Claude Code、Codex 还是自己写的脚本，模型调用都走同一个入口，排查问题和估算消耗会简单很多。

一个常见的省 Token 流程是这样的：

1. frontend-design 先出 8 行设计简报，确认方向。 2. ui-ux-pro-max 只查一次，输出风格词、主色辅色、字体、字号层级、UX 注意、禁区。 3. 把查参结果写入 DESIGN.md，提交到仓库。 4. 生成页面时提示词只写：严格读取 DESIGN.md，不要自由发挥配色和字体。 5. 结构调整用 composition-patterns，不再重查视觉参数。 6. 性能与终审只看局部页面，不把整站上下文塞进去。

这个流程的关键是「查参结果文件化」。文件化之后，Agent 的上下文从「一大段聊天记录」变成「一个可引用的规范文件」，Token 消耗更可控，风格也更稳定。你甚至可以让 Agent 在每次生成页面前先输出一行：「已读取 DESIGN.md：主色 #1F3A2E，标题字体 Source Serif，正文 Inter Tight，禁止紫渐变」。这行确认本身也消耗 Token，但比起风格跑偏后重做，成本低得多。

如果你发现查参阶段特别费 Token，通常有三个原因：一是问句太泛，Agent 返回了大量无关风格；二是没有指定平台，网页和微信小程序两套参数混在一起；三是没有让 Agent 先给清单、确认后再展开。修正方式很简单：问句必须带平台，先要结构化结果，再要解释。例如：

用 ui-ux-pro-max，给个人工具型产品官网（Web）查一套视觉方案。 只输出结构化结果： - 风格关键词（5 个） - 主色辅色（HEX） - 字体建议（标题/正文/等宽） - 字号层级（H1/H2/正文/辅助/按钮） - UX 注意（3 条） - 禁区（2 条） 不要写解释，不要生成页面代码。

这样返回的内容短、准、可落盘。后续生成页面时，把 DESIGN.md 贴进上下文即可。对于微信小程序，把「Web」换成「微信小程序」，并要求输出竖屏密度、底部 Tab 意图、按钮热区、字号是否好扫。两套参数不要混用，否则 Agent 会拿网页的宽松间距去做小程序，首屏塞不下，又回到三列卡片堆满的老路。

3. 接入 TaoToken：Claude Code、Codex、CC Switch 三套配置

要把上面的工作流跑起来，第一步是拿到可用的 Key。去 TaoToken 官网（https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=key-setup）注册并创建 Key，然后在工具侧统一填写 Base URL：https://taotoken.net/api。注意，Base URL 本身不加 UTM 参数，UTM 只用于官网和 deep link 的访问统计。

下面按三种常见工具分别写配置。你可以只选自己用的那一套，不要混用。

3.1 Claude Code：settings.json 与 ANTHROPIC_*

Claude Code 使用ANTHROPIC_*系列环境变量。你可以在项目的.claude/settings.json或用户级 settings 中写入：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY", "ANTHROPIC_MODEL": "YOUR_MODEL_NAME", "ANTHROPIC_SMALL_FAST_MODEL": "YOUR_SMALL_FAST_MODEL_NAME" } }

把YOUR_API_KEY替换成你在 TaoToken 控制台创建的 Key，YOUR_MODEL_NAME和YOUR_SMALL_FAST_MODEL_NAME替换成模型对话页里可用的模型名。保存后重启 Claude Code，让它重新读取 settings。验证方式很简单：在 Claude Code 里问一句「你现在使用的 Base URL 是什么」，或者直接跑一个最小对话，看是否正常返回。

如果你更习惯用 shell 环境变量，也可以写成：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" export ANTHROPIC_MODEL="YOUR_MODEL_NAME"

但要注意，shell 环境变量和 settings.json 同时存在时，优先级可能因版本而异。最稳妥的做法是只保留一处配置，避免排查时分不清用了哪个 Key。

3.2 Codex：config.toml 与 model_providers

Codex 不吃ANTHROPIC_*。这一点很容易踩坑：有人把 Claude Code 的配置复制到 Codex，结果一直报认证失败。Codex 使用config.toml，你需要配置model_provider。

model = "YOUR_MODEL_NAME" model_provider = "taotoken" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" env_key = "TAOTOKEN_API_KEY" wire_api = "responses"

然后在 shell 里设置：

export TAOTOKEN_API_KEY="YOUR_API_KEY"

注意，env_key写的是环境变量名，不是 Key 本身。不要把ANTHROPIC_AUTH_TOKEN填到 Codex 的配置里，也不要把ANTHROPIC_BASE_URL套到 Codex 的model_providers上。Claude Code 和 Codex 是两套协议、两套字段，混用只会增加排障时间。

如果你的 Codex 版本要求wire_api为chat或其他值，以你本地版本的说明为准。核心不变：base_url指向https://taotoken.net/api，env_key指向你存放 Key 的环境变量。

3.3 CC Switch 三件套：Base URL、API Key、模型名

如果你用 CC Switch 这类切换工具，逻辑更简单，本质就是三件套：

供应商名称：TaoToken Base URL：https://taotoken.net/api API Key：YOUR_API_KEY 模型名：你在 TaoToken 模型对话页选定的模型

把这三项填进去，切换供应商时不要只换 Key 不换 Base URL，也不要只换 Base URL 不换模型名。很多「明明 Key 没错却调不通」的问题，最后都出在只改了其中一项。

配置完成后，建议先做一个最小验证：让模型返回一句固定文本，确认网络、Key、Base URL、模型名四项都对。再去跑 ui-ux-pro-max 的查参提示词。不要一上来就让 Agent 生成整站首页，否则一旦认证有问题，你分不清是模型没返回还是页面生成失败。

如果你还没有创建 Key，可以从文末的 API Keys deep link 进入控制台。创建后先复制保存，Key 通常只展示有限次数。

4. 把五个 Skill 串成流水线：网站与小程序两套提示词

配置好 TaoToken 之后，接下来才是 Skill 工作流。五个 Skill 的分工不要乱：

• frontend-design：定方向。开写前逼 Agent 出设计简报，明确气质、字体、主色、禁区。
• ui-ux-pro-max：查参数。方向有了但缺具体数值时，查风格词、色板、字体、字号层级。
• composition-patterns：理结构。网站用 React 组合模式，小程序拆自定义组件，只动结构不动视觉。
• react-best-practices：顺体感。查重渲染、瀑布请求、列表性能；小程序可查多余 setData、首屏请求瀑布。
• web-design-guidelines：终审。对照可读性、触控、信息层级，上线前扫一遍。

做网站的顺序可以固定为：

frontend-design 出 8 行设计简报 → ui-ux-pro-max 查 Web 视觉方案 → 写入 DESIGN.md → 生成页面 → composition-patterns 审结构 → react-best-practices 查性能 → web-design-guidelines 终审

做微信小程序的顺序：

frontend-design 出竖屏设计简报 → ui-ux-pro-max 查微信小程序视觉方案 → 写入 DESIGN.md → 生成首页 → 拆自定义组件 → 体感自检 → 触控与可读性终审

提示词可以直接抄下面这套。网站版：

按 frontend-design 做一版个人工具产品官网首页（网站，非小程序）。 先给 8 行设计简报，我确认后再写代码。 气质偏编辑杂志 / 实验室手记；不要紫渐变、Inter、三列图标开场。 确认后，用 ui-ux-pro-max 给 Web 查视觉方案，输出风格词、主色辅色、字体、字号层级、3 条 UX 注意、2 条禁区。 把结果写入 DESIGN.md，后续页面严格引用该文件。

小程序版：

按 frontend-design 做一版微信小程序首页（工具类，个人开发）。 先给 8 行设计简报：竖屏、克制、好扫、底部 Tab 意图、禁区。 不要紫渐变，不要三列均等大卡片堆满首屏。 确认后，用 ui-ux-pro-max 给微信小程序查视觉方案，输出风格词、主色辅色、字号层级、首页密度注意、2 条禁区。 写入 DESIGN.md，后续页面不要自由发挥配色。

这里有一个执行细节：如果你用 Claude Code 或 Codex 跑这些提示词，Skill 需要放在对应工具的 skills 目录，或者让 Agent 按项目内的 manifests 读取。不要在提示词里同时塞「生成代码」和「查参数」两个大任务，否则 Agent 会一边查一边写，最后参数没落盘，页面已经生成，回头还得重做。

结构梳理阶段的提示词：

用 composition-patterns 审当前网站设置页。 先给重构清单，确认后再改。不要顺手改视觉样式。

用 composition 思路审这个微信小程序设置页。 指出该拆哪些自定义组件、哪些数据不该堆在页面里。先给清单。

性能与体感阶段：

按 react-best-practices 检查这个网站页面。 优先找重渲染、瀑布请求、列表性能。 输出：问题 → 依据 → 小改法。

检查这个微信小程序页面的体感问题。 优先找多余 setData、列表卡顿、首屏瀑布、图片过大。 输出：问题 → 小改法。

终审阶段：

用 web-design-guidelines 审这个网站页面。 按必须改 / 建议改列出；每条带现象、原因、改法。

对照可读性 / 触控 / 信息层级，审这个微信小程序页面。 按必须改 / 建议改列出；关注对比度、按钮热区、字号是否好扫。

你会发现，真正让页面变好看的并不是某一个 Skill，而是顺序被拆开了。每一步都有明确的输入和输出，Agent 不再需要一次性猜完所有东西。模型没有突然变会设计，它只是拿到了说明书。

5. 可复现产出：DESIGN.md 里必须有风格词、主色和字体参数

这一节是全文最值得直接抄走的部分。ui-ux-pro-max 查完参数后，不要让它留在聊天记录里，必须落成DESIGN.md。一个可复现的 DESIGN.md 至少包含以下字段：

# DESIGN.md ## 产品与平台 - 产品类型：个人工具型产品 - 目标平台：Web / 微信小程序 - 核心用户：独立开发者、效率工具用户 ## 风格关键词 - editorial - lab notebook - quiet utility - 克制留白 - 信息优先 ## 颜色 - 主色：#1F3A2E - 主色悬停：#2C5544 - 辅色：#C8A96A - 背景：#F7F5F0 - 卡片背景：#FFFFFF - 正文文字：#1C1C1A - 辅助文字：#6B6B66 - 边框：#E3DED4 - 错误：#B3261E - 成功：#2E6B4F ## 字体 - 标题：Source Serif 4 - 正文：Inter Tight - 等宽：JetBrains Mono - 回退栈：system-ui, -apple-system, "Segoe UI", sans-serif ## 字号层级 - H1：40px / 1.15 / 600 - H2：28px / 1.25 / 600 - H3：20px / 1.35 / 600 - 正文：16px / 1.65 / 400 - 辅助：13px / 1.5 / 400 - 按钮：15px / 1.2 / 600 ## 间距与圆角 - 基准间距：8px - 页面左右边距：24px（Web）/ 20px（小程序） - 卡片圆角：12px - 按钮圆角：10px - 阴影：0 1px 2px rgba(0,0,0,0.06) ## UX 注意 - 首屏必须露出核心动作，不要用三列均等卡片堆满。 - 导航名称用用户语言，不要用「更多」「其他」。 - 表单错误提示放在字段下方，不要只靠颜色区分。 ## 禁区 - 不要紫渐变。 - 不要 Inter 作为标题默认字体。 - 不要三列图标开场。 - 不要大圆角 + 重阴影 + 高饱和色的组合。

这份文件写完后，后续提示词就可以变得很短：

严格读取 DESIGN.md。 生成官网定价页。 只使用 DESIGN.md 中的颜色、字体、字号、间距、圆角。 不要引入新的主色，不要使用紫渐变。 先生成页面结构，再生成样式。

对于微信小程序，DESIGN.md 里要额外补几条：

## 小程序专项 - 竖屏优先，首屏不做横向滚动。 - 底部 Tab 不超过 4 个，命名用动词或名词，不用「首页」占位。 - 按钮最小热区：44px × 44px。 - 正文字号不小于 14px，辅助文字不小于 12px。 - 列表项超过 20 条时，必须考虑分页或虚拟列表。 - 图片必须写宽高比，避免首屏跳动。

这样做的价值是：换模型、换会话、换工具，只要 DESIGN.md 还在，风格就不会漂。ui-ux-pro-max 的查参结果从「一次聊天」变成了「项目资产」。补参数消耗的 Token 是一次性的，后续复用不再重复消耗。

如果你想把这一步做得更稳，可以让 Agent 在每次生成页面前输出一段确认：

读取 DESIGN.md 完成。 本次使用： - 主色 #1F3A2E - 标题字体 Source Serif 4 - 正文字体 Inter Tight - 按钮圆角 10px - 禁区：紫渐变、Inter 标题、三列图标开场

如果这段确认里出现了 DESIGN.md 没有的颜色或字体，说明 Agent 又开始自由发挥了，立刻打断，让它重新读取文件。这个检查动作看起来繁琐，但能省下大量返工 Token。

6. Agent 查参数时怎么省 Token：缓存、分步确认、局部重查

补参数的 Agent 消耗 Token，这是事实，但可以控制。核心策略有三条：缓存、分步确认、局部重查。

缓存指的是把 ui-ux-pro-max 的输出写入 DESIGN.md 并提交到仓库。不要让 Agent 每次生成页面都重新查一遍。只有当你明确要改版、换品牌色、换字体时，才重新查。查询时也要限定输出格式，只要结构化字段，不要长篇解释。

分步确认指的是把「查参数」和「生成页面」拆成两个独立回合。第一回合只查参数，输出 DESIGN.md 草稿，你确认或修改。第二回合才生成页面，并且明确要求引用 DESIGN.md。很多人的 Token 浪费在「让 Agent 边查边写」：它查了一半就开始写，写完发现参数不对，又重写，上下文里同时存在两版风格，最后哪版都不彻底。

局部重查指的是只针对出问题的部分重新查询。比如小程序首页的底部 Tab 区域太挤，你不需要重新查整套视觉方案，只需要：

基于当前 DESIGN.md，只针对微信小程序底部 Tab 区域给出 3 条密度优化建议。 不要改变主色、字体和整体风格。 输出：问题 → 改法 → 影响范围。

这样返回内容短，落盘也快。类似的还有「只查表单错误状态颜色」「只查空状态插画风格」「只查价格卡片的信息层级」。把大查询拆成小查询，Token 消耗会明显下降，风格也不容易崩。

另外，控制上下文长度也很重要。生成页面时，不要把整份 DESIGN.md 和整站代码同时塞进去。可以只贴相关片段：颜色表、字体表、当前页面结构。Claude Code 和 Codex 都支持按文件引用，让 Agent 自己去读文件，通常比你在提示词里粘贴全文更省。

如果你用 TaoToken 的 Coding Plan，可以把这类多轮查参与生成任务放在同一个计划里管理，避免每次临时找 Key。入口在文末的 Coding Plan deep link。

7. 上线前终审与常见排障

页面能看之后，最后一步是终审。web-design-guidelines 的作用是把「我觉得还行」变成「有清单可查」。网站侧重点看键盘焦点、对比度、信息层级、链接可识别性；小程序侧重点看竖屏热区、字号、对比度、底部安全区、滚动流畅度。

终审提示词建议固定成：

用 web-design-guidelines 审这个页面。 按「必须改 / 建议改」分组。 每条包含：现象、原因、改法。 不要重写页面，只给修改清单。

拿到清单后，再让 Agent 逐条改，不要一次性全改。一次性全改容易引入新问题，而且上下文太长，模型可能漏掉某条。逐条改的好处是每改一条都能验证，Token 也更好估算。

常见问题与处理方式：

• Agent 不读 DESIGN.md：在提示词开头强制写「第一步先输出 DESIGN.md 关键字段确认，再开始生成」。
• 风格漂移：检查是否在同一个会话里混了多个平台。网页和小程序分开会话，分开 DESIGN.md。
• 颜色对比度不够：让终审 Skill 输出具体 HEX 对比度，不要只说「对比度低」。
• 小程序首屏太挤：回到 ui-ux-pro-max 查「首页密度注意」，或者手动限定首屏只放一个主任务。
• 一滚就卡：先用 react-best-practices 或体感自检查列表，不要急着换 UI 框架。
• 改一处全局炸：先用 composition-patterns 拆组件，不要直接大改视觉。
• Key 调不通：先确认 Base URL 是https://taotoken.net/api，再确认 Claude Code 用ANTHROPIC_*、Codex 用config.toml，两者不要混。

如果排障时发现是 Key 或额度问题，去 TaoToken 控制台重新创建 Key，不要在多篇文章里复制来路不明的 Key。控制台入口放在文末。

8. 从模型对话到 Coding Plan：把查参与生成固定成日常流程

回到最初的问题：只给登录、定价、页脚，Agent 一定用平均审美填空。要打破这个循环，你需要三样东西：一套可复用的 Skill 流水线，一份落盘的 DESIGN.md，一个稳定的模型入口。前两样是提示词资产，第三样是工程配置。

TaoToken 在这里扮演的是统一入口的角色。官网注册后创建 Key，工具侧 Base URL 填https://taotoken.net/api，Claude Code 用ANTHROPIC_*，Codex 用config.toml，CC Switch 填三件套。配置一次，后面查参数、生成页面、终审都在同一个入口下完成，排查和成本估算都更简单。

建议的日常流程：

1. 在模型对话里跑 frontend-design，出设计简报。
2. 用 ui-ux-pro-max 查一次参数，写入 DESIGN.md。
3. 在 Claude Code 或 Codex 里生成页面，严格引用 DESIGN.md。
4. 用 composition-patterns 拆结构。
5. 用 react-best-practices 或体感自检查性能。
6. 用 web-design-guidelines 终审。
7. 上线后只做局部重查，不重复全量查参。

这样你补参数消耗的 Token 是一次性的，产出却可以反复复用。页面从「能看」到「像你的产品」，靠的不是一句「再美一点」，而是方向有人拍板、参数有据可查、结构拆得开、体感说得清、上线前有清单。

如果你还没有 Key，可以按下面这条路径走：

• 先到模型对话体验：https://taotoken.net/models/detail/chat?utm_source=taotoken_aicg_blog_end&utm_content=uiux-pro-max-cta
• 需要长期跑多轮查参与生成，看 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=uiux-pro-max-cta
• 创建自己的 API Key：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=uiux-pro-max-cta
• Claude Code 配置细节看官方文档：https://taotoken.net/doc/ClaudeCodeAnthropic?utm_source=taotoken_aicg_blog_end&utm_content=uiux-pro-max-cta

配好之后，回头再看那句「做个产品官网」，Agent 就不会只给你紫渐变三连卡片了。它会先问你要设计简报，再查参数，再落 DESIGN.md，最后才动手生成。丑不丑，取决于你有没有给它说明书；稳不稳，取决于你有没有把 Key 和 Base URL 配对。