UI To Vue

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.

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.

Inputs

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.

CLI Usage

npx

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

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

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

Options

--input

./screenshots

--ui

vant

element-plus

antd-vue

vant

--output

./src

--config

./.ui-to-vue.config.json

API Key Handling

export DASHSCOPE_API_KEY=your_key

{
  "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

401

DASHSCOPE_API_KEY

command not found: ui-to-vue

npx ui-to-vue-converter@1.0.2

--ui

References

• npm package:

  ui-to-vue-converter