Suscríbete a mi canal:
Open Design es un workspace open source de diseño con IA que corre en tu máquina y se conecta al agente que tú elijas.
En el vídeo de arriba te lo enseño en directo: parto de un PDF con mi contenido, dejo que me pregunte y diseño, y exporto el resultado.
Sitio: open-design.ai. Repo: github.com/nexu-io/open-design.
¿Qué ves primero: la misma web, con tu contenido?
Lo primero que te pido es que te quedes con la página del proyecto. No por marketing.
Porque en el siguiente clic ves exactamente la misma estructura, el mismo estilo, pero rellenada con material mío.
En mi caso el contenido era un PDF sobre cómo funciona el algoritmo de Twitter. La web del proyecto a un lado.
Al otro, la misma piel con mi texto, mis secciones, mi historia. Misma plantilla.
Otro relleno.
Eso es el punto de Open Design mejor que mil slides de “qué es la IA generativa”. No te vende magia abstracta.
Te enseña que puedes partir de un diseño que ya funciona y meterle lo tuyo sin empezar el HTML en blanco ni pelearte con un diseñador para el primer borrador.
El PDF no es lo importante del vídeo. Lo importante es el proyecto que te permite hacer eso una y otra vez, con el cerebro de IA que ya uses.
¿Qué es Open Design y en qué se diferencia de Claude Design?
Open Design es una alternativa gratuita y open source a Claude Design. Te deja crear diseños de páginas web, interfaces de aplicaciones, presentaciones y un montón de formatos más, con plantillas ya hechas por gente que sí sabe de diseño.
Si le pides a un chat “hazme una landing bonita”, suele salir un HTML genérico que luego tienes que pelear a mano. Aquí la gracia no es el chat.
La gracia es la capa que le ponen por encima de Claude Code, Codex u otro agente. Esa capa está preparada para diseño: te hace preguntas pertinentes, te propone caminos y no te deja solo con un prompt a ciegas.
En el vídeo lo digo claro. No haces el diseño “directamente” con Claude Code o con Codex como si fueran un bloc de notas con esteroides.
Usas Open Design como el entorno que orquesta esas inteligencias para que el resultado se parezca más a un diseñador que a un generador de código suelto.
El beneficio concreto, si no eres diseñador, es este: alguien ya te dejó las pautas. Tú te dedicas a decir qué quieres.
Ellos (plantilla + preguntas + agente) empujan el aspecto visual.
Si aún estás arrancando con el agente y quieres el camino limpio antes de montar capas encima, aquí dejé los primeros pasos con Claude Code en español.
¿Cómo se instala en Windows, Mac y Linux?
Entras en la web del proyecto, das a descargar y eliges tu sistema. Windows, Mac o Linux.
No hay ritual oculto en la demo: yo ya lo tenía instalado y entré directo a enseñarte el flujo.
En la propia página te explican cómo funciona. Yo, en el vídeo, te lo cuento con las manos en la herramienta para que veas qué botón pulsar y por qué importa cada uno.
Un detalle que me gusta mucho y que aparece más adelante en la toma: la interfaz está traducida al español. Arriba puedes cambiar el idioma y recorrer menús, opciones y flujos sin pelearte con inglés el primer día.
Para mucha gente eso no es un detalle cosmética. Es la diferencia entre probarlo o abandonarlo a los cinco minutos.
¿Cómo conectar Codex (o Claude Code) como motor de diseño?
Abajo a la izquierda eliges el cerebro que va a empujar Open Design. Puede ser Claude Code.
Puede ser Codex de ChatGPT. Puede ser cualquiera de la lista que ves en pantalla.
Si quieres, montas la API del proveedor que te dé la gana.
No estás casado con un único proveedor. Ese es el BYOK de verdad: bring your own key, trae tu propia clave y tu propio agente.
Open Design no te vende el modelo. Te vende (gratis, open source) el espacio de trabajo para diseñar con el modelo que ya pagas o que ya tienes montado.
En la demo no aparecen todos los motores de la lista. Algunos no los tengo instalados en ese entorno y el selector no me los ofrece.
Eso importa, y lo dejo para la sección de fallos, porque es exactamente el tipo de piedra con la que te vas a tropezar si mezclas Windows “puro” y WSL.
Lo que sí quiero que te lleves ahora: eliges el cerebro una vez, y a partir de ahí el flujo de diseño (plantillas, preguntas, vista previa, export) es el de Open Design, no el del chat suelto.
¿Por qué no hacerlo “solo” con Claude Code o Codex?
Porque el agente solo genera. Open Design te guía hacia un diseño usable.
Con Claude Code o Codex puedes pedir HTML, CSS y componentes hasta aburrirte. El problema es el vacío.
No hay plantilla curada. No hay entrevista de diseño.
No hay botón de “usa este prompt” con un mock que ya te gusta. No hay export a PowerPoint o despliegue a Vercel metido en el mismo sitio donde estás mirando el resultado.
Open Design es esa capa. Te prepara el terreno para diseñar.
Te hace las preguntas que un diseñador haría (¿landing editorial?, ¿parecerse al mock?, ¿página web de verdad?). Y te deja iterar sin salir a cinco herramientas distintas.
Si lo tuyo es otra película —clonar una web entera y que funcione de verdad, no un mock bonito— ese flujo distinto está en clonar una web entera con Claude Code. Aquí el objetivo es diseño guiado con plantillas y export limpio.
¿Qué enseña la demo de la presentación desde un PDF?
Antes de la web nueva, te enseño otro artefacto del mismo material. El PDF del algoritmo de Twitter no solo me dio una página.
También me dio una presentación.
En el vídeo paso de la web al modo presentación y ves el resultado final. Mismo origen.
Otro formato. El diseño me encanta, y lo digo sin postureo: no parece el típico “deck” genérico de IA con tipografías que gritan plantilla barata.
Eso importa si eres emprendedor. A veces no necesitas una landing.
Necesitas slides para un cliente, un socio o una reunión. Poder partir del mismo PDF y sacar web y presentación sin reescribir el brief dos veces es de las cosas que te ahorran una tarde entera.
¿Cómo funcionan las plantillas (webs, imágenes, vídeo y más)?
Puedes partir de cero. También puedes partir de plantillas, y eso es lo que te enseño con calma.
En el menú eliges el tipo de cosa que quieres. En mi caso dije que quería una página web.
Luego entré en prototipos y, según iba bajando, me iban apareciendo diseños. Puedes verlos a pantalla completa.
Puedes mirar si te gustan. Puedes descartar sin drama.
No es un catálogo de tres capturas feas. Hay de webs, de imágenes, de vídeo, un montón de caminos.
La gracia de mirarlos a pantalla completa es que juzgas el resultado como lo juzgaría un cliente, no como un thumbnail borroso.
Cuando encuentras el que te encaja, a la derecha te ofrece usar el prompt de ese diseño. En la demo elegí uno, di a “usar este prompt” y abajo me apareció el prompt listo.
Ahí no reinventas la rueda. Reutilizas el brief de diseño que ya funcionó para otra persona y lo adaptas a tu contenido.
Yo, en mi caso, solté el PDF encima y le dije que quería todo ese diseño, pero con mi material. Misma estructura visual.
Mi contenido. Exactamente el truco del principio del vídeo.
He creado cosas sin plantilla y también queda bien. Pero quería enseñarte la vía de plantillas porque el resultado es más previsible.
Si no eres diseñador, “previsible y profesional” gana a “creativo e impredecible” casi siempre.
¿Cómo va el flujo prompt → preguntas → diseño?
Pones el prompt (o la plantilla + el PDF), envías, y lo interesante no es que “empiece a trabajar”. Eso, entre comillas, se parece a lo que ya consigues con Claude Code o Codex.
Lo realmente interesante es lo que viene después.
Empieza a hacerte preguntas para definir de verdad lo que quieres. En la toma me pregunta cómo tiene que proceder.
Si quiero una landing page editorial que se parezca al mock que le pasé. Si quiero que sea realmente una página web.
Vas eligiendo opciones. Puedes añadir una indicación más si hace falta.
Mientras te hablo en el vídeo no estoy leyendo cada línea con lupa, así que hago clic y dejo que avance. El punto no es memorizar cada pregunta.
El punto es que no es un único mensaje a ciegas. Es una conversación corta de diseño antes de generar.
Cuando acaba, te van apareciendo las opciones y el resultado. Yo no me quedo a esperar otra generación completa en cámara porque el resultado ya lo viste al principio: la web con mi contenido.
Prefiero aprovechar el tiempo para enseñarte export, edición en vivo y el aviso de WSL.
Si vienes del mundo “un prompt y a rezar”, este paso de preguntas es lo que más se parece a trabajar con un junior de diseño que te para y te dice “espera, ¿esto es landing o es web completa?”. Ese freno te ahorra el HTML genérico.
¿Cómo exportar a HTML, PDF, PowerPoint, Vercel o Cloudflare?
A la derecha tienes pantalla completa para mirar el resultado como lo vería cualquiera. Y en Compartir está lo que me vendió el proyecto frente a “otro chat que te suelta un zip”.
Puedes convertirlo en PowerPoint. Puedes sacarlo a PDF.
Puedes exportarlo a HTML, claro. Y además puedes desplegarlo directamente en Vercel o en Cloudflare.
Eso cambia el juego si eres pyme o vas por libre. No es solo “bonito en local”.
Es “lo subo y lo enseño”. Sin abrir otra herramienta solo para el deploy, al menos en el camino feliz que enseño en el vídeo.
HTML para quien quiera seguir editando. PDF para enviar a un cliente que no quiere enlaces.
PowerPoint para la reunión de mañana. Vercel o Cloudflare para que exista en internet esta tarde.
Mismo artefacto. Varias salidas.
¿Cómo editar en tiempo real sin salir de la herramienta?
En Editar, haces clic en cualquier elemento y te detecta el contenido. Puedes cambiar lo que quieras ahí mismo, en tiempo real, desde la propia interfaz.
No es solo el texto. Tienes un montón de atributos HTML a mano.
Vas tocando, das a cambiar, y ves el resultado al momento. Si el titular queda largo, lo acortas.
Si un bloque no pega, lo retocas. Sin abrir VS Code solo para una coma.
Claro que se lo puedes pedir al agente otra vez. Y claro que, como es HTML, podrías editarlo tú a mano fuera.
Pero esta pequeña interfaz te evita el viaje de ida y vuelta cuando el ajuste es pequeño y urgente.
También puedes ver todo el código fuente. Si eres de los que quieren mirar debajo del capó, está.
Si no lo eres, puedes vivir en el editor visual y no pasar vergüenza.
Para mí ese combo (preguntas al generar + edición en vivo al retocar) es lo que hace que Open Design se sienta como herramienta de diseño y no como chat con vista previa.
¿La interfaz está en español y por qué importan las ~52.000 estrellas?
Sí: la web y la herramienta las tienen traducidas al español. Arriba cambias el idioma y ves las opciones que ya recorrimos en tu idioma.
Para arrancar sin fricción, cuenta.
Y luego el dato que en el vídeo me deja con la boca abierta. El proyecto lleva, creo, dos o tres semanas…
y ya rondaba casi 52.000 estrellas en GitHub. Muy nuevo.
Y aun así la gente lo está metiendo en el día a día.
Esa cifra es de esta toma, en el momento del vídeo. Los repos se mueven.
No la tomes como ranking eterno. Tómala como señal: software libre + IA aplicada a un dolor real (diseñar sin ser diseñador) se adopta rápido cuando el beneficio es concreto.
El beneficio no es “soy open source y punto”. El beneficio es que tienes un diseñador IA en tu ordenador, con el motor que tú pagas, sin otra suscripción de producto cerrado encima.
¿Es gratis de verdad — qué pagas con BYOK?
Open Design como producto es gratis. Es open source.
Lo descargas. Lo usas.
No hay peaje de “diseñador IA” del fabricante.
Lo que pagas son los tokens del agente o de la API que conectes. Claude Code, Codex, OpenRouter, el proveedor que montes.
Si no conectas un motor, no hay magia: Open Design necesita ese cerebro para generar.
El truco económico es no pagar dos veces. Ya usas (o vas a usar) un agente.
Open Design te pone la capa de diseño sin cobrarte otra suscripción de producto encima. BYOK de libro.
Cuando algo falla
Sin postureo. Piedras reales de la demo y de la doc del proyecto:
- No te aparecen Claude Code / Codex en el selector — Open Design tiene que vivir en el mismo entorno donde instalaste el agente. A mí me pasó exactamente eso: tenía Claude Code dentro de Windows, pero en el subsistema Linux (WSL). Open Design en el entorno gráfico de Windows (o PowerShell “puro”) no veía esos motores. Tuve que tenerlos instalados en el mismo sitio. Si no te suena WSL, casi seguro no tienes este problema. Si te suena, míralo antes de pensar que “la herramienta está rota”.
- En WSL el comando
odchoca con la utilidad Unix/usr/bin/od— el proyecto lo documenta en su guía WSL. No es un invento del vídeo; es una piedra de PATH clásica. Léela antes de pelearte media hora con el terminal. - El diseño “casi” pero no es tu marca — parte de plantilla, responde las preguntas con calma y luego edita en vivo. No esperes un director de arte en un clic. Espera un borrador profesional que tú afinas.
- Export o deploy falla — revisa que el artefacto haya terminado de generarse y que tu login de Vercel o Cloudflare esté en orden. El botón no inventa credenciales.
Repito el aviso del vídeo porque me habría ahorrado tiempo a mí mismo: si no te suena lo del subsistema Linux, no te preocupes. Probablemente no te pasa.
Si te suena, instala agente y Open Design en el mismo entorno.
¿Qué es DESIGN.md y cómo llevas tu marca al sistema?
En el ecosistema de Open Design, DESIGN.md es la forma de dejar por escrito cómo es tu marca para que el agente no improvise a ciegas. Tipografías, tono, colores, reglas que no quieres romper.
No es una escena larga del vídeo. Es la pieza que conecta “plantilla bonita” con “esto parece mío”.
Si ya vienes con una marca hecha, no tires el trabajo. Documenta lo importante y deja que el flujo de preguntas + edición en vivo respete ese marco.
Si no tienes marca todavía, las plantillas te dan un punto de partida decente hasta que la tengas.
¿Para quién vale la pena (y para quién no)?
Me ha encantado para personas como yo, que no somos buenas en diseño. Tener pautas creadas por profesionales y dedicarme a decir lo que quiero es exactamente el trato que buscaba.
Si eres emprendedor o tienes una pequeña empresa y quieres un resultado profesional sin agencia ni diseñador a tiempo completo, esta es de las herramientas que te van a encantar. Plantillas.
Preguntas. Export de verdad.
Editor en vivo. Motor el que tú elijas.
No me sustituye el criterio humano en una marca seria a largo plazo. No es el flujo quirúrgico para clonar una web compleja con comportamiento real (para eso tengo el otro tutorial con Claude Code).
Es el atajo honesto de PDF o brief → web/slides decentes, con control tuyo sobre el agente y sin suscripción de “diseñador cerrado”.
Si quieres instalarlo ya: open-design.ai · github.com/nexu-io/open-design.
Si te interesa seguir quitándote suscripciones de diseño y trabajo manual con herramientas que controlas tú, en la comunidad dejo más de este tipo de cosas: Skool — Mis Ingresos Pasivos. Pruébalo, dime qué te parece, y nos vemos en el siguiente.