第1章 AI实践：AI与网页工具初体验

AI实践：AI与网页工具初体验在开发网页时，使用AI技术能够极大地提升开发效率。以往网页开发需要开发者手动编写代码、调试样式、处理兼容性问题、搭建页面架构，从需求梳理到原型落地、代码实现再到测试优化，全流程依赖人工逐行操作，不仅耗时耗力，还容易出现语法错误、样式冲突、逻辑漏洞等问题，面对复杂的交互页面、响应式适配和跨端兼容需求时，开发周期会大幅拉长，人力成本也居高不下。而AI技术的介入，彻底打破了传统开发的低效壁垒，从基础的代码补全、错误检测，到智能生成页面组件、优化交互逻辑，再到自动化测试和部署，全方位简化了开发流程，让开发者能从烦琐的重复性工作中解脱，聚焦于产品创意和用户体验优化。目前，市面上已经有许多开发工具融入了AI，使开发变得更高效。例如，VSCode融入了GitHubCopilot，但考虑GitHubCopilot是国外产品，在国内使用不太方便，下面将介绍另一个国产开发工具——TRAE。TRAE是字节跳动于2025年推出的开发工具，其定位不仅是编程助手，更是“智能开发伙伴”。TRAE的核心特点如下。AI自主开发：用户用自然语言描述需求（如“开发一个带登录功能的论坛”），AI自动完成项目搭建、编码、依赖安装和预览。深度上下文感知：AI能理解整个代码库结构，而非仅当前文件，提升生成代码的准确性。本土化：针对中文开发者优化，支持中文注释、国内技术栈，内置国产模型。免费开放：国内版核心功能完全免费，降低使用门槛。多模态与智能体生态：支持插件扩展、自定义智能体（Agent）、模型上下文协议（ModelContextProtocol，MCP）等，并将覆盖更多开发全流程。TRAE标志着AI编程从“辅助工具”迈向“自主开发”，显著提升效率。值得一提的是，TRAE是在开源软件VSCode的基础上构建的，它是VSCode的一个深度定制版，对于已经习惯VSCode的开发者可以快速上手TRAE。读者可通过TRAE官方网站获取TRAE的安装包，如图1所示。图1TRAE官方网站在图1中，单击“下载TRAEIDE”按钮，下载TRAE安装包。下载完成后，双击启动TRAE安装包，然后根据TRAE安装包的提示进行安装即可。安装完成后，进入TRAE主界面，如图2所示。图2TRAE主界面在图2中，右侧有个“登录”按钮，用户需要登录后才能使用TRAE的AI功能。单击“登录”按钮后，会出现一个选择界面，如图3所示。图3选择界面在图3中，读者可以“个人用户”，选择后，会出现登录界面，读者可以输入手机号码，通过短信验证码进行登录，不需要专门注册。登录成功后，TRAE主界面如图4所示。图4TRAE主界面（登录成功后）在图4中，单击“打开文件夹”按钮，打开一个文件夹，用于编写代码，其操作逻辑与VSCode相同。打开文件夹后的效果如图5所示。图5打开文件夹后的效果读者可以仿照VSCode的操作方式，创建一个index.html文件，编写一个简单的网页，如图6所示。图6编写一个简单的网页单击TRAE主界面右下方的输入框上方的“@Agent”按钮，会出现“内置智能体”界面，如图7所示。图7内置智能体界面在图7中，当前TRAE有3个内置智能体，其中Chat用于向AI提问；Agent用于让AI执行常规的开发任务；SOLOAgent用于解决复杂的编程问题。对于初学者来说，可以先选择Chat智能体。选择后，在输入框中输入问题，向AI提问，例如提问“解释当前