Diseña con Open Design un sitio acorde con tu marca actual

Esta guía se centra en un truco estrella de Open Design: apúntalo a tu sitio web existente y el agente extrae tu marca real —tipografías, colores, tono— en una especificación y, luego, diseña con tu voz. También cubre la instalación de escritorio en un clic y una mirada sincera al porqué de recurrir a una alternativa abierta. Sigue la construcción práctica que Brendan O'Connell realiza en su recorrido, reescrita y actualizada a la versión actual. Mira el video de arriba para ver la ejecución en vivo, o sigue leyendo para la versión escrita.

Un prototipo real generado, renderizado en la vista previa: una landing page de agencia oscura y cinematográfica.

¿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 —Claude Code, Codex, Cursor, Gemini, OpenCode y más— o con tu propia clave de API. En esencia es un espacio de trabajo al estilo de Claude Design que ejecutas en tu propia máquina, sin quedar atado a la nube de un solo proveedor ni sujeto a los topes de uso de esa herramienta. Es Apache-2.0, viene con una amplia biblioteca de skills y sistemas de diseño, y añade encima generación de medios (imagen, video, audio).

Por qué recurrir a una alternativa abierta

La motivación de Brendan es concreta y vale la pena repetirla porque, para mucha gente, es el factor decisivo. Generó un único sistema de diseño en la herramienta cerrada en la nube y se comió ~75 % de su límite semanal, dejándolo atascado hasta la semana siguiente. Ese límite es independiente del cupo normal del plan, lo que hace que el flujo de trabajo resulte casi inutilizable para iterar de verdad. Ejecutarlo sobre tu propia suscripción de Claude Code (o cualquiera) elimina ese muro: no chocas con un tope de diseño aparte y no quedas encerrado en un solo ecosistema.

Paso 1 — Instalar (la vía de un clic)

La ruta más fácil, y la que recomienda Brendan, es la aplicación de escritorio: ve a open-design.ai/download y consigue el ejecutable para macOS o Windows. La app está en marcha en poco tiempo y detecta automáticamente los CLI de agentes que ya tienes en tu máquina: Brendan no configuró nada; reconoció su suscripción de Claude Code y quedó listo para usarse.

¿Prefieres la terminal? Desde el código fuente:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Abre la URL local que imprime (un puerto dinámico: no lo fijes en duro). A la derecha encontrarás los ajustes: los agentes detectados, además de proveedores de medios (OpenAI para imagen, MiniMax para video, ElevenLabs para voz), conectores (Composio MCP) e incluso mascotas de escritorio. También puedes aportar tu propia clave para cualquier proveedor.

Paso 2 — Diseñar a partir de tu marca existente

Este es el truco que vale por sí solo la entrada. Crea un proyecto, elige alta fidelidad y, en tu brief, dile que diseñe para tu sitio existente. El agente tiene una herramienta de obtención web, así que irá a leer tu sitio en vivo y luego derivará de él una especificación de marca.

En el video, Brendan lo apunta a su propio sitio y Open Design:

1. Obtiene la página y extrae el contenido real.
2. Escribe un brand-spec.md que captura su tipografía real (reconoció correctamente Fig Tree), su color y sus decisiones de diseño —«sin botones tipo píldora, sin tarjetas totalmente redondeadas, color de acento usado con moderación, espacios en blanco generosos»— además de su tono de voz («nada de marketing efusivo»).
3. Genera un DESIGN.md y construye la página con esa voz, combinando su marca existente con una maquetación más limpia.

El espacio de trabajo de Open Design: describe lo que quieres crear, elige un modo y tu agente hace el resto.

Antes de construir, Open Design ejecuta un breve formulario de descubrimiento (¿una página o unas pocas? ¿dirección visual? ¿coincidir con el sitio actual? ¿marcadores de posición realistas?) para fijar la dirección correcta. El resultado conserva su eslogan, su azul y su tipografía, y encima superpone una maquetación más nítida: una salida de varias páginas por las que puedes navegar haciendo clic.

Paso 3 — Revisar la autocomprobación anti-slop y exportar

Al terminar, Open Design ejecuta una autocomprobación anti-slop: Brendan la ve confirmar «sin emojis, una sola tipografía, un detalle decisivo, texto de posicionamiento real de principio a fin». Esa es la barrera que evita que el resultado parezca generado.

La galería HyperFrames: piezas de motion y vídeo impulsadas por código que puedes forkear y remezclar.

Recorre las pestañas ejemplos y sistemas de diseño en busca de puntos de partida (cada sistema de diseño te da un DESIGN.md totalmente editable) y, cuando estés conforme, exporta el artefacto como HTML, PDF o un ZIP. Como todo se ejecuta localmente en tu propio agente, no hay un tope de diseño aparte con el que chocar mientras iteras.

Consejos

• Apúntalo a tu sitio en vivo para heredar tus tipografías, colores y tono reales: la vía más rápida hacia un resultado fiel a la marca.
• Usa la aplicación de escritorio para la vía sin configuración; detecta tu agente automáticamente.
• Ejecútalo con tu propia suscripción de CLI para esquivar el tope semanal de diseño aparte de las herramientas cerradas.
• Lee los brand-spec.md / DESIGN.md generados: son archivos editables, así que corrige cualquier cosa que la extracción haya captado mal.
• Invierte un poco en el prompt: un brief más rico produce una primera versión notablemente mejor.

Preguntas frecuentes

¿De verdad puede diseñar a partir de mi sitio web existente? Sí: el agente tiene una herramienta de obtención web. Dile que diseñe para tu sitio y extraerá tus tipografías, colores, decisiones de maquetación y tono en un brand-spec.md, y luego diseñará con esa voz.

¿Tengo que configurar mi agente? Normalmente no. La aplicación de escritorio detecta automáticamente los CLI de agentes ya instalados (Claude Code, Codex, Gemini y más). También puedes aportar tu propia clave.

¿Tiene los límites de uso de la herramienta cerrada? No hay un tope de diseño aparte: la generación va sobre el agente/suscripción que conectes, así que no te bloquean tras un solo diseño.

¿Es gratis? La app es de código abierto bajo Apache-2.0 y gratuita para ejecutar localmente. Solo pagas por el uso de modelo y medios del agente y los proveedores que conectes.

---

Esta guía escrita se basa en el recorrido de Brendan O'Connell. Mira el video completo de arriba y suscríbete a Brendan O'Connell para más análisis de herramientas de código abierto.