Ui To Vue

Takes a folder of design screenshots and spits out Vue 3 Composition API components with your choice of Vant, Element Plus, or Ant Design Vue. The converter groups related states into single page components, extracts shared UI regions when it spots repetition, and wires up basic routing. It's a first pass tool, not a production ready solution. You'll still need to review the output for layout accuracy, add real logic, and clean up placeholder data. Biggest gotcha is that it sends your screenshots to DashScope's API, so don't run this on confidential customer designs. Works best when your screenshot folder structure mirrors your app's module hierarchy.

skills.sh installs: 5.4K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --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.