Trae AI 将设计稿自动生成前端代码图文指南

这样 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 to download the version for your operating system. It supports Windows, Mac, and Linux platforms.
2. Prepare a project that needs coding: 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.

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:

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