Claude Code + MCP 一天交付完整项目实测记录

Claude Code + MCP 一天交付完整项目实测记录 | 前端进阶之旅

Full translation

完整中文译文

我几乎从 Karpathy 把这种方式命名为 vibe coding 之前，就已经开始这么做了。虽然我并不想这样，但如今事情就是这么运作的。你可以在一天之内迅速交付一款产品，但这并不意味着你可以取代开发者（我们要讨论的是取代开发工作流，而不是取代开发者。你可抢不走我的饭碗，哈哈）。随着 MCP Server 不断发展，情况也变得越来越好。现在，我几乎所有工作都会使用 MCP 和 Claude Code。不是因为我懒（或者像有些人说的那样，是「能力不行」），而是因为这样能让我一天完成十倍的工作。我只需要审查代码并进行修改。

这篇文章的灵感来自 Gareth Dwyer 的博客。他提到，自己几乎所有事情都会使用 Claude Code 来完成，比如发布产品、搭建网站。下面就来聊聊我采用同样方式后的体验。我真的试了，而结果让我大吃一惊。

我用 Claude Code 和 MCP，在一天内构建出了一个完整的发票管理平台 MVP。通常需要在不同工具之间来回切换、耗费数周才能完成的事情，从数据库搭建到邮件测试，Claude Code 全都自动处理了。MCP 把我需要的一切连接起来，整个过程甚至不用离开终端。体验非常棒。

整个构建流程大约花了我 3.65 美元（Sonnet 4：3.63 美元，Haiku：0.02 美元），处理了将近 580 万个 token，只需要少量手动配置，成本还不到一杯拿铁的钱。

我已经使用 Claude Code 几个月了，但之前一直心存怀疑。它真的能取代我平时的开发工作流吗？要知道，我早已习惯在 VS Code、GitHub、Figma、数据库控制台、Slack 和电子邮件之间来回切换。你懂的，就是那套日常流程。

然后，MCP（Model Context Protocol）出现了。你可以把它们理解成一座座桥梁，让 Claude Code 能够直接与所有工具通信，而不必在不同应用之间反复跳转。

我使用的是 Composio 推出的通用 MCP Server——Rube。这多少算是一次毫不掩饰的自我推广，不过我们开发它，确实就是为了这个用途。它是一个只有七种工具的 MCP Server，可以按需与任何应用通信，同时免去 OAuth 带来的麻烦。

决定做什么

于是，我决定实际测试一下这套工作流。我不想再做一个待办事项应用，而是想开发一款自己真正会用的产品，比如一个面向自由职业者的发票管理平台。

问题在于，我以前做过类似的应用。通常需要持续投入 2～3 周：项目搭建、身份验证、UI 组件、PDF 生成、邮件集成……其中涉及太多相互关联的部分。

但如果使用 Claude Code 和 MCP 呢？我决定只给自己一天时间，看看最终能做到什么程度。

环境搭建（以及真正的构建过程）

我先给 Claude Code 输入了一段简单的 prompt，没有任何花哨的内容：

Build me an invoice management app. 
Next.js, Postgres(Neon), Prisma, authentication with Next-Auth/Auth.js, PDF generation, email sending. 
Make it look professional.

就这些。没有详细的需求规格，没有线框图，也没有技术架构文档，只有一个简单的请求。

在 Claude Code 中配置 Rube MCP

Rube 是一个通用 MCP Server，你可以通过它为 AI Agent 调用一系列 toolkit。只用 Rube，就可以接入 GitHub、Figma、Linear 等许多 toolkit。不过，添加到 AI 工作流中的 MCP Server 越多，可用的 context window 就越小，这会让复杂工作流面临的问题更加严重。这时候，你就可以使用 Rube。配置 Rube 简直是小菜一碟。

访问 Rube 页面：https://rube.app

点击安装按钮，然后选择 Claude Code。

复制安装命令，并在终端中运行（请确保已经安装 Claude Code）。

这样就完成了！现在只需运行 Claude，然后让 Rube MCP 替你完成任务。运行 /mcp 命令，确认你已经连接到 MCP Server。如果没有连接，请点击对应的 Server，然后通过生成的链接在 Rube 中完成身份验证。

Claude Code 立刻开始工作。我做的第一件事，就是授权 Rube MCP 并连接 GitHub toolkit。我让它创建一个新仓库并提交 PR，结果一切就这么顺利完成了。

随后，我连接了 Figma toolkit，让它分析一些我手头现成的设计稿（我只是告诉它，我希望产品「看起来专业」）。它从中提取出了一整套完整的设计系统，包括颜色、字体和间距——所有内容都被完美地整理成了 CSS 变量。

你可以在这里对比这些模板的 Figma 设计：https://www.figma.com/community/file/1265787783615420446/invoice-design-kit-brix-agency

Figma MCP 最棒的一点在于，它首先进行了详细的分析并制订计划，然后开始构建组件，接着构建页面……诸如此类，最后整个任务就完成了。

与此同时，它还使用 Neon MCP 启动了一个 Postgres 数据库。不需要任何手动配置，也不用复制粘贴连接字符串。就这样直接完成了。

我坐在那里喝着咖啡，看 Claude Code 为我工作。它就像一个能力开了挂的初级开发者，可以全天候 24 小时工作，而且永远不会疲惫。

到午饭时间，我已经拥有了一套可以正常工作的身份验证系统。邮件 magic link、session 管理，整套功能一应俱全。我自己一行身份验证代码都没写。

接下来到了有趣的部分：构建真正的发票功能。我让它研究用户对发票工具有哪些需求，于是它使用 Web 搜索工具收集用户反馈，了解现有解决方案中的痛点。

最疯狂的是什么？大部分功能都能直接正常运行。虽然有一些 Tailwind 配置问题需要手动修复，但总体体验比我预想的顺畅得多。

最终，我做出了一个看起来像模像样的产品（我不会说它已经是完美或真正成熟的产品，你仍然需要手动进行一些修改）：

简洁且包含数据分析功能的仪表盘

客户管理系统

支持多种模板的发票功能

效果出色的 PDF 生成功能

第一次尝试就成功运行的邮件发送功能

我一直在等着某些地方出问题——比如出现某些边界情况，或者常见的开发痛点开始冒出来。幸运的是，整体上基本没有问题。

决策时需要考虑的成本因素

好了，我们来谈谈钱。快速构建产品当然很好，但如果代价是烧光我的钱，那就无法持续。

昨天一整天的构建过程总共花了我 3.65 美元，仅此而已。

Claude Sonnet 4：3.63 美元（承担了所有重活）

Claude Haiku 3.5：0.02 美元（处理快速、轻量的任务）

为了让你更直观地理解这个数字：我一天之内让 Claude 处理了大约 580 万个 token。其中包括数据库搭建、创建代码仓库、解析 Figma 设计、搭建身份验证、生成 PDF，甚至连邮件功能的连接也包含在内——这一切的总成本还不到 4 美元。

说实话，这太划算了。如果拿它和传统工作流相比——启动基础设施、处理各种样板代码、在控制台里浪费好几个小时——它不仅成本更低，效率更是高得离谱。花不到一杯星巴克拿铁的钱，我就交付了一个 MVP。

如果采用传统方式，这样的项目很容易就要花掉几千美元。相比之下，这点成本几乎可以忽略不计。

所以，这些数字让整个故事听起来更加精彩：它不是什么昂贵的噱头，而是一套真正具备成本效益的开发工作流。

最终得到的是一个相当可靠的发票管理平台，包含以下功能（MVP 功能）：

用户身份验证（magic link）

包含联系信息的客户管理功能

几种发票模板

技术栈是什么？Next.js 14、PostgreSQL、Prisma、NextAuth.js 和 Tailwind CSS，都是相当标准的技术。

但真正让我感到意外的是：大部分搭建工作根本不需要我操心。数据库 schema 由 Claude Code 创建（我只需要提供一个 prompt，剩下的都由它完成）。API endpoint？完成了。邮件配置？这部分我确实需要稍微介入一下，但仍然比手动配置快得多。

下面就是 Claude 辛勤工作的成果：https://github.com/rohittcodes/linea

等等，我是不是变懒了？

听着，我明白这种担忧。我脑子里同样有一个声音在对我说：「你已经不算真正写代码了」，或者「你的技能正在退化」。

但事实是，我并没有把思考外包出去。我仍然需要做出架构决策、审查代码，并在问题变得棘手时进行调试。

Claude Code 处理的是那些重复性工作，也就是样板代码。比如「再创建一个 CRUD endpoint」这类我们所有人都会做，却没有人真正喜欢的任务。

当事情变得复杂时——比如涉及安全、数据建模和性能优化——我依然会亲自深入代码并完成开发。但对于其他事情呢？既然我本可以更快交付产品，又何必浪费时间？

这对我们开发者意味着什么

说实话，开发行业正在朝这个方向前进。这并不意味着取代开发者——我们仍然需要负责思考、架构设计以及解决复杂问题。

但那些繁重的基础工作呢？项目搭建、配置以及部署流水线之类的事情？Claude Code 和 MCP 已经可以把它们处理得相当好，而且比手动搭建更快。它就像一个技术娴熟、对各种 framework 了如指掌的初级开发者。

这个产品接下来会怎样

我会继续沿用并完善这套工作流。我做出的这个发票平台已经相当可靠，之后可能会把它整理完善，然后正式发布。我还打算使用这套工作流再构建几款产品。

我并不是说 Claude Code 和 MCP 会在一夜之间取代传统开发。仍然有许多场景需要你亲自深入代码解决问题。但如果目标是快速交付产品呢？如果想在几小时而不是几周内，把一个想法从概念变成现实呢？这套工作流就非常实用。

这个由我在一天内完成的发票平台，如果使用传统方式，至少需要 2～3 周才能完成。更何况，我已经对这套技术栈相当熟悉了。