使用 Trae AI 将设计稿自动生成前端代码指南
无需手动编码，设计图直接变代码，AI 正在重塑前端开发的工作流。
准备工作
在开始之前，我们需要完成一些简单的环境配置：
- 安装 Trae：访问 Trae 官网（trae.ai 或 trae.cn）下载对应操作系统的版本，支持 Windows、Mac 和 Linux 全平台。
- 准备一个需要写代码的项目：创建一个 demo 空白项目来进行举例。
- 选择工作模式：启动 Trae 后，切换到Builder 模式，这个模式可以自动帮你写代码。
实操
第 1 步：上传设计图
在 Trae 的 Builder 模式下，直接拖拽或上传你的设计图文件。Trae 支持多种格式设计稿。
我们使用一张示例图片作为案例。
第 2 步：下达指令
你可以按照以下结构向 AI 工具下达指令，这样它能最准确地理解你的需求：
指令模板
请根据我上传的图片，帮我：
1. **生成 React 组件代码** - 创建一个新的页面组件 - 组件文件路径：src/pages/[根据图片内容命名的文件夹]/index.tsx - 使用 TypeScript - 包含必要的样式文件
2. **自动注册路由** - 在现有的路由配置中（通常是 src/router/index.tsx 或类似文件） - 添加新页面的路由配置 - 路由路径：/[根据图片内容建议的路由路径]
3. **文件夹结构** - 创建完整的文件夹结构 - 包含组件文件、样式文件（如需要） - 导出配置
图片内容描述：【这里简单描述图片显示的页面功能，比如：用户管理界面、仪表盘、登录页面等】
具体示例
请根据我上传的图片，帮我：
1. 在 app 文件夹下创建 demo1016 文件夹，生成 React 组件
2. 创建图片中所需要的元素的所有组件，请自动拆分，可以创建多个子组件
3. 自动注册路由，路径为 "/demo1016"
4. 组件要包含页面中所有元素
补充信息（让 AI 更准确）
如果可能，还可以提供：
- 项目技术栈：使用的是 React Router v6 还是其他路由库？
- UI 组件库：Ant Design、Material-UI 还是自定义组件？
- 状态管理：Redux、Zustand 还是 Context？
- 样式方案：CSS Modules、Styled-components 还是 Tailwind？
这样 AI 工具就能生成完全符合你项目结构的代码，并正确集成到现有项目中。
第 3 步：AI 自动解析
上传后，Trae 会启动其 AI 引擎自动分析设计稿。
授权 AI 自动执行命令，创建编写代码
如果你不放心，我们可以用 git 记录代码改动，AI 工具生成的代码可以点击撤回。如果多次对话最终结果仍旧不满意，可以使用分支记录随时撤回。
第 4 步：AI 自动生成高质量代码
解析完成后，Trae 会自动生成对应的前端代码。你可以根据项目需求选择输出的技术栈：
- React 组件（支持 TypeScript）
- Vue 组件（支持 Vue 2 和 Vue 3）
- 原生 HTML/CSS/JavaScript
- iOS 原生 UI 代码（Swift）
第 5 步：实时预览与调整
生成代码后，如果发现与设计稿有差异，可以通过自然语言指示 AI 进行调整：
- '将按钮颜色改为蓝色'
- '增加元素之间的间距'
- '添加悬停动效'
总结
虽然和原图有一些差异，但是界面元素已经全部捕获到了。如果想要获得更好的效果，有下面几种方案：
- 可以安装插件市场提供的 Figma 插件。
- 使用更好的具有图片识别能力与代码生成能力的大模型。
