国内大厂AI插件测评：轻松将UI设计转化为Vue前端代码！

在IDEA中安装一些大公司的AI插件，然后打开ruoyi增强项目：yudao-ui-admin-vue3吧。

1. CodeBuddy插件

首先，登录腾讯的CodeBuddy，选择deepseek-v3这个大模型，接着输入以下提示：

你是一名专业的程序员，擅长Web应用开发。
请将images文件夹中的UI图片转化为前端代码：
database-list.png,
database-add.png
environment-add.png
 
要求：
1. 代码需要是html/css/javaScript的组合。
2. 参考项目当前的前端开发规范。
3. 生成的代码请放在src/文件夹中。

AI输出

分析了用户管理和表单页面的代码后，
我掌握了以下关键信息：
1. 项目基于Vue 3+TypeScript+ElementPlus
2. 页面结构遵循：列表页用el-table展示数据，表单页则用el-form和el-row/el-col布局，ContentWrap组件作为内容容器，Dialog组件用作表单弹窗。
......
 
不过，由于我无法直接查看图片内容，还需要向用户了解这些页面的具体功能和布局。

现在可以看到CodeBuddy插件并不支持图片识别，我再输入一次提示语，看看它的回答。

我明白用户希望我将原型图片转成前端代码，但因为我看不到图片内容，只能基于常见的低代码平台数据库和环境管理功能来设计这些页面。
 
接下来，我会按照以下步骤进行：
1. 创建必要的目录结构
2. 实现数据库列表页面
3. 实现数据库添加/编辑表单
4. 实现环境添加/编辑表单
5. 创建相关的API文件
 
让我先开始创建所需的目录结构吧.....

生成代码

src/views/database/index.vue
src/views/database/DatabaseForm.vue
src/views/database/Environment.vue
src/api/lowcode/database.ts
src/api/lowcode/environment.ts

2. Lingma插件

接下来，登录通义灵码，选择qwen3这个大模型，输入提示：

你是一名专业的程序员，擅长Web应用开发。
请将images文件夹中的UI图片转换为前端代码：
database-list.png
database-add.png
environment-add.png
 
要求：
1. 代码必须是html/css/javaScript的组合。
2. 代码风格参考当前项目中的前端开发规范。
3. 生成的代码放在src/文件夹中。

AI输出

### 提示词要点
1. **角色定位**：
   - 你是一名专业的程序员，专注于Web应用开发。
 
2. **任务目标**：
   - 将`images`目录下的三张原型图转化为HTML/CSS和JavaScript的组合前端代码。
 ......
 
如果你希望我根据这些原型图生成前端代码，请把图片上传，或者详细描述它们的内容，我可以提供更具体的实现方案。

生成代码

无

3. Trae插件

现在登录trae，选择Doubao-1.5-pro大模型，输入提示语：

你是一名专业的程序员，擅长Web应用开发。
请将images目录下的UI图片转换为前端代码：
database-list.png,
database-add.png
environment-add.png
要求：
1. 代码风格参考当前项目中的前端开发规范。
2. 项目使用vue3技术栈，包含element-plus
3. 生成的代码放在src/文件夹中。

AI输出

我将依据项目的Vue3和ElementPlus技术栈，
并参考现有代码风格，把images文件夹中的图片转化为相应的前端组件。
计划在src/views/lowcode目录下创建Vue组件，
并在src/api/lowcode编写API请求代码，确保符合项目规范。
......

生成代码

srcviewslowcodeDatabaseList.vue
srcviewslowcodeDatabaseAdd.vue
srcviewslowcodeEnvironmentAdd.vue
srcapilowcodedatabase.js
srcapilowcodeenvironment.js

4. Baidu Comate插件

最后，登录百度的文心快码，默认选择Zulu，然后输入提示：

你是一名专业的程序员，擅长Web应用开发。
请将images目录下的UI图片转化为前端代码：
database-list.png
database-add.png
environment-add.png
 
要求：
1. 代码需要是html/css/javaScript的组合
2. 代码风格参考当前项目中的前端开发规范
3. 生成的代码放在src/views/lowcode目录下

AI输出

思考过程
1. 首先需要查看images文件夹中的三张UI图片。
2. 根据图片内容设计相应的Vue3组件。
3. 使用element-plus组件库来实现UI。
4. 将生成的代码写入src/views/lowcode目录。
5. 首先分析database-list.png的内容。
我将对database-list.png的UI设计进行分析：
 
分析
思考过程
我将查看images目录下的文件结构：
......

生成代码

src/views/lowcode/DatabaseList.vue
src/views/lowcode/DatabaseAdd.vue
src/views/lowcode/EnvironmentAdd.vue
src/views/lowcode/index.vue
src/views/lowcode/TestPage.vue
src/views/lowcode/router.ts

能力评测结果