1分钟，图文并茂手把手教你用Trae AI将你的设计稿自动生成前端代码 One-Minute Guide with Visuals: Turn Design Mockups into Code with Trae AI

@

目录

• 准备工作：
• 实操
  • 第1步：上传设计图
  • 第2步：下达指令
    • 指令模板
    • 具体示例
    • 补充信息（让AI更准确）
  • 第3步：AI自动解析
    • 授权AI自动执行命令，创建编写代码
  • 第4步：AI自动生成高质量代码
  • 第5步：实时预览与调整
  • 总结
• Preparation:
• Practical Steps
  • Step 1: Upload Design Mockup
  • Step 2: Give Instructions
    • Instruction Template
    • Specific Example
    • Additional Information (For More Accurate AI)
  • Step 3: AI Automatic Analysis
    • Authorize AI to Automatically Execute Commands and Write Code
  • Step 4: AI Automatically Generates High-Quality Code
  • Step 5: Real-time Preview and Adjustment
  • Summary
    • Conclusion | 结语

无需手动编码，设计图直接变代码，AI正在重塑前端开发的工作流。| No manual coding needed. Design mockups directly transform into code. AI is reshaping frontend development workflows.

本文为中英文双语，需要英文博客可以滑动到下面查看哦 | This is a bilingual article. Scroll down for the English version.

准备工作：

在开始之前，我们需要完成一些简单的环境配置：

1. 安装Trae：访问Trae官网（trae.ai或trae.cn）下载对应操作系统的版本，支持Windows、Mac和Linux全平台。

2. 准备一个需要写代码的项目：我搞了一个demo空白项目来进行举例~

3. 选择工作模式：启动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进行调整：

• "将按钮颜色改为蓝色"
• "增加元素之间的间距"
• "添加悬停动效"
  
  
  
  

总结

虽然和原图有一些差异，但是界面元素已经全部捕获到了，而且我用的是随手截图的图片&免费模型，并不是真正的设计原稿，想要获得更好的效果，有下面几种方案:

1. 可以安装插件市场提供的Figma插件哦~
2. 使用更好的具有图片识别能力与代码生成能力的大模型
   

Preparation:

Before we begin, we need to complete some simple environment configurations:

1. Install Trae: Visit the Trae official website (trae.ai or trae.cn) to download the version for your operating system. It supports Windows, Mac, and Linux platforms.

2. Prepare a project that needs coding: I've set up a demo blank project for this example.

3. 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.

We'll randomly find an image from Baidu as a case study. Let's stop hesitating and use Baidu as our 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

If you're unsure, we can generally 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. Moreover, I used a casually-screenshot image & free model, not a real design draft. To achieve better results, here are some solutions:

1. You can install the Figma plugin provided in the plugin marketplace!
2. Use better large models with image recognition and code generation capabilities

Conclusion | 结语

• That's all for today~ - | 今天就写到这里啦~

• Guys, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~ | 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~

• Everyone, be happy every day! 大家要天天开心哦

• Welcome everyone to point out any mistakes in the article~ | 欢迎大家指出文章需要改正之处~

• Learning has no end; win-win cooperation | 学无止境，合作共赢

• Welcome all the passers-by, boys and girls, to offer better suggestions! ~ | 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~