¿Qué hace esta skill?

La Conversor de Diseño a Vue Skill convierte capturas de pantalla de diseño de interfaz en componentes Vue 3 con Composition API de forma automatizada y por lotes. Mapea los elementos visuales a librerías como Vant, Element Plus o Ant Design Vue, generando componentes de página, componentes compartidos y la configuración del router lista para usar.

Conversión con Vant (móvil)

Procesa capturas de diseño agrupadas por módulo y estado de página para generar componentes Vue 3 optimizados para móvil con Vant.

Conversión con Element Plus (escritorio)

Transforma exportaciones de diseño de herramientas como Figma o Sketch en componentes de escritorio usando Element Plus.

Extracción de componentes compartidos

Detecta regiones de UI que se repiten y las extrae automáticamente a la carpeta components/ para reutilización.

Estructura de proyecto completa

Genera vistas, componentes compartidos, configuración del router e importaciones de la librería de UI en una sola pasada.

Cómo instalar

Descarga el ZIP, descomprimelo en ~/.claude/skills/ y reinicia Claude. Eso es todo. Guia de instalacion completa →

Ejemplos de uso

📱 Conversión con Vant

Convierte las capturas de ./screenshots en componentes Vue 3 usando Vant y guárdalos en ./src.

🖥️ Conversión con Element Plus

Tengo un directorio ./designs con capturas de Figma. Genera componentes Vue 3 con Element Plus en ./src.

🧩 Proyecto desde cero

Crea la estructura completa de un proyecto Vue 3 a partir de las capturas de diseño de ./mockups usando Ant Design Vue.

⚙️ Configuración por archivo

Usa el archivo .ui-to-vue.config.json para convertir los diseños de ./designs con Vant sin pasar la API key por línea de comandos.

Características

Procesamiento por lotes Convierte múltiples capturas agrupadas por módulo y estado de página (lista, detalle, formulario, carga, vacío) en una sola ejecución.

Compatible con 3 librerías de UI Mapea elementos visuales a componentes de Vant, Element Plus o Ant Design Vue según el parámetro --ui.

Extracción automática de componentes Detecta regiones de UI repetidas y las extrae a components/ para evitar duplicación de código.

Generación de router y estructura Crea la configuración del router compatible con el estilo del proyecto y organiza vistas y assets por prioridad.

Configuración flexible Permite configurar por variable de entorno, archivo .ui-to-vue.config.json o argumentos de línea de comandos.

Preguntas frecuentes

Necesitas una clave de DashScope (DASHSCOPE_API_KEY). Puedes establecerla como variable de entorno o en un archivo .ui-to-vue.config.json que no debes subir al repositorio.

Soporta Vant (móvil), Element Plus (escritorio) y Ant Design Vue mediante el parámetro --ui. El valor por defecto es Vant.

Agrupa las capturas por módulo y estado de página (lista, detalle, formulario, carga, vacío). Incluye un subdirectorio de imágenes recortadas (cut-images, assets, icons, etc.) dentro de cada módulo.

Las capturas se envían a una API de modelo externo. No uses este flujo sobre diseños privados de clientes sin autorización y revisa siempre el código generado antes de hacer commit.

Skills relacionadas

Mas skills de la misma categoria:

Conversor de Diseño a Vue — De capturas a componentes Vue 3 con Claude AI