PromptsEdge
FreeGitHubDesign

Convert UI to Vue 3

Turn batches of UI screenshots or design exports into Vue 3 components. It organizes pages and modules, maps elements to Vant, Element Plus, or Ant Design Vue, and wires up routing automatically.

affaan-m on GitHub

Curated by PromptsEdge from a public repo · MIT license. All credit goes to the author.

What is this skill?

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

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

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.

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:

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

Options

OptionDescriptionDefault
--inputDesign image directory./screenshots
--uiUI library: vant, element-plus, or antd-vuevant
--outputOutput directory./src
--configConfig file path./.ui-to-vue.config.json

API Key Handling

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

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

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

References

  • npm package: ui-to-vue-converter

Related skills

View all →