ui-to-vue

name ui-to-vue description Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue. metadata {"origin":"community"} UI To Vue 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: 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: export DASHSCOPE_API_KEY=your_key npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src For desktop UI libraries: 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: 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 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 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. References npm package: ui-to-vue-converter