What does this skill do?

The Design-to-Vue Converter Skill automatically converts interface design screenshots into Vue 3 components using the Composition API in batches. It maps visual elements to libraries such as Vant, Element Plus, or Ant Design Vue, generating page components, shared components, and ready-to-use router configuration.

Conversion with Vant (mobile)
Process design mockups grouped by module and page status to generate mobile-optimized Vue 3 components using Vant.
Conversion with Element Plus (desktop)
Turn design exports from tools like Figma or Sketch into desktop components using Element Plus.
Extraction of Shared Components
It detects recurring UI regions and automatically extracts them to the components/ folder for reuse.
Complete Project Structure
Generate views, shared components, router configuration, and imports from the UI library in a single pass.

Usage examples

📱 Conversion with Vant
Convert the screenshots in ./screenshots into Vue 3 components using Vant and save them in ./src.
🖥️ Conversion with Element Plus
I have a ./designs directory containing Figma screenshots. It generates Vue 3 components using Element Plus in ./src.
🧩 Building from Scratch
Create the complete structure of a Vue 3 project based on the design mockups in ./mockups using Ant Design Vue.
⚙️ File-Based Configuration
Use the .ui-to-vue.config.json file to convert the designs in ./designs using Vant without passing the API key via the command line.

Features

Batch processing Converts multiple screenshots grouped by module and page state (list, detail, form, loading, empty) in a single run.
Compatible with 3 UI libraries Maps visual elements to Vant, Element Plus, or Ant Design Vue components based on the --ui parameter.
Automatic Component Extraction It detects repeated UI regions and extracts them to the `components/` directory to avoid code duplication.
Router Generation and Structure Create a router configuration that matches the project's style, and organize views and assets by priority.
Flexible Configuration Allows configuration via environment variables, the .ui-to-vue.config.json file, or command-line arguments.

Frequently asked questions

You need a DashScope key (DASHSCOPE_API_KEY). You can set it as an environment variable or in a .ui-to-vue.config.json file, which you should not upload to the repository.
Supports Vant (mobile), Element Plus (desktop), and Ant Design Vue via the --ui parameter. The default value is Vant.
Group the screenshots by module and page state (list, detail, form, loading, empty). Include a subdirectory of cropped images (cut-images, assets, icons, etc.) within each module.
Screenshots are sent to an external model API. Do not use this workflow on private client designs without authorization, and always review the generated code before committing.
Design-to-Vue Converter — From Screenshots to Vue 3 Components with Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.