Wonder
Wonder (Aquila Lab) · Imagen · Programación
Wonder es una herramienta de diseño con IA donde el lienzo y el código son lo mismo. En lugar de dibujar un mockup y pasárselo a un ingeniero, pasas del diseño con IA al código en un solo sitio y exportas React y Tailwind (o CSS puro) listos para producción. Es una herramienta de diseño para equipos de producto que quieren generar interfaces con IA, editarlas a mano en un lienzo conocido y publicar el resultado sin un paso de traducción. Wonder también incluye un servidor MCP que se conecta a agentes de programación como Claude y Cursor. Los cambios de diseño y los de código se mantienen sincronizados.
Acerca de Wonder
Qué es Wonder
Wonder es una herramienta de diseño construida sobre una sola idea: lo que ves en el lienzo es lo que publicas. Su formato de diseño se corresponde uno a uno con el código, así que un componente que colocas visualmente se convierte en el componente React real de tu proyecto. Eso elimina el paso habitual de maquetación en el que alguien reconstruye una pantalla a ojo. Sin paso de traducción, sin adivinar.
El producto apunta a equipos de producto más que a aficionados en solitario. Combina las herramientas que los diseñadores ya conocen (lienzo, capas, componentes) con la generación por IA y un chat integrado, y se conecta a un repositorio de GitHub para que la IA lea tu código existente y reconstruya interfaces reales en el lienzo. También puedes llegar al mismo lienzo a través de agentes de programación vía MCP, lo que significa que quienes escriben el resto de la app pueden manejar Wonder sin salir de su editor.
Los límites principales son el alcance y el precio. Wonder genera React y Tailwind (o CSS puro), así que los equipos con otros stacks de front-end le sacan menos partido a la exportación. Las cuentas gratuitas también tienen tope. Tokens limitados de chat con IA, tres archivos privados y subidas de imágenes de 25 MB. Se agota rápido.
Cómo empezar
- Crea una cuenta en app.wonder.so y abre un archivo nuevo. Los archivos públicos son ilimitados; los privados se limitan a tres en el plan gratuito.
- Describe en el chat con IA la pantalla o el componente que quieres, o parte de una maqueta existente y deja que la IA genere a tu lado.
- Edita el resultado como lo harías en cualquier herramienta de diseño. El lienzo tiene capas, componentes, variables de diseño, rejillas y una biblioteca de shaders e iconos.
- Conecta tu espacio de trabajo para el traspaso. Enlaza un repositorio de GitHub para traer interfaces reales al lienzo, o añade el servidor MCP de Wonder a Claude, Cursor o Codex para mover cambios en ambos sentidos.
- Exporta o sincroniza el código React y Tailwind de producción de vuelta a tu proyecto.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Wonder.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Diseñadores de producto
- Ingenieros de diseño y desarrolladores front-end
- Equipos de producto pequeños
- Fundadores que construyen su primera interfaz
Tareas
- Generar interfaces a partir de un texto
- Reconstruir la interfaz existente de un producto
- Exportar el diseño a React y Tailwind
- Mantener diseño y código sincronizados
- Prototipar maquetas interactivas
Casos de uso
- Arrancar la pantalla de una función nueva
- Traspaso a ingeniería
- Trabajar dentro de un agente de programación
- Rediseñar una página existente
- Sesiones de revisión en equipo
Funciones clave
Un lienzo que se corresponde con el código
La afirmación central de Wonder es que su formato de diseño coincide con el código uno a uno. Un componente en el lienzo es lo mismo que el componente de tu proyecto. Colocas los elementos de forma visual y el resultado es un componente React real, no una imagen de uno. Para los equipos cansados de reconstruir pantallas a mano, ahí está el sentido de la herramienta.
Generación con IA y chat integrado
El editor tiene un chat con IA que genera y edita interfaces en el lienzo. Puedes describir lo que quieres y seguir hablando con él mientras ajustas la maqueta. Las cuentas Pro reciben $20 en tokens de IA mensuales por cada usuario invitado. El plan gratuito mantiene los tokens limitados.
Exportación a React y Tailwind
El trabajo terminado se exporta como React y Tailwind listos para producción, con CSS puro como alternativa. El código está pensado para entrar directo en un proyecto real. No es una carpeta de traspaso. Si tu stack no está basado en React, aquí es donde Wonder pierde encaje.
Servidor MCP de Wonder
El servidor MCP en mcp.wonder.so conecta Wonder con agentes de programación como Claude, Cursor y Codex. Tu agente obtiene acceso de lectura y escritura al lienzo, así que puede llevar diseños al código o devolver código a los diseños. La configuración usa un inicio de sesión OAuth estándar. Sin claves de API que gestionar. Es gratis en todos los planes, incluido el gratuito.
GitHub y aplicación de escritorio
Puedes conectar un repositorio de GitHub para que la IA lea tu código existente y reconstruya la interfaz real del producto en el lienzo. Wonder también funciona como aplicación de escritorio en Mac y Windows para quien prefiera no trabajar en una pestaña del navegador. ¿Prefieres el navegador? También vale.
Colaboración y variables de diseño
Los archivos pueden ser públicos o privados, compartidos con invitaciones de solo lectura o de edición completa, con controles de presencia para sesiones en vivo. Un panel de Variables guarda los tokens de diseño, y cada archivo tiene su propia biblioteca de iconos. Las rejillas y los layouts de bloque y en línea te dejan probar cambios estructurales sin rehacerlo todo desde cero.
Ventajas y desventajas
Ventajas
- Diseño y código comparten un solo formato, así que no hay reconstrucción manual entre el lienzo y el producto.
- La exportación real a React y Tailwind entra en un código existente sin necesidad de limpieza.
- El soporte de MCP funciona con Claude, Cursor, Codex y otros agentes, y es gratis en todos los planes.
- El precio plano de $16 por usuario al mes con facturación anual mantiene el gasto predecible a medida que crece el equipo.
- Aplicaciones de escritorio para Mac y Windows, además de colaboración en tiempo real con roles y permisos.
Desventajas
- La exportación está atada a React y Tailwind, así que los equipos con otros stacks de front-end pierden casi todo el beneficio.
- El plan gratuito limita los tokens de chat con IA, tres archivos privados y subidas de imágenes de 25 MB, algo que frena proyectos reales. Tres archivos privados no son muchos.
- No se indica una cuota mensual de tokens para el plan gratuito, así que un uso intensivo de la IA te empuja a Pro enseguida.
- La herramienta aún es joven; se lanzó en abril de 2026, así que espera cambios constantes y algún que otro borde áspero mientras el equipo sigue publicando nuevas funciones y correcciones cada pocas semanas.
Preguntas frecuentes
Wonder es una herramienta de diseño con IA que convierte el trabajo del lienzo en código de producción. Diseñas la interfaz en un lienzo conocido, la generas y editas con IA, y luego exportas React y Tailwind reales en vez de un mockup estático.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Wonder.
Alternativas a Wonder
X Ray Interpreter
X-ray Interpreter · ImagenX Ray Interpreter es una herramienta de radiología con IA basada en web que convierte radiografías, tomografías, resonancias, ecografías e imágenes PET en informes en lenguaje sencillo. Subes un estudio, obtienes una interpretación preliminar de la radiografía en unos momentos y luego haces preguntas de seguimiento si algo necesita explicación. Funciona como segunda opinión y como apoyo de aprendizaje, no como diagnóstico médico.
Aieasypic
AIEasyPic · ImagenAIEasyPic es un generador de imágenes con IA que convierte prompts de texto simples en obras terminadas en segundos. También puedes entrenar modelos personalizados con tus propias fotos, intercambiar caras en imágenes existentes y crear clips de vídeo cortos a partir de texto, todo desde el navegador. Le va bien a los creadores ocasionales que quieren imágenes rápidas y a los aficionados que desean construir un modelo personal sin tocar una línea de código.
Chargen
Chargen · ImagenChargen es un generador de personajes con IA y un conjunto de herramientas de creación de mundos pensado para Dungeons & Dragons y otros juegos de rol de mesa. Convierte una idea de una línea en un retrato de personaje pintado, levanta PNJ, monstruos, mapas y encuentros desde la misma sesión, y mantiene los detalles de cada criatura a mano. La parte de arte para juegos de rol de mesa funciona con un sistema de créditos llamado Gold, mientras que los generadores de texto siguen siendo gratis para todos.