Trae AI 将设计稿自动生成前端代码
准备工作：
在开始之前，我们需要完成一些简单的环境配置：
- 安装 Trae：访问 Trae 官网下载对应操作系统的版本，支持 Windows、Mac 和 Linux 全平台。
- 准备一个需要写代码的项目：创建一个空白项目用于演示。
- 选择工作模式：启动 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 插件。
- 使用更好的具有图片识别能力与代码生成能力的大模型。
Preparation:
Before we begin, we need to complete some simple environment configurations:
- Install Trae: Visit the Trae official website to download the version for your operating system. It supports Windows, Mac, and Linux platforms.
- Prepare a project that needs coding: Set up a demo blank project for this example.
- Select working mode: After launching Trae, switch to Builder mode, which can automatically write code for you!
Practical Steps
Step 1: Upload Design Mockup
In Trae's Builder mode, directly drag and drop or upload your design mockup file. Trae supports multiple formats of design drafts.
Select a design image as an example.
Step 2: Give Instructions
You can issue instructions to the AI tool following this structure for the most accurate understanding of your needs:
Instruction Template
Please help me with the image I uploaded:
1. **Generate React component code** - Create a new page component - Component file path: src/pages/[folder named based on image content]/index.tsx - Use TypeScript - Include necessary style files
2. **Automatically register routes** - In the existing routing configuration (usually src/router/index.tsx or similar files) - Add routing configuration for the new page - Route path: /[suggested route path based on image content]
3. **Folder structure** - Create a complete folder structure - Include component files, style files (if needed) - Export configuration
Image content description: [Briefly describe the page function shown in the image, such as: user management interface, dashboard, login page, etc.]
Specific Example
Please help me with the image I uploaded:
1. Create a demo1016 folder under the app folder and generate React components
2. Create all components needed for the elements in the image, automatically split them, and create multiple sub-components
3. Automatically register the route with path "/demo1016"
4. Components should include all elements in the page
Additional Information (For More Accurate AI)
If possible, you can also provide:
- Project tech stack: Are you using React Router v6 or another routing library?
- UI component library: Ant Design, Material-UI, or custom components?
- State management: Redux, Zustand, or Context?
- Styling solution: CSS Modules, Styled-components, or Tailwind?
This way, the AI tool can generate code that perfectly matches your project structure and integrates correctly into your existing project.
Step 3: AI Automatic Analysis
After uploading, Trae will start its AI engine to automatically analyze the design draft.
Authorize AI to Automatically Execute Commands and Write Code
Use Git to track code changes. The code generated by AI tools can be rolled back with a click. If you're still not satisfied with the final result after multiple conversations, you can always roll back using branch records!
Step 4: AI Automatically Generates High-Quality Code
After analysis, Trae will automatically generate the corresponding frontend code. You can choose the output tech stack according to your project needs:
- React components (supporting TypeScript)
- Vue components (supporting Vue 2 and Vue 3)
- Native HTML/CSS/JavaScript
- iOS native UI code (Swift)
Step 5: Real-time Preview and Adjustment
After generating the code, if you find any differences from the design draft, you can instruct the AI to make adjustments using natural language:
- Change the button color to blue
- Increase the spacing between elements
- Add hover animations
Summary
Although there are some differences from the original image, all interface elements have been captured. To achieve better results, here are some solutions:
- You can install the Figma plugin provided in the plugin marketplace!
- Use better large models with image recognition and code generation capabilities
