ai-code-generator VSCode 插件
云妹智码，一款减轻你的工作量，根据UI图快速生成标准前端代码
yunmei， A tool to reduce your workload and quickly generate standard front-end code based on UI graphics
简介
用户通过上传一张UI设计图，通过YOLO模型和OCR识别技术，调用GPT模型，生成标准的React前端代码。
功能特性
- 快速转换：上传 UI 设计图，即可自动生成对应的前端代码。
- 支持多种设计图格式：如 Sketch, Figma, XD 等（具体支持格式请查看文档）。
- 高度可定制：生成的代码可根据个人或团队的编码规范进行定制。
- 无缝集成：直接在 VSCode 中使用，无需跳转到其他平台或工具。
使用方法
- 在 VSCode 中安装本插件。
- 打开插件面板，选择“上传 UI 设计图”。
- 选择你的设计文件并上传。
- 插件将自动分析设计图，并生成对应的前端代码。
- 你可以在 VSCode 中直接查看和编辑生成的代码。
注意事项
- 请确保上传的设计图清晰且元素可辨识，以提高代码生成的准确性。
- 生成的代码可能需要根据具体项目需求进行微调。
- 如遇到任何问题，请查看我们的文档或联系技术支持。
Requirements
vscode版本：不能小于1.60.0版本,推荐使用最新版本。
1.0.0
- UI设计图中表格，表单组件识别功能
- UI设计图中表格，表单代码生成功能
1.4.0
1.4.5
1.5.0
- Chart图表实现
实现七种基础图表（折线图、折柱混合图、柱状图、条形图、饼图、环形图、雷达图）的识别与代码生成
- API绑定优化
优化了表格与表单的API绑定分析和处理逻辑
- 已知问题修复
1.5.1
1.6.0
- Chart图表组件新增智能识图功能
- Chart图表组件内嵌选择器（select，button，Segmented，DatePicker）识别及代码生成功能
- Chart图表组件绑定API功能
- Chart图表预览功能
- 页面Form筛选条件与Chart组件交互功能
- UI设计图中Description,divider,image组件识别功能，代码生成功能
- 大禹平台中的任务编号输入校验功能
- 修复其他已知问题
1.6.1
1.6.2
1.7.1
- Chart 组件增强，实现更智能、更精细的代码生成
- Card 组件新增智能识图及代码生成功能
- 新增组件校验功能
- 新增生成页面预览功能
- 新增基于ReAct的页面级别的代码自动校验功能
- 新增代码文件拆分功能，支持多文件代码生成
- 新增代码文件管理，增加代码文件接受/拒绝功能
- 新增AI多轮会话功能：
- 组件管理：基于AI会话增加/修改/删除页面组件代码
- API 绑定：通过 AI 会话实现 API 绑定，简化集成流程
- 知识库查询：基于AI会话查询启明知识库
- 开发工具集成：基于AI会话启动npm server/页面预览/页面自动校验
- 代码多轮修改：支持通过多轮对话对 ECharts 等复杂代码进行动态修改
- 提升插件交互体验，代码生成可视化
- 优化前端页面交互，提升用户体验
- 修复其他已知问题
1.7.2
- 代码模型新增Progress、Steps、timeline、tree、Icon、tag 6种组件代码的自动生成
- 新增AI多轮会话的页面跳转定义和修改逻辑
- 页面校验，Browser-Use自动校验安装包自动下载功能
- 修复其他已知问题
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
| |
