Agent skill · software engineering · affaan-m
ui-to-vue
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.
Why this skill is useful
Adds a CLI tool that automates the conversion of UI screenshots into Vue 3 components, significantly enhancing the AI's capability to generate code from design assets.
What it needs
Requires npm installed locally. Requires dashscope account access. About 3k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
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: 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: For desktop UI libraries: If the package is installed globally, the ui-to-vue binary can be used directly: 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/ui-to-vue--74f990