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
新增代码编辑功能，通过选择代码片段添加API信息
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
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!
| |
