说实话我到现在写 HTML 还是得靠 AI 帮我把标签补全、把样式调对。但这完全不妨碍我真的把一个网页从零做出来并且成功部署上线让朋友用手机就能访问。这篇文章想认真聊聊的就是作为一个几乎零代码基础的人我是怎么靠 AI 对话工具完成一个网页开发再通过 GitHub 免费托管上线的完整过程。它不是什么高深的技术教程更像是一次真实经历的复盘里面包含了我的每一步对话、每一次翻车以及那些踩过之后才明白的坑。这件事适合谁两类人。第一跟之前的我一样心里有个小需求想做个网页或小工具但一看到代码教程就犯怵的人。第二已经开始用 AI 对话工具但只拿它写文案、查资料还没试过让它写代码的人。我会尽量把过程讲得足够具体具体到你照着走一遍也能在几天之内拥有一个属于自己的在线网页。至于不会代码这个说法我也会在最后给出一个诚实的结论——哪些环节确实不用会代码哪些环节依然绕不开你脑子里的逻辑。1. 一个零基础的人为什么突然想自己做网页1.1 从需求冲动到被现实劝退事情的起因特别朴素。我家里养了几盆植物绿萝、龟背竹、仙人掌加起来七八盆。我总记不住每盆什么时候该浇水。有的要两天一次有的要一周一次还有的多肉一个月不浇也没事。手机上装过几个植物养护类的 App要么广告多得烦人要么功能太重得给每盆植物拍照建档。我想要的其实特别简单——打开一个页面能看到每盆植物离下次浇水还有几天浇完水之后点一下按钮日期自动重置。就这么个小需求我一开始也想过去找教程。结果打开前端入门内容一看HTML、CSS、JavaScript、框架、构建工具、版本管理……名词一个接一个。我当时的反应是算了不如直接拿个日历本记着。这是大多数非技术人最常见的心理——不是没有需求而是被学习曲线吓退。毕竟我本来要的只是提醒浇水不是转行当程序员。1.2 转折点发现 AI 对话真的能代写代码真正让我改变想法的是一次闲聊。当时我在跟一个做开发的朋友吐槽这个需求他说了一句让我印象很深的话你直接用 AI 对话工具让它写啊现在这些大模型写前端小页面基本没问题你负责提需求剩下的交给它。我半信半疑。在我的认知里写代码是需要系统学习的技能怎么可能靠聊天就写出来。但当天晚上我试了一下让 AI写一个简单的网页标题是欢迎页它几秒钟就给我返回了一段代码。我把代码复制下来存成 html 文件双击打开浏览器里真的出现了一个页面。那一刻的感觉有点像第一次用微波炉热菜——明明按钮很简单却总觉得会出问题结果一试发现真的能转。接下来我的思路就彻底打开了既然 AI 能写出比我预期更完整的代码那我是不是可以把我原本放弃的那个植物浇水提醒页需求发给它试试这个念头直接催生了后来一周的折腾也让我第一次完整走完了提需求 → AI 写代码 → 本地跑起来 → 部署到线上 → 分享给别人用的全流程。回头看这次经历带给我的不只是一个小网页而是对编程这件事祛了魅。1.3 为什么选择AI 对话开发而不是先学编程再开发后来也有人问我你为什么不先花两三个月学点基础说实话我的需求很明确就是一个单页面的小工具。如果走传统学习路径我得先分辨哪些知识是为了应付考试、哪些是实际开发需要的光这个筛选过程就得耗费不少精力。而 AI 对话开发的最大优势是我可以直接用自然语言跟一个什么都会的助手沟通并且随叫随到。我不需要提前知道答案只需要不停地提出要求、反馈问题它会基于我的反馈调整代码。但这里有一个诚信问题要说明白所谓不会代码也能开发并不是说完全不需要动脑。你至少得知道自己想要的页面长什么样功能跑起来是什么逻辑。换句话说代码语法可以不会产品逻辑必须会。这就好比你可以不会开车但你必须知道自己想去哪、走高速还是走省道。AI 是那个司机你依然是导航。这个定位想清楚之后后面的事情就顺理成章了。2. 动手前先把我要什么想明白2.1 把模糊想法变成 AI 能听懂的需求很多人第一次让 AI 写代码给的描述往往是帮我做一个好看的网页。AI 回了一大段通用代码结果页面出来了但完全不是自己想要的东西。问题不在 AI而在好看这个词太模糊。我自己在第一版需求上也吃过亏。我最初的描述是做个页面记录植物浇水AI 返回了一个非常简陋的表格只有一个标题和一行示例数据。我当时有点失望但冷静下来之后意识到是我自己都没想清楚功能细节凭什么要求 AI 替我把产品设计做了于是我开始把需求一条一条写下来参考的是互联网产品经理写需求文档的路子。不是我懂产品而是我发现分条列点是最容易让 AI 理解的信息结构。我来回花了 20 多分钟最终把需求细化成了下面这样页面顶部显示标题我的植物养护记录有一个表单可以输入植物名字和浇水间隔天数几天浇一次所有植物以卡片形式展示在页面上每张卡片包含植物名、上次浇水日期、距离下次浇水还剩多少天每张卡片上有一个已浇水按钮点击之后把该植物的上次浇水日期更新为当天数据要保存在浏览器本地刷新页面后不丢失界面要简洁、清爽可以不用太花哨写完之后我自己都觉得惊讶——这些需求每一条都是大白话没有任何术语但它的结构非常清晰。把这段需求发给 AI我特意加了一句话你是一个有经验的前端开发者请按照我下面的需求写一个完整的单页网页。这回 AI 返回的东西完全不一样了有表单、有卡片区域、有按钮还有处理数据存储的脚本。所以我想给所有零基础朋友一个建议你花在思考需求上的时间永远不会浪费。需求越具体AI 给出的代码越接近你要的东西。2.2 跟 AI 沟通的三个小技巧身份、限定、追问我把这次实践里最有用的沟通技巧总结成三句话。第一给 AI 设定身份。开头加一句你是一个资深的前端工程师或者你是一个有五年经验的全栈开发者它返回代码的完整度和规范程度会有肉眼可见的提升。这不算玄学更像是一种聚焦机制——它会把回复的语气和内容自觉地调整到专业人士的水准。第二限定范围和格式。如果你希望代码分成 html、css、js 三个文件就明确告诉它请分成三个文件index.html、style.css、script.js并在 HTML 里正确引用这两个文件。不说的话AI 往往图省事把样式和脚本全塞进一个 HTML 文件里虽然也能跑但后面想改某个细节时你会在一个几百行的文件里找得头晕眼花。第三追问不解的细节。AI 返回代码之后你不懂某个英文单词、某一行逻辑可以直接让它解释。比如我那时候问过它localStorage 是什么为什么数据能刷新后还在它用一段大白话解释给我听浏览器给每个网站分配了一块小仓库网站可以往里面放数据下次打开网页时再取出来。这种随时追问的能力是传统教程根本给不了的体验也是 AI 对话开发最被低估的价值。2.3 需要用到的三样东西缺一不可在正式动手之前我把工具准备了一遍其实只需要三样。第一AI 对话工具。这个不用多说选一个你现在用着顺手的就行。第二一个能写代码的编辑器。如果你是零基础我不建议一开始就去折腾本地环境更推荐直接用在线代码编辑器——打开网页就能写还能实时预览省去安装配置的折腾。我当时就直接在浏览器里新建了三个文件把 AI 生成的代码分别粘贴进去右边窗口马上能看到页面效果。等你确定这套流程能跑通再考虑要不要装本地的专业编辑器。第三一个 GitHub 账号。它是全球最大的代码托管平台我们要用它提供的免费静态网页托管来上线网站。注册流程很简单只需要邮箱和设置密码没有额外的门槛。需要说明的是这三样东西里前两样是开发阶段用的第三样是部署阶段用的全程没有花一分钱。这也是我后来愿意把这套流程推荐给身边朋友的重要原因——工具的门槛和资金的门槛都被压到了最低。3. 和 AI 对话写网页从第一版到能用我经历了什么3.1 第一轮对话让 AI 给我一个能跑的骨架我当时的提问原文大概是这样你是一名前端工程师。请帮我做一个植物浇水提醒网页需求如下页面标题我的植物养护记录有一个表单可以添加植物输入植物的名字和浇水间隔天数已添加的植物以卡片列表展示每张卡片显示植物名、上次浇水日期、距离下次浇水还剩几天每张卡片上有已浇水按钮点击后把该植物的上次浇水日期更新为今天所有数据用 localStorage 保存刷新页面不丢失。请用 index.html、style.css、script.js 三个文件实现。这条消息发出去AI 很快就返回了三段代码。我做的第一件事不是去读代码而是按它说的建了三个文件把内容分别粘贴进去然后在在线编辑器里打开预览。页面的骨架已经出来了顶部是一个标题下方有一个输入框和添加按钮再往下是空空的卡片区域。那一刻我承认是有点兴奋的——虽然页面还很简陋但我清楚地知道一个会随我操作变化的东西已经诞生了。接下来我试着添加了一条测试数据在植物名里输入绿萝在间隔天数里输入3点击添加。卡片区域立刻出现了一张淡绿色的卡片上面显示着绿萝、上次浇水的日期、距离下次浇水的天数。我刷新了一下浏览器数据还在。第一轮验收通过。3.2 不懂代码怎么判断 AI 写得对不对页面跑起来了但我心里还有一个隐忧我完全看不懂代码万一里面藏着问题怎么办后来我慢慢摸索出三个零基础验收方法非常管用。第一个方法把功能从头到尾点一遍模拟真实使用。我连续添加了三四盆植物修改间隔天数点掉某些卡片反复刷新页面确认数据还在。只要任何一个环节的表现跟我的预期不一致就是一个 bug。第二个方法打开浏览器的开发者工具看报错。在预览页面按 F12 或者右键选检查切到控制台标签如果代码有错误这里会出现红色报错信息。我一开始看到满屏英文字母也懵但学会了复制报错内容丢回给 AI 问这是什么意思怎么解决——这招帮我在后面一周里排掉了至少五个问题。第三个方法改一个数字看变化。比如把浇水间隔从 3 改成 7如果页面上的天数计算跟着变了说明对应的逻辑是通的。这种黑盒测试的思路不需要懂代码也能验证代码质量。3.3 三次有代表性的修改AI 是怎么配合我迭代的第一版能跑之后我进入了一个漫长的调整 — 验收 — 再调整的循环。这中间有三轮修改最有代表性也最能体现 AI 对话开发的真实工作方式。第一次修改是样式问题。我嫌卡片挨得太挤而且逾期浇水的卡片没有任何提醒容易看漏。我的原话是卡片之间的间距太窄了能不能大一点距离下次浇水已经小于等于 0 天的植物卡片背景变成浅红色并把文字加粗。AI 很快改好了代码更新之后页面效果立竿见影。这件事让我意识到你不需要会说我需要一个 margin 或 padding 调整你只需要说出你看到的效果不对、你期待什么效果AI 会自动翻译成代码。第二次修改是功能 bug。我发现一个问题连续给同一盆植物点已浇水第一次能正常更新日期第二次再点却没有反应。我完全不知道怎么排查只能把现象详细描述给 AI卡片上的已浇水按钮第一次点击后日期更新了再点第二次没有任何反应数据也没有变化。它在一分钟之内定位到了问题——原来是我添加植物时如果出现了同名的植物代码里查询植物的 ID 逻辑写错导致第二次点击找不到对象。它给出了修正后的代码我替换进去再试正常了。整个过程我没看一行代码逻辑只是负责把现象讲清楚。第三次修改是加新功能。我想让卡片按紧急程度排序——最需要浇水的排在最前面。这个需求我自己都不知道该用什么词描述就直接说我想让卡片按剩余天数从少到多排序剩余天数最少的在最前面。AI 理解了往渲染函数里加了一段排序逻辑。从那以后我才真正意识到我跟 AI 之间最好的状态不是我命令它而是我描述愿望、它实现功能然后我验证结果。3.4 一个不会代码的人的 AI 开发心法这段经历让我总结出一个心法我不会写代码但我可以做产品经理加测试工程师。产品经理负责定义需求和验收标准测试工程师负责找 bug 提反馈中间那一层具体的代码实现交给 AI。这三者并不要求你会写代码但要求你思路清晰、表达准确、愿意测试。有个细节特别关键跟 AI 沟通 bug 时一定要提供具体信息包括你做了什么操作、看到了什么现象、期望是什么、有没有报错、报错内容是什么。我见过很多人只会丢一句这个不对然后就没了。AI 当然很强但它是靠上下文推理的你给的线索越具体它能做的判断越准确。我在整个过程里反复利用这个原则几乎没有出现AI 改了三轮还修不好的情况。4. 网页做好了怎么免费上线到 GitHub4.1 为什么我选了 GitHub 而不是别的方案本地页面能跑功能也符合预期接下来就是最让人激动的一步把它放到公网上让朋友输个网址就能访问。我在朋友的推荐下了解了 GitHub它在代码圈里几乎是代码仓库的代名词但它同时还提供一项叫 GitHub Pages 的功能专门用来托管静态网页。所谓静态网页就是不需要服务器在背后跑程序、内容提前写好放在那里的页面。我的植物提醒页恰好就是一个静态网页——所有数据都存在访问者自己的浏览器里没有后端数据库也不需要服务器运算。对比而言我有几个方案可选。一是租一台服务器自己配环境Docker、Nginx 这些名词一听就让我头大直接放弃。二是买个域名加托管空间能搞定但要花钱我这个阶段不太想投入。三是 GitHub Pages免费、稳定、流程相对简单而且是开发者社区的主要阵地出了问题网上一查到处都是答案。虽然它只支持静态页面不支持动态后端但对我来说完全够用。这个选择背后的逻辑其实也适用于所有零基础的人先选最简单的路径跑通全流程再考虑升级。4.2 不敲一行命令也能上线GitHub 网页上传与 Pages 启用全流程网上大量部署教程默认你已经会 Git 命令动不动就让你在终端里敲 git init、git add、git commit。对我这种零基础来说看到 command line 就想关网页很容易卡在这一步就放弃了。所以我特别想说明GitHub 官网提供了纯网页操作的方式你完全可以不碰终端就上线一个静态网站。我当时就是一步步点鼠标完成的。第一步注册登录 GitHub 后找到页面上的New repository按钮创建一个新仓库。仓库名字我建议起一个跟你项目相关的英文名比如 plant-care。这一步会问你是公开还是私有公开的话任何人都能看到你的代码对于分享型项目没问题私有的话也可以但 GitHub Pages 用起来不方便建议先选公开。第二步在新仓库页面找到uploading an existing file这个入口点进去之后把本地准备好的 index.html、style.css、script.js 三个文件直接拖进上传区域然后点确认提交。这里不需要敲任何命令跟往微信里传文件一样简单。我上传完成后在仓库里能看到三个文件静静躺在列表里那一刻感觉特别奇妙——我写的代码居然真的被托管到一个全球知名的代码平台上。第三步打开仓库的Settings页面往下找到Pages这个菜单项在Source下拉框里选择 main 分支点击保存。页面会提示你正在构建稍等一下。第一次我等了大概两分钟刷新之后页面多了一行白色的网址提示你的网站已经发布地址格式是 https://你的用户名.github.io/仓库名/。我战战兢兢点了一下那个链接加载了几秒钟然后我亲手做的页面就出现在浏览器里了。于是我把这个网址发给家人朋友让他们打开看看。一个完全属于我自己的网页就这么上线了。4.3 上线之后的第一课响应式布局和真实设备测试刚上线那个晚上我很兴奋地拿手机打开这个链接结果差点没被劝退。手机屏幕上我精心调整的卡片挤成一条窄窄的竖线字体小到要放大才能看清整个页面看起来就像是拿台式机显示器硬塞进手机屏幕一样。我这才真实体会到原来电脑上好看的页面在手机上不一定好看。去问 AI 才知道我原本的样式没有做响应式适配也就是没有针对不同屏幕尺寸自动调整布局。这个问题也暴露了我之前的一个盲区我在在线编辑器里预览时一直是在电脑的浏览器窗口里看的从没试过用手机访问。于是我又多了一个习惯——每次改完代码先发到线上测试地址再拿手机打开看一遍。AI 帮我给页面的卡片加上了合理的百分比宽度、断点查询和字号适配改完以后再从手机打开终于是能正常阅读的布局了。这件事让我记下一个重要教训网页不是写完就完了必须在你目标用户可能用的设备上真实测试。而我作为零基础的人恰恰拥有最好的测试条件——我本身就是一个普通用户而不是一个被代码惯性影响的开发者。4.4 后续更新到底怎么操作我踩过的覆盖上传坑上线后的第二天我想改一个功能当时我完全不知道该点什么。我本想在仓库里直接改但找半天没找到入口。后来发现只需要在仓库页面再次进入Add file里的Upload files把你本地的同名文件再拖一遍进去就能覆盖掉原来的文件。当时我以为这就是全部了却踩了一个坑提交时没观察好提交信息的逻辑。实际上覆盖上传没问题但如果你同时修改了两个文件却只上传了其中一个线上的页面就会出现错乱——比如样式丢失、功能报错。后来我养成了一个习惯每次更新本地三个文件之后要么不嫌麻烦地三个一起重新上传要么让 AI 在本地提前把所有改动合并好我确认无误之后一次上传。GitHub Pages 从提交到线上的生效大概有一两分钟延迟所以上传后我通常会等一会儿再刷新页面。千万不要连续重复提交否则你自己都搞不清线上到底跑的是哪个版本。这个习惯帮我避免了好几次线上怎么变坏了的困惑。5. 踩坑实录、常见问题和零基础上 AI的真心话5.1 我踩过的坑和速查表AI 开发最常见的六类问题一次说清下面这个表格整理了我在整个过程中遇到的所有典型问题、排查思路和解决办法。如果你是照着这条路径走碰到类似情况可以直接对照处理。现象可能原因解决办法双击 HTML 文件后页面空白JS/CSS 文件路径引用错误让 AI 检查三份文件的互相引用路径确保文件名一致点击按钮没有任何反应JS 里报错功能中断按 F12 打开控制台复制红色错误信息丢给 AI刷新页面后数据全丢没有用 localStorage 存储要求 AI 把数据的读取和保存都改成 localStorage手机打开页面错位缺少响应式适配要求 AI 增加移动端适配按百分比和断点调整样式GitHub Pages 打开显示 404文件名不是 index.html 或仓库路径不对把首页文件重命名为 index.html并检查网址中的仓库名大小写线上页面和本地预览不一致缓存或文件没传全强制刷新浏览器确认本地三个文件是否全部重新上传这里面最频繁出现的是第二类问题。我想多说一句浏览器的控制台对零基础用户来说与其说是给开发者看的东西不如说是一个翻译通道。那些红色报错看起来是英文乱码但对 AI 来说就是最精准的线索。你只需要复制粘贴再问一句这是什么问题AI 就会告诉你原因和改法。这个过程我第一次用的时候感觉很神奇——我不认识的文字AI 认识我看不懂的逻辑AI 看得懂而我只需要扮演一个传话筒的角色。5.2 零基础需要补的不是代码的三个能力经过这次完整的开发体验我想把不会代码也能做网页这个说法做一次修正不会写代码确实可以完成开发但有三种能力你必须有它们都不属于编程知识却直接决定你项目能不能成。第一是描述需求的能力。AI 共情不了你脑子里的含糊想法。你说做一个好看的页面它只能做它理解的好看但你说页面左侧显示项目列表右侧显示详细信息列表项用圆角卡片装它就完全知道该怎么做。描述得越具体、越分条AI 的产出越可控。第二是测试验收的能力。你得愿意把自己当成一个挑剔的用户把按钮挨个点一遍把各种奇怪的输入都试一遍快速发现问题。说真的这个能力很多从业多年的人都不一定做得好我在过程中发现它其实很珍贵。第三是追问到底的勇气。遇到不懂的名词不要跳过直接问 AI 是什么意思、为什么这样写、换个方案行不行。这些当场追问比你看十篇教程都管用因为它是紧密围绕你的项目和当前认知水平展开的。5.3 AI 对话开发的边界什么能做什么别硬做我做完这个网页之后曾经很兴奋地想让 AI 再做一个带用户登录、能多人协作的记账网站。但问了一圈得到的答案是那样需要后端服务器、数据库、用户鉴权等一系列工程远不是三个静态文件就能解决的。这个例子很好地说明了 AI 对话开发的边界。目前我体感比较适合用 AI 对话从零做的项目包括个人主页、作品集、工具型单页应用、数据展示面板、学习 Demo以及各种内部小工具。这些项目的共同点是以信息展示和轻交互为主不需要高并发不需要跨用户数据同步不涉及支付等敏感操作。反过来说如果一个项目是请你做一个电商平台、一个社交软件、一个即时通讯工具甚至是一个带用户注册和数据库的完整系统那零基础 AI这套组合拳就力不从心了。不是说完全做不了而是复杂度会指数级上升出错之后你连问题都描述不清AI 也无从下手。我对零基础朋友的建议一向是第一次做项目选一个足够小的需求小到它可以在一个页面内展示全部核心功能。植物提醒页就是这么个例子。做成之后你对全流程有了体感再逐步挑战带登录、带后端存储的方案。路要一步步走第一次就选高难度目标很容易在某个环节被不熟悉的概念卡住最后连已经学会的东西都放弃了。5.4 我的真心话会逻辑比会语法更值钱做完这个网页半个月后我回头审视整段经历最大的体会是AI 把写代码这件事的门槛砍掉了一大截但编程思维的价值反而被放大了。所谓编程思维拆开来看就是我前面反复提到的——把模糊想法拆成可执行步骤、定义验收标准、用最小步骤验证假设、在出错时精准描述问题。这些能力一点都不神秘也不依赖数学天赋它们是人人都可以通过做一个小项目训练出来的。有一次我让 AI 添加一个按浇水紧急程度排序的功能它第一次实现的效果是所有数据每次刷新后重排排序只生效一次。我发现后并没有直接说你做得不对而是说我重新打开页面之后顺序应该还是保持着排序后的状态。这句话里面其实包含了一种对操作时间点和数据持久性的理解而这个理解来自我的生活直觉不是编程知识。AI 收到这句话之后马上进行了修正。这让我意识到哪怕我不会一行代码只要我的逻辑表达清楚AI 就能帮我把逻辑落成代码。反过来如果我自己都迷迷糊糊AI 给出的代码自然也歪到不知道哪里去了。5.5 如果让我重新来一次我会在第一天就做的事回顾全程我其实有些环节绕了远路。如果在第一天有个人能告诉我下面这几句话我的效率应该会高不少。现在我把它写在这里送给准备尝试的你。第一天就注册好 GitHub 账号不要等到网页做完了才开始折腾部署因为部署环节的问题需要提前暴露第一天就养成按 F12 开控制台的肌肉记忆哪怕看不懂也要在遇到问题时先打开它因为那是 AI 最需要的线索来源第一天就把需求写成一个按条列举的文档而不是直接开口说帮我做个东西时刻记住你在跟 AI 对话时不是在打字聊天而是在做产品评审。写在最后的几点经验做完这个网页之后我整个人的状态跟之前不太一样了。以前我刷到别人做的工具站会觉得那是技术圈的人才能碰的东西现在我会下意识地想这个页面用了什么数据结构数据存哪里我自己能不能也做一个类似的这种视角的转变在我看来比那个植物提醒页本身珍贵得多。如果让我再分享一个亲测有效的细节我想说做第一个项目一定要从中选一个你自己真正会天天用、或者愿意发给你朋友的功能。因为只有真实需求才会驱动你在遇到困难时不轻易放弃。像我后来会真的打开那个网页看我的龟背竹是不是该浇水了也会因为朋友反馈手机上看字太小而认真去调一次布局。这种正反馈循环是坚持完成一个项目最重要的燃料。下一步我计划在这个植物提醒页上加一个养护记录功能每次浇水时可以顺便写一句备注。我还是会用 AI 对话来实现它同时这次我决定顺手把它背后的 JavaScript 基础语法稍微学一点。不是为了取代 AI而是为了在 AI 偶尔犯错的时候我能更快发现而不是稀里糊涂地只知道说不行你再改改。这条路上AI 负责把技术落地我负责把想法说清楚两者配合起来笨拙但真实倒也有一种踏实的乐趣。