不会代码也能建网站：用 TRAE 一下午搭出个人主页

「我想做个个人主页」这个念头存在了很多年，一直停留在「等我学会前端」。直到我打开了 TRAE——字节跳动出的 AI 编程工具，一下午，网站上线了。

准备工作（10 分钟）

下载安装 TRAE，用抖音或手机号登录。打开后就是一个加强版 VS Code，右侧是 AI 对话框。

第一步：说清楚要什么（关键！）

我在对话框里输入：

帮我做一个个人主页，要求：1）单页面，包含「关于我、项目经历、联系方式」三个板块；2）响应式，手机上看也正常；3）风格简洁，白底黑字，不要花哨动画；4）用原生 HTML/CSS/JS，不引框架。

TRAE 直接生成了三个文件：index.html、style.css、script.js，还自动创建了目录结构。

第二步：跑起来看效果（5 分钟）

TRAE 有一键预览，点开就能在浏览器里看。第一版结构完整，但头像位置不对，导航在手机上换行了。

第三步：对话式改需求（重头戏）

我把预览截图发给 TRAE：「手机上导航换行了，请在小屏幕下把导航收起来，用汉堡菜单」。它改了 CSS 和 JS，刷新就生效。

整个下午我提了 20 多个需求，从「头像改成圆形」到「加一个暗色模式」，全部是自然语言描述。

三个真实踩坑

1. 别说「好看一点」：AI 不知道你的好看是什么。要说「主色调改成 #3B82F6，标题字号放大 20%」
2. 大需求拆小步：别说「帮我加个博客系统」，要说「先加一个文章列表页面」
3. 看不懂的代码一定要问：「请解释你刚才加的这段代码在做什么」——问清楚你才能改对

一下午的成果

一个响应式个人主页：导航、关于、项目、联系四个板块，暗色模式，移动端适配，部署到 GitHub Pages 免费上线。

不会代码不可怕，说不清楚需求才可怕。TRAE 这类工具把「 coding 」变成了「说清楚你想要什么」——这恰恰是产品经理的核心能力。