Skip to content

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绑定分析和处理逻辑
已知问题修复

Following extension guidelines

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

Extension Guidelines

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.

For more information

Enjoy!