这一篇文章直接上实操干货，说明白如何使用 TRAE IDE，让不会编程的同学，照样像高级程序员一样，完成一个系统的需求分析、系统功能界面设计、开发、部署、运行。
本教程适用于MACOS电脑。本次演示，目的让AI开发一个前后端分离的 Web系统，核心功能是【账号密码+验证码登录、默认初始账号、登录欢迎页（显示登录名/时间）、历史登录记录表格及查询】。
第一部分：是让AI设计系统功能界面，设计出来后，你让它修改满意后才进行开发。
第1步：在macos电脑上，创建一个存放本次开发系统的目录。我的是这个：/Users/soilsuap/aicode/2026-0106-aiweb，作为代码目录。
第2步，在TRAE 中打开代码目录，在TRAE 右侧AI聊天窗口，下达指令提示词 prompt。例如：
我是编程小白，用 macOS 系统，需要你帮我先设计「带登录功能的 Web 系统」前端界面原型（前后端分离，只做前端，无后端逻辑），系统名称叫【我的AIweb系统】，要求如下：1. 界面包含 2 个核心页面：（1）登录页：- 布局：账号输入框、密码输入框、验证码输入框+验证码图片、登录按钮、「忘记密码」文字（仅展示，无功能）；- 样式：简洁居中，适配电脑端，输入框有提示文字（比如「请输入账号」），验证码图片区域标注「点击刷新验证码」；（2）登录欢迎页：- 顶部：显示「欢迎 XXX（当前登录账号），登录时间：YYYY-MM-DD HH:MM:SS」；- 中部：历史登录记录表格，列名包含「登录账号、登录时间、登录IP、登录状态」；- 底部：查询功能区（输入账号/时间范围，点击「查询」按钮筛选表格数据）；2. 交付要求：- 生成纯前端 HTML+CSS+JavaScript 代码，分 2 个文件（login.html 登录页、welcome.html 欢迎页）；- 告诉我在 macOS 上如何打开预览（比如双击 HTML 文件）；- 界面标注清楚功能区域，我确认没问题后，再让你开发完整前后端代码。3.注意（1）添加响应式设计，确保在不同尺寸的屏幕上都能正常显示。（2）使用真实的数据表格、图表和表单，而非占位符元素。对于功能页面中用到的数据表格，可以按照具体的业务要求，使用模拟真实的数据。（3）实现完整的导航系统，包括顶部菜单、左侧菜单、面包屑导航等企业级应用常见的导航元素。右上角显示当前登录用户信息。（4）本系统风格采用科技蓝白风格。AI 就开始分析，分析完就开始写代码，设计系统功能界面了。
第3步：设计完成了，就要验证功能是否是你所需要的，有问题，就让AI帮你解决。
另一个系统页面，没有问题，我就没有修改意见的。觉得可以确认 AI 的设计，我已经满意了。就可以进行下一步，让AI写代码进行开发。
第二部分：AI写代码，按设计好的系统界面，实现功能逻辑
第4步：你告诉AI，前端界面原型符合预期，现在需要你帮我开发完整的前后端分离 Web 系统（适配 macOS），直接下达指令：
我已确认前端界面原型符合预期，现在需要你帮我开发完整的前后端分离 Web 系统（适配 macOS），核心需求：1. 技术栈（小白友好，无复杂框架）：- 前端：HTML+CSS+JavaScript（和原型一致）；- 后端：Python + Flask（轻量级）；- 数据库：SQLite（macOS 自带，免安装）；- 验证码：简单的图片验证码（无需第三方接口，本地生成）；2. 核心功能：（1）登录功能：- 初始化默认账号：admin，默认密码：123456；- 验证逻辑：账号+密码+验证码匹配才能登录，验证码错误提示「验证码不正确」，账号密码错误提示「账号或密码错误」；（2）欢迎页功能：- 显示当前登录账号名称、登录时间（精确到秒）；- 历史登录记录表格：存储并展示所有登录记录（账号、登录时间、登录IP、登录状态）；- 查询功能：支持按「账号」「登录时间范围」筛选表格数据；（3）数据存储：- 账号信息、历史登录记录都存入 SQLite 数据库；- 每次登录自动记录登录信息到数据库；3. 交付要求（重点适配 macOS）：- 生成完整代码，分文件夹：frontend（前端，含 login.html/welcome.html）、backend（后端，含所有逻辑代码）；- 详细说明 macOS 上的部署步骤：包括安装依赖、初始化数据库、启动后端、打开前端的每一条终端命令；- 代码加中文注释，标注「小白需要修改的配置项」（比如默认账号密码）；- 说明测试方法：比如如何验证登录、如何查看/查询历史记录。注意：在创建目录时，会弹出授权权限，就一定要允许。
至此，AI 说完成了系统功能开发。
第5步：检查AI是否真的完成代码了。我当时发现代码目录都是空的，它居然说完成了，我就很奇怪，我就直接问AI，让它解决。
原来AI没有把生成的代码自动创建文件，这家伙，我要求它，才开始创建，太滑头了！
第6步：继续验证，我发现我不会如何打开，根本不知道如何操作，所以我就直接问AI，让它告诉我
我按AI的提示，复制网址到浏览器中访问，发现打不开。
说是端口被占用，AI给了一堆的解决方案，但我没有看懂。我让AI修改好，帮我解决，就是结果为导向。
然后一堆输出，就完成修改了。
发现验证码看不清，错位了。我就让AI改。
第7步：登录系统，验证+体验功能。
第三部分：让AI补充相关的系统必须文档。
第8步：我发现还缺少我想要的信息，例如：系统操作说明、系统部署说明、系统设计说明等，我就让AI帮我输出。
第9步：我让它关掉这个系统的后台服务，以免拖慢我的电脑。毕竟，我不是做开发的嘛。
最后，看看AI开发的完整产出物，厉害了。搞定。
