如果你已经读到这里，大概率你已经做过一个简单的应用了。

但接下来，我们要做一件更真实的事情：用 Replit，从 0 开始做一个真正有用的应用。 

需要注意的是，因为我十分热爱运动，比如明天我就会去参加一场半程马拉松，所以我从我自己的需求出发，希望做一个运动类的产品。

而你，可以做任何你感兴趣的应用——这是 Vibe Coding 的基础，一切从你感兴趣的领域，或者从真实的需求出发。

先想想你要做一个什么应用

如果你跑步时间比较久，或者刚开始认真训练，很快就会遇到一个问题：我的心率，应该跑在多少？

网上会告诉你一个公式：最大心率 ≈ 220 - 年龄 ，然后再根据这个最大心率，划分不同的训练区间，比如：

CODE
有氧区间
燃脂区间
阈值区间
极限区间

但问题是这些信息往往是分散的，不直观也不方便使用。所以今天，我们要做的应用非常简单：

CODE
输入：年龄和性别
输出： 对应的跑步心率区间
      各区间说明
      基础训练建议
      一个可视化展示（例如区间条）

这就是一个典型的数据型工具，而且它有一个非常重要的特点：简单，但有价值。

第一步不要直接写 Prompt

很多人第一次用 AI 做应用时，会直接打开工具，然后输入一句话：

CODE
帮我做一个跑步心率工具

这通常会得到一个能用，但不太对的结果。因为 AI 并不知道：

CODE
你想展示什么
数据怎么算
页面长什么样
用户会怎么用

所以，在真正开始之前，我们先做一件非常简单的事情：把需求说清楚。

也就是说，在进入工具之前，先把你要做的东西“可视化”和“结构化”，会显著提升成功率。

先写一个非常简单的PRD

不用复杂，只要写清楚这几件事：

1、应用名称： 空框AI · 健康运动计算器（因为我之后希望能扩充App的功能，所以这里名字我并没有写很具体的如“跑步心率区间计算器”，当然从产品角度，名字应该能直观反映功能，我这里其实是一个反例。）

2、用户输入：年龄和性别

3、系统输出：最大心率、5 个心率区间。例如：恢复区：50–60% 、有氧区：60–70% 、燃脂区：70–80% 、阈值区：80–90% 、冲刺区：90–100% 

4、附加内容：针对当前年龄，给出简单训练建议，例如：建议每周跑 3 次，每次 30–45 分钟 ，心率控制在有氧区等。

这一步，其实就是写一个非常简化版的 PRD（需求文档）。

如果脑海里有非常清楚希望界面长什么样，甚至还可以画一些简单的线框图，可以直接Figma去画，也可以直接在纸上画了拍照，这样 AI 会按照你的线框图去生成应用界面。

现在，我们正式开始

第一步：注册 Replit 

这一步其实非常简单。打开 replit.com 你会看到一个首页。然后点右上角的“Create account”根据流程完成注册，最开始使用免费的即可，如下图。 

当然，你可以从我的链接进入注册，我会非常感谢并且这对我会很有帮助，哈哈：

https://replit.com/refer/hfwen

注册完成之后，你会进入一个页面，如下图，最开始使用免费的版本即可：

第二步：创建你的第一个项目

在这个页面，你会看到一个非常明显的输入区域。

这个地方就是和 Agent 对话的地方。你只需要做一件事：输入你的需求。你可以输入如下的内容，当然，如果用英文创建，将更好：

CODE
请帮我创建一个网页应用：
功能如下：
用户可以输入：
1）年龄
2）性别
系统需要：
根据年龄计算最大心率（220 - 年龄）
然后计算以下心率区间：
50%–60%
60%–70%
70%–80%
80%–90%
90%–100%
页面需要：
用清晰的图表或区间条展示这些心率区间
并在下方给出简单的跑步建议，例如：
适合当前年龄的训练频率
建议心率区间
建议单次跑步时间
页面风格：
简洁
清晰
适合运动类应用

然后点击蓝色按钮，系统会自动创建项目。

为什么 Replit 会先生成一个 Plan？

接下来，你会看到一件非常有意思的事情：Replit 不会马上写代码，它会先生成一个计划（Plan）。

这是一个非常关键的设计，因为它让你先确认你要做的东西，是不是你想要的。

Agent 会先分析你的需求，并生成一个构建计划，然后再开始开发。这一步，其实非常像产品评审。

然后，你会看到它开始真正「搭建应用」，这一步通常会持续2–5 分钟，你可能会看到：

CODE
创建文件
安装依赖
配置运行环境
构建界面
生成逻辑
……

你不需要理解这些，但你可以观察它，你可以在创建过程中点击他思考和创建的过程，查看 Replit 是如何创建这个应用的。

当应用生成后，先测试它

在应用创建后，不要急着改，先用它。

例如多输入几次相关的信息，看是否是你希望的状态以及结果是否准确。

如果一切没问题，那恭喜你，你做出了一个真正可运行的应用。

下一步，不是加功能而是优化体验

这是很多人会忽略的一点，当应用第一次跑起来时，你最应该做的事情不是再加功能，而是看细节。例如：

CODE
数字是否对齐
区间是否清晰
页面是否适合手机
文本是否容易理解
……

如果你是一位合格的产品或者体验设计师，你应该能发现非常多的问题，比如可以通过缩放页面宽度，去查看各种尺寸下是否都有很好的显示，比如界面是英文的，是否需要翻译成中文等等。

发现的所有的问题，都可以继续在对话框中，让 AI 进一步优化。

请注意，好的体验，是一个好产品的基础。

很多人会觉得，这一篇文章只是教你如何注册一个账号，写一段 Prompt，然后点一下按钮，让一个应用跑起来。

从表面上看，确实如此。但如果你真正经历过这个过程，你会慢慢意识到——Vibe Coding 开发一个应用，从来不是技术动作，而是一个决策动作。

你决定要解决什么问题，你决定第一步做什么，你决定先让它跑起来，再让它变得更好。

这其实就是产品最核心的一件事：把一个想法，从“存在于脑子里”，变成“存在于世界上”。在传统软件开发里，这一步往往需要很多准备、很多等待、很多门槛。而现在，在 AI 和像 Replit 这样的工具帮助下，这个门槛被大幅降低了。

但门槛降低，并不意味着难度消失。真正的难度，开始转移到另一件事情上：你是否有勇气，把第一个版本真正跑起来。

因为从这一刻开始，它就不再是一个想法，它会被使用，会被反馈，会被改进，也会被推翻。

而所有真正的产品，都是从这一刻开始的。