ui-to-vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI To Vue

UI 转 Vue

Batch-convert UI design screenshots into Vue 3 Composition API component code.

将UI设计截图批量转换为Vue 3 Composition API组件代码。

When to Use

适用场景

The user provides a directory of design screenshots or design-export images.
The target application is Vue 3.
The user wants a first pass of page components, shared components, and router wiring.
The user specifies Vant, Element Plus, or Ant Design Vue as the component library.

用户提供包含设计截图或设计导出图片的目录。
目标应用为Vue 3项目。
用户需要快速生成页面组件、共享组件及路由配置的初始版本。
用户指定使用Vant、Element Plus或Ant Design Vue作为组件库。

When Not to Use

不适用场景

The user has only one screenshot and wants a bespoke component.
The target project is not Vue.
The design requires detailed interaction logic, data flow, or accessibility review.
The screenshots contain private customer data that cannot be sent to an external model API.

用户仅提供单张截图，需要定制化组件。
目标项目非Vue框架。
设计需要详细的交互逻辑、数据流或可访问性评审。
截图包含无法发送至外部模型API的客户隐私数据。

Inputs

输入要求

Use an input directory that groups screenshots by module and page state:

text

screenshots/
|-- HomePage/
|   |-- List/
|   |   |-- HomePage-List-Default@3x.png
|   |   `-- cut-images/
|   |-- cut-images/
|   `-- HomePage-Default@3x.png
`-- cut-images/

Supported cut-image directory names include

assets

icons

sprites

cut

images

, and

cut-images

使用按模块和页面状态分组的输入目录：

text

screenshots/
|-- HomePage/
|   |-- List/
|   |   |-- HomePage-List-Default@3x.png
|   |   `-- cut-images/
|   |-- cut-images/
|   `-- HomePage-Default@3x.png
`-- cut-images/

支持的切图目录名称包括

assets

、

icons

、

sprites

、

cut

、

images

和

cut-images

。

Conversion Model

转换规则

Page grouping: combine related screenshots into one page component when they represent list, detail, form, loading, or empty states.
UI library mapping: map native visual elements to Vant, Element Plus, or Ant Design Vue components where practical.
Cut-image priority: prefer page-level assets, then module-level assets, then global shared assets.
Component extraction: extract repeated UI regions into shared components when they appear more than once.

页面分组：当截图代表列表、详情、表单、加载或空状态时，将相关截图合并为一个页面组件。
UI库映射：尽可能将原生视觉元素映射为Vant、Element Plus或Ant Design Vue组件。
切图优先级：优先使用页面级资源，其次是模块级资源，最后是全局共享资源。
组件提取：当重复UI区域出现超过一次时，将其提取为共享组件。

CLI Usage

CLI 使用方式

Run the converter with

npx

so the documented command works without relying on a global binary:

bash

export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src

For desktop UI libraries:

bash

npx ui-to-vue-converter@1.0.2 --input ./designs --ui element-plus --output ./src
npx ui-to-vue-converter@1.0.2 --input ./designs --ui antd-vue --output ./src

If the package is installed globally, the

ui-to-vue

binary can be used directly:

bash

npm install -g ui-to-vue-converter@1.0.2
ui-to-vue --input ./screenshots --ui vant --output ./src

使用

npx

运行转换器，无需依赖全局二进制文件：

bash

export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src

针对桌面端UI库：

bash

npx ui-to-vue-converter@1.0.2 --input ./designs --ui element-plus --output ./src
npx ui-to-vue-converter@1.0.2 --input ./designs --ui antd-vue --output ./src

如果已全局安装该包，可直接使用

ui-to-vue

二进制命令：

bash

npm install -g ui-to-vue-converter@1.0.2
ui-to-vue --input ./screenshots --ui vant --output ./src

Options

选项参数

Option	Description	Default
`--input`	Design image directory	`./screenshots`
`--ui`	UI library: `vant` , `element-plus` , or `antd-vue`	`vant`
`--output`	Output directory	`./src`
`--config`	Config file path	`./.ui-to-vue.config.json`

选项	描述	默认值
`--input`	设计图片目录	`./screenshots`
`--ui`	UI库： `vant` 、 `element-plus` 或 `antd-vue`	`vant`
`--output`	输出目录	`./src`
`--config`	配置文件路径	`./.ui-to-vue.config.json`

API Key Handling

API密钥处理

The converter can read DashScope credentials from a config file or from the environment. Prefer an environment variable in repositories:

bash

export DASHSCOPE_API_KEY=your_key

If a local config file is required, keep it out of version control:

json

{
  "apiKey": "your_dashscope_key",
  "input": "./designs",
  "ui": "vant",
  "output": "./src"
}

gitignore

.ui-to-vue.config.json

转换器可从配置文件或环境变量中读取DashScope凭证。在代码仓库中优先使用环境变量：

bash

export DASHSCOPE_API_KEY=your_key

如果需要本地配置文件，请确保其不纳入版本控制：

json

{
  "apiKey": "your_dashscope_key",
  "input": "./designs",
  "ui": "vant",
  "output": "./src"
}

gitignore

.ui-to-vue.config.json

Security and Privacy

安全与隐私

Treat design screenshots as source material that may be sent to an external model API.
Do not run this flow on private customer designs without permission.
Pin the converter version in repeatable workflows instead of using
```
@latest
```
.
Review generated Vue code before committing it.
Do not commit
```
.ui-to-vue.config.json
```
, API keys, generated secrets, or customer screenshots.

设计截图可能会被发送至外部模型API，需将其视为敏感素材处理。
未经许可，请勿对包含客户隐私的设计文件运行此工具。
在可重复工作流中固定转换器版本，避免使用
```
@latest
```
。
提交前需审核生成的Vue代码。
请勿提交
```
.ui-to-vue.config.json
```
、API密钥、生成的机密信息或客户截图。

Output Review Checklist

输出审核清单

Page components were generated under
```
views/
```
or the chosen output directory.
Repeated UI regions were extracted into
```
components/
```
only when reuse is clear.
Router output is compatible with the target project's router style.
Generated components use the requested UI library consistently.
Generated CSS units match the design baseline.
The code passes the project's formatter, linter, type checker, and build.
Placeholder copy, mock data, and generated assets were reviewed before commit.

页面组件已生成在
```
views/
```
或指定的输出目录下。
仅当明确可复用的情况下，重复UI区域才被提取至
```
components/
```
目录。
路由输出与目标项目的路由风格兼容。
生成的组件一致使用指定的UI库。
生成的CSS单位与设计基准匹配。
代码通过项目的格式化工具、代码检查器、类型检查器及构建流程。
提交前已审核占位文本、模拟数据及生成的资源。

Troubleshooting

故障排查

Issue	Check
`401` or authentication error	Confirm `DASHSCOPE_API_KEY` is set in the shell running the command.
`command not found: ui-to-vue`	Use the `npx ui-to-vue-converter@1.0.2` form or install the package globally.
Cut images are ignored	Confirm the asset directory name is supported and nested under the matching page or module.
Components ignore the requested UI library	Re-run with an explicit `--ui` value and inspect the generated imports.
Generated layout dimensions look wrong	Confirm the screenshot export width matches the target library baseline.

问题	检查项
`401` 或认证错误	确认运行命令的Shell中已设置 `DASHSCOPE_API_KEY` 。
`command not found: ui-to-vue`	使用 `npx ui-to-vue-converter@1.0.2` 形式运行，或全局安装该包。
切图被忽略	确认资源目录名称为支持的类型，且嵌套在对应的页面或模块目录下。
组件未使用指定的UI库	使用明确的 `--ui` 参数重新运行，并检查生成的导入语句。
生成的布局尺寸异常	确认截图导出宽度与目标组件库的基准一致。

References

参考资料

npm package:
```
ui-to-vue-converter
```

npm包：
```
ui-to-vue-converter
```