国内大厂AI插件评测：根据UI图生成Vue前端代码_根据图片生成前端代码 ai
使用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 ()使用 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.vuesrc/views/database/DatabaseForm.vuesrc/views/database/Environment.vuesrc/api/lowcode/database.tssrc/api/lowcode/environment.ts2.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.vuesrc\\views\\lowcode\\DatabaseAdd.vuesrc\\views\\lowcode\\EnvironmentAdd.vuesrc\\api\\lowcode\\database.jssrc\\api\\lowcode\\environment.js4.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组件库实现UI4. 将生成的代码写入src/views/lowcode目录5. 首先查看database-list.png图片内容我将分析database-list.png的UI设计：分析思考过程我将分析数据库列表页面的UI设计：分析思考过程我将查看images目录下的文件结构：......生成代码
src/views/lowcode/DatabaseList.vuesrc/views/lowcode/DatabaseAdd.vuesrc/views/lowcode/EnvironmentAdd.vuesrc/views/lowcode/index.vuesrc/views/lowcode/TestPage.vuesrc/views/lowcode/router.ts
能力评测结果
