# Wonder Wonder es una herramienta de diseño nativa de IA que permite a los equipos generar y editar diseños en un lienzo visual, y luego exportarlos o sincronizarlos con código. Admite conexiones basadas en MCP con agentes de programación y ofrece un plan gratuito y planes de pago. - Findings24: - Sitio web: - Precios: Freemium - Categorías: Diseño Gráfico IA, Asistente Diseño IA ## ¿Qué es Wonder? Wonder es una herramienta de diseño nativa de IA basada en un único lienzo para generar diseños, hacer ediciones y trabajar con el contexto del código al mismo tiempo. El sitio la presenta como una forma de diseñar con IA, chatear con ella y mantener el resultado alineado con el código real. El producto enfatiza un recorrido directo del diseño a producción. Wonder indica que los diseños están respaldados por código, se pueden copiar como React + Tailwind y conectar con agentes de programación mediante su servidor MCP, de modo que el trabajo pueda pasar del lienzo a una herramienta de desarrollo sin una entrega tradicional. Wonder también admite la exploración iterativa: puedes iniciar nuevos proyectos de diseño, crear variantes, ajustar el diseño y el espaciado, editar textos, cambiar imágenes y generar recursos en el lienzo. La documentación de MCP amplía este flujo a agentes compatibles como Cursor y Claude Code. Los términos de la empresa describen Wonder como una herramienta para crear, editar y colaborar en diseños basados en HTML y CSS reales, con exportación de código listo para producción. El producto está disponible en wonder.design y se ofrece con un plan gratuito y planes de pago para un uso más intensivo. ## ¿Qué puede hacer Wonder? ### Diseño asistido por IA en el lienzo Genera diseños en un lienzo visual y luego realiza cambios precisos sin salir del mismo espacio de trabajo. ### Iteración mediante chat Edita diseños mediante chat, con el producto situando el diseño y la interacción con la IA juntos en un único lienzo. ### Salida alineada con el código Mapea el formato de diseño de Wonder 1:1 al código para que los diseños puedan volver a producción sin un paso de entrega independiente. ### Exportación a flujos de producción Copia React + Tailwind desde un diseño o envía el resultado a tu agente de programación para continuar el desarrollo. ### Conexión con agentes basada en MCP Usa el servidor MCP de Wonder para permitir que los agentes de programación compatibles lean y escriban contenido del lienzo en ambas direcciones. ### Generación visual de recursos Genera imágenes y usa shaders para crear elementos visuales más completos directamente en el flujo de diseño. ## Casos de uso ### Diseñar la interfaz de un producto desde cero Genera nuevos diseños, haz cambios en el lienzo y mantén el trabajo alineado con el código que finalmente se publicará. ### Iterar sobre pantallas existentes Ajusta el espaciado, los estilos, los textos, las imágenes y las variantes mientras mantienes el diseño en el mismo contexto de trabajo. ### Colaboración entre diseño y código Conecta Wonder con un agente de programación para que pueda leer o actualizar el lienzo mientras pasas del diseño a la implementación. ### Crear recursos visuales Crea imágenes y elementos visuales basados en shaders directamente en el flujo de diseño cuando un proyecto necesite recursos más completos que los marcadores de posición. ### Evaluar la herramienta antes de adoptarla Usa el plan gratuito para explorar el flujo de trabajo y cambia a un plan de pago si tu equipo necesita más créditos o llamadas adicionales a herramientas MCP. ## Preguntas frecuentes ### ¿Para qué se usa Wonder? Wonder utiliza un lienzo visual donde puedes generar diseños, hacer ediciones precisas y trabajar con el contexto del código en la misma pantalla. Su servidor MCP también permite que los agentes de programación compatibles lean y escriban contenido del lienzo de Wonder. ### ¿Qué agentes de programación pueden conectarse a Wonder? La documentación indica que Wonder admite actualmente Cursor, Claude Code, Claude Desktop, Codex, Antigravity, Lovable y clientes MCP personalizados. La vía más rápida para Cursor, Claude Code y Codex es mediante el plugin oficial. ### ¿Qué tipo de resultados puede producir Wonder? Wonder puede exportar código listo para producción, y la página de inicio indica que puedes copiar React + Tailwind desde los diseños. Los términos también establecen que los usuarios pueden exportar código listo para producción. ### ¿Wonder tiene un plan gratuito? La página de precios muestra un plan gratuito y los planes de pago Pro, Pro+ y Max. El plan gratuito figura a $0/mes, mientras que Pro cuesta $20/mes, Pro+ $60/mes y Max $200/mes. ### ¿Cómo funciona la autenticación de Wonder MCP? La documentación de MCP describe un inicio de sesión basado en OAuth sin necesidad de gestionar claves de API, y los tokens se actualizan automáticamente después de la autorización. ## Datos rápidos - **Categoría**: Herramienta de diseño / Herramienta para desarrolladores - **Plataforma**: Aplicación web en wonder.design - **Flujo de trabajo**: Diseñar en el lienzo y luego exportar o sincronizar con el código - **Integraciones**: Servidor MCP para Cursor, Claude Code, Claude Desktop, Codex, Antigravity, Lovable y clientes personalizados - **Precios**: Plan gratuito más planes de pago Pro, Pro+ y Max - **Empresa**: Aquila Labs, Inc. d/b/a Wonder