在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编写接口请求代码，
确保符合项目规范。
......

生成代码

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插件

登录百度的文心快码后，大模型默认为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

能力评测结果