← Guías Vista previa: 🤯 Dejo Claude Design… esta alternativa es mejor
Detalles

🤯 Dejo Claude Design… esta alternativa es mejor

Un freelance reconstruye el mismo mockup de SaaS para cliente que hizo primero en Claude Design, esta vez en Open Design, impulsado por su Claude Code CLI local, así que no cuesta nada extra. Prototipos clicables, un design system en condiciones y un PRD que puedes entregar directamente a tu agente de código. Basado en la reseña práctica de Jérémy DE CAMPOS.

Jérémy DE CAMPOS 1 de julio de 2026 24:37 YouTube ↗

Esta es una reseña práctica de alguien que se gana la vida diseñando trabajo para clientes. Jérémy DE CAMPOS construye productos SaaS para agencias reales y venía usando Claude Design para bocetar interfaces antes de programar. En su vídeo, un miembro de la comunidad le señala Open Design, así que hace la prueba más justa que existe: reconstruye exactamente la misma herramienta de cliente que ya había hecho en Claude Design, y compara. Esta versión escrita sigue su recorrido, reescrita para esta guía y actualizada a la versión actual. Mira el vídeo de arriba para ver las reacciones en directo, o sigue leyendo.

El espacio de trabajo de Open Design: describe lo que quieres y elige un modo. Open Design: un espacio de trabajo de diseño open source y agent-native que ejecutas en tu propia máquina.

¿Qué es Open Design?

Open Design es una plataforma de diseño open source y local-first: una alternativa agent-native a Claude Design y Figma. En lugar de encerrarte en un único modelo de pago, funciona sobre el agente de código que ya tienes: Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode y más.

Lo que Jérémy notó en el primer minuto:

  • Open source, Apache-2.0: está en GitHub, avanza rápido y ya es sorprendentemente completo.
  • Se ejecuta en local: los proyectos aterrizan en una carpeta real de tu máquina que puedes abrir e inspeccionar.
  • Trae tu propio agente: admite más de 21 agentes; la página de precios es solo para sus modelos alojados, así que si conectas tu propia clave o CLI no la necesitas.
  • Más que prototipos: prototipos, dashboards, presentaciones, imágenes e incluso vídeo, además de herramientas hermanas como HTML Anything y HTML Video.

Si has usado Claude Design, la interfaz te resultará familiar de inmediato, y encima añade el motor que tú elijas.

La prueba justa: reconstruir una herramienta de cliente real

En vez de un prompt de juguete, Jérémy reutiliza un proyecto genuino: un SaaS interno de seguimiento de entregas y errores que está construyendo para gestionar las actualizaciones de los clientes de su agencia. Ya le había dado ese brief y un archivo de design system a Claude Design, así que a Open Design le entrega las entradas idénticas —misma especificación, mismo design system— y lo deja correr. Mismo prompt, mismo material de partida, dos herramientas: esa es la única comparación en la que se puede confiar.

Ejecútalo con tu suscripción de Claude, no con tokens

La primera decisión es el motor, y ahí es donde cambia la historia de los costes. Open Design te deja conectar una clave API en bruto, pero Jérémy señala el riesgo evidente: impulsar la generación con un modelo de pago como Opus, facturado por token, «puede costar un ojo de la cara».

Entonces encuentra la opción que importa: ejecutar el Claude Code CLI local. En lugar de quemar tokens de API medidos, Open Design impulsa tu CLI claude ya instalado, de modo que la generación corre contra la suscripción de Claude que ya estás pagando. Cambia a ella de inmediato —«cuando digo muy interesante, quiero decir muy interesante»— y al final confirma el daño: una sesión completa usó alrededor del 9 % de su ventana. Para una agencia que hace esto a diario, esa diferencia es todo el argumento.

Consejo: elige tu motor en la esquina inferior izquierda del espacio de trabajo. Apunta Open Design a una CLI local (Claude Code, Codex, Gemini) para reutilizar una suscripción existente, y guarda una clave API medida solo como respaldo.

Lo que construyó: un prototipo clicable, no una imagen

Este es el momento en que la reseña da un giro. Open Design no devuelve una captura plana: construye un prototipo funcional y clicable. Jérémy entra en un tablero de tickets, abre tickets individuales para ver su vista de detalle y arrastra tarjetas entre columnas. El kanban es interactivo; el detalle del ticket muestra notas del cliente, registros de captura y una vista de consola; las pantallas se enlazan entre sí como en una app de verdad.

Un prototipo clicable generado en Open Design. No es un mockup estático: las pantallas se enlazan y los elementos responden a los clics.

Luego lo empuja más lejos con un prompt de seguimiento: haz las demás páginas y conecta los enlaces de la barra lateral para que el mockup sea navegable. Obedece, genera las páginas adicionales y las conecta, y después adapta el diseño a versiones para tablet y móvil sin que se lo pidan dos veces.

El design system, presentado como es debido

Como le dio el mismo design system que había entregado a Claude Design, la comparación es directa, y su veredicto es tajante: los design systems de Open Design están mejor presentados. Colores, tipografía, espaciado y componentes se disponen con claridad, con ese estilo de anotaciones y guías punteadas que hace que un sistema parezca pensado y no soltado de cualquier manera.

La biblioteca de design systems integrada. Un design system que se lee como documentación, no como un amontonamiento de colores.

Puedes editar y anotar directamente en el lienzo: selecciona una región, deja una nota, ajusta el texto in situ y pon los cambios en cola para que el agente los aplique, cosa que hace, volviendo con un resultado más limpio en cada pasada.

Del mockup al PRD: el relevo a tu agente

La función que encaja con el flujo de trabajo real de Jérémy es la generación de PRD. Su método es el vibe-coding: agrupar tickets, describir el cambio y entregar una especificación a Claude Code para que él mismo haga las ediciones de código. Open Design produce exactamente ese puente: un PRD en tres formas:

  • una versión de vista previa para que él la lea,
  • una versión en Markdown para dársela directamente a la IA,
  • y una versión en PDF para enviar a un cliente cuando haga falta.

Junto con una vista de entrega (marcar el trabajo como hecho) y un changelog de la app, cierra el círculo desde «la pantalla diseñada» hasta «la especificación a partir de la cual mi agente de código puede construir», sin salir del espacio de trabajo.

Más allá del mockup

Mientras trabaja, recorre el resto y no para de encontrar cosas:

  • Memoria: retiene automáticamente lo que has hecho a lo largo de la sesión.
  • Biblioteca de imágenes + generación: importa o crea imágenes en línea.
  • Skills: un buen puñado de skills preconstruidos, ampliables con los tuyos.
  • Servidores MCP y conectores: soporte de MCP externo y también lo inverso: exponer Open Design como servidor MCP para que tu Claude Code CLI maneje el lienzo y haga ediciones directamente desde la terminal.
  • Importar desde Figma, un hub de plugins y packs de plantillas.
  • Un panel de revisión de diseño: al activarlo, aparece junto al agente una revisión de cinco paneles que califica el resultado.

Veredicto

Su conclusión es inequívoca: está considerando seriamente dejar Claude Design y pasar sus proyectos reales a Open Design, tanto para diseño como para vídeo. La combinación que lo convence es concreta: las mismas entradas producen un design system mejor presentado y un prototipo genuinamente interactivo, funciona con la suscripción de Claude que ya paga en vez de con tokens medidos, y emite un PRD que puede entregar directamente a su agente de código. Piensa exprimirlo a fondo durante unas semanas y volver con un informe, pero la impresión del primer uso es que no es solo un clon gratuito: es la mejor herramienta para su flujo de trabajo.

Preguntas frecuentes

¿Open Design es realmente gratis? La app es open source (Apache-2.0) y se ejecuta en local. Solo pagas por el modelo que elijas, y si conectas una CLI local como Claude Code, esta corre con la suscripción que ya tienes, sin factura extra por token.

¿Necesito el plan de pago de la página de precios? No. Ese plan es para los modelos alojados de Open Design. Trae tu propia clave o CLI local y podrás saltártelo.

¿Puedo importar lo que ya construí en Claude Design? Sí: exporta tu design system desde Claude Design e impórtalo en Open Design, y sigue generando con la misma marca.

¿Exporta una especificación de verdad? Sí. Open Design puede generar un PRD en forma de vista previa, Markdown y PDF, de modo que entregas el Markdown a tu agente de código y el PDF a un cliente.

¿Qué agente debería usar? Cualquiera de los admitidos; la calidad del resultado sigue al modelo que elijas. Usar tu Claude Code, Codex o Gemini CLI local es la vía más barata, porque reutiliza una suscripción existente.