Magic Patterns paso a paso: de descripción a prototipo y código
Magic Patterns convierte descripciones o capturas de pantalla en interfaces editables con código listo. Te mostramos cómo usarlo desde el primer prompt.
👁 116 lecturas
Magic Patterns convierte descripciones o capturas de pantalla en interfaces editables con código listo, y el equipo puede trabajar sobre ellas en un tablero compartido. Este tutorial te lleva desde el primer prompt hasta la exportación de código y el proyecto a Figma, siguiendo la documentación oficial de Magic Patterns.
Antes de empezar: prepara los materiales
Magic Patterns da los mejores resultados cuando tiene algo en lo que basarse. Prepara capturas de pantalla del producto existente si la nueva pantalla debe encajar con él, y una lista de elementos que deben aparecer. Si la empresa tiene un sistema de diseño en un repositorio o en una web, conéctalo de inmediato antes de empezar a generar pantallas.
También vale la pena anotar para quién es la pantalla y qué debe hacer el usuario en ella. Esta única información cambia la disposición más que la descripción de los colores.
Paso 1. El primer prompt
En la página principal ves un campo grande para el prompt. En su esquina hay un estilo seleccionado, por defecto el básico. Para bocetos de menor detalle puedes elegir el estilo wireframe, y para pantallas finalizadas quedarte con el predeterminado. Describes lo que debe crearse, por ejemplo una pantalla de registro con campos para nombre, email y contraseña, y un botón de inicio de sesión con Google.
En lugar de una descripción puedes subir una captura de pantalla de una interfaz existente, y Magic Patterns la recreará como proyecto editable.
Paso 2. Correcciones de un solo elemento
Esta es la función que más tiempo ahorra. Haces clic en un solo elemento, por ejemplo un botón o un encabezado, y das un prompt solo para él. La IA cambia ese elemento y deja el resto de la disposición intacta. No necesitas describir toda la pantalla de nuevo para cambiar el color de un botón.
Para cambios mayores existe el modo planificación, en el que primero acuerdas con el agente qué debe cambiar antes de que se genere el código.
Paso 3. Conectar pantallas en un prototipo
Puedes conectar varias pantallas en un prototipo clicable. Activas el modo prototipo desde la barra de herramientas inferior o con la tecla P, pasas el cursor sobre un elemento hasta que se resalte en azul, haces clic en él y luego en la pantalla a la que debe llevar. Con el icono de reproducción inicias el prototipo y navegas por él como un usuario.
Paso 4. Exportar el código
El botón Export en la esquina superior derecha te permite descargar todo el código en un archivo, sincronizarlo con GitHub o enviar el proyecto a Figma. Magic Patterns genera código en React, Vue o con Tailwind. Si trabajas en Cursor, puedes conectarlo con Magic Patterns mediante MCP y pedirle que construya un prototipo en tu proyecto, siguiendo sus convenciones.
Paso 5. Exportar a Figma
Tras seleccionar la exportación a Figma, esperas a que el proyecto se prepare, haces clic en Copy y pegas en Figma. El proyecto aparece en el tablero. La exportación es una instantánea de lo que hay en pantalla, así que si quieres tener un menú abierto en Figma, ábrelo antes de exportar.
Paso 6. Tu propio sistema de diseño
Magic Patterns puede trabajar con el estilo de tu empresa. Conectas un repositorio de GitHub, un paquete npm o una web en funcionamiento, y la herramienta lee los colores, tipografía y componentes. Las nuevas pantallas se crean entonces en tu estilo, no en el predeterminado. Puedes cambiar un proyecto existente a otro sistema con el botón de conversión, que crea una nueva versión y deja el original.
Ejemplo: nueva pantalla en una app en una hora
El equipo necesita una pantalla de configuración de cuenta. La diseñadora sube una captura de la pantalla de perfil actual para mantener el estilo, y describe las nuevas secciones: datos personales, notificaciones, eliminación de cuenta. Corrige dos elementos con prompts separados, conecta la pantalla con el perfil en un prototipo y lo muestra al equipo. El programador recibe el código del componente, y la diseñadora la versión en Figma para la documentación.
En este ejemplo, lo que más tiempo ahorra es subir la captura de la pantalla existente. La nueva pantalla encaja desde el principio con el resto de la aplicación, así que no hay que ajustarla manualmente después. Cuando la empresa tiene conectado un sistema de diseño, el resultado es aún mejor, porque la herramienta usa directamente los componentes que utiliza el equipo de programación, no solo su apariencia en la captura.
Errores más frecuentes
- Describir toda la pantalla de nuevo en lugar de corregir un solo elemento.
- Exportar a Figma con menús cerrados que debían estar visibles.
- Trabajar sin sistema de diseño, por lo que cada pantalla se ve diferente.
Cómo evaluar el primer prototipo
Muestra el prototipo a alguien que no participó en su creación y pídele que realice una tarea, por ejemplo cambiar la contraseña. No des pistas. El lugar donde dude es el lugar que hay que mejorar, y lo corriges con un prompt sobre un solo elemento.
Revisa también el código antes de pasárselo al programador. ¿Los componentes tienen nombres comprensibles? ¿El estilo coincide con el resto del proyecto? ¿No hay elementos innecesarios? Unos minutos de revisión ahorran horas de correcciones por parte del equipo.
More on this from FULGOR
guías·Canva AI Redesign: cambia tu banner en 10 segundosLa nueva función AI Redesign de Canva transforma tus diseños en segundos. Aprende a rediseñar banners y materiales de marketing sin empezar desde cero.