Open Design: la alternativa open source GRATUITA a Claude Design

Open Design toma una idea y la convierte en prototipos, sitios web, diapositivas e incluso vídeos HTML — todo ejecutándose en local, en tu propia máquina. En esta demo, Code A Program instala la aplicación de escritorio, conecta un agente de codificación y construye una landing page premium para una herramienta de escritura con IA llamada Draft, para luego refinarla y desplegarla sin salir del espacio de trabajo. Mira el recorrido completo en el vídeo de Code A Program, o sigue la guía escrita a continuación.

Open Design ejecutándose en local: un espacio de trabajo de diseño open source y agent-native que controlas por completo — sin estar atado a un único modelo.

¿Qué es Open Design?

Open Design es una plataforma de diseño open source y local-first — una alternativa gratuita a Claude Design y Figma. En lugar de atarte a un proveedor de modelos, funciona sobre el agente de codificación que ya usas, así que traes tu propio agente y tu propia key.

• Open source, Apache-2.0 — lee cada línea, autohospédalo o simplemente descarga la app de escritorio.
• Se ejecuta en local — los proyectos viven en tus propias carpetas, en tu máquina, no en la nube de otro.
• Trae tu propio agente — se admiten más de 21 agentes de codificación, incluidos Claude Code, Codex, Cursor, Gemini, OpenCode y más; tú eliges qué CLI impulsa la generación.
• Más que prototipos — sitios web, prototipos, decks de diapositivas, generación de imágenes e incluso vídeo HTML, todo desde un solo espacio de trabajo.
• Con todo incluido — 129 design systems integrados y más de 460 plugins para que nunca empieces con un lienzo en blanco.

Si has usado Claude Design, la sensación te resultará familiar al instante — Open Design mantiene la misma experiencia serena y luego le añade el modelo que tú elijas.

Paso 1 — Elige tu agente y tu modelo

Descarga la app de escritorio desde open-design.ai, instálala y responde las breves preguntas de incorporación. Eso te deja directamente en la interfaz de chat principal.

Arriba a la derecha, elige tu proveedor de agente de IA. Como proveedores de CLI locales puedes elegir Claude Code, Codex CLI, Gemini CLI (que tiene límites de uso gratuitos), OpenCode y otros. En la demo, Code A Program usa OpenCode con el modelo GLM 5.2 porque ha sido sólido para el trabajo de front-end — pero lo clave es la flexibilidad: no quedas atado a un único modelo ni plataforma.

Paso 2 — Escribe tu prompt

El chat tiene una opción de adjuntar archivo para material de referencia, además de una sección de plugins. Open Design incluye más de 460 plugins que cubren ayudantes de build y test, maquetas 3D, marcos de dispositivos móviles y de escritorio y más — así que si necesitas elementos 3D o una carcasa de dispositivo, añades el plugin en lugar de pelearte con el prompt.

La biblioteca de plugins: más de 460 plugins para construir, testear, maquetas 3D, marcos de dispositivos y más — añade lo que tu diseño necesite.

Ahora pega un brief. El prompt de la demo pide una landing page premium para un asistente de escritura con IA llamado Draft, con una paleta contenida de negro pizarra, marfil y naranja eléctrico, un hero editorial audaz con una animación de generación de texto en vivo, un lienzo de escritura interactivo, un flujo de trabajo de tres pasos, una sección de resultados, una tabla de precios de dos niveles, un FAQ y una llamada a la acción final potente — evitando explícitamente tarjetas, degradados, glassmorphism e imágenes genéricas de robots.

Hay una palanca más que conviene conocer: puedes basar un diseño en un design system popular de marcas como Apple, Airbnb, BMW, IBM o Spotify. Code A Program lo omite en este recorrido, pero ahí está cuando quieras acertar con un look concreto.

Paso 3 — Míralo construir y autoverificarse

Envía el prompt y Open Design empieza a preparar el proyecto. Al cabo de un minuto aproximadamente puede hacer algunas preguntas de seguimiento — respóndelas para obtener mejores resultados, o pulsa omitir todo y déjalo continuar.

En la demo, la landing page en sí se termina en unos seis minutos. Después Open Design dedica el tiempo restante a ejecutar autoverificaciones — verificando la estructura, revisando el diseño, comprobando animaciones y corrigiendo pequeños problemas antes de marcar el build como completo. Cuando termina, haz clic en el icono de presentación para abrir el sitio en una pestaña nueva.

El resultado generado: un hero editorial con animación de tecleo en vivo, flujo de trabajo, resultados, precios, FAQ y pie de página — responsive en tableta y móvil.

El resultado incluye un hero con animación de tecleo de IA, efectos de desplazamiento suaves, una sección de editor interactiva, una franja de flujo de trabajo, una sección de resultados de clientes, precios mensuales/anuales, un FAQ y un pie de página limpio. Cambia a las vistas de tableta y móvil para confirmar que el diseño responsive aguanta.

Paso 4 — Refina con la barra de herramientas del lienzo

La barra de herramientas de la derecha es donde pules sin quemar tokens en cambios triviales:

• Screenshot — captura una imagen del sitio.
• Comment — selecciona cualquier elemento (por ejemplo, el titular del hero) y describe un cambio, como recolorear una palabra al tema naranja. Agrupa varios comentarios y envíalos de una vez, o manda uno directo al chat.
• Marker — resalta cualquier área de la página y compártela con el agente.
• Element edit — cambia directamente tipografías, ancho, colores y más en un elemento seleccionado, para que los ajustes sencillos nunca necesiten una regeneración completa.

También tienes controles de zoom y una vista de todos los comentarios abiertos. En la demo, el texto «actually» se recolorea a naranja allí mismo, en la barra de herramientas.

Paso 5 — Exporta y despliega

Encima de la barra de herramientas está la opción de descargar — exporta el proyecto como PDF, imagen, ZIP o HTML. También está guardar como plantilla, para reutilizar este diseño como punto de partida de futuros proyectos.

El menú compartir es la parte interesante. Desde ahí puedes:

• desplegar en Vercel con un clic — conecta tu cuenta de Vercel con un token de acceso y pulsa desplegar.
• desplegar en Cloudflare del mismo modo.
• abrir en un editor como Cursor o VS Code, o en herramientas CLI como Gemini CLI, Codex y Claude Code. Open Design te entrega el HTML generado junto con su carpeta Skills, para que conviertas el diseño en un proyecto Next.js — o en el framework que prefieras.

En ajustes puedes añadir reglas globales (por ejemplo, «usar siempre TypeScript»), guardar memorias útiles como la función de memoria de Claude y configurar proveedores de medios — una key de ElevenLabs para voz y sonido, además de Nano Banana, OpenAI o OpenRouter para la generación de imágenes. También puedes añadir skills (hay un skill agent-browser para automatizar tareas del navegador, y varios skills de front-end), conectar servidores MCP y cambiar la ubicación por defecto de los proyectos.

Consejos para sacarle más partido

• Los modelos gratuitos bastan para empezar. Todo el sitio de la demo se generó con un nivel gratuito de Gemini y aun así luce estupendo; recurre a un modelo de pago cuando quieras mayor calidad en trabajo real.
• Añade plugins antes de promptear cuando sepas que vas a necesitar maquetas 3D o marcos de dispositivos.
• Usa la herramienta adecuada para el cambio — el editor de elementos y los comentarios resuelven pequeños ajustes sin una reconstrucción completa.
• Guarda los diseños que funcionen como plantillas para que tu próximo proyecto arranque con ventaja.

Preguntas frecuentes

¿Open Design es gratis? Sí — es open source bajo Apache-2.0 y se ejecuta en local de forma gratuita. Solo pagas por el uso de modelo/API del agente y de los proveedores de medios que conectes, y puedes usar niveles gratuitos como el de Gemini.

¿Qué agentes de codificación admite? Más de 21 agentes, incluidos Claude Code, Codex CLI, Cursor, Gemini CLI y OpenCode. Eliges el proveedor en el menú de arriba a la derecha.

¿En qué se diferencia de Claude Design? La misma sensación familiar, pero open source, local-first y con agente intercambiable — no quedas atado a un modelo ni a una plataforma, y puedes exportar o desplegar tu proyecto como quieras.

¿Puedo desplegar sin salir de la app? Sí — el menú compartir despliega en Vercel o Cloudflare con un clic (tú aportas el token de acceso del proveedor), o entrega el código a Cursor, VS Code o un agente CLI.

¿Tengo que usar un modelo de pago para buenos resultados? No — para la mayoría de landing pages y diseños de front-end, los modelos gratuitos ya son lo bastante capaces; cambia a un modelo de pago solo cuando quieras resultados más avanzados.

---

Esta guía escrita se basa en la demo de Code A Program. Mira el vídeo completo arriba y suscríbete a Code A Program para más vídeos prácticos sobre herramientas de IA.