UI To Vue
Convierte por lotes capturas de pantalla de diseño de UI en código de componentes 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 destino es Vue 3.
- El usuario desea un primer borrador de componentes de página, componentes compartidos y configuración de enrutador.
- El usuario especifica Vant, Element Plus o Ant Design Vue como biblioteca de componentes.
Cuándo no usarlo
- El usuario tiene solo una captura de pantalla y desea un componente a medida.
- El proyecto destino no es Vue.
- El diseño requiere lógica de interacción detallada, flujo de datos o revisión de accesibilidad.
- Las capturas contienen datos de clientes privados que no pueden enviarse a una API de modelo externa.
Entradas
Usa un directorio de entrada que agrupe las 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 de pantalla relacionadas en un solo componente de página cuando representan estados de lista, detalle, formulario, carga o vacío.
- Mapeo de biblioteca de UI: mapea elementos visuales nativos a componentes de Vant, Element Plus o Ant Design Vue cuando sea práctico.
- Prioridad de imágenes recortadas: prefiere assets a nivel de página, luego assets a nivel de módulo, luego assets globales compartidos.
- Extracción de componentes: extrae regiones de UI repetidas en componentes compartidos cuando aparecen más de una vez.
Uso desde 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, se puede usar directamente el binario ui-to-vue:
npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src
Opciones
| Opción | Descripción | Valor 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 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 es necesario 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 en diseños de clientes privados 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 destino.
- Los componentes generados utilizan 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 textos de marcador de posición, datos simulados y assets generados antes de confirmar.
Solución de problemas
| Problema | Qué revisar |
|---|---|
401 o error de autenticación | Confirma que DASHSCOPE_API_KEY está configurada en el 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 assets 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 de pantalla coincide con la línea base de la biblioteca destino. |
Referencias
- Paquete npm:
ui-to-vue-converter