不会写代码,也能让 AI 给你做个小网页
- 2026-09-25 17:17:31
省流版简介： 不会写代码的人，用大白话提需求， 30 分钟就能让 AI 做出一个能在浏览器打开的小网页。秘诀是把 AI 装进 IDE （程序员写项目的软件）：它看着你的文件夹，你说一句它当场做给你看。工具两款各取所需——Trae 免费中文开箱即用， VS Code + Copilot 行业标准生态大，不排名、可都装。上手四步：下载、安装、登录、打开专用练习文件夹。做新东西用 Builder 模式，委托写清目标、背景、要求、约束。验收不用看代码，只看两样： Diff （改动对比，红色删除绿色新增，签收前核对改了哪个文件）和浏览器实际效果；纪律是不点「全部接受」的盲盒，不满意就在同一条对话里具体地提修改意见。文末附上清单。
你心里有没有过这样一个念头：「要是能自己做个小网页就好了」——一个介绍自己的个人主页、一张发给朋友的生日贺卡页、一个活动报名的小页面。
然后念头很快熄灭：做网页不是要会写代码吗？
我以前也这么认为。直到我做了个实验：让一个完全没学过编程的人，用大白话提需求， 30 分钟后，他双击打开了一个属于自己的网页。全程没写一行代码，甚至没看一行代码。
这是『把活交给 AI ： Agent 上手系列』第二季·进阶篇的第 4 篇。上一篇我们走了命令行路线，让 AI 在黑窗口里干活；这一篇走图形化路线——把 AI 装进「程序员写项目的软件」里，让它当着你的面把东西做出来。点击文末合集标签订阅整个连载。
一、写代码的地方，长出了助手
先解释一个词：IDE，翻译成人话就是「程序员写项目的软件」。程序员在里面写代码、管文件、跑程序。
前面几篇我打过这样的比方：命令行 Agent 像给后勤部门发电报，桌面端 Agent 像在前台和服务员面谈。那 IDE Agent 就是直接走进工作室，坐在设计师旁边——你们看着同一张图纸，你说一句「这里改一下」，他当场改给你看。
把 AI 装进 IDE 之后，画面是这样的：左边是你的项目文件，中间是文件内容，右边是 AI 对话框。 AI 能直接看到、直接修改你正在做的项目——三种形态里，它看到的东西最全。
而对不会写代码的人来说，真正重要的变化是一种叫 Vibe Coding 的玩法，翻译过来就是「你描述感觉， AI 写代码」：你负责用大白话说清「我想要什么」， AI 负责把它变成真的程序。做一个小网页、一个待办清单工具、一张贺卡页，都不需要你懂代码——生成的文件直接保存在你的文件夹里，随时打开看效果，随时提修改意见。
二、装哪款？两款代表工具，各取所需
这类工具不少，我只说两个最有代表性的，不排名，按你的情况选：
一句务实的建议：两个可以都装，不冲突。 Trae 甚至支持一键导入你在 VS Code 里的设置和快捷键。很多人的实际路径是：先用 Trae 建立信心，想走开发路线了再迁到 VS Code 。功能和价格变动很快，具体以官网为准。
三、装好到开工，只要四步
以 Trae 为例（ VS Code 思路一样）：
第 4 步是老规矩：练习阶段用专用文件夹，别让 AI 一上来就接触你的重要文件。之后它生成的所有东西，都会保存在这个文件夹里。
界面只需记住一条动线：在右边说话，在中间看结果，在左边找文件。
四、发出第一个委托：大白话 + 四要素
Trae 的对话区有三种工作方式，对应你希望 AI 参与多深：
选 Builder ，然后发委托。委托还是那套四要素：目标、背景、验收标准、约束。这是可以直接抄的一条：
请帮我做一个个人介绍网页。在当前文件夹里从零开始，我只需要一个能直接在浏览器里打开的网页，不需要后端和数据库。
网页内容要求： 1. 顶部显示姓名（先用占位名）和一张头像占位图； 2.「关于我」板块，放三段自我介绍（先用占位文字，我稍后自己改）； 3.「我喜欢的书」板块，列出三本书； 4. 配色清爽。
技术要求：所有内容放在一个网页文件里，不要调用任何外部接口，页面文字用中文。完成后告诉我文件名。
发送后， AI 开始创建文件、写入代码。完成后，左侧文件区会出现一个新的网页文件——双击它，电脑会用浏览器打开。 看到姓名、头像占位、三段介绍、三本书列表真实出现在浏览器里的那一刻，你就完成了从「 AI 用户」到「 AI 委托者」的一次跨越。
五、签收前先看改了什么： Diff 与二次委托
IDE Agent 干活有个特点：每一处改动都摆在你面前等你签收。
AI 改完文件，会用一种叫 Diff （改动对比） 的方式展示：红色带减号是被删掉的内容，绿色带加号是新增的内容。把它想象成网购签收——快递单上写着「寄出什么、收到什么」，核对无误再签字（接受）；货不对板就拒收（拒绝）， AI 会撤销这次改动。
不懂代码也能看 Diff，只需关注三件事：
一条纪律：不点「全部接受」的盲盒。 说白了，改动小可以快速扫一眼，改动大就逐文件过一遍，重点看红色删除部分——新增出问题最多是没用，删错是真损失。如果任务比较大（比如「把单页改成三个页面的网站」），可以先让 AI 出一份分步计划，你确认后它再动手，返工最少。
验收的最后一公里在浏览器：接受改动后，重新打开网页看实际效果——代码层面「看起来对」和浏览器里「真的对」是两回事。不满意就在同一条对话里继续提意见，关键是具体：
每一轮「提意见 → 看 Diff → 浏览器验收」都是一次迭代。两三轮下来，网页通常就像样了。
六、下次做网页，记住这个流程
选型阶段先想清楚：零基础、中文环境、想免费，选 Trae 国内版；想走开发路线、要最大生态，选 VS Code + Copilot 。安装就四步：下载、安装、登录、打开专用练习文件夹。界面动线很简单：右边说话、中间看结果、左边找文件。
做新东西用 Builder 模式，委托写全四要素：目标、背景、验收标准、约束。 AI 改完后先看 Diff ：改了哪个文件？规模合理吗？你认识的内容变成了什么样？重点看红色删除部分。验收别只看代码，双击网页文件，用浏览器里的实际效果说话。不满意就在同一条对话里具体提修改意见，迭代两三轮，通常就像样了。
七、写在最后
不会代码的人做网页，反而有个意想不到的优势：你不用陷在代码里，只看两样东西——Diff 里「改了什么」，浏览器里「效果对不对」。
这恰恰是把活交给 AI 的核心手艺：你管目标和验收，它管实现。
这是『把活交给 AI ： Agent 上手系列』第二季·进阶篇的第 4 篇。上一篇走了命令行路线，这一篇走了图形化的 IDE 路线；下一篇我们讲怎么给 AI 项目装上检查点，让长期项目改得放心、退得回去。
可以现在试：装好工具，建一个练习文件夹，把第四节那条委托书原样发出去。 30 分钟后，你会拥有一个属于自己的网页。
参考来源
本文由 AI 辅助创作，作者进行了实测验证和编辑修改。
