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.

CLI Usage

Run the converter with npx so the documented command works without relying on a global binary:

export DASHSCOPE_API_KEY=your_key
npx [email protected] --input ./screenshots --ui vant --output ./src

For desktop UI libraries:

npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src

If the package is installed globally, the ui-to-vue binary can be used directly:

npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src

Options

API Key Handling

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

export DASHSCOPE_API_KEY=your_key

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

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

.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.

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.

Troubleshooting

…

quarkus-verification

为 Quarkus 项目执行发布前验证闭环，涵盖构建、测试、扫描与差异审查。

Uiverse MCP Tool

帮助开发者从 Uiverse.io 快速提取多框架 UI 组件代码并复用到项目中。