ui-to-vue

Convert UI design screenshots into Vue 3 Composition API components.

Updated Jun 22, 2026

Search Tags:#batch processing #design to code #component mapping #Vue components #UI conversion

Ready to run

npx skills add https://github.com/TymorIbrahim/UniPilot --skill ui-to-vue-tymoribrahim

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-to-vue
Source: https://github.com/TymorIbrahim/UniPilot/tree/main/.cursor/skills/ui-to-vue
Command: npx skills add https://github.com/TymorIbrahim/UniPilot --skill ui-to-vue-tymoribrahim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, axios, and includes scripts (resource) components.

What problem does it solve?

Transforms design screenshots into Vue 3 components, speeding up the development of UI elements for Vue applications.

Core Features & Use Cases

Batch Conversion: Convert UI design screenshots into Vue 3 Composition API components.
Supports Vue Libraries: Mapped to popular Vue component libraries such as Vant, Element Plus, and Ant Design Vue.
Component Extraction: Automatically identify and extract repeated UI regions into shared components.

Quick Start

Run the ui-to-vue-converter with npx [email protected] --input ./screenshots --ui vant --output ./src

Frequently Asked Questions about ui-to-vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert UI design screenshots into Vue 3 components?▼

You can convert UI design screenshots into Vue 3 components by running the ui-to-vue-converter script, which parses images and maps visual elements directly to Vue Composition API structures.

Can I batch convert multiple UI screenshots into Vue.js code at once?▼

Yes, the conversion tool supports batch processing, allowing you to input an entire directory of UI screenshots and generate multiple Vue 3 components simultaneously to speed up development.

Does the screenshot to Vue conversion tool support UI component libraries like Vant and Element Plus?▼

Yes, the converter supports direct mappings to popular Vue component libraries including Vant, Element Plus, and Ant Design Vue, ensuring generated components align with your existing framework.

How do repeated UI regions in screenshots get handled during Vue component generation?▼

During Vue component generation, the tool performs component extraction to automatically identify repeated UI regions within your screenshots and extracts them into shared, reusable Vue components.

What is the best way to extract shared components from design screenshots for an Ant Design Vue project?▼

The best way is to use the ui-to-vue-converter via command line, specifying your screenshots directory and setting the UI library flag to Ant Design Vue to automatically generate mapped Vue 3 components.

Do I need Puppeteer installed to convert designs to Vue components?▼

Puppeteer is a required dependency for the design to code conversion process, utilized alongside Axios to facilitate image parsing and component recognition during the Vue component generation.