Exportar código (HTML, React, Tailwind)

uxmagic.ai/dashboard/react-component-library

Qué puedes exportar#

• Una sola pantalla como HTML o como componente de React.
• Un proyecto entero como proyecto de React de varias pantallas, ensamblado y descargable como archivo comprimido.

El estilado es Tailwind CSS, con el tema de tu proyecto expresado como design tokens, de modo que el código lleva el mismo sistema que el lienzo.

Exportar una pantalla#

1. Selecciona la pantalla.
2. Exportar → Código.
3. Elige HTML o React.
4. Cópialo o descárgalo.

Exportar un proyecto entero#

La exportación de proyecto se ejecuta como una tarea en segundo plano: genera todas las pantallas y después las ensambla en una estructura de proyecto. Los proyectos grandes tardan más; puedes ver el progreso y descargar cuando termine.

Cómo es el código#

Es código de front end real y legible: marcado semántico, clases de utilidad de Tailwind, tokens de tema para colores y tipografía, e imágenes referenciadas por URL desde el almacenamiento de recursos de tu proyecto.

Dos cosas que conviene prever:

• Los recursos son remotos por defecto. Descárgalos a tu repositorio antes de publicar, para que tu sitio en producción no dependa de las URLs de recursos de UXMagic.
• Es un front end. No hay capa de datos, enrutado ni gestión de estado: eso lo conectas tú en tu aplicación.

Responsive#

El código exportado refleja la pantalla que has exportado, al ancho de esa pantalla. Si has generado variantes de móvil y escritorio por separado, exporta ambas y fusiónalas en tu breakpoint. Consulta Variantes responsive y por dispositivo.

Directo a un repositorio#

Puedes enviar el código exportado directamente a GitHub en lugar de descargarlo: consulta Sincronización con GitHub.