跳到主要内容

用聊天做出你的第一个产品

好了，前面说了那么多理念，现在该动手了。

这一章，我要带你从零开始，用"聊天"的方式做出一个真正的产品。不需要装软件（大部分情况下），不需要写代码，甚至不需要懂什么是服务器。你只需要一个浏览器，和会打字的双手。

从想法到产品的完整流程​

第一步：想清楚你要做什么​

这一步很多人跳过了，然后在后面浪费大量时间。在跟 AI 对话之前，你得先想清楚一个最基本的问题：这个东西是给谁用的？解决什么问题？

别急着想"我要做一个 App"。先想"我身边有什么问题是没人解决的"。

比如你想做一个简单的工具页面，让用户输入一个日期，自动算出离今天还有多少天——也许你身边有很多人在倒计时考试、结婚纪念日什么的。

想清楚之后，用一句话写下来：

"我要做一个在线倒计时工具，用户输入目标日期，页面显示距离那天还有多少天、多少小时、多少分钟，可以分享给朋友。"

够了。这就是你的"需求文档"。

第二步：选一个工具​

我推荐三个工具，下面一个个详细介绍。

工具一：Bolt.new（推荐小白第一个用）​

适合谁： 完全不懂代码的人，想最快看到结果。

网址： bolt.new

操作步骤​

1. 打开网站注册

浏览器打开 bolt.new，你会看到一个类似 ChatGPT 的界面——中间一个大输入框，上面写着"Ask me anything"。用 Google 账号或者邮箱注册登录就行。

2. 输入需求

在输入框里粘贴你写的那句话：

"我要做一个在线倒计时工具，用户输入目标日期，页面显示距离那天还有多少天、多少小时、多少分钟，可以分享给朋友。页面要好看，用渐变背景，大号数字显示倒计时。"

然后按回车或者点发送按钮。

3. 等待生成

Bolt.new 会开始工作——右侧预览窗口会从空白页面慢慢变成完整的倒计时页面。左边是代码，右边是实时预览。整个过程大概 30 秒到 1 分钟。

4. 测试

生成完了之后，在预览里输入一个日期试试。看看倒计时是不是在走，试试点分享按钮。

5. 一键部署

满意之后，点右上角的 "Deploy" 按钮。Bolt.new 会自动部署到 Netlify，给你一个链接如 your-app.netlify.app。发给朋友就能用——不需要买服务器、不需要懂域名、不需要配 Nginx。

6. 绑定自定义域名（可选）

如果你想用自己的域名（比如 countdown.mydomain.com），去 Netlify 后台设置，跟着提示走就行，大概多花 5 分钟。

工具二：Coze / 扣子（适合做 AI Bot）​

适合谁： 想做 AI 聊天机器人、自动化工作流的人。界面全中文，很友好。

网址： coze.com（海外版）或 coze.cn（国内版）

操作步骤​

1. 注册登录

打开 coze.com，用 Google 账号注册。登录后你会看到主界面——左侧是导航栏，中间是工作区。

2. 创建 Bot

点左上角 "Create Bot"（创建 Bot）按钮。进入 Bot 编辑页面，有三个关键区域：

  • 左侧：Bot 基本设置（名称、头像、描述）
  • 中间：核心配置区（人设、提示词、插件）
  • 右侧：预览和测试区

3. 设置人设和提示词

在中间区域的 "Persona & Prompt"（人设与提示词）输入框里告诉 AI 它扮演什么角色：

"你是一个专业的健身教练，每天根据用户的目标（减脂/增肌/保持健康）和可用时间推荐一组训练计划。每个动作说明组数、次数和注意事项。语气亲切鼓励。"

4. 添加插件

点 "Plugins" 标签，给 Bot 添加各种能力：

  • 联网搜索：让 Bot 搜索最新信息
  • 图片生成：让 Bot 生成图片
  • 代码执行：让 Bot 运行 Python 代码

选需要的插件点"添加"就行。

5. 设置开场白

在 "Opening Dialog"（开场对话）里设置欢迎语：

"嗨！我是你的 AI 健身教练 💪 告诉我你今天想练什么，有多少时间，我来给你安排！"

6. 测试

右侧预览区直接跟 Bot 对话。试着输入"我想减脂，今天有 30 分钟"，看看回复是否符合预期。

7. 发布

点右上角 "Publish"（发布）按钮。支持多种渠道：

  • 分享链接：生成网页链接，任何人打开就能聊天
  • 嵌入网站：生成代码嵌入你的网页
  • 接入社交平台：Discord、Telegram 等

选"分享链接"最简单，复制链接发给别人就行。

工具三：Trae（适合想学编程的人）​

适合谁： 愿意多花十分钟装软件，想要完整开发体验。

网址： trae.ai

操作步骤​

1. 下载安装

去 trae.ai 下载对应系统的版本（Mac/Windows），安装后打开。你会看到一个像 VS Code 的界面。

2. 用 AI 写代码

按快捷键 Cmd/Ctrl + L 打开 AI 面板，描述你要做什么：

"帮我创建一个倒计时页面，用户输入目标日期，显示距离那天还有多少天、小时、分钟。页面用渐变背景，大号数字。"

AI 生成代码后，点"应用"直接写入文件。

3. 实时预览

终端里运行 npm run dev，浏览器看效果。继续跟 AI 对话修改，保存后浏览器自动刷新。

4. 部署

Trae 本身不提供一键部署，但你可以推到 GitHub，然后在 Vercel 或 Netlify 导入仓库自动部署。

第三步：开始第一轮对话​

不管你选了哪个工具，一个好的需求描述包含：

  1. 做什么：这是一个什么产品
  2. 给谁用：目标用户是谁
  3. 核心功能：最重要的 1-3 个功能
  4. 外观风格：简洁、活泼、专业？

坏的例子： "帮我做一个网页"（太模糊，AI 不知道你想要什么）

好的例子： "帮我做一个在线倒计时工具，用户输入目标日期，显示天数、小时、分钟。渐变背景（浅蓝到浅紫），大号粗体数字居中显示，底部有分享按钮。"

第一次看到 AI 从零生成完整页面的过程，挺震撼的。就像你在跟一个人说话，他在你面前现场造一个东西。

第四步：调整，调整，再调整​

第一版几乎不可能完美。进入"调教"环节。

原则​

一次只改一个东西。 不要一次说"把颜色改了、字体改大、再加个功能"。一次说太多，AI 容易搞混。

描述要具体。 不要说"好看一点"，要说"背景换成浅蓝到浅紫的渐变"。不要说"大一点"，要说"字号改成 48px"或"大号标题"。

常见调整​

颜色：

"背景颜色太暗了，换成浅蓝到浅紫的渐变，要有活力。"

字体：

"倒计时数字再大一点，占屏幕中间三分之一，用粗体无衬线字体。"

加功能：

"加一个 emoji 选择器，用户选🎂代表生日，选✈️代表旅行，选📚代表考试。emoji 和倒计时一起显示。"

每一轮对话，AI 都会修改代码，右边预览实时更新。你像导演，AI 是执行团队。这个过程可能十几轮，不要急。

第五步：处理 AI 犯的错​

AI 不是完美的，它会犯错。提前知道怎么应对能省很多时间。

改了 A，结果 B 坏了​

最常见的问题。 你让它改颜色，结果倒计时不走了。

直接告诉 AI："你刚才改完之后倒计时功能坏了，请修复。"AI 通常能自己修复。如果修不好，说"撤销上一步，只改颜色不要动其他代码"。

AI 理解错你的意思​

你说"大一点"，它把整个页面都放大了。

用参照物描述："标题跟手机屏幕差不多宽""按钮占页面宽度三分之一"。或者说"字号从 24px 改成 48px"，AI 一般能理解。

对话太长后 AI 犯浑​

聊了二十多轮后 AI 可能"忘"之前的内容，做出矛盾的修改。

开一个新对话，把当前需求和关键决定一起总结告诉它：

"我现在要做一个倒计时网页，已确定：渐变背景（浅蓝到浅紫），居中大号数字，有 emoji 选择器，有分享按钮。现在我想加一个设置提醒的功能。"

功能太复杂做不出来​

需要登录、数据库、支付？单靠对话比较吃力。

先做最小版本。不登录就不做，不支付就先放假按钮。先把核心功能跑通，后面再慢慢加。

第六步：保存和分享​

保存​

  • Bolt.new：项目自动保存在云端，登录就能继续编辑
  • Coze：Bot 自动保存在账号下
  • Trae：代码在本地文件夹，建议推到 GitHub 备份

分享​

最简单：部署链接直接发给别人。

更好的方式：写一段介绍：

"我做了一个在线倒计时工具 🎂 输入生日、考试日期，实时显示还有多久。纯前端，不用下载，打开就能用：[链接]"

进阶：录一个 30 秒演示视频展示核心功能，视频比链接更吸引人点进去。

一个完整的实战例子​

假设我是健身爱好者，想做"每日训练计划生成器"。

第一轮：

"帮我做一个网页应用，叫'每日训练计划'。用户选择今天想练的部位（胸、背、腿、肩、手臂），自动生成5个动作的训练计划，含组数和次数。页面简洁好看。"

→ 生成了有选择按钮和训练计划的页面，但计划是固定的。

第二轮：

"计划要随机生成，每次同一部位要有变化。"

→ 改好了。

第三轮：

"加个功能，用户标记动作做完，全部完成显示庆祝动画。"

→ 加好了，有复选框和完成动画。

第四轮：

"底部加免责声明'数据仅供参考，训练前请做好热身'，再加分享按钮。"

→ 搞定。部署上线，发朋友圈。

从开始到上线，一个小时。一个完全不懂代码的人做出了能用、好看、能分享的产品。

什么时候该"毕业"​

用 Bolt.new、Coze 做出来的东西，本质上是"玩具级别"的产品。

毕业的信号：

  1. 你需要用户系统（注册登录）
  2. 你需要数据库（保存数据）
  3. 你需要后端逻辑（支付、邮件）
  4. 产品已有 100+ 日活用户

毕业去哪：

  • Cursor / Trae：AI 辅助写真正的代码，学习速度很快
  • Next.js + Supabase：最流行的全栈方案，AI 对这套技术栈非常熟悉
  • Vercel + PlanetScale：部署和数据库一条龙

毕业不意味着之前的工具不好。它们是你的启蒙老师，帮你建立了"我能做到"的信心。现在，是时候学更深的东西了。

总结​

  1. 先想清楚做什么，用一句话写下来
  2. 选一个工具（推荐 Bolt.new 起步）
  3. 把需求粘进去，等 AI 生成
  4. 一轮轮调整，一次改一个东西
  5. 处理 AI 犯错：描述具体、新开对话、先做最小版本
  6. 部署上线，分享给别人
  7. 产品变复杂了，就该毕业去学真正的开发

你准备好了吗？打开 Bolt.new，开始你的第一轮对话吧。