一个被忽略的成本问题用 AI 写前端大家都有过这样的体验让它生成一个 Hero 区块出来的东西能跑但不好看让它改改三轮才勉强能用下一个页面重来一遍。我们做了一次实测。用 AI 从零生成一个 8 区块的落地页Hero、特性、定价、评价、FAQ、CTA、页脚等把返工也算进去输出 token约 60,000 输入 token约 30,000每轮把已有代码读回上下文按 Claude Sonnet 的价格输入 $3/M、输出 $15/M算接近 $1 一个页面。问题不在于 AI 不够聪明而在于输出 token 的单价大约是输入的 5 倍。让 AI「写」东西永远比让它「找」东西贵得多。这篇文章讲的就是怎么把「写」换成「找」以及怎么用 MCP 协议把这件事做进你现有的 AI 编程工具里。现有方案解决了一半市面上已经有不少 AI 网站提示词库——Motionsites、Jiro 这类积累了大量经过设计的页面提示词。它们解决了素材从哪来的问题不用自己想设计挑一条现成的就行。但它们没解决素材怎么进项目的问题。典型工作流仍然是打开网页 → 搜索 → 预览 → 复制提示词 → 切回 IDE → 粘贴给 AI → 等它生成这里有三个隐性成本上下文切换浏览器和 IDE 来回跳一个页面切十几次仍然在「生成」提示词只是描述AI 拿到后还是要从零写代码那 60K 输出 token 一分没省AI 不知道库里有什么你得自己去搜、自己判断哪条合适第 2 点是关键。提示词库降低的是设计成本不是 token 成本。MCP 是什么为什么适合这件事Model Context ProtocolMCP是一个开放协议让 AI 客户端能调用外部工具和数据源。它现在被主流工具广泛支持Claude Code · Claude Desktop · ChatGPT · Cursor · VS CodeCopilot· Windsurf · Cline · ZedMCP 的价值在这个场景里非常直接AI 可以自己搜索素材库不需要你切浏览器。但真正让成本降下来的是另一个设计——让代码绕过上下文。关键设计代码不进 context一个 React 组件平均 1 万字符 TSX。如果 MCP 工具直接把代码返回给 AI那这 1 万字符就要进上下文token 照烧不误只是从「输出」变成了「输入」省了 5 倍单价但没省掉体积。更好的做法是MCP 只返回下载地址让 AI 用curl把文件直接写到磁盘。fetch_blocks({ slugs: [hero-x, pricing-y] }) → { blocks: [{ files: [{ filename: Hero.tsx, bytes: 13206, url: https://... }] }], dependenciesUnion: [framer-motion, lucide-react] }我们实测过这组数字两个组件的真实代码21,773 字节 MCP 响应体 1,166 字符约 18 倍的压缩。代码全程没进模型的上下文AI 只是执行了两条curl命令。这一步之后成本对比变成输入输出约合成本从零生成含约 2.5 轮返工30K60K$0.99走 MCP 取现成组件13K7.5K$0.15差距约6 倍。原理很朴素把最贵的输出 token换成最便宜的输入 token其中一部分连输入都不花。实战怎么接我们把这套东西做成了开源插件仓库在github.com/kvalen-code/Motionsites-Dev连接的素材库是 motionsites.dev1600 条提示词与组件。Claude Code/plugin marketplaceaddkvalen-code/Motionsites-Dev /plugininstallryai装的时候会问 API Key可以先留空——搜索完全免费不需要账号。Cursor / Windsurf / VS Code / Codex / Zed这些工具不认 Claude Code 的 skill 格式但都支持 MCP。在设置里加这个端点https://motionsites.dev/api/mcp然后把仓库里的AGENTS.md复制到你的项目根目录。AGENTS.md是一个开放格式目前有 23 个工具支持Codex、Cursor、Windsurf、Zed、Gemini CLI、Devin、Junie、Aider、goose、VS Code 等60k 开源项目在用。它承载的是「怎么规划、怎么施工」的指导逻辑跟 MCP 工具配合使用。四个工具工具鉴权返回search_prompts无需匹配的区块标题、描述、预览图、是否带代码get_promptAPI Key单条提示词正文给没有现成代码的区块fetch_blocksAPI Key每个文件一个签名下载地址 依赖清单get_scaffoldAPI Key完整脚手架模板的 git clone 地址注意get_prompt和fetch_blocks的分工——这两条路不能混用带现成代码的区块走fetch_blocks下载到磁盘没有代码的区块走get_prompt拿提示词让 AI 生成服务端对此做了硬性拦截如果你对一个带代码的区块调get_prompt会被直接拒绝并提示改用fetch_blocks。因为放行就意味着把 1 万字符塞进上下文这不是偏好问题是数量级差别。一个容易被忽略的坑fetch_blocks把文件下载到磁盘后AI 会本能地想读回来确认。这一读前面省下的上下文全回来了。所以工具的返回描述里必须显式抑制这个行为Do NOT read the files back afterwards. They are already correct on disk.Read one only if a build actually fails.这是提示工程不是代码——但漏了它整个设计就白做。如果你自己实现类似的 MCP 工具这一点值得记住。从「说需求」到「出页面」素材和接入都解决之后还剩一个问题不懂技术的人不知道自己要什么。「我想做个卖课的网站」——然后就没了。不知道要哪些页面不知道页面里该有哪些区块。我们的处理是一套引导逻辑最多问五个问题一句技术黑话都没有问什么不问什么需要用户登录、保存数据吗要不要后端想要什么感觉给四个选项配示例图新拟态还是野兽派现在有项目了吗空文件夹 / 已有项目用什么脚手架技术栈是替他决定的不是问出来的。问完输出一份PROJECT.md# 卖课网站 技术栈Next.js Tailwind ## 首页 - [ ] hero — coffee-shop-header-laounge (code) - [ ] features — bento-grid-stats (code) - [ ] pricing — nimbus-pricing (prompt)(code)和(prompt)就是上面说的两条路线的标记。这里有个硬约束值得说方案里每个 slug 必须来自search_prompts的真实结果不许 AI 编。编出来的 slug 在下载阶段必然失败而那时候用户已经等了半天了。什么情况下不适合说点反面的已有成熟设计系统的团队你们的组件库比任何通用库都合适用不上这个高度定制的交互现成区块解决的是常见结构Hero、定价、FAQ不是你独有的业务界面纯后端项目完全无关它真正适合的是从零起一个站、要做落地页、需要快速出可用界面的场景。小结三个可以单独拿走的结论AI 写前端贵在输出 token输出单价约为输入的 5 倍能复用就别生成MCP 返回下载地址而不是内容可以让大体积产物完全绕过上下文实测 18 倍压缩AGENTS.md 让指导逻辑跨工具复用不用为每个 IDE 写一份
给 AI 编程工具接一个组件库：用 MCP 让 Claude Code / Cursor 直接取现成 React 组件
一个被忽略的成本问题用 AI 写前端大家都有过这样的体验让它生成一个 Hero 区块出来的东西能跑但不好看让它改改三轮才勉强能用下一个页面重来一遍。我们做了一次实测。用 AI 从零生成一个 8 区块的落地页Hero、特性、定价、评价、FAQ、CTA、页脚等把返工也算进去输出 token约 60,000 输入 token约 30,000每轮把已有代码读回上下文按 Claude Sonnet 的价格输入 $3/M、输出 $15/M算接近 $1 一个页面。问题不在于 AI 不够聪明而在于输出 token 的单价大约是输入的 5 倍。让 AI「写」东西永远比让它「找」东西贵得多。这篇文章讲的就是怎么把「写」换成「找」以及怎么用 MCP 协议把这件事做进你现有的 AI 编程工具里。现有方案解决了一半市面上已经有不少 AI 网站提示词库——Motionsites、Jiro 这类积累了大量经过设计的页面提示词。它们解决了素材从哪来的问题不用自己想设计挑一条现成的就行。但它们没解决素材怎么进项目的问题。典型工作流仍然是打开网页 → 搜索 → 预览 → 复制提示词 → 切回 IDE → 粘贴给 AI → 等它生成这里有三个隐性成本上下文切换浏览器和 IDE 来回跳一个页面切十几次仍然在「生成」提示词只是描述AI 拿到后还是要从零写代码那 60K 输出 token 一分没省AI 不知道库里有什么你得自己去搜、自己判断哪条合适第 2 点是关键。提示词库降低的是设计成本不是 token 成本。MCP 是什么为什么适合这件事Model Context ProtocolMCP是一个开放协议让 AI 客户端能调用外部工具和数据源。它现在被主流工具广泛支持Claude Code · Claude Desktop · ChatGPT · Cursor · VS CodeCopilot· Windsurf · Cline · ZedMCP 的价值在这个场景里非常直接AI 可以自己搜索素材库不需要你切浏览器。但真正让成本降下来的是另一个设计——让代码绕过上下文。关键设计代码不进 context一个 React 组件平均 1 万字符 TSX。如果 MCP 工具直接把代码返回给 AI那这 1 万字符就要进上下文token 照烧不误只是从「输出」变成了「输入」省了 5 倍单价但没省掉体积。更好的做法是MCP 只返回下载地址让 AI 用curl把文件直接写到磁盘。fetch_blocks({ slugs: [hero-x, pricing-y] }) → { blocks: [{ files: [{ filename: Hero.tsx, bytes: 13206, url: https://... }] }], dependenciesUnion: [framer-motion, lucide-react] }我们实测过这组数字两个组件的真实代码21,773 字节 MCP 响应体 1,166 字符约 18 倍的压缩。代码全程没进模型的上下文AI 只是执行了两条curl命令。这一步之后成本对比变成输入输出约合成本从零生成含约 2.5 轮返工30K60K$0.99走 MCP 取现成组件13K7.5K$0.15差距约6 倍。原理很朴素把最贵的输出 token换成最便宜的输入 token其中一部分连输入都不花。实战怎么接我们把这套东西做成了开源插件仓库在github.com/kvalen-code/Motionsites-Dev连接的素材库是 motionsites.dev1600 条提示词与组件。Claude Code/plugin marketplaceaddkvalen-code/Motionsites-Dev /plugininstallryai装的时候会问 API Key可以先留空——搜索完全免费不需要账号。Cursor / Windsurf / VS Code / Codex / Zed这些工具不认 Claude Code 的 skill 格式但都支持 MCP。在设置里加这个端点https://motionsites.dev/api/mcp然后把仓库里的AGENTS.md复制到你的项目根目录。AGENTS.md是一个开放格式目前有 23 个工具支持Codex、Cursor、Windsurf、Zed、Gemini CLI、Devin、Junie、Aider、goose、VS Code 等60k 开源项目在用。它承载的是「怎么规划、怎么施工」的指导逻辑跟 MCP 工具配合使用。四个工具工具鉴权返回search_prompts无需匹配的区块标题、描述、预览图、是否带代码get_promptAPI Key单条提示词正文给没有现成代码的区块fetch_blocksAPI Key每个文件一个签名下载地址 依赖清单get_scaffoldAPI Key完整脚手架模板的 git clone 地址注意get_prompt和fetch_blocks的分工——这两条路不能混用带现成代码的区块走fetch_blocks下载到磁盘没有代码的区块走get_prompt拿提示词让 AI 生成服务端对此做了硬性拦截如果你对一个带代码的区块调get_prompt会被直接拒绝并提示改用fetch_blocks。因为放行就意味着把 1 万字符塞进上下文这不是偏好问题是数量级差别。一个容易被忽略的坑fetch_blocks把文件下载到磁盘后AI 会本能地想读回来确认。这一读前面省下的上下文全回来了。所以工具的返回描述里必须显式抑制这个行为Do NOT read the files back afterwards. They are already correct on disk.Read one only if a build actually fails.这是提示工程不是代码——但漏了它整个设计就白做。如果你自己实现类似的 MCP 工具这一点值得记住。从「说需求」到「出页面」素材和接入都解决之后还剩一个问题不懂技术的人不知道自己要什么。「我想做个卖课的网站」——然后就没了。不知道要哪些页面不知道页面里该有哪些区块。我们的处理是一套引导逻辑最多问五个问题一句技术黑话都没有问什么不问什么需要用户登录、保存数据吗要不要后端想要什么感觉给四个选项配示例图新拟态还是野兽派现在有项目了吗空文件夹 / 已有项目用什么脚手架技术栈是替他决定的不是问出来的。问完输出一份PROJECT.md# 卖课网站 技术栈Next.js Tailwind ## 首页 - [ ] hero — coffee-shop-header-laounge (code) - [ ] features — bento-grid-stats (code) - [ ] pricing — nimbus-pricing (prompt)(code)和(prompt)就是上面说的两条路线的标记。这里有个硬约束值得说方案里每个 slug 必须来自search_prompts的真实结果不许 AI 编。编出来的 slug 在下载阶段必然失败而那时候用户已经等了半天了。什么情况下不适合说点反面的已有成熟设计系统的团队你们的组件库比任何通用库都合适用不上这个高度定制的交互现成区块解决的是常见结构Hero、定价、FAQ不是你独有的业务界面纯后端项目完全无关它真正适合的是从零起一个站、要做落地页、需要快速出可用界面的场景。小结三个可以单独拿走的结论AI 写前端贵在输出 token输出单价约为输入的 5 倍能复用就别生成MCP 返回下载地址而不是内容可以让大体积产物完全绕过上下文实测 18 倍压缩AGENTS.md 让指导逻辑跨工具复用不用为每个 IDE 写一份