ui-to-vue

UI To Vue

Convierte por lotes capturas de pantalla de diseño de UI en código de componentes de Vue 3 con Composition API.

Cuándo usarlo

• El usuario proporciona un directorio de capturas de pantalla de diseño o imágenes exportadas del diseño.
• La aplicación objetivo es Vue 3.
• El usuario quiere una primera versión de componentes de página, componentes compartidos y cableado de enrutador.
• El usuario especifica Vant, Element Plus o Ant Design Vue como biblioteca de componentes.

Cuándo no usarlo

• El usuario solo tiene una captura de pantalla y desea un componente personalizado.
• El proyecto objetivo no es Vue.
• El diseño requiere lógica de interacción detallada, flujo de datos o revisión de accesibilidad.
• Las capturas de pantalla contienen datos privados de clientes que no se pueden enviar a una API de modelo externa.

Entradas

Usa un directorio de entrada que agrupe capturas de pantalla por módulo y estado de página:

screenshots/
|-- HomePage/
|   |-- List/
|   |   |-- [email protected]
|   |   `-- cut-images/
|   |-- cut-images/
|   `-- [email protected]
`-- cut-images/

Los nombres de directorio de imágenes recortadas compatibles incluyen assets, icons, sprites, cut, images y cut-images.

Modelo de conversión

• Agrupación de páginas: combina capturas relacionadas en un componente de página cuando representan estados de lista, detalle, formulario, carga o vacío.
• Mapeo de bibliotecas de UI: asigna elementos visuales nativos a componentes de Vant, Element Plus o Ant Design Vue cuando sea práctico.
• Prioridad de imágenes recortadas: prefiere activos a nivel de página, luego a nivel de módulo y luego activos compartidos globales.
• Extracción de componentes: extrae regiones de UI repetidas en componentes compartidos cuando aparecen más de una vez.

Uso en CLI

Ejecuta el conversor con npx para que el comando documentado funcione sin depender de un binario global:

export DASHSCOPE_API_KEY=tu_clave
npx [email protected] --input ./screenshots --ui vant --output ./src

Para bibliotecas de UI de escritorio:

npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src

Si el paquete está instalado globalmente, el binario ui-to-vue se puede usar directamente:

npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src

Opciones

Opción	Descripción	Por defecto
--input	Directorio de imágenes de diseño	./screenshots
--ui	Biblioteca de UI: vant, element-plus o antd-vue	vant
--output	Directorio de salida	./src
--config	Ruta del archivo de configuración	./.ui-to-vue.config.json

Manejo de clave API

El conversor puede leer las credenciales de DashScope desde un archivo de configuración o desde el entorno. Prefiere una variable de entorno en los repositorios:

export DASHSCOPE_API_KEY=tu_clave

Si se requiere un archivo de configuración local, mantenlo fuera del control de versiones:

{
  "apiKey": "tu_clave_dashscope",
  "input": "./designs",
  "ui": "vant",
  "output": "./src"
}

.ui-to-vue.config.json

Seguridad y privacidad

• Trata las capturas de pantalla de diseño como material fuente que puede enviarse a una API de modelo externa.
• No ejecutes este flujo sobre diseños privados de clientes sin permiso.
• Fija la versión del conversor en flujos de trabajo repetibles en lugar de usar @latest.
• Revisa el código Vue generado antes de confirmarlo.
• No confirmes .ui-to-vue.config.json, claves API, secretos generados ni capturas de pantalla de clientes.

Lista de verificación de revisión de salida

• Los componentes de página se generaron bajo views/ o el directorio de salida elegido.
• Las regiones de UI repetidas se extrajeron en components/ solo cuando la reutilización es clara.
• La salida del enrutador es compatible con el estilo de enrutador del proyecto objetivo.
• Los componentes generados usan la biblioteca de UI solicitada de manera consistente.
• Las unidades CSS generadas coinciden con la línea base del diseño.
• El código pasa el formateador, linter, verificador de tipos y compilación del proyecto.
• Se revisaron el texto de marcador de posición, los datos simulados y los activos generados antes de confirmar.

Solución de problemas

Problema	Verificar
401 o error de autenticación	Confirma que DASHSCOPE_API_KEY está establecida en la shell que ejecuta el comando.
command not found: ui-to-vue	Usa la forma npx [email protected] o instala el paquete globalmente.
Las imágenes recortadas se ignoran	Confirma que el nombre del directorio de activos es compatible y está anidado bajo la página o módulo correspondiente.
Los componentes ignoran la biblioteca de UI solicitada	Vuelve a ejecutar con un valor --ui explícito e inspecciona las importaciones generadas.
Las dimensiones del diseño generado se ven incorrectas	Confirma que el ancho de exportación de la captura coincide con la línea base de la biblioteca objetivo.

Referencias

• Paquete npm: ui-to-vue-converter