文章目录写在前面一、先把三个不需要说清楚二、五分钟流程一共五步第一步打开一个对话生成型工具的官网第二步注册登录第三步在聊天框里用中文说出你要什么第四步看预览第五步不满意就继续说三、第一句话千万别说帮我做个网站四、AI 给你的东西看懂三个区就够了五、大概率不会一次成功——这不是失败是流程六、把它变成你的作品自测10 个问题本文总结写在最后附术语速查表写在前面第 1 篇讲了大道理不会写代码的人正在做出自己的软件。如果你是较真的读者心里大概在嘀咕——说得好听我要是现在打开电脑第一步该干什么这篇就来真的。零基础不装任何软件不花一分钱五分钟让 AI 给你生成人生第一个能点、能用的网页。 实测声明本篇的五步流程是我本人走通之后才写下来的——宣称几分钟的教程写的人自己先走一遍这是本系列军规第二条本篇正式立规。你照着做大概率比我说的还快。适合谁跟第 1 篇一样零基础、心里有个小工具念头的普通人。本篇收获跑通完整流程 一个可以直接抄的需求模板 认识界面上真正需要看的三个区域。一、先把三个不需要说清楚很多人一听编程两个字脑子里浮现的是下载几个 GB 的开发软件、对着黑乎乎的屏幕敲英文、还要花钱买课。今天通通不需要。顾虑实际情况要装软件吧不用。主流工具都长在浏览器里打开网页就能用跟逛一个普通网站没区别要先学编程吧不用。你唯一要写的东西是中文把你要什么用大白话说清楚要花钱吧不用。主流工具基本都有免费额度做完第一个作品绰绰有余免费政策随时会调以官方页面为准顺带炸掉第 1 篇埋的一颗雷API。你可能在别处看过配置 API填 API Key这类说法听起来很唬人也因此劝退过很多人。一句话讲清API 是直接调用 AI 模型能力的进阶接口是给深度使用者和开发者准备的另一条路。做第一个作品你走的是网页工具这条观光路线API 那条山路本系列前期完全不经过忘掉它。二、五分钟流程一共五步第一步打开一个对话生成型工具的官网第 1 篇的工具地图里第一类对话生成型就是为今天准备的你像聊天一样说需求它直接生成能用的网页代表如 Bolt、Lovable 这一类。同类工具很多选一个你注册顺畅的就行——对零基础的你各家第一天的差别完全可以忽略。具体名单和界面以各家官方最新为准军规第一条下同。第二步注册登录用邮箱或手机号跟注册任何网站一样一两分钟。第三步在聊天框里用中文说出你要什么说什么很有讲究——这是本篇的重头戏单独放第三节讲。先跳过去看第四步回头再细读。第四步看预览它生成的时候页面另一边会实时出现一个预览窗你刚说的东西变成了一个可以点、可以填的网页。按钮真的能按下去输入框真的能打字。这一步是整个 vibe coding 最有魔力的时刻——第 1 篇说从画图纸到交毛坯房交房就发生在这里。第五步不满意就继续说“标题太大了”“换成蓝色”“加一个搜索框”——它就接着改。五步走完你已经完成了从零到一的整个过程。剩下的只是把它做得更好。步骤你做的事常见卡点1打开对话生成型工具官网不确定选哪家随便选注册顺畅优先2注册登录收不到验证码换个注册方式或换一家3中文说出需求说成帮我做个网站见第三节大忌4看预览窗找不到预览一般在对话区旁边的分栏里5继续提意见改坏了见第四节翻对话记录能回溯三、第一句话千万别说帮我做个网站新手最容易犯的错就是把需求说成一句话“帮我做个网站。”AI 只好瞎猜什么网站给谁看放什么内容猜出来的东西自然四不像——然后你得出结论AI 也就这样。冤枉它了问题出在需求没说清。回想第 1 篇的结论这个时代的核心技能是说得清楚。第一句话就说清楚三件事——给谁用、能干什么、长什么样。直接抄的模板帮我做一个【给谁用】的【什么东西】。主要功能有三个一是【功能 1】二是【功能 2】三是【功能 3】。页面风格要【简洁大方 / 商务 / 活泼】。套进去示范一遍帮我做一个班主任用的学生值日登记表。主要功能有三个一是按星期显示值日名单二是每个名字后面可以点击完成打勾三是能一键统计本周谁没值日。页面风格要简洁大方。对比一下就明白了功能限定三个逼你想清楚优先级“打勾”统计这些词每一条都是明确的、能被检查的要求——做完验收时一条一条对行就是行不行就是不行。这就是说需求和聊天的区别。一个预告这种把想法变成结构化文字的能力到第 6、7 篇会长成一套完整方法Markdown 五步拆分法届时你就能一份文档生成整套系统。今天先用模板热身。四、AI 给你的东西看懂三个区就够了生成出来的界面按钮、面板、代码五颜六色信息有点多。其实你只需要认识三个区域聊天框你说话的地方在屏幕一侧跟微信输入框一个意思。你所有的操作都是在聊天框里打字完成的。预览窗屏幕另一边那个活的网页。你的需求在这里变成真的。判断做得好不好看它不用看代码。对话记录你们从第一句话到现在的全部往来。AI 不会丢上下文改坏了想退回去翻记录找到之前那句满意的重新发一遍或者说回到刚才那个版本就行。 一个心态提示代码在后台你暂时不需要看它。第 3 篇会带你拆开看看网页的骨架但那是理解用的不是操作用的。记住你的战场在聊天框不在代码里。五、大概率不会一次成功——这不是失败是流程说句实在话AI 很少一次就做出你想要的东西。第一版可能丑可能功能缺斤短两可能理解歪了你的意思。新手在这里最容易放弃觉得AI 也就这样。恰恰相反——一轮不行再来一轮本来就是这件事的正常节奏。“说需求 → 看效果 → 再提意见”这三步会循环很多次一次比一次接近你想要的。专业说法叫生成-验证循环本系列第 8 篇会把它讲透并配上完整的实战案例。今天你只需要记住一个数改三遍以内能满意就算非常顺利。超过三遍也别慌大概率是需求说得还不够具体——回到第三节把功能一条条补清楚。⚠️新手避坑表症状误判实际原因怎么办第一版又丑又缺“AI 不行”正常迭代节奏按三要素模板逐条提意见改着改着越改越乱“搞砸了”需求漂移AI 追不上了翻对话记录回溯或重新开对话生成到一半卡住“工具坏了”网络/排队偶发等一会儿重试或重发一次功能做出来了但点不了“假页面”部分交互确实没实现明确说XX 要能点击免费额度用完了“被割韭菜了”免费额度有限是常态换一家有额度的或就此收工原型已完成六、把它变成你的作品做到这里最后一个动作分享。这类工具基本都自带发布或分享功能点一下生成一个链接发给朋友对方在手机上打开就能用具体分享方式以你所用工具的官方功能为准。把链接发到你的家庭群、同学群你会体验到这个时代最奇妙的一件事一个不会写代码的人做出了一个别人真的在用的东西。还记得第 1 篇那句话吗——能点的方案比十页 PPT 有说服力。从今天起你可以亲自验证了。自测10 个问题不看上文你能答对几个点开可看答案点此查看答案开工前的三个不需要是哪三个不装软件浏览器里用、不先学编程写的是中文、不花钱免费额度够第一个作品。五步流程按顺序背出来。开官网 → 注册 → 说需求 → 看预览 → 继续改。第一天需要配置 API 吗不需要。API 是进阶路线本系列前期完全不经过。第一句话的三要素是什么给谁用、能干什么三个功能、长什么样风格。需求模板里为什么限定三个功能逼你排优先级也保证每条需求明确、可验收。界面上真正需要认识的三个区是哪三个聊天框、预览窗、对话记录。判断做得好不好看哪里预览窗——不是代码。改乱了想退回去怎么办翻对话记录找到之前满意的版本重新执行或重开对话。改三遍以内满意是什么口径顺利的判断标准——不是承诺超过三遍通常是需求不够具体。生成-验证循环在第几篇讲透第 8 篇实战篇。本文总结三句话收束本篇五步流程——开官网、注册、说需求、看预览、继续改——全程没有一个字在写代码但你确实做出了一个软件。第一句话别说帮我做个网站用三要素模板给谁用 三个功能 风格。一次不成功是流程不是失败改三遍以内满意算顺利乱了大不了翻对话记录回溯。写在最后现在轮到你了。你想做的第一个小工具是什么报销登记班级值日表小店记账本评论区说说点赞最高的我后面的篇章直接拿它当实战案例。下一篇我们稍微往里看一眼你做出来的这个网页为什么能点、能跳转我带你拆开它的骨架——HTML。放心只是看一眼认识 30 个标签不用背。第 2 篇说过你的战场在聊天框但懂一点骨架能让你提需求时说得更准——毛坯房住着不顺手至少知道哪面墙是承重墙。如果这篇对你有用点个赞、收个藏转发给那个总说我不会编程的朋友。关注不迷路我们第 3 篇见。附术语速查表术语一句话解释对话生成型工具聊天式说需求、直接生成可用网页的 AI 工具v0、Bolt、Lovable预览窗工具界面里那个活的网页验收全看它API / API Key直接调用 AI 模型的进阶接口/凭证本系列前几篇用不上生成-验证循环说需求 → 看效果 → 再提意见的迭代节奏第 8 篇讲透需求三要素给谁用、能干什么三个功能、长什么样风格免费额度工具商给的免费用量随时可能调整以官方页面为准HTML网页的骨架语言下一篇主角常见问题Q五分钟真的够吗A注册顺畅的话够。本篇流程我实测走通过才写军规第二条你第一次操作可能慢一点慢在打字不在门槛。Q生成的网页数据会保存吗刷新就没了怎么办A各家机制不同有的自带云端保存有的需要你导出。做第一个作品先专注做出来数据持久化属于后面篇章的话题以工具官方说明为准。Q两家工具生成的页面差别大吗我选错了会怎样A第一个作品层面差别可以忽略选错了也没损失换个账号重来就是五分钟的事。原型阶段切换成本极低这正是这个时代试错便宜的原因。