国内大厂AI插件评测：根据UI图生成Vue前端代码

使用IDEA打开一个ruoyi增强项目：yudao-ui-admin-vue3，在IDEA插件功能中安装以下AI插件。

1.CodeBuddy插件

登录CodeBuddy后，AI选择deepseek-v3，输入提示语：

你是一个专业的程序员，擅长Web应用开发。
请将images目录下的UI图片转换成专业的前端代码：
database-list.png,database-add.png,environment-add.png

要求：
1. 代码必须是HTML、CSS、JavaScript的组合。
2. 代码风格参考当前项目中的前端开发规范。
3. 请将生成的代码放在src/api/lowcode, src/views/lowcode 等相关的文件夹中。

AI输出

通过分析用户管理和表单页面的代码，我了解到以下关键信息：
1. 项目使用 Vue 3 + TypeScript + Element Plus 技术栈
2. 页面结构遵循以下模式：
列表页使用 el-table 展示数据
表单页使用 el-form 和 el-row/el-col 布局
使用 ContentWrap 组件作为内容容器
使用 Dialog 组件作为表单弹窗

3. 代码风格特点：
使用组合式 API (<script setup>)
使用 TypeScript 类型定义
国际化支持 (useI18n)
权限控制 (v-hasPermi)

4. 组件组织方式：
列表页和表单页分离
表单组件通过 ref 暴露方法
使用 defineExpose 暴露组件方法
现在，我需要实现三个页面：
1. database-list.png - 数据库列表页
2. database-add.png - 数据库添加/编辑表单
3. environment-add.png - 环境添加/编辑表单

由于我无法直接查看图片内容，我需要向用户请求这些页面的具体功能和布局描述。

可以看到目前deepseek-v3 不支持图片识别，再次输入提示语，看看效果

我理解用户希望我将原型图片转换为前端代码，但由于我无法直接查看图片内容，我需要基于常见的低代码平台数据库和环境管理功能来创建这些页面。

我将按照以下步骤进行：
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插件

 登录通义灵码后，AI使用qwen3，输入提示语：

你是一个专业的程序员，擅长Web应用开发。
请将images目录下的UI图片转换成专业的前端代码：
database-list.png,database-add.png,environment-add.png

要求：
1. 代码必须是HTML、CSS、JavaScript的组合。
2. 代码风格参考当前项目中的前端开发规范。
3. 请将生成的代码放在src/api/lowcode, src/views/lowcode 等相关的文件夹中。

AI输出

### 提示词内容要点
1. **角色定义**：
   - 你被定义为一个专业的程序员，擅长 Web 应用开发。

2. **任务目标**：
   - 将 `images` 目录下的三张原型图转换成 HTML、CSS 和 JavaScript 组合的前端代码。

3. **具体要求**：
   - 使用 HTML、CSS 和 JavaScript 实现。
   - 代码风格需参考当前项目中的前端开发规范。
   - 生成的代码应放置在以下目录中：
     - `src/api/lowcode`：可能存放与低代码相关的接口请求逻辑。
     - `src/views/lowcode`：用于存放低代码模块的页面视图组件。

......

如果你希望我帮助你根据这些原型图生成具体的前端代码，请上传这些图片或将它们的内容描述清楚，
我可以为你提供更具体的实现方案。

生成代码：无

        如果你希望我帮助你根据这些原型图生成具体的前端代码，请上传这些图片或将它们的内容描述清楚，我可以为你提供更具体的实现方案。

3.Trae插件

登录trae后，AI使用Doubao-1.5-pro，输入提示语：

你是一个专业的程序员，擅长Web应用开发。
请将images3.2.2目录下的UI图片转换成专业的前端代码：
database-list.png,database-add.png,environment-add.png
要求：
1. 代码风格参考当前项目中的前端开发规范。
2. 当前项目为vue3项目，使用了element-plus组件库。
3. 请将生成的代码放在src/api/lowcode, src/views/lowcode 等相关的文件夹中。

AI输出

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

生成代码

src\views\lowcode\DatabaseList.vue
src\views\lowcode\DatabaseAdd.vue
src\views\lowcode\EnvironmentAdd.vue
src\api\lowcode\database.js
src\api\lowcode\environment.js

4.Baidu Comate插件

登录百度灵码comate后，AI使用默认，输入提示语：

你是一个专业的程序员，擅长Web应用开发。
请将images目录下的UI图片转换成专业的前端代码：
database-list.png,
database-add.png,
environment-add.png
要求：
1. 代码风格参考当前项目中的前端开发规范。
2. 当前项目为vue3项目，使用了element-plus组件库。
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设计：

分析
思考过程
我将分析数据库列表页面的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

能力评测结果