Open Design es el sueño de todo vibe coder
Un manual para vibe coders sobre Open Design: usa el agente que ya tienes, elige un sistema de diseño para acabar con el «AI slop», escribe prompts pensados para una estructura que convierte y transforma PRD en bruto en una landing page, una app móvil y una app de escritorio en minutos. Basado en las demos prácticas de Sean Kochel.
Esta guía es un manual para vibe coders sobre Open Design: usa el agente que ya tienes, elige un sistema de diseño para que tu resultado no grite «generado por IA», escribe prompts pensados para una estructura que realmente convierte y luego itera conversando. Sigue las tres construcciones consecutivas que Sean Kochel realiza en sus demos prácticas —una landing page, una app móvil y una app de escritorio—, reescritas y actualizadas con la versión actual. Mira el video de arriba para verlo en vivo, o sigue leyendo para la versión escrita.
El espacio de trabajo de Open Design: prototipos, presentaciones, imágenes y video en un mismo lienzo tranquilo y familiar.
¿Qué es Open Design?
Open Design es una plataforma de diseño de código abierto y local-first que se ejecuta sobre el agente de programación que ya usas. Detecta los CLI que ya tienes en tu máquina —Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode y un par de docenas más— y deja que ese agente impulse la generación. Como dice Sean: hay una capa de CLI donde configuras tu agente, un system prompt que impulsa la calidad y luego las partes que la hacen valiosa: el soporte de skills y una amplia biblioteca de sistemas de diseño. Los resultados son archivos HTML reales, así que todo lo que crees encaja directamente en tu proyecto real.
Por qué les importa a los vibe coders:
- Usa tu propio agente y tu clave: sin una segunda suscripción, sin dependencia de un proveedor.
- Se ejecuta localmente: el resultado es HTML que puedes llevar directamente a tu base de código.
- Los sistemas de diseño acaban con el aspecto de «AI slop»: parte de una marca real en lugar de un lienzo en blanco.
- Las skills son personalizables: incorpora tus propias reglas de copywriting, paradigmas de UX o procesos.
- Código abierto, Apache-2.0: léelo, haz un fork y entrega trabajo de cliente con él.
Los dos problemas con los que se topa todo vibe build
Sean estructura todo el flujo de trabajo en torno a dos modos de fallo, y vale la pena nombrarlos porque el resto del manual trata de cómo evitarlos:
- Parece «AI slop». Degradados genéricos, la misma fuente serif, una sopa de contenedores: ni a ti mismo te gusta.
- No está estructurado para cumplir su función. Una landing page que no convierte, una app cuyo flujo no tiene sentido.
Un sistema de diseño resuelve el problema uno. Un prompt deliberado con una estructura real resuelve el problema dos. Ten ambos presentes en cada construcción que sigue.
Paso 1: Instala y elige tu agente
Tienes tres formas de entrar:
| Ruta | Ideal para | Requisitos |
|---|---|---|
| App de escritorio | La mayoría de la gente: cero configuración | Ninguno. Solo descárgala y ábrela. |
| Ejecutar desde el código fuente | Desarrolladores que quieren leer o modificar el código | Node ~24, pnpm 10.33.x |
| Instalar en tu agente | Quienes viven en la terminal | Un CLI de agente de programación existente |
La ruta más rápida es la app de escritorio: consíguela en open-design.ai/download; detecta automáticamente los CLI de agentes que ya están en tu PATH. Para ejecutarla desde el código fuente en su lugar:
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webAbre la URL local que imprime (usa un puerto dinámico, no lo fijes a mano). En el primer arranque, apunta Open Design al agente que quieres que dirija el trabajo, o usa tu propia clave de API.
Paso 2: Construye una landing page que convierte
Esta es la primera demo de Sean, y es la plantilla para todo lo demás:
- Elige un sistema de diseño. En la demo elige el de Anthropic. Esta es tu barrera anti-slop: el agente hereda la paleta, la tipografía y el lenguaje de componentes de esa marca.
La biblioteca de sistemas de diseño: cada entrada descompone una marca real en paleta, tipografía, componentes y atmósfera visual que puedes reutilizar.
- Da un prompt para la estructura, no solo para el estilo. Sean le indica exactamente qué secciones construir —once de ellas— y pega el resumen ejecutivo de su PRD (visión del producto, planteamiento del problema, usuario objetivo, solución propuesta, funciones principales) para que el copy tenga un contexto real con el que trabajar.
- Responde las preguntas de descubrimiento. Igual que Claude Design, Open Design hace preguntas aclaratorias antes de escribir. Aquí recurre a su skill de landing page SaaS para ejecutar, y como las skills no son más que archivos, podrías cargar tus propias pautas de copywriting o estructura de secciones como una skill en su lugar.
- Déjalo trabajar. Unos cinco minutos después tiene una primera versión profesional: una estructura real orientada a la conversión, una tabla comparativa limpia, una tarjeta de caso de estudio con buen estilo y unas FAQ sólidas.
¿Quieres otra sensación? Sean vuelve a ejecutar exactamente el mismo brief con un tono brutalista en lugar de editorial y obtiene un diseño notablemente distinto: la misma estructura, otra piel, porque el sistema de diseño hace el trabajo pesado.
Paso 3: Construye una app móvil, pantalla por pantalla
Para la demo móvil, Sean trabaja una pantalla a la vez. Mantiene el mismo sistema de diseño de Anthropic y luego, para cada pantalla, pega un prompt construido a partir de su PRD: un feed de inicio, una pantalla de recomendaciones para «rellenar los huecos» y un registro de comidas improvisado. El agente hace sus preguntas aclaratorias, crea una maqueta de un layout iOS y respeta el sistema de diseño elegido en las tres pantallas.
La lección: cómo escribes el prompt de la UX es la mayor parte del resultado. Cuando replantea la misma app como una interfaz de coaching centrada en el chat, obtiene un conjunto de pantallas radicalmente distinto, pero igual de coherente. El sistema de diseño la mantiene fiel a la marca; tu prompt decide el paradigma.
La biblioteca de plantillas: puntos de partida de prototipos, presentaciones, imágenes y video que puedes filtrar por tipo y bifurcar para empezar.
Paso 4: Hazlo multimodal: de pantallas a app de escritorio
La última demo muestra el truco multimodal. Sean captura sus tres pantallas móviles, las suelta en un chat nuevo y plantea una petición abierta: «haz una maqueta de una versión web app de esta funcionalidad principal». Cinco minutos después tiene una traducción de escritorio limpia de tres paneles —navegación a la izquierda, el lienzo de trabajo en el centro y una vista de progreso a la derecha— con las interacciones de comandos slash también maquetadas.
Incluso un prompt vago más imágenes de referencia te da un punto de partida utilizable. Con una especificación adecuada queda más afinado, pero la idea se mantiene: puedes moverte con fluidez entre superficies.
Consejos
- Empieza siempre desde un sistema de diseño. Es la palanca más grande contra el aspecto de «AI slop».
- Da un prompt explícito para la estructura. Enumera las secciones o pantallas; pega contexto real de un PRD para que el copy no sea hueco.
- Apóyate en las skills, y escribe las tuyas. Las skills no son más que archivos; carga tus reglas de copywriting o paradigmas de UX directamente en el flujo de trabajo.
- Itera conversando. Distintos enfoques de UX dan resultados muy distintos; eso es una ventaja, así que prueba varios.
- Usa imágenes de referencia. Captura pantallas existentes y suéltalas para trasladarlas entre superficies.
- Recuerda que el resultado es HTML. Está hecho para encajar en un proyecto que ya hayas empezado.
FAQ
¿Tengo que usar un modelo específico? No. Open Design dirige cualquier agente que hayas configurado —Claude Code, Codex, Cursor, Gemini, OpenCode y más— o tu propia clave de API. Sin dependencia de un proveedor.
¿En qué se diferencia de Claude Design? La misma sensación familiar, pero gratis, de código abierto, local-first, agnóstico respecto al modelo y mucho más personalizable: puedes añadir tus propias skills y procesos. Además, generación de imágenes y video que una herramienta de un solo proveedor no te ofrece.
¿Puedo fusionar lo que construyo en una app existente? Sí: los resultados son archivos HTML, así que están pensados para encajar en un proyecto que ya hayas empezado. Sean cubre los flujos de fusión basados en especificaciones en un video complementario.
¿Es gratis? La app es de código abierto bajo Apache-2.0 y gratuita para ejecutarse localmente. Solo pagas por el uso de modelo y de medios del agente y los proveedores que conectes.
Esta guía escrita se basa en las demos prácticas de Sean Kochel. Mira el video completo de arriba y suscríbete a Sean Kochel para más flujos de trabajo de construcción con IA.