软件构建
Vibe Coding 工具选型：从构建到发布
按项目类型、代码交接、限制与成本核对项比较 Lovable、Bolt、Replit Agent、Claude Code、Cursor 与 v0，再选择构建路线。
本页内容
选一个入口继续
9 个入口有制作记录的 Vibe Coding 作品
按成果或开发工具浏览有制作记录的 Vibe Coding 作品，查看产品入口和原始作者说明。
继续阅读
Lovable 与 Bolt 对比：构建同一个应用
看你要做什么应用，以及之后愿意维护哪些服务。两者都提供 GitHub 集成，但拿到源码后，数据、用户身份和部署仍要逐项处理。
继续阅读Claude Code 技能选型：设计与开发
比较用于界面设计、UI 审查与开发规划的 Claude Code Skills；核对来源与范围，再按客户端安装指南接入。
继续阅读MCP 服务选型：按任务与权限比较
按任务、连接方式、访问范围及使用要求比较 Context7、Supabase、Playwright、Figma 与 Stripe MCP，选择能补充所缺上下文或操作的服务。
继续阅读Vibe Coding 技术栈：完成一个小应用
技术栈对应一组责任：谁存数据、识别用户、收款和运行应用。围绕第一条完整用户路径划分这些责任，再选择服务。
继续阅读Lovable SEO：已发布应用的检查清单
先看发布后的页面，再决定是否需要渲染补救。Lovable 新旧技术栈有不同原生渲染路线，接下来要做好内容、清晰 URL 和通往页面的链接。
继续阅读
21st.dev React 组件：怎么放进现有项目试用
选择一个 21st.dev 组件，核对它的安装说明与新增文件，再接进项目。
继续阅读
Magic UI 组件：怎么选、怎么安装到 React 项目
按真实页面选一个 Magic UI 组件，核对新版或旧版安装方式，再放进现有 React 项目试用。
继续阅读
React Bits 怎么选 Tailwind 或 CSS 版本
给 JavaScript 或 TypeScript 项目选择 React Bits 的 CSS 或 Tailwind 版本，装一个效果并核对源码。
继续阅读Lovable
Bolt01先区分新应用、现有仓库与界面任务。
02比较各工具文档说明的流程，以及源码交接之外的工作。
03用相同闭环试用后，再判断速度、成本或适用性。
先做一项可验证的任务
选一个只有一条关键交互的小应用。比较各路线怎样生成可用预览、交付源码和部署，也把第二次修改需要的人工操作算进去。
按实际任务选择 Vibe Coding 工具
先看项目的起点：新建网页应用、修改现有仓库，还是制作界面原型。下表比较文档说明的工作方式，以及可能改变选择的核对项；不提供未经实测的速度评分，也不认为某个工具适合所有项目。
| 工具 | 适合的起点 | 工作环境与交接 | 选择前核对 | 成本核对项 |
|---|---|---|---|---|
| Lovable | 从自然语言需求开始制作网页应用 | 构建平台工作流，有官方 GitHub 集成 | 核对后端集成；交接源码不会自动迁移数据和密钥 | 核对当前套餐限制及应用所需后端、托管 |
| Bolt | 制作 JavaScript 网页应用；移动端可评估文档中的 Expo 路线 | 浏览器构建环境，有官方 GitHub 集成 | 核对目标运行环境与集成；网页预览不等于移动应用发行 | 核对当前构建额度与部署要求 |
| Replit Agent | 在浏览器工作区中开始并迭代应用 | Replit 开发环境中的智能体工作流 | 确认支持的技术栈、应用配置及正式部署路径 | 核对所选套餐对智能体使用及托管的覆盖 |
| Claude Code | 修改现有仓库并验证一个小范围实现 | 使用项目约定及现有开发工具的仓库工作流 | 审查差异并运行项目检查；代码修改仍需独立部署路径 | 核对账户使用限制与外部服务成本 |
| Cursor | 在保留项目上下文的同时编辑现有代码库 | 代码编辑器工作流；项目与个人技能有明确范围 | 核对本地、远程技能及依赖是否可用 | 核对当前账户套餐与模型使用规则 |
| v0 | 通过提示词探索界面或应用起点 | 采用官方文档说明的生成与集成工作流 | 核对生成结果是否符合现有技术栈、数据和可访问性要求 | 核对当前生成限制与所需部署服务 |
先选工作方式，再选工具
如果从提示词开始搭建 Web 应用，围绕后端选择、代码访问和部署方式比较 Lovable 与 Bolt。如果已有代码仓库，应选择能遵循项目约定并在现有环境中验证修改的智能体工作流。
| 任务 | 起点 | 先检查 |
|---|---|---|
| 新建 Web 应用 | Lovable 或 Bolt 工作流 | 后端、导出与托管是否合适 |
| 修改现有仓库 | 理解仓库的编程智能体 | 项目约定与小范围验证任务 |
| 改善界面 | 设计 Skills 与 UI 资源 | 现有令牌、可访问性与窄屏效果 |
| 连接外部上下文 | 对应任务的 MCP 服务 | 客户端支持与访问范围 |
用同一个小任务比较工具
新应用可选择收集一条表单回复并读回结果的闭环；现有仓库可选择一个错误修复或界面修改。不同候选工具使用相同页面、输入、数据和成功条件。
- 检查可运行结果、错误处理和权限，不能只看预览图。
- 审查源码变化，并确认下一位开发者如何继续维护。
- 列出源码导出之外仍需处理的数据库、身份、密钥与托管步骤。
- 比较套餐限制与修正结果的工作量；记录实际观察后再评价价格或速度。
先完成一条完整用户流程
定义输入、结果与中间状态。以表单产品为例，可以是创建表单、收到回复和导出结果。在增加周边功能前，先处理错误与权限。
从有制作记录的产品学习
作品库应当能把应用、作者制作记录与具体用途连接起来。应用集合会列出任务、平台与原始制作背景；AI 辅助开发不等于产品本身提供 AI 功能。
你可能还想知道
应该从哪个 Vibe Coding 工具开始？
新应用围绕目标平台、后端与代码交接比较构建工具；现有仓库优先比较符合项目约定和运行环境的编辑器或仓库智能体。先验证一条完整用户路径，再扩大开发范围。
低价套餐是否覆盖上线所需全部成本？
先在发布方核对当前套餐，再列出应用所需的托管、数据库、身份及其他服务。开发工具订阅和应用运行成本是不同的选择因素。
资料出处
相关指南与作品
查看全部Vibe Coding 技术栈：完成一个小应用
技术栈对应一组责任：谁存数据、识别用户、收款和运行应用。围绕第一条完整用户路径划分这些责任，再选择服务。
继续阅读Claude Code 技能选型：设计与开发
比较用于界面设计、UI 审查与开发规划的 Claude Code Skills；核对来源与范围，再按客户端安装指南接入。
继续阅读MCP 服务选型：按任务与权限比较
按任务、连接方式、访问范围及使用要求比较 Context7、Supabase、Playwright、Figma 与 Stripe MCP，选择能补充所缺上下文或操作的服务。
继续阅读有制作记录的 Vibe Coding 作品
按成果或开发工具浏览有制作记录的 Vibe Coding 作品，查看产品入口和原始作者说明。
继续阅读Lovable 与 Bolt 对比：构建同一个应用
看你要做什么应用，以及之后愿意维护哪些服务。两者都提供 GitHub 集成，但拿到源码后，数据、用户身份和部署仍要逐项处理。
继续阅读Lovable 替代方案：代码交付与托管
想换工具，先说清原因：界面开发、运行环境，还是部署后的控制权？Bolt、v0 和 Replit 各自对应不同诉求，迁移成本也不止源码。
继续阅读