Ui To Vue

This converter takes a directory of design screenshots and generates Vue 3 Composition API components with Vant, Element Plus, or Ant Design Vue. It groups related states into single page components, extracts repeated regions into shared components, and wires up basic routing. The workflow assumes you're handing off design exports to an external model API, so keep customer data out of the input folder. You'll still need to review the output for accessibility, interaction logic, and whether the generated CSS units match your baseline, but it gives you a solid first pass when you have a batch of screens to convert. Pin the version and confirm your DASHSCOPE_API_KEY is set before running.

skills.sh installs: 1.7K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --skill ui-to-vue --agent claude-code

Installs into .claude/skills of the current project.

Files

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.