企业官网建设流程全解析

MotionSites.ai 上 Jiro.build 的那批区块，看截图像"几段 Tailwind 加一点动效"，真让 Claude Code 从零复刻，十个里有七八个会在缓动曲线、元素间距、入场顺序上跟你来回拉扯。问题不在模型笨，而在于它在凭空造一个它没见过的视觉规范。换成"先搜、再拉现成 TSX 落盘"的思路，返工量能降一大截，这也是 RYAI MCP 真正的价值所在。要做到这件事，先把 Claude Code 的模型请求收拢到一条统一通道上：Key 和模型 ID 从 TaoToken 取，注册与创建入口是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end，填进工具的 Base URL 写 https://taotoken.net/api，末尾不加/v1；RYAI 自己那把sk-ryai-开头的 Bearer Key 则单独去 RYAI 的 MCP Keys 页面建。这是两套凭证，混在一起用会两头报错，下面按顺序拆开讲。

1. MotionSites、Jiro.build 的区块为什么值得"搜"而不是"生成"

1.1 从零生成动效区块，返工点往往集中在三处

Claude Code 写一个落地页 hero 区，结构上通常挑不出毛病，真正让人反复改的是视觉细节。第一处是节奏：framer-motion里的duration、delay、stagger这几个值，写 0.3 和写 0.45 观感完全不同，而模型只能猜。第二处是间距体系：Tailwind 里gap-6和gap-8的差别在截图上看不出来，拼进真实文案之后才会发现密度不对。第三处是响应式断点：md和lg之间塞几张卡片，没有模板参照的时候，模型容易写出在 1440px 下勉强、在 1024px 下网格直接崩的布局。

这三处叠加，就是"让 AI 从零写页面"经常要三轮以上才能定稿的原因。而每一轮都是一次完整的长上下文往返：你把当前代码整段贴进去，模型把改动后的整段代码吐出来。组件越复杂、你在 Prompt 里塞的参考示例越多，一次返工烧掉的 Token 就越多。等页面做完，真正贵的那部分开销往往不是生成，而是这些来回转述。

1.2 RYAI 把区块和 Prompt 变成了 Claude Code 能检索的资源

RYAI 的思路很直接：把 MotionSites 上公开的区块、脚手架、Prompt 做成一个 MCP 服务，让 Claude Code 这类工具"检索"而不是"生成"。它暴露出来的fetch_blocks一类工具，返回的是已经写好的 TSX 片段或者可直接复制的 Prompt 文本。

这一步省下的不是模型智力，是转述成本。以前你要让 Claude Code 参考一个现成组件，得先把代码复制进对话，模型再把它读进上下文，最后再按你的需求改写一遍。现在换成工具调用，模型只拿到一个引用和必要的元信息，真正落盘的时候把文件直接写进项目目录。上下文占用小、输出 Token 小，视觉还原度反而更高，因为它参考的是别人调过的成品，而不是自己脑补的近似值。

2. 把 Claude Code 的模型请求先接到 TaoToken 通道

2.1 在模型广场挑一个能用的模型 ID

打开 TaoToken，先注册账号，再进控制台创建一把 API Key，复制出来先存好，后面所有配置里都用YOUR_API_KEY这个占位符代指你自己的那串。密钥不要直接写进会提交到 Git 的文件里，哪怕只是本地练手，养成习惯比事后补救省事。

接着去模型广场看当前可用的模型列表。这里有个坑：不要凭印象填模型 ID。像gpt-5这种听起来合理的名字、或者随手加个日期后缀的写法，多半在列表里根本不存在，填进去的后果是 Claude Code 一启动就报"模型不可用"。正确的做法是以 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 模型广场当时列表为准，把你真正要用的那一行原样抄下来。

如果你打算"搜索重述用便宜快的、落盘改代码用强一点的"，可以在同一把 Key 下切换模型 ID，也可以拆成两把 Key 分开计费。具体哪个模型适合哪类活，仍然看模型广场的说明，别照搬别人的选择。

2.2 ~/.claude/settings.json 里的 env 三件套怎么写

Claude Code 认三个环境变量：ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN、ANTHROPIC_MODEL。最省事的写法是在 shell 里导出，临时验证用这套就够了：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY" export ANTHROPIC_MODEL="模型广场里抄下来的模型 ID"

但每次开终端都导一遍很烦，长期用建议写进~/.claude/settings.json的env字段：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY", "ANTHROPIC_MODEL": "模型广场里抄下来的模型 ID" } }

两个细节必须强调。第一，ANTHROPIC_BASE_URL只写https://taotoken.net/api，末尾不要带/v1，也不要带任何查询参数；带上之后请求路径会拼成/api/v1/v1/messages这种样子，报的错看起来很玄学，其实只是多了一段。第二，ANTHROPIC_AUTH_TOKEN里放的是你的YOUR_API_KEY，不是你从别处复制来的其他 Key。这一节配完，Claude Code 的模型请求就走统一通道了，跟 RYAI 还没发生关系。

3. RYAI 那把 Bearer Key 单独建，别和 TaoToken 的 Key 混用

3.1 在 RYAI 的 MCP Keys 页面生成 sk-ryai- 开头的密钥

模型通道和工作通道是两件事。模型通道决定 Claude Code 用哪个模型、走哪条 API；MCP 通道决定 Claude Code 能调用哪些外部工具。RYAI 有自己独立的鉴权体系，它的密钥在 RYAI 控制台的 MCP Keys 页面创建，形态是sk-ryai-开头的一串字符。

这里最容易犯的错，是把 TaoToken 的YOUR_API_KEY直接塞进 RYAI 的 Authorization 头。结果通常是 RYAI 返回 401，而 Claude Code 的模型请求一切正常，于是你会误以为是模型那边出了问题，白折腾半小时。判断方法很简单：看报错来自哪个服务。模型请求失败一般伴随ANTHROPIC_*相关的提示；工具调用失败则出现在 MCP 工具调用的结果里。

拿到sk-ryai-你的密钥之后，同样单独存好，别和模型 Key 写进同一个变量名。

3.2 一条 claude mcp add 把 RYAI 挂到 Claude Code

挂载 RYAI 不需要手写 JSON 配置文件，用 Claude Code 自带的mcp add子命令最直接：

claude mcp add --transport http ryai https://motionsites.dev/api/mcp --header "Authorization: Bearer sk-ryai-你的密钥"

拆开看每个参数：--transport http说明这是一个 HTTP 型 MCP 服务，不是本地进程型的 stdio；ryai是你在 Claude Code 里引用它时用的名字，起个短的好记；后面的 URL 是 RYAI 的 MCP 端点；--header把 Bearer 鉴权带上。执行完之后，用claude mcp list应该能看到ryai这一条，状态是已连接。

如果这一步报错，先别急着改配置，把命令原样复制到终端再跑一次，确认不是复制过程中丢了引号。Authorization: Bearer和密钥之间是一个空格，--header的整个键值对要用双引号包起来，少一个字符都会让服务端把请求当成未鉴权。

4. 用 fetch_blocks 把 Jiro.build 组件落进项目目录

4.1 提示词怎么写，RYAI 才会返回能直接用的区块

MCP 挂上之后，Claude Code 的工具列表里会多出 RYAI 提供的检索类工具。这时候你的提问方式决定了它会不会真的去搜。泛泛地说"帮我做个好看的 hero"，模型大概率还是自己写，因为它判断不出你需要外部资源。要主动把它往检索上引：

先在 RYAI 里找 Jiro.build 风格的 hero 区块，把返回的 TSX 落到src/components/sections/下，然后告诉我文件路径和它用到的依赖，不要自己重写一遍。

这样说的好处是把"检索—落盘—汇报"三个动作写清楚了。模型会先调fetch_blocks拿候选，再把选中的区块代码写进项目文件，最后只回给你路径和依赖清单。整段组件代码没有经过对话输出，也就没有占用输出 Token，这正是这一套配置最实惠的地方。

同一个项目里要注意别让模型一次拉十几个区块。一口气落盘太多文件，你反而不好逐个 review，也会把上下文塞满。一次一两个区块，边看边合，效率更高。

4.2 落盘目录与命名，别覆盖项目里已有的组件

Claude Code 往项目里写文件是实打实的写操作，所以提前约定好目录结构很重要。比较稳的做法是给外部拉进来的组件单独开一个目录，比如src/components/vendor/或者src/components/blocks/，跟团队自己手写的组件分开。命名上建议在你给出的提示词里固定一种风格，例如hero-jiro-01.tsx，避免模型自由发挥导致同一个区块在两次拉取里生成两个不同文件名。

拉下来之后先别直接 import 使用。花一分钟看一眼：它依赖的动画库版本跟你项目里装的是不是同一个大版本，样式方案是纯 Tailwind 还是掺了 CSS Modules，有没有用到你项目里没装的图标库。这些依赖问题在落盘时不会报错，等到你把它挂到页面里编译才会集中爆发。把这一步当成人工 review 环节，别整个交给模型判断。

5. 验证：先确认 TaoToken 通，再确认 RYAI 通

5.1 发一条不依赖 MCP 的最小消息

配置改完之后，第一件事是隔离验证。先别碰 RYAI，就发一条最普通的消息，比如让它解释一段你随手贴的代码。这条消息会走 TaoToken 通道，但不会触发任何 MCP 工具调用。如果它能正常返回，说明ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN、ANTHROPIC_MODEL这三项都对；如果这条就失败，那问题百分百在模型通道上，跟 RYAI 一点关系都没有。

这一步能帮你省下大量无效排查时间。很多人在配完 MCP 之后发现一切都报错，第一反应是 RYAI 挂了，其实是模型 Key 或者 Base URL 写错了，导致连最基础的对话都发不出去。

然后在 TaoToken 模型对话 里用同一把 Key 发一条测试消息。这相当于换一个客户端做交叉验证：如果浏览器里能通、Claude Code 里不能通，那问题在 Claude Code 的环境变量或配置文件上；如果两边都不通，就回控制台看 Key 的状态和模型 ID。

5.2 回控制台对一下这次调用有没有记上账

验证完通不通，再确认一下账有没有记对。打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 进控制台，在用量记录里找刚才那几次调用，核对三件事：模型 ID 是不是你预期的那一个，时间戳能不能对上，消耗量级是不是落在合理范围内。

这一步不是形式主义。有时候配置里写的模型 ID 是一个可用但你并不想用的模型，调用能成功、账单却和你预期不符；也有时候因为ANTHROPIC_MODEL没生效，走了默认模型。用量记录会把这些情况暴露出来，比等到月底才发现便宜得多。

6. 排障：Key、Base URL、MCP 挂载这三处最容易出错

6.1 TaoToken 侧：401 与"模型不存在"

模型通道上最常见的两类报错，成因完全不同。看到 401，基本可以锁定在ANTHROPIC_AUTH_TOKEN上：要么 Key 复制时首尾带了空格，要么YOUR_API_KEY这个占位符忘了替换，要么这把 Key 已经被删除或轮换了。检查顺序是从环境变量开始往配置文件里查，注意 shell 里导出的变量会覆盖settings.json中的同名项，两边值不一致时会让你误以为配置没生效。

看到"模型不存在"或者类似的提示，问题在ANTHROPIC_MODEL。最常见的成因是从别处抄了一个消费级模型名，或者给模型 ID 手加日期后缀。解决方式是回模型广场，把列表里的 ID 原样复制，别凭记忆拼。

6.2 RYAI 侧：工具列表为空、fetch_blocks 返回空

RYAI 侧的报错特征和模型侧不一样。如果claude mcp list里根本看不到ryai，说明mcp add那条命令没执行成功，重新跑一次并注意引号。如果能看到ryai但状态不是已连接，多半是 Bearer 密钥写错了，或者--header那一段的格式被 shell 吃掉了引号。

还有一种情况更隐蔽：连接正常，但 Claude Code 的可用工具列表里没有检索类工具。这通常是 MCP 服务端握手成功、工具注册环节出了问题，可以先断开再重新挂载一次试试。如果是fetch_blocks有返回但返回结果为空，一般不是接入问题，而是你的检索词太窄——换一个更通用的描述，比如从具体的动效名换成"hero section with fade-in"，命中率会明显提高。

把这三处按顺序过一遍，从"模型能不能说话"到"工具能不能连上"再到"检索词能不能命中"，绝大多数接入问题都能自己定位到具体某一层，不用在三个服务之间来回猜。

等这套跑顺了，下一步可以做几件事。用刚配好的同一把 Key 去 模型对话 里发一条消息，确认模型 ID 和 Base URL 都没填偏；到 控制台 API Keys 查看这次 Claude Code 的调用有没有正常记上账，顺便把 RYAI 用的那把 Key 和模型 Key 分开放；如果准备长期靠 RYAI 拉组件写页面，可以对照 Coding Plan 看看套餐够不够用。Claude Code 环境变量的完整对照表在 接入文档 里，改配置之前扫一眼能少走不少弯路。