Open Design AI: vibe design workspace open source — instalación, uso, planes y contacto (tutorial completo)
¿Qué es Open Design AI?
Open Design AI es el vibe design workspace open source y agéntico que convierte el agente de código que ya usas —Claude Code, Codex, Cursor, Gemini CLI, OpenCode o Qwen— en un motor de diseño cuyo resultado es totalmente tuyo. En lugar de diseñar colocando cada elemento a mano, describes tu intención al agente y Open Design se encarga de generar prototipos, landing pages, dashboards, presentaciones, imágenes y vídeo HTML listos para entregar.
Cuando un LLM demostró por primera vez que podía diseñar de verdad —diseño real, no solo texto—, esa capacidad llegó cerrada, alojada y atada a un modelo propietario. Open Design la abre: local-first, BYOK (Bring Your Own Key) y Apache-2.0. No hay servidor de Open Design: el daemon corre en tu máquina, habla directamente con tu proveedor de IA y los artifacts generados quedan como archivos en tu directorio de proyecto.
El proyecto es mantenido por la comunidad nexu-io en GitHub, con más de 86.1K estrellas, 402 colaboradores, 447+ plugins, 152+ design systems y soporte para 21+ agentes de código.
Características principales
- Local-first: la app desktop, el daemon y el runtime de skills corren en tu máquina. Los artifacts generados quedan en tu directorio de proyecto, no en la nube de ningún vendor.
- BYOK (Bring Your Own Key): usas tus propias claves de API (Anthropic, OpenAI, Google, Mistral, xAI, Moonshot, etc.). Open Design no tiene servidor propio ni te cobra nada.
- Apache-2.0: el código es open source. Puedes hacer fork, editar skills, añadir sistemas DESIGN.md propios o ejecutar el daemon en tus máquinas.
- 21+ agentes soportados: Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Qwen, GitHub Copilot, Grok, Hermes y más adaptadores que hablen el mismo protocolo de skills.
- 132 skills componibles: archivos SKILL.md que definen capacidades de diseño reutilizables y agnósticas al agent.
- 150+ sistemas DESIGN.md: sistemas de diseño portables que mantienen tu marca coherente en cada resultado.
- 447+ plugins: plantillas, skills y sistemas componibles que extienden las capacidades del workspace.
- Memoria de marca: cada elección se sedimenta en un design system para que la siguiente generación se acerque más a lo que quieres.
¿Qué puedes crear con Open Design?
Open Design convierte cada tipo de output en archivos reales y ejecutables, impulsados por tu propio agente de código, listos para entregar o pasar a ingeniería:
| Tipo de output | Descripción |
|---|---|
| Prototipos | Prototipos interactivos navegables con componentes reales |
| Landing pages | Páginas de aterrizaje completas, responsivas y con tu marca |
| Dashboards | Paneles de control con datos simulados o reales |
| Slides / Presentaciones | Diapositivas en HTML exportables a PPT |
| Imágenes | Generación de imágenes fieles a tu sistema de diseño |
| Vídeo HTML | Vídeos animados en HTML, sin software de edición |
| Live Artifacts | Artefactos vivos que puedes editar y iterar |
| HyperFrames | Frames interactivos con animaciones y transiciones |
Requisitos del sistema
| Requisito | Detalle |
|---|---|
| Node.js | versión 24 o superior |
| pnpm | gestor de paquetes (incluido con Node via corepack) |
| git | para clonar el repositorio |
| Agente de código | al menos uno: Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Qwen u otro adaptador soportado |
| Claves de API | BYOK: necesitas las claves del proveedor que elijas (Anthropic, OpenAI, Google, etc.) |
| macOS | 11 Big Sur o posterior (Apple Silicon e Intel) |
| Windows | 10 u 11 (x64) |
| Linux | AppImage o Docker / Podman Compose |
Instalación
Opción 1: App de escritorio (recomendada)
La forma más sencilla de empezarzar es descargar la app de escritorio nativa. La versión actual es v0.19.1.
macOS — Apple Silicon
# Descargar DMG (290 MB)
# https://releases.open-design.ai/stable/versions/0.19.1/open-design-0.19.1-mac-arm64.dmgmacOS — Intel
# Descargar DMG (301 MB)
# https://releases.open-design.ai/stable/versions/0.19.1/open-design-0.19.1-mac-x64.dmgWindows
# Descargar instalador (315 MB)
# https://releases.open-design.ai/stable/versions/0.19.1/open-design-0.19.1-win-x64-setup.exeLinux
# AppImage y Docker / Podman Compose disponibles en GitHub Releases
# https://github.com/nexu-io/open-design/releases/tag/open-design-v0.19.1Opción 2: Instalación desde el código fuente (CLI)
Si prefieres la terminal o quieres contribuir al proyecto:
# 1. Clonar el repositorio
git clone https://github.com/nexu-io/open-design
cd open-design
# 2. Instalar dependencias
pnpm install
# 3. Iniciar el daemon y la web UI
pnpm tools-devEl daemon arrancará en http://127.0.0.1:17456 y la web UI en http://127.0.0.1:17573. El startup completo toma aproximadamente 1.4 segundos.
Opción 3: Instalación headless (modo agente)
Si ya tienes un agente de código funcionando y solo necesitas el runtime de skills:
# Instalar el CLI de Open Design
npm install -g @open-design/cli
# Iniciar el daemon en segundo plano
od daemon start
# Ejecutar una skill directamente
od skill run open-design-landing --output ./artifact.htmlConfiguración inicial
1. Conectar tu agente de código
Open Design detecta automáticamente los agentes instalados en tu máquina. Si ya tienes Claude Code, Codex, Cursor, Gemini CLI, OpenCode o Qwen configurados, Open Design los conecta sin configuración adicional.
Para especificar un agente manualmente:
# Configurar el agente por defecto
od config set agent claude-code
# O alternar entre agentes en cualquier momento
od config set agent codex
od config set agent cursor
od config set agent gemini-cli
od config set agent opencode
od config set agent qwen2. Configurar tus claves de API (BYOK)
Open Design no tiene servidor propio. Necesitas configurar las claves del proveedor que vas a usar:
# Anthropic (Claude)
export ANTHROPIC_API_KEY=sk-ant-xxxxx
# OpenAI (GPT)
export OPENAI_API_KEY=sk-xxxxx
# Google (Gemini)
export GOOGLE_API_KEY=xxxxx
# O configúralas en el archivo .env del proyecto
echo "ANTHROPIC_API_KEY=sk-ant-xxxxx" >> .envSolo tu prompt y el contexto de skills van al proveedor cuyas claves aportas. Los artifacts generados quedan como archivos en tu directorio de proyecto.
3. Crear tu sistema de diseño (DESIGN.md)
El sistema de diseño es lo que mantiene tu marca coherente en cada resultado. Puedes crearlo desde cero o extraerlo desde Figma:
# Extraer marca desde una captura o export de Figma
od brand extract --from screenshot.png --output design-systems/my-brand/
# O crear un DESIGN.md manualmente
od brand init --name "Mi Marca"
# Esto crea design-systems/my-brand/DESIGN.mdUna vez guardado en design-systems/<your-brand>/, cada skill renderiza en esa marca sin re-promptear.
Uso: tu primer proyecto
Crear una landing page
# Ejecutar la skill de landing page
od skill run open-design-landing --output ./artifact.html
# Con un sistema de diseño específico
od skill run open-design-landing --design-system my-brand --output ./landing.htmlCrear un prototipo interactivo
# Generar un prototipo navegable
od skill run open-design-prototype --output ./prototype.htmlCrear una presentación (slides)
# Generar diapositivas en HTML
od skill run open-design-slides --topic "Mi presentación" --output ./slides.html
# Exportar a PPT
od export ppt ./slides.html --output ./presentation.pptxCrear un dashboard
# Generar un panel de control
od skill run open-design-dashboard --output ./dashboard.htmlCrear vídeo HTML
# Generar un vídeo animado en HTML
od skill run open-design-video --output ./video.htmlFlujo de trabajo: de la idea al artifact
Open Design sigue un flujo estructurado de cuatro etapas:
- Elegir un punto de partida: selecciona una plantilla (prototype, landing, slides, dashboard, image, video) o parte de un proyecto existente.
- Definir la dirección visual: describe el estilo, colores, tipografía y referencias. Si tienes un DESIGN.md, se aplica automáticamente.
- Generar el artifact: el agente ejecuta la skill, produce el archivo HTML y lo guarda en tu directorio.
- Entregar o crear un vídeo: exporta el resultado o genera un vídeo HTML del artifact para presentaciones.
Cada etapa es iterativa, visual y basada en investigación: archivos componibles en lugar de prompts opacos. La memoria del sistema acumula preferencias para que la siguiente generación se acerque más a lo que quieres.
Skills y Plugins
Las skills son archivos SKILL.md que definen capacidades de diseño reutilizables. Son agnósticas al agent: el mismo SKILL.md renderiza con Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Grok, Hermes, Qwen o cualquier otro adaptador soportado.
Los plugins extienden Open Design con plantillas, skills y sistemas:
- Plantillas: puntos de partida predefinidos (prototype, live artifact, slides, image, hyperframes, video)
- Skills: capacidades componibles que el agente ejecuta
- Sistemas: design systems DESIGN.md portables y reutilizables
# Listar skills disponibles
od skill list
# Instalar un plugin
od plugin install @open-design/plugin-tailwind
# Crear una skill personalizada
od skill create --name "mi-skill" --template blankPlanes y precios
Open Design es 100% gratuito. No existe una suscripción de Open Design ni un plan de pago. El producto es Apache-2.0 y se ejecuta en tu máquina.
| Concepto | Costo |
|---|---|
| Open Design (app desktop + CLI + daemon) | Gratis (Apache-2.0) |
| Skills, plugins y design systems | Gratis (comunidad) |
| Servidor de Open Design | No existe (local-first) |
| Soporte de la comunidad | Gratis (Discord + GitHub) |
Lo que sí pagas son los costos de API del proveedor de IA que elijas (BYOK):
| Proveedor | Modelo | Precio aprox. (input/output por millón de tokens) |
|---|---|---|
| Anthropic | Claude Opus 4.7 | $15 / $75 |
| Anthropic | Claude Sonnet 4.5 | $3 / $15 |
| OpenAI | GPT-5.6 | $2 / $6 |
| Gemini 2.5 Pro | $1.25 / $5 | |
| Gemini 2.5 Flash | $0.075 / $0.30 | |
| Moonshot | Kimi K2.6 | $0.55 / $2.10 |
| Alibaba | Qwen3.6-Plus | $0.50 / $1.50 |
Los precios anteriores son referenciales y pueden variar. Al ser BYOK, facturación va directamente a tu cuenta del proveedor. Open Design no intermediación ni margen.
Open Design vs. Claude Design
| Característica | Open Design | Claude Design |
|---|---|---|
| Licencia | Apache-2.0 (open source) | Propietario (cerrado) |
| Ubicación | Local-first (tu máquina) | Alojado (nube de Anthropic) |
| Modelos | BYOK: cualquier proveedor | Solo modelos de Anthropic |
| Agentes | 21+ (Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen...) | Solo Claude |
| Artifacts | Archivos en tu directorio | Documentos en servidor de Anthropic |
| Design systems | DESIGN.md portables y compartibles | No portables |
| Precio | Gratis (pagas API del proveedor) | Incluido en suscripción de Claude |
| Autoalojamiento | Sí (fork, daemon on-prem) | No |
| Comunidad | 86.1K+ estrellas, 402 colaboradores | Cerrado |
Alternativas y comparación
Open Design se compara con varias herramientas de diseño con IA:
- Claude Design: alternativa directa. Open Design es la versión open source y local-first.
- Figma: herramienta de diseño tradicional. Open Design genera desde Figma exports vía DESIGN.md.
- Lovable: app builder con IA. Open Design es más flexible y local.
- Bolt: full-stack AI builder. Open Design se enfoca en diseño, no en backend.
- v0: generador de UI de Vercel. Open Design es agnóstico al framework.
- Framer: web builder visual. Open Design genera código real y editable.
Cómo contactar a Open Design
Comunidad y soporte
| Canal | URL |
|---|---|
| GitHub (repo principal) | github.com/nexu-io/open-design |
| Discord (comunidad) | discord.gg/mHAjSMV6gz |
| Sitio oficial | open-design.ai/es |
| Descargas | open-design.ai/es/download |
| Inicio rápido | open-design.ai/es/quickstart |
| Blog | open-design.ai/es/blog |
| Tutoriales | open-design.ai/es/tutorials |
| FAQ | open-design.ai/es/faq |
| Acerca de | open-design.ai/es/about |
| Empleo | open-design.ai/es/careers |
| Privacidad | open-design.ai/es/privacy |
| Términos | open-design.ai/es/terms |
Cómo contactarlo a una IA
Si quieres usar Open Design con un asistente de IA (como ChatGPT, Claude o Gemini), puedes hacerlo de varias maneras:
- Conectar Open Design a tu agente de código: Open Design se integra nativamente con 21+ agentes. Si usas Claude Code, Codex, Cursor o Gemini CLI, Open Design los detecta automáticamente y los convierte en motores de diseño.
- Preguntar a una IA sobre Open Design: copia la URL del repo (
https://github.com/nexu-io/open-design) o del sitio (https://open-design.ai/es/) y pégala en ChatGPT, Claude o Gemini para que la IA lea la documentación y te ayude con la instalación o el uso. - Usar Open Design desde tu agente de código: una vez instalado, simplemente describe lo que quieres crear en lenguaje natural dentro de tu agente (Claude Code, Codex, etc.) y Open Design ejecutará la skill correspondiente.
- Discord con bots de IA: la comunidad de Discord (discord.gg/mHAjSMV6gz) tiene canales donde puedes preguntar y recibir ayuda, incluyendo respuestas asistidas por IA.
Seguridad y privacidad
Open Design es local-first por diseño. Esto significa:
- Tus datos no se envían a Open Design: no hay servidor de Open Design. El daemon habla directamente con tu proveedor de IA.
- Solo tu prompt y el contexto de skills van al proveedor cuyas claves aportas (BYOK).
- Los artifacts generados quedan como archivos en tu directorio de proyecto, no en la nube de ningún vendor.
- Puedes autoalojarlo: el daemon corre donde corra Node 24. Puedes fijarlo en una máquina de tu red y apuntar ahí la CLI de cada desarrollador.
- Puedes hacer fork: el código es Apache-2.0. Puedes auditarlo, modificarlo y ejecutar tu propia versión.
Roadmap
El roadmap vivo está en docs/roadmap.md del repo de GitHub, con notas de versión semanales por GitHub Releases. Los grandes temas del próximo trimestre:
- Más adaptadores de agents
- Familias de plantillas más ricas (3D, vídeo, audio)
- Modo opcional de daemon compartido para equipos de diseño
Conclusión
Open Design AI representa un cambio de paradigma en el diseño con IA: en lugar de cerrar la capacidad de diseño en un producto alojado y atado a un solo proveedor, la abre como software libre. Es gratis, local-first, BYOK y Apache-2.0. Si ya usas Claude Code, Codex, Cursor o cualquier otro agente de código, Open Design los convierte en un motor de diseño completo sin costo adicional.
Para empezar, descarga la app desde open-design.ai/es/download o clona el repo desde GitHub. La comunidad está activa en Discord y las releases semanales salen por GitHub Releases.