Open Design: la alternativa open source a Claude Design

Anthropic lanzó Claude Design el 17 de abril de 2026. Once días después, el 28 de abril, alguien creó un repositorio en GitHub para hacer lo mismo pero abierto.

A día de hoy ese repositorio tiene 82.900 estrellas y 9.600 forks. En tres meses. Se llama Open Design, es Apache-2.0, y su premisa es de las que se entienden en una frase: no shipeamos un agente, el agente ya lo tienes tú instalado.

Ese es el truco. Open Design no trae modelo, no trae loop de agente, no trae suscripción. Detecta el claude, el codex, el cursor-agent o el opencode que ya tienes en el PATH y lo convierte en motor de diseño. Le enchufa skills, plantillas de renderizado y un DESIGN.md con tu marca, y el que trabaja es tu CLI de siempre con tu factura de siempre.

En este post te cuento:

• Qué es Open Design y cómo se ha comido el hueco que dejó Claude Design
• Los 25 agentes con los que funciona de verdad (y el que se cayó por el camino)
• Las 162 skills que trae dentro, agrupadas por familias, con las que realmente merecen la pena
• Cómo encajan los DESIGN.md, las plantillas de renderizado y los 277 plugins
• Cómo instalarlo por los cuatro caminos que ofrece
• Qué me chirría del proyecto, que no es poco

Vamos al lío.

¿Qué es Open Design y por qué ha explotado en tres meses? ¶

Open Design es una aplicación de escritorio local-first, open source y con licencia Apache-2.0, que convierte cualquier agente de código instalado en tu máquina en un motor de diseño. Genera prototipos web, móvil y escritorio, dashboards en vivo, presentaciones, imágenes y vídeo, y los exporta a HTML, PDF, PPTX y MP4. Vive en nexu-io/open-design y la versión actual es la 0.16.1, de julio de 2026.

La comparación obligada es con Claude Design, que ya probé en su momento. Aquella herramienta es excelente en lo suyo, pero está cerrada por los cuatro costados: navegador, suscripción de pago, modelo de Anthropic, skills de Anthropic. No hay self-host, no hay swap de agente, no hay fork.

Open Design coge el mismo bucle mental —descubrir el brief, fijar la dirección, generar el artefacto, criticarlo, entregar— y lo convierte en un sistema de ficheros. Cuatro planos componibles, cada uno un directorio portable y versionable:

Que sean cuatro directorios y no cuatro APIs es lo que hace que esto funcione: cualquiera puede añadir el suyo con un git clone y un cp -r.

Guía interactiva gratis

¿Te suena a chino todo esto de skills, agentes y CLIs?

Antes de instalar Open Design conviene tener claro qué es un modelo, qué es un agente y qué es una skill. El curso-juego te lo asienta en 17 paradas, sin instalar nada y sin tarjeta.

Entra en el curso gratis →

¿Cómo funciona por dentro sin traer su propio agente? ¶

La respuesta corta: con adaptadores que son datos, no código. Y es la decisión de arquitectura más importante del proyecto.

En la mayoría de herramientas de este tipo, soportar un agente nuevo significa escribir una clase con su método run(), su cancel(), su parser. En Open Design un adaptador es un objeto literal. Un fichero .ts que declara qué binario buscar, cómo construir los argumentos de la invocación y en qué formato habla de vuelta. Un motor genérico lee esas declaraciones y hace la detección, el lanzamiento y el parseo para todos por igual.

// El esqueleto de un adaptador (apps/daemon/src/runtimes/defs/)
export const acmeAgentDef: RuntimeAgentDef = {
  id: 'acme',                          // clave única en el registro
  name: 'Acme CLI',
  bin: 'acme',                         // binario a buscar en el PATH
  versionArgs: ['--version'],
  streamFormat: 'claude-stream-json',  // reutiliza un parser existente
  promptViaStdin: true,
  buildArgs: (prompt, imagePaths, extraDirs, opts) => [
    '--output-format', 'stream-json',
  ],
};

La documentación del repo lo dice sin rodeos: añadir un CLI es un cambio de un fichero. Sueltas el defs/<cli>.ts, lo metes en el array del registro y ya lo detecta, lo lanza y lo lee.

🔑 El punto clave: delegan el bucle entero —llamadas al modelo, uso de herramientas, gestión de contexto, permisos, resume, cancel— al CLI que ya tienes. La tesis del repo es que el espacio de agentes de código ya convergió en implementaciones buenas y reimplementar otra es peor que hablar con todas.

Cuando lanzas una generación, el daemon compone las skills seleccionadas en el system prompt y copia el directorio de la skill dentro de tu proyecto, en .od-skills/<nombre>-<hash>/. Copias reales, no symlinks, para que una herramienta que edite el árbol copiado no pueda tocar la skill original. Detalle pequeño, decisión correcta.

¿Con qué agentes puede trabajar Open Design? ¶

Con 25 ejecutables locales distintos, más cualquier endpoint compatible con OpenAI vía BYOK. El registro tiene 26 definiciones, porque una de ellas (byok-opencode) comparte binario con OpenCode.

Esta es la lista real, sacada del código y no del marketing, agrupada por el formato en el que cada uno devuelve el stream:

Nueve de los veinticinco hablan ACP (Agent Client Protocol) sobre JSON-RPC por stdio. Eso significa que si tu agente favorito adopta ACP, entra prácticamente gratis. Es la vía de menor resistencia del ecosistema ahora mismo.

Y aquí va el dato honesto que el README no destaca: Gemini CLI ya no es un adaptador local. La documentación de adaptadores dice que su runtime de generación local fue retirado y que Gemini sigue disponible solo como proveedor BYOK y como destino MCP. Si venías buscando “funciona con Gemini CLI”, funciona, pero no como los demás.

Varios de esos agentes te sonarán de sobra por aquí: Hermes, OpenCode o el propio Codex ya tienen su hueco en el blog. Si andas eligiendo cuál usar, la comparativa de agentes de IA para programar te ahorra un rato.

Instalarlo dentro de tu agente sin abrir la interfaz ¶

Open Design se puede usar sin tocar la GUI. Publica un servidor MCP por stdio y un instalador por agente:

# Una línea, y el MCP queda cableado en la config de ese agente
od mcp install claude
od mcp install codex
od mcp install cursor
od mcp install opencode
# ...también: copilot, openclaw, antigravity, pi, vibe,
#    hermes, cline, kimi, kiro, trae, reasonix, raven

od mcp install claude --print      # dry-run, enseña qué va a escribir
od mcp install claude --uninstall  # quitarlo

A partir de ahí, dentro del agente escribes en lenguaje natural: “usa open-design para generar una landing con el design system de Linear”. Y el CLI expone además comandos directos:

od project list --json
od files list <project-id> --json
od files read <project-id> <ruta-relativa>
od plugin list --json
od skills list --json

Todos aceptan --json, así que se encadenan con jq sin dolor. La gracia de MCP aquí es que el agente lee el fichero vivo, no un export en zip que se queda obsoleto a la primera iteración.

⚠️ Si usas macOS o WSL2, ojo con esto: /usr/bin/od es el comando de sistema octal dump y se come el od de Open Design en el PATH. La app de escritorio tiene un Settings → MCP server que te da el snippet con rutas absolutas. Úsalo y te ahorras media hora de “pero si lo he instalado”.

¿Qué skills incorpora Open Design? ¶

El repositorio trae 162 carpetas en skills/ (el README es conservador y dice “100+”), cada una con su SKILL.md siguiendo la convención de Agent Skills, más assets/ y references/ cuando hacen falta. Y hay una distinción que conviene entender antes de meterse:

• skills/ son skills funcionales: capacidades que el agente invoca para trabajar sobre tu input —auditar, extraer, empaquetar, decidir.
• design-templates/ son plantillas de renderizado: 114 formas concretas de producir un artefacto —una landing, un deck, un vídeo.

La confusión entre ambas cosas es el error clásico al empezar. Si buscas “la skill que me hace un dashboard”, no está en skills/: está en design-templates/dashboard/. Si aún no tienes claro qué es exactamente una skill y en qué se diferencia de un prompt o de un MCP, empieza por Skills para programadores.

Las familias de skills, ordenadas ¶

Las cinco que de verdad usarías ¶

No todas valen lo mismo. Estas son las que justifican instalarlo:

taste-skill es la skill anti-slop. Su descripción lo define bien: “el agente lee el brief, infiere la dirección de diseño correcta y entrega interfaces que no parecen plantillas”. Audita primero cuando es un rediseño y hace una comprobación estricta antes de entregar. Es el antídoto contra el diseño con olor a IA del que ya hemos hablado a propósito de la skill frontend-design.

brand-extract saca un Brand Kit completo de una web en producción conduciendo el navegador integrado. Colores, tipografías, logo. Se apoya en agent-browser para medir de verdad, y —detalle que se agradece— se para y te avisa cuando choca con un muro anti-bot en vez de inventarse los valores.

reference-design-contract es la que convierte el “quiero que se sienta como esto” en algo accionable. Coges capturas, URLs, notas de producto, gusto vago, y sale un DESIGN.md fundamentado más un documento de traspaso a implementación.

impeccable-design-polish es la pasada de pulido posterior: audita, critica, pule, anima y endurece un artefacto HTML que ya existe. Está inspirada en Impeccable, así que si ya conoces esa, sabes exactamente el terreno.

color-expert es la más bestia en volumen: 286.000 palabras de material de referencia sobre OKLCH/OKLAB, generación de paletas, contraste y accesibilidad, nomenclatura de color y teoría histórica. No es una skill que “haga” algo, es una biblioteca que el agente consulta cuando toca decidir un color.

Y una mención aparte para la plantilla critique, que no está en skills/ sino en design-templates/: hace una revisión de diseño en cinco dimensiones —Filosofía, Jerarquía visual, Detalle, Funcionalidad, Innovación— puntuando de 0 a 10 y sacando un informe HTML autocontenido con gráfico de radar y tres listas: mantener, arreglar, victorias rápidas. Su upstream declarado es huashu-design, la skill china de la que ya hablamos aquí. El ecosistema se está canibalizando a sí mismo de la mejor manera posible.

De consumir skills a escribir las tuyas

Crea skills productivas para agentes de IA

Open Design trae 162 skills hechas por otros. Cuando ninguna encaja con tu proyecto, toca escribirla: anatomía del SKILL.md, progressive disclosure para no reventar el contexto y plantillas descargables que funcionan en Claude Code, Copilot, OpenCode y 25+ agentes más.

Ver la guía completa →

Guía premium · Plantillas SKILL.md incluidas

¿Qué pinta el DESIGN.md en todo esto? ¶

El DESIGN.md es el contrato de marca que lee cada render. Open Design trae 151 paquetes de design system en el repositorio, y cambiar de sistema cambia los tokens del siguiente artefacto sin tocar nada más.

Los paquetes antiguos son solo el Markdown. Los nuevos pueden llevar además manifest.json, un tokens.css compilado, componentes de ejemplo, assets y evidencia de procedencia. Sueltas una carpeta en design-systems/<marca>/ y el selector la encuentra.

El catálogo mezcla lo esperable con lo sorprendente:

• IA y LLM: claude, cohere, mistral-ai, elevenlabs, ollama, x-ai
• Herramientas de developer: cursor, vercel, linear-app, supabase, posthog, warp, opencode-ai
• Fintech: stripe, coinbase, revolut, wise, mastercard
• Automoción: tesla, bmw, ferrari, lamborghini, bugatti
• Estilos genéricos: brutalism, neobrutalism, glassmorphism, neumorphism, dithered, pacman, tetris

Si esto te suena, es porque el formato no lo inventaron ellos. Google Labs publicó DESIGN.md como especificación abierta y ya le dedicamos un post entero con su flujo paso a paso. Open Design se apoya en ese estándar en vez de inventarse otro, que a estas alturas es la mejor noticia posible.

💡 Si solo te llevas una cosa de esta sección: el valor no está en los 151 sistemas prefabricados, está en el tuyo. Un DESIGN.md con tu marca en la raíz del repo es lo que hace que el agente deje de improvisar colores en cada generación.

¿Y los plugins? ¿Para qué hacen falta si ya hay skills? ¶

Un plugin es el empaquetado distribuible: una carpeta con open-design.json (metadatos de marketplace, inputs, pipeline y capacidades) más la carga útil que corresponda a su tipo —un SKILL.md si es un flujo de agente, un template.json si es una plantilla de media, un DESIGN.md si es un sistema.

El repo trae 277 plugins oficiales más 183 ejemplos remezclables:

Los dos escenarios que más me interesan son los de migración. od-figma-migration lleva flujos de Figma a React, Next.js o Vue. Y od-code-migration hace algo más ambicioso: le apuntas a un repo de git más un DESIGN.md y te devuelve una PR con tus componentes reales refactorizados al contrato de marca. Eso ya no es generar un mockup, es tocar producción.

Todo tiene paridad entre la interfaz web y el CLI, porque comparten los mismos endpoints /api/plugins:

od plugin search "landing page"
od plugin info od-default
od plugin install od-figma-migration
od plugin apply od-default --input brief="una landing de una página para nuestra ronda seed"

Al construir el tuyo, la declaración de capacidades tiene una decisión de seguridad que merece aplauso: una instalación restringida solo concede prompt:inject por defecto. Si tu plugin necesita más, lo tienes que pedir explícitamente. Es el modelo correcto.

¿Cómo se instala Open Design? ¶

Hay cuatro caminos y no todos sirven para lo mismo.

1. App de escritorio (recomendado, cero configuración). Descarga desde open-design.ai o desde GitHub Releases. macOS en Apple Silicon e Intel, Windows x64, y Linux como AppImage en un carril de release opcional. Al arrancar detecta todos los CLIs de tu PATH y carga las skills, las plantillas y los design systems.

2. Dentro de tu agente, sin interfaz. El od mcp install <agente> que ya hemos visto. Es el camino si vives en la terminal y no quieres otra ventana abierta.

3. Docker. Para servidor propio o para probarlo sin ensuciar la máquina:

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# http://localhost:7456

4. Desde el código. Node ~24 y pnpm 10.33.x:

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

Sobre el modelo de seguridad, que en una herramienta local importa: el daemon escucha en 127.0.0.1 y es de solo lectura por defecto. Exponerlo a la red local exige poner OD_BIND_HOST y OD_ALLOWED_ORIGINS a mano. Y el proxy BYOK bloquea SSRF por destino: rangos privados, link-local, CGNAT y las IP de metadatos de las nubes. Si tienes un gateway interno tipo LiteLLM u Ollama en una 10.x, lo tienes que meter tú en OD_ALLOWED_INTERNAL_HOSTS, host por host, sin comodines ni CIDR.

¿En qué se diferencia de Claude Design, Figma o Lovable? ¶

La diferencia de fondo no es la tabla, es dónde vive el resultado. Claude Design te devuelve un artefacto dentro de su lienzo. Open Design escribe ficheros canónicos en tu proyecto y la previsualización va detrás de esos ficheros. Cuando termina, tienes HTML y CSS reales que puedes arrastrar a Cursor, a Codex o a Claude Code y seguir construyendo como código.

Hay un matiz importante que conviene entender: eso solo pasa en ejecuciones con CLI local y acceso a ficheros. Si usas BYOK contra una API pelada, sin herramientas de sistema de ficheros, lo que recibes es un único bloque <artifact> completo. Mismo resultado visual, flujo de trabajo distinto.

¿Qué me chirría de Open Design? ¶

Toca la parte incómoda, porque 82.900 estrellas no son un certificado de calidad.

El catálogo de skills está inflado. De las 162 carpetas, unas cuantas son envoltorios finísimos y al menos una es directamente un placeholder. ui-ux-pro-max se describe a sí misma como “entrada de solo catálogo; las plantillas, datos y flujo de búsqueda originales no están incluidos en Open Design”. Es decir, la skill está, el contenido no. Cuando veas el número “162”, divídelo mentalmente.

Los design systems de marcas reales son una zona gris. Tener ferrari, apple, nike o stripe como paquetes listos para usar es cómodo para practicar y un problema si generas material comercial con la identidad visual de otro. El repo registra procedencia en design-systems/README.md, pero la responsabilidad de qué publicas es tuya, no suya.

La telemetría no es totalmente opcional. El README es transparente y por eso lo cito: la analítica de producto y la grabación de sesión están sujetas a consentimiento, pero “la telemetría de seguridad y fiabilidad, depurada, está siempre activa”. Para una herramienta que vende privacidad por convicción, “siempre activa” es una frase que hay que leer dos veces.

Es pre-1.0 con 718 issues abiertos. La versión es 0.16.1 y el ritmo de releases es semanal. Eso significa mejoras constantes y también que lo que aprendas hoy puede moverse de sitio en agosto.

Hay barrera de idioma. Varias skills vienen del ecosistema chino y su SKILL.md está entero en chino: web-clone, por ejemplo, es una metodología completa de clonado de webs que solo puedes auditar si lees chino o te fías de la traducción. Ya vimos el mismo caso con huashu-design, y el consejo es idéntico: si no puedes leer lo que le metes al agente, léelo antes con otro agente.

🛡️ Y la de siempre: una skill es texto que entra directo en el contexto de un agente con permisos sobre tu sistema de ficheros. Antes de instalar 162 de golpe, abre las cuatro que vas a usar de verdad y léelas. Ninguna herramienta te va a hacer ese trabajo.

¿Merece la pena instalarlo? ¶

Depende de con qué compares.

Si vienes de Claude Design y lo que te dolía era la suscripción o el encierro en el navegador, sí, sin discusión: mismo modelo mental, tus ficheros, tu agente, tu factura.

Si lo que quieres es una skill suelta que te haga landings bonitas, no. Instalar una app de escritorio con daemon, servidor MCP y cuatro planos componibles para eso es matar moscas a cañonazos: te sirve mejor frontend-design, Impeccable o cualquiera de las mejores skills para agentes.

El punto en el que Open Design gana de calle es el tercero: cuando tienes una marca que respetar y varios entregables distintos que sacar —landing, deck, dashboard, vídeo, imágenes para redes— y quieres que todos salgan del mismo DESIGN.md sin repetirte el brief quince veces. Ahí los cuatro planos dejan de ser arquitectura de folleto y empiezan a ahorrarte horas.

TL;DR ¶

• 🚀 Open Design es la alternativa open source a Claude Design: Apache-2.0, escritorio local-first, 82.900 estrellas en tres meses.
• 🤖 Funciona con 25 CLIs distintos (Claude Code, Codex, Cursor, OpenCode, Copilot, Hermes, Kimi, Qwen, Devin…) porque no trae agente propio: usa el que ya tienes en el PATH.
• 🧰 Trae 162 skills, 114 plantillas de renderizado, 151 design systems en formato DESIGN.md y 277 plugins oficiales.
• ⚡ Se instala en tu agente con un od mcp install <agente> y se usa sin abrir la interfaz gráfica.
• ⚠️ Ojo con tres cosas: el catálogo está inflado, la telemetría de fiabilidad está siempre activa y varias skills vienen sin traducir del chino.

Preguntas frecuentes ¶

¿Open Design es gratis?
Sí. El proyecto es Apache-2.0 y tanto la app de escritorio como el código son gratuitos. Lo que pagas son los tokens del agente o la API que uses por debajo, con tu propia clave (BYOK).

¿Necesito Claude Code para usarlo?
No. Claude Code es la implementación de referencia, pero funciona igual con Codex, Cursor Agent, OpenCode, GitHub Copilot, Hermes, Kimi, Qwen, Devin, Aider y otros hasta 25 ejecutables distintos. También funciona sin ningún CLI, vía el proxy BYOK contra cualquier endpoint compatible con OpenAI.

¿Cuántas skills trae Open Design exactamente?
El directorio skills/ tiene 162 carpetas en la versión 0.16.1, aunque el README declara “100+” de forma conservadora. A eso se suman 114 plantillas de renderizado en design-templates/, que son cosa distinta.

¿Qué diferencia hay entre una skill y una design template?
Las skills funcionales viven en skills/ y aportan comportamiento del agente sobre tu input: auditar, extraer una marca, escribir copy. Las design templates viven en design-templates/ y aportan la forma del entregable: una landing, un deck, un vídeo. Las dos usan SKILL.md, pero alimentan registros diferentes.

¿Funciona con Gemini CLI?
Solo parcialmente. Su runtime de generación local fue retirado y ya no es un adaptador con identificador propio. Gemini sigue disponible como proveedor BYOK y como destino de servidor MCP, pero no se ejecuta como los otros 25 CLIs.

¿Puedo usar mi propio design system en vez de los 151 que trae?
Sí, y es el caso de uso principal. Sueltas una carpeta con tu DESIGN.md en design-systems/<tu-marca>/ y el selector la detecta. Los paquetes más nuevos admiten además manifest.json, tokens.css, componentes y assets.

¿Qué son los HyperFrames?
Es el formato de motion graphics del proyecto: animaciones programáticas escritas en HTML que se renderizan a un MP4 real, por ejemplo a 1920×1080 y 30 fps. Es una de las capacidades que ninguna de las alternativas comparables ofrece.

¿Puede refrescar el diseño de un proyecto que ya existe?
Sí, con el escenario od-code-migration. Le pasas un repositorio de git y un DESIGN.md y el agente refactoriza tus componentes reales para ajustarlos al contrato de marca, devolviendo una pull request. También hay escenarios de migración desde Figma a React, Next.js o Vue.

¿Envía mis datos a algún sitio?
El daemon escucha en 127.0.0.1 y todo se ejecuta en local. La analítica de producto y la grabación de sesión requieren tu consentimiento explícito. La telemetría de seguridad y fiabilidad, depurada, está siempre activa según la documentación oficial del proyecto.

¿Por qué el comando od no me funciona en macOS?
Porque /usr/bin/od es la utilidad de sistema octal dump y gana en el PATH. La solución oficial es abrir la app de escritorio, ir a Settings → MCP server y copiar el snippet específico de tu cliente, que usa rutas absolutas en vez del comando pelado.

Fuentes ¶

• nexu-io/open-design en GitHub — repositorio oficial, README y licencia Apache-2.0
• Documentación de adaptadores de agente — el contrato de los 26 adaptadores y el catálogo por formato de stream
• Releases de Open Design — versión 0.16.1 y notas de publicación
• Claude Design probado — la herramienta cerrada que originó todo esto
• DESIGN.md: diseños con IA basados en reglas — la especificación abierta en la que se apoya
• Skills para programadores — qué son las skills y cómo instalarlas

🧨 Última oportunidad para recibir la dinamita que mereces sobre programación con IA el próximo domingo: Suscríbete gratis a Web Reactiva en https://webreactiva.com/newsletter