转载请注明出处：莫潇羽@无忆研习社（www.wuyi.wiki）
快速摘要
本文核心结论（先看这里，3分钟读完关键信息）：
字节跳动旗下的 AI 编程工具 Trae（国内版官网：www.trae.com.cn），是目前对中文小白最友好的免费 AI IDE，内置豆包 1.5-pro 和 DeepSeek 双模型，完全不需要编程基础，用自然语言描述需求就能生成完整代码。 本文以实际制作一个企业官网为例，选用 PHP 8.x + MySQL + Nginx 技术栈，搭配小皮面板（phpStudy）在本地搭建开发环境，详细还原了从第一次提示词到网站跑通的全过程——包括第一轮出现的几类典型报错、如何用 AI 一条一条喂给 Trae 修正、前端样式崩了怎么描述让它修、Web 安装器的核心设计思路等实操细节。项目最终呈现出一个带 Web 图形化安装引导、响应式前端的完整企业网站框架。
往下看，有每个步骤的详细操作拆解，以及可直接参考的提示词模板和代码结构。
一、前言：当编程不再是程序员的专属
以前，"我想做个网站"这句话，对大多数普通人来说只是一个遥不可及的想法。要学 HTML、CSS、PHP，要搞懂服务器、数据库，要和一堆让人头大的配置文件较劲。哪怕是一个普通的企业官网，也至少得花几个月时间从零摸索，或者花钱委托开发，随随便便就是几千上万元。
但现在，这件事正在悄悄变得不一样。
2025 年以来，AI 编程工具的浪潮彻底改写了"写代码"这件事的门槛。你不再需要记住每个语法细节，也不需要去翻几百页的文档——你只需要用人话把需求说清楚，AI 就能给你生成一整套可以运行的代码。
我是莫潇羽，在无忆研习社（www.wuyi.wiki）做AI和建站教程已经有一段时间了。这段时间亲自测试了好几款 AI 编程工具，说实话，Trae 是目前让我觉得对国内小白最友好的一款。它不仅完全免费，界面是中文，对话也是中文，生成代码时出错了，你把报错信息直接粘进去，它会告诉你怎么改——整个流程下来，感觉就像有一个随时在线的程序员搭档陪着你。
这篇文章，我就用一个完整的企业官网项目为例，把从零到能跑起来的整个调试过程原原本本记录下来。包括 Trae 第一次生成的代码里有哪些问题、第一轮出了什么报错、怎么描述给 AI 让它修、改完之后又遇到了什么新问题——这些细节才是真正有用的东西，也是很多教程里看不到的。
如果你是完全不懂代码的小白，或者只懂一点点皮毛，这篇文章就是为你写的。跟着走，你会看到"用 AI 做网站"到底是一种什么体验。
二、认识 Trae：字节跳动打造的国产 AI 编程神器
2.1 Trae 是什么来头
Trae 是字节跳动于 2025 年 1 月 19 日正式推出的一款 AI 原生集成开发环境（AI IDE）。2025 年 3 月 3 日，国内版正式上线，号称是国内首个 AI 原生 IDE，针对中国开发场景做了大量本土化适配。
从技术底层来看，Trae 的界面与操作逻辑贴近 VS Code，整体界面和操作逻辑对用过 VS Code 的开发者来说非常熟悉，对没用过的新人来说也几乎没有学习成本——因为绝大多数操作都可以通过和 AI 对话来完成，你甚至不需要主动去找菜单栏。
国内版默认搭载了字节自家的豆包 1.5-pro 模型，并支持一键切换到满血版 DeepSeek R1 和 V3。两个模型各有侧重：DeepSeek R1 在推理和复杂逻辑上比较稳，V3 在代码生成速度上更快，可以根据任务类型自由切换。
Trae 国内版官网地址：www.trae.com.cn，支持 Windows 10/11 和 macOS 10.15 以上系统，直接下载安装包，整个安装过程和普通软件没什么两样，用手机号注册就能登录，完全不需要任何额外的账号体系。
2.2 Trae 的两种核心使用模式
理解 Trae，最重要的是搞清楚它的两种模式：
Chat 模式（聊天模式）
这是一种边开发边问的协作方式。你写着代码遇到问题，随时打开右侧的对话框问 AI，它能理解当前项目里所有文件的上下文，给出精准的解答或修改建议。比如你说"这段代码跑起来报了 500 错误，错误信息是……你帮我看看哪里有问题"，它会分析后直接告诉你哪一行出了什么毛病，顺便帮你改好。
Builder 模式（构建模式）
这才是让小白真正兴奋的功能。Builder 模式的逻辑是：你告诉 AI 你想做什么，AI 帮你从零开始把整个项目文件全部生成出来。它会自动拆解你的需求，一步一步执行——分析需求、生成目录、创建文件、写代码、运行命令——整个流程你几乎只需要在旁边看着，必要时确认一下"是否接受变更"。
对于新手来说，Builder 模式就是入门最快的路径。你用中文把需求说清楚，剩下的让 AI 来做就行了。
快捷键方面：Windows 用户按 Ctrl + U 打开 Builder 侧边对话框，macOS 用户按 Command + U。不过要注意，Windows 用户需要在设置里把终端配置为 PowerShell 6 及以上版本，Builder 模式才能正常运行命令。
2.3 Trae 对小白的优势到底在哪
相比市面上其他 AI 编程工具，Trae 最打动我的几个点：
一是全程中文无障碍。不只是界面是中文，报错提示、代码注释的生成、对话回复，全部都是地道中文，不需要你去翻译或者猜英文的意思。
二是完全免费。国内版个人用户可以免费使用全部基础功能，包含代码生成、自动补全、Bug 修复、Builder 模式等。对于刚开始摸索的小白来说，没有经济压力，可以放心反复试错。
三是上下文感知能力强。Trae 能读取整个项目文件夹里所有文件的内容，理解各文件之间的关联，所以当你说"修一下登录模块的 bug"时，它能找到所有相关的文件一起分析，而不是只看你当前打开的这一个文件。
四是可以直接粘报错。这是我认为对小白最实用的能力——你把浏览器里或者终端里的错误信息完整复制，粘到对话框，Trae 就会分析错误原因并给出修复方案，不需要你自己去读懂报错。这个过程本文后面会有完整的演示。
2.4 Trae 和其他 AI 编程工具有什么区别
为了让你更清楚 Trae 的定位，简单对比一下目前几款主流工具的特点。
Cursor 是目前在开发者圈子里口碑最好的 AI IDE，功能非常全面，对高级开发者非常友好，但它是付费订阅制，每个月需要固定费用，对于只是想试试水的初学者来说有一定的经济门槛，而且界面语言是英文为主，对中文用户的本土化支持不如 Trae 到位。
GitHub Copilot 是微软和 OpenAI 合作推出的代码补全工具，主要以 VS Code 插件的形式存在，补全能力很强，但它更像是一个"副驾驶"——辅助你写代码，而不是替你生成整个项目框架。对于完全不懂代码的小白来说，仍然有一定使用门槛。
Trae 的优势在于：它的 Builder 模式能从需求描述到完整项目文件一气呵成，全程中文操作，国内版完全免费，下载注册后就能用，不需要任何额外配置，模型能力也足够应付中小型网站项目。综合来看，它是目前对国内小白最友好、上手门槛最低的 AI 编程工具。
当然，Trae 也有局限性。处理特别复杂的大型项目时，Context 长度可能会触碰到上限，导致后期生成的代码和前期脱节；另外在并发请求量大的时候，平台可能出现排队等待的情况。这些都是正常现象，对于企业官网这样体量的项目，完全不影响使用。
三、架构选型：为什么用 PHP 8.x + MySQL + Nginx
3.1 这套组合能做什么
这三个组件加在一起，构成了一套经典的 Web 后端技术栈，行业里通常简称 LNMP（Linux + Nginx + MySQL + PHP），在 Windows 本地开发时也叫 WNMP。
- PHP 8.x：负责处理服务器端的逻辑，包括读取数据库、渲染页面内容、处理表单提交等。PHP 是全球使用最广泛的后端语言之一，全球超过七成的网站都在用，生态成熟，问题多的是解决方案，遇到任何报错基本都能搜到答案。
- MySQL：负责存储网站的数据，包括文章内容、联系信息、管理员账号等。免费、稳定、与 PHP 配合默契，是中小型网站的首选数据库。
- Nginx：负责接收用户的访问请求，把请求交给 PHP 处理，再把结果返回给浏览器。相比 Apache，Nginx 占用资源更少，并发处理能力更强，在国内主流服务器上大量使用。
3.2 为什么这套架构适合小白做企业网站
原因有几个很实在的点。
首先，模板和开源资源极多。网上大量的企业网站源码、CMS 系统（比如 WordPress、帝国 CMS、Z-BlogPHP 等）都基于 PHP+MySQL，这意味着你遇到问题时参考资料丰富，不容易找不到解决思路。
其次，本文我们用 Trae 从头写的是一个定制项目，它不依赖任何现成 CMS，功能精简但结构清晰，AI 生成的代码量在可理解范围内，便于你自己维护和修改。
第三，部署成本极低。这套技术栈在国内任何一家云服务器厂商上都能一键安装，后期要把本地做好的项目搬到线上服务器，操作非常简单。
3.3 PHP 8.x 有哪些值得关注的新特性
如果你之前看过一些旧的 PHP 教程，可能会觉得 PHP 已经是"老古董"了。事实上，PHP 8.x 版本在 2020 年以后进行了大量现代化改造，引入了很多让开发更安全、更简洁的新特性。这里列几个在本文项目里实际用到的：
JIT（即时编译器）： PHP 8.0 引入了 JIT 编译器，让 PHP 的执行速度有了显著提升，特别是在数学密集型运算上，虽然对普通 Web 请求的影响没有那么夸张，但整体性能优化是实实在在的。
命名参数（Named Arguments）： 允许你在调用函数时按参数名传值，不再需要记住参数的顺序，代码可读性大大提升。
纤程（Fibers，PHP 8.1）： 支持协程级别的并发控制，对需要异步处理的场景很有用。
只读属性（Readonly Properties，PHP 8.1）： 定义一次之后就不能再修改，在数据模型类里非常实用，减少了意外修改带来的 Bug。
枚举（Enums，PHP 8.1）： 终于有了原生的枚举类型，再也不需要用 const 常量来模拟了。
交叉类型（Intersection Types，PHP 8.1）： 更精确的类型声明，让代码在 IDE 里的类型提示更准确。
这些特性对小白来说不需要一下子全部掌握，但要知道：选 PHP 8.2 是目前最合理的选择，既稳定，又享受最新的性能和安全改进，而且主流的小皮面板和服务器面板都已经很好地支持了。
四、本地环境搭建：用小皮面板（phpStudy）一键起飞
4.1 为什么推荐小皮面板
在国内，最适合 Windows 小白搭建 PHP 本地环境的工具是小皮面板（phpStudy），官网地址：www.xp.cn。这款软件已经深耕国内市场超过十年，累计服务过超过百万开发者，口碑极好，阿里云也将其收录为推荐建站工具。
它的核心优势是真正的"一键启动"——不需要你手动去改 nginx.conf、php.ini 或者 my.cnf，装上软件，点几下按钮，PHP+MySQL+Nginx 就全部跑起来了。对新手来说，省去了大量环境配置的折腾时间，可以把精力全部放在网站本身的开发上。
4.2 安装和配置步骤
第一步：下载安装小皮面板
访问 www.xp.cn，找到 Windows 版本的下载按钮，下载完成后双击安装包，按提示完成安装即可。安装目录建议保持默认（通常是 D:\phpstudy_pro），不建议安装在中文路径下，避免后续出现路径解析问题。
第二步：启动服务
打开小皮面板主界面，在"首页"找到以下两项，分别点击启动按钮：
- Nginx（版本选 1.25.x）
- MySQL（版本选 8.0）
同时，点击上方的"软件管理"→"PHP"，安装 PHP 8.2 版本，安装完成后回到首页，确认 Nginx 使用的是 PHP 8.2。
第三步：创建本地站点
点击小皮面板顶部导航栏的"网站"→"添加站点"，填写以下信息：
- 域名：填
localhost或者自定义一个本地域名，比如mybiz.local - 根目录：选择一个你准备放项目文件的文件夹，比如
D:\phpstudy_pro\WWW\mybiz - PHP 版本：选 PHP 8.2
点击"确认"，站点就创建好了。如果用了自定义域名比如 mybiz.local，小皮面板会自动帮你修改系统的 hosts 文件，直接在浏览器里输入 http://mybiz.local 就能访问到你的项目目录。
第四步：创建数据库
点击小皮面板顶部的"数据库"→"管理"，进入 phpMyAdmin（一个图形化的 MySQL 管理界面）。点击"新建数据库"，数据库名填 mybiz_db，字符集选 utf8mb4_unicode_ci，创建完成。
记住这几个信息，后面安装器会用到：
- 数据库主机：
localhost - 数据库名：
mybiz_db - 数据库用户名：
root（小皮默认） - 数据库密码：
root（小皮默认，实际项目建议修改）
第五步：验证环境
在站点根目录下新建一个 test.php 文件，写入以下内容：
<?php phpinfo(); ?>在浏览器里访问 http://mybiz.local/test.php，如果能看到 PHP 的版本信息页面，说明环境已经跑通。验证完成后记得删除这个文件，避免泄露服务器信息。
4.3 小皮面板使用中的几个注意点
关于端口冲突： 如果你的电脑上原来装过其他软件（比如 IIS、某些杀毒软件、或者旧版 WAMP），可能会导致 80 端口被占用，Nginx 无法正常启动。这时候小皮面板在"服务"栏目里会显示 Nginx 状态为红色。解决办法是找到占用 80 端口的进程并关闭，或者修改小皮面板里 Nginx 的监听端口为 8080。如果改了端口，访问本地站点时就需要写 http://mybiz.local:8080。
关于杀毒软件干扰： Windows 系统上的某些杀毒软件（尤其是 360 安全卫士、Windows Defender 等）有时候会拦截 PHP 进程的网络请求，或者把 phpStudy 目录里的某些 DLL 文件当成病毒误删。如果遇到 PHP 启动后莫名其妙报错，先检查一下杀毒软件的隔离区有没有把什么文件隔离掉。
关于多 PHP 版本共存： 小皮面板支持同时安装多个 PHP 版本，不同站点可以用不同版本的 PHP，互不干扰。如果你同时在做多个项目，这个功能非常实用。在"网站"管理里，每个站点都可以单独指定使用哪个 PHP 版本。
关于 phpMyAdmin： 小皮面板自带了 phpMyAdmin，用于图形化管理 MySQL 数据库。你可以在面板的"数据库"→"管理"里直接打开它，不需要单独安装。通过它可以方便地创建/删除数据库、查看表结构、执行 SQL 语句等操作，对新手来说比命令行友好很多。
本文的演示环境是 Windows 系统，PHP 版本选用 8.2，MySQL 选用 8.0，Nginx 选用 1.25.x，都是目前较为主流的稳定版本。
五、项目构思：我们要做一个什么样的企业官网
5.1 目标功能清单
在打开 Trae 开始生成代码之前，有一件事必须先做好：把需求想清楚，写下来。
AI 能做的事很多，但它需要你告诉它做什么。需求描述越清晰，生成的代码就越接近你的预期，后期修改的工作量就越少。
我们这个企业官网的目标功能，梳理如下：
- 首页：公司介绍 Banner + 核心业务卡片 + 联系方式
- 关于我们页：公司历程、团队介绍
- 服务/产品页：展示服务项目，支持管理后台添加
- 新闻动态页：列表 + 详情，支持后台发布
- 联系我们页：表单提交（姓名、电话、留言），提交后存入数据库
- 管理后台：简单的登录验证 + 内容管理
- Web 图形化安装向导：首次使用时通过访问域名自动引导完成数据库配置和管理员账号设置
其中最后一条"Web 安装向导"是本文的重点设计之一，后面会详细说明它的实现原理。
5.2 企业官网和落地页的区别
很多人会把这两个概念混淆，这里简单区分一下。
企业官网是一个多页面的完整网站，包含导航栏、多个频道页面、后台管理等，主要目的是展示公司的全面形象。
落地页（Landing Page）通常是单页面，也叫"一页纸网站"，专门为某一个营销目标设计，比如推广一个活动、一个产品或者一项服务。落地页没有复杂的导航，只有一条清晰的行动号召（CTA），比如"立即咨询"、"免费体验"等按钮，目的是让访客在这一页上就完成转化动作。
本文主要以企业官网为主线，落地页的生成放在后面单独一节。
六、用 Trae Builder 模式生成项目框架：第一次对话实录
6.1 写好提示词，是第一步最关键的环节
打开 Trae，新建一个空文件夹作为项目目录（比如 D:\phpstudy_pro\WWW\mybiz），然后在 Trae 里"打开文件夹"，把这个目录作为工作区。
按下 Ctrl + U 打开 Builder 侧边栏，切换到 Builder 模式，准备输入第一条提示词。
提示词怎么写才有效？
从我实际使用的经验来看，一个好的提示词需要包含以下几个要素：
- 明确说明技术栈（PHP、MySQL、Nginx、哪个版本）
- 描述网站的核心页面和功能
- 说明需要哪些特殊设计（比如 Web 安装向导）
- 指定后台管理的需求
- 如果有风格要求，一并说明（比如"简洁现代感"、"主色调用深蓝"）
以下是我在这次项目里实际使用的提示词，你可以参考：
请用 PHP 8.2 + MySQL 8.0 + Nginx 技术栈，帮我创建一个企业官网项目。
具体要求如下：
一、目录结构
- /install.php（Web 安装向导，首次访问时引导用户配置数据库和管理员账号）
- /install.lock（安装完成后创建此文件，阻止重复安装）
- /index.php（首页）
- /about.php（关于我们）
- /service.php（服务介绍）
- /news.php（新闻列表）
- /news_detail.php（新闻详情）
- /contact.php（联系我们，含表单）
- /admin/（管理后台目录）
- /config.php（数据库配置文件，由安装向导生成）
- /assets/（CSS/JS/图片资源）
- /db.sql（数据库初始化 SQL，由安装向导执行）
二、Web 安装向导（install.php）
- 第一步：输入数据库主机、数据库名、用户名、密码，点击"测试连接"
- 第二步：填写网站名称、管理员账号、管理员密码、管理员邮箱
- 点击"立即安装"，自动执行 db.sql 创建所有表，生成 config.php，创建 install.lock
- 安装完成后跳转到网站首页
三、前端风格
- 响应式设计，移动端适配
- 主色调用深蓝色（#1a3c6e），辅色用橙色（#e87722）
- 页头固定顶部，有 Logo 和导航栏
- 首页有全屏 Hero Banner，有三张服务卡片
- 页脚有联系信息和版权信息
四、管理后台（/admin/）
- index.php：登录页
- dashboard.php：后台首页，显示统计数据
- news_list.php：新闻管理列表
- news_add.php：发布新闻
- contact_list.php：查看联系表单提交记录
五、安全要求
- 所有 SQL 操作使用 PDO + 预处理语句
- 密码存储使用 password_hash() 加密
- 后台所有页面检查登录状态，未登录跳转到 login.php6.2 Builder 模式的运行过程
把提示词粘贴到 Builder 输入框后，按回车，Trae 开始工作。Builder 模式不是简单地"生成一段代码然后返回"，它会自动进行以下这些步骤：
首先，AI 会分析你的需求，把大任务拆解成若干个子任务，列出一个执行计划，然后逐条执行。你能在侧边栏看到它实时输出的步骤，比如"正在创建文件夹结构"、"正在生成 install.php"、"正在生成 db.sql"等。
每当要修改或者新建一个文件时，Trae 会在编辑器区域显示绿色高亮的差异视图（类似 Git diff 的样式），让你看到具体要写入什么内容。你可以选择"接受"或者"拒
