skills.rest
TymorIbrahim
TymorIbrahimCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/TymorIbrahim/UniPilot --skill ui-to-vue-tymoribrahim
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mlhitermlhiter
14

screenshot-interaction

Analyzes UI screenshots to deduce interactive behavior models for component design and implementation.

Community
Advanced
NKDShinKuNKDShinKu

vue-best-practices

Enforce Vue 3 Composition API and TypeScript patterns in Vue projects.

Community
Advanced
nazrulsoftwaredevnazrulsoftwaredev

ui-to-vue

Convert UI design screenshots into Vue 3 Composition API components.

Community
Intermediate
PremModhaOfficialPremModhaOfficial
1

figma-to-code

Convert Figma design data into frontend templates and semantic design tokens.

Community
Advanced