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, detai…