Open Design: la alternativa de código abierto a Claude Design

⚡ Open Design Cloud — el servicio de modelos oficial. Una sola recarga para usar GPT, Claude, Gemini y DeepSeek dentro de Open Design: más de 20 modelos insignia, cero configuración, facturación por uso real de tokens. Probar Open Design Cloud

🏅 El programa Open Design Fellow ya está abierto. Si tú también crees que el diseño debe ser abierto, conviértete en Open Design Fellow, da forma al producto junto al equipo principal y ayuda a que más personas participen en definir el futuro del diseño. Detalles → MAINTAINERS.md y Discord.

Sitio web · Descargar · Open Design Cloud · Discord · Sigue a @OpenDesignHQ

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

Qué es Open Design

🎨 La alternativa de código abierto y local-first a Claude Design. 🖥️ App de escritorio nativa para macOS y Windows. ⚡ Más de 100 skills funcionales + catálogo independiente de plantillas de renderizado · ✨ 151 paquetes de sistemas de diseño · 📦 277 plugins listos para usar. 🖼️ Genera prototipos web · escritorio · móvil, dashboards / artefactos en vivo, presentaciones, imágenes, video, además de gráficos en movimiento con HyperFrames. 🔒 Vista previa en iframe en entorno aislado · exportación a HTML / PDF / PPTX / MP4. 🤖 Funciona sobre Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity y 25 ejecutables CLI locales distintos, o cualquier endpoint compatible con OpenAI mediante BYOK.

Open Design es lo que obtienes cuando ese bucle deja de estar cerrado y se convierte en un sistema de archivos de skills funcionales, plantillas de renderizado, sistemas de diseño y plugins que tus agentes pueden leer, escribir y remezclar.

También es la alternativa a Figma para la era de los agentes: en lugar de empujar píxeles en un lienzo, entrega artefactos de una sola página en CSS real, fuentes reales, componentes reales, exportados directamente a HTML / PDF / PPTX / MP4 — ya moldeados por tu sistema de diseño, ya ejecutables dentro del agente que usas cada día.

Recorrido por el producto

Un vistazo rápido a qué es Open Design y qué hace. Comienza en Home, orquesta flujos de trabajo recurrentes con Automation, destila un contrato de marca en Design System y amplía con Plugins e integraciones; dentro del Studio de cualquier proyecto, el mismo sistema de diseño produce prototipos, artefactos en vivo, HyperFrames, presentaciones e imágenes.

Páginas principales

_{Home — el punto de entrada general. Elige un skill y un sistema de diseño, escribe el brief y pon todo en marcha desde un solo lugar.}

_{Automation — orquesta flujos de diseño repetitivos en automatizaciones reutilizables y programables.}	_{Design System — destila el DESIGN.md de tu equipo en un contrato de marca que da forma a cada salida.}
_{Plugin — explora, instala y distribuye plugins de flujo de trabajo para ampliar la generación bajo demanda.}	_{Integrations — conecta sistemas externos y herramientas MCP, y usa Open Design desde cualquier IDE, script o automatización.}

Studio — muchos tipos de artefactos en un proyecto

Dentro del Studio de un proyecto, el mismo sistema de diseño produce múltiples tipos de artefactos:

_{Prototype — artefactos HTML de una sola página que leen tu sistema de diseño y se renderizan en un iframe en entorno aislado, con vista previa instantánea y descargables como código fuente.}	_{HyperFrame — movimiento programático y gráficos animados, renderizados a un MP4 real (p. ej. 1920×1080 · 30fps).}
_{Deck — presentaciones de pitch que puedes recorrer página a página, navegar con el teclado y exportar a PPTX / PDF.}	_{Image — imágenes y recursos visuales de calidad de marca, con generación y descarga en alta resolución.}

Compatibilidad de plataformas

Open Design se distribuye como skills, una CLI y un servidor MCP que los agentes de codificación más populares consumen de forma nativa. Una vez instalado OD, un único od mcp install <agent> conecta el servidor MCP a la configuración de ese agente, y llamas a las mismas herramientas desde dentro de cualquier agente.

Agente de codificación / plataforma	Estado	Instalación del servidor MCP en una línea
Claude Code	✅ Compatible	`od mcp install claude`
Codex CLI	✅ Compatible	`od mcp install codex`
DeepSeek Reasonix	✅ Compatible	`od mcp install reasonix`
Raven	✅ Compatible	`od mcp install raven`
Cursor	✅ Compatible	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Compatible	`od mcp install copilot`
GitHub Copilot CLI	✅ Compatible	`od mcp install copilot`
OpenCode	✅ Compatible	`od mcp install opencode`
OpenClaw	✅ Compatible	`od mcp install openclaw`
Antigravity	✅ Compatible	`od mcp install antigravity`
Cline	✅ Compatible	`od mcp install cline`
Trae	✅ Compatible	`od mcp install trae`
Kimi CLI	✅ Compatible	`od mcp install kimi`
Kiro	✅ Compatible	`od mcp install kiro`
Pi Agent	✅ Compatible	`od mcp install pi`
Mistral Vibe CLI	✅ Compatible	`od mcp install vibe`
Hermes Agent	✅ Compatible	`od mcp install hermes`

od mcp install <agent> --print para una vista previa en seco · --uninstall para eliminar · lista completa con od mcp install --help.

¿No tienes una CLI instalada? El proxy BYOK en POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream te da el mismo bucle (sin crear procesos): pega baseUrl + apiKey + model, con soporte para OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM o cualquier endpoint compatible con OpenAI. La protección SSRF por destino bloquea IPs internas / link-local / CGNAT en el borde del daemon.

Las definiciones de runtime viven en apps/daemon/src/runtimes/defs/ y se registran en runtimes/registry.ts. Solo hace falta un parser nuevo para un formato de cable nuevo — consulta docs/agent-adapters.md.

Demo

Cuatro categorías principales de producto, todas renderizadas por un agente de codificación que se ejecuta en tu laptop. Haz clic en una miniatura para ver el ejemplo real.

1 · Prototipos — web · escritorio · móvil

La superficie de salida por defecto. Artefactos HTML de una sola página que leen tu DESIGN.md y se renderizan en un iframe en entorno aislado.

_{Vista de entrada — elige un skill, elige un sistema de diseño, escribe el brief. Una sola superficie para prototipos, dashboards, presentaciones, apps móviles y páginas de revista.}	_{Prototipo móvil — chrome de iPhone 15 Pro con precisión de píxel, flujos multipantalla. El agente nunca redibuja el marco del teléfono; los marcos de dispositivo compartidos viven en assets/frames/.}
_{Prototipo web — un dashboard editorial con barras de desplazamiento, KPIs y gráficos. Renderizado directamente desde design-templates/dating-web/.}	_{Prototipo de app móvil — un flujo gamificado de tres pantallas con cintas de XP y detalle de misiones. Entrégalo directamente a Cursor / Codex / Claude Code para convertirlo en React/Next/Vue.}

2 · Artefactos y dashboards en vivo

Dashboards en vivo, salas de decisión, muros de KPI — artefactos de una sola página que extraen datos a través de un panel de ajustes y permanecen editables en el sitio.

_{Dashboard en vivo — un muro de KPI editable cuyo panel de ajustes expone los parámetros que vale la pena modificar. El agente emite un manifiesto y el iframe se vuelve a renderizar sin recargar.}	_{Sala de decisión — un artefacto de briefing multifuente para reuniones de producto / investigación / operaciones.}
_{Dashboard estilo GitHub — métricas del repo presentadas como un artefacto en vivo.}	_{Plantilla de dashboard en vivo Flow — una plantilla de KPI específica de un dominio, con marca aplicada a través del DESIGN.md activo.}

3 · Presentaciones — presentaciones tipo revista, actualizaciones semanales, pitches

_{Modo presentación (guizang-ppt) — diseños tipo revista, hero WebGL, checklists P0/P1/P2. Empaquetado textualmente desde op7418/guizang-ppt-skill con su licencia original preservada.} _{Presentación estilo Swiss International — anclada a una cuadrícula, con acentos monocromáticos. Una de las 15 plantillas de presentación y 36 temas bajo design-templates/html-ppt-*/.}

Cada presentación se exporta a HTML (un solo archivo, recursos incorporados), PDF (impresión del navegador, consciente de la presentación), PPTX (skill impulsado por el agente), ZIP (archivo comprimido) o Markdown.

4 · Imágenes — `gpt-image-2`, ImageRouter, API personalizada

_{Mapa gastronómico ilustrado de una ciudad
Póster de viaje editorial dibujado a mano}

_{Escena cinematográfica de ascensor
Toma editorial de un solo fotograma}

_{Retrato cyberpunk
Avatar de perfil — rostro con texto de neón}

_{Escalera de piedra 3D
Infografía de piedra tallada}

_{Retrato glamuroso
Toma editorial de estudio}

93 prompts listos para replicar viven en prompt-templates/ — miniaturas de vista previa, cuerpo completo del prompt, modelo objetivo, relación de aspecto y atribución de origen. Un clic deja un brief en el compositor.

5 · Video y HyperFrames — gráficos en movimiento agent-native

HyperFrames es el framework de video de código abierto y agent-native de HeyGen, integrado como ciudadano de primera clase en Open Design. El agente escribe HTML + CSS + GSAP, y HyperFrames lo renderiza a un MP4 determinista mediante Chrome headless + FFmpeg. Combínalo con Seedance 2.0 para t2v / i2v cinematográfico, Veo 3 / Sora 2 / Kling 2 para variantes de modelo enrutadas, y Suno v5 / Lyria 2 para la capa de audio.

_{Promo de producto SaaS de 30s · 16:9 · revelaciones 3D de UI}	_{Talking-head de karaoke para TikTok · 9:16 · TTS + subtítulos sincronizados por palabra}	_{Sizzle reel de marca de 30s · 16:9 · tipografía cinética reactiva al audio}	_{Carrera de gráfico de barras · 16:9 · infografía de datos estilo NYT}
_{Mapa de vuelo · 16:9 · revelación de ruta estilo Apple}	_{Outro de logo cinematográfico de 4s · 16:9 · ensamblaje pieza a pieza + bloom}	_{Contador de dinero $0 → $10K · 9:16 · hype estilo Apple}	_{Sitio web a video · 16:9 · captura el sitio en 3 viewports}

11 plantillas de HyperFrames + 39 prompts de Seedance se incluyen en el repo. Miniaturas del catálogo © HeyGen; el framework es Apache-2.0. El flujo de renderizado específico de OD (caché de composición, solución alternativa de sandbox-exec, MP4-como-chip) se detalla en design-templates/hyperframes/.

Por qué Open Design

En abril de 2026, Anthropic lanzó Claude Design — la primera vez que un LLM dejó de escribir prosa y empezó a entregar artefactos de diseño directamente. Se volvió viral. Pero permaneció de código cerrado, solo de pago, solo en la nube, atado al modelo de Anthropic, a los skills de Anthropic, a la superficie de Anthropic. Sin checkout, sin self-host, sin despliegue en Vercel, sin posibilidad de cambiar a tu propio agente.

Open Design (OD) es la alternativa de código abierto. El mismo bucle, el mismo modelo mental centrado en el artefacto, sin nada del lock-in:

🤖 Agent-native, agnóstico al modelo. No distribuimos un agente. Los claude / codex / cursor-agent / copilot / hermes / kimi que ya están en tu PATH son el motor de diseño. Cámbialos con un clic.
🧠 Calidad de marca por defecto. Cada render lee el DESIGN.md del paquete activo como contrato central de marca. El repo incluye 151 paquetes de sistemas de diseño; los paquetes heredados pueden contener solo DESIGN.md, mientras los nuevos pueden añadir manifest.json, tokens.css, componentes, assets y procedencia. Suelta una carpeta y el selector la encuentra.
🖥️ Local-first, BYOK en cada capa. Las apps de escritorio nativas siguen siendo local-first, sin ida y vuelta a la nube. Antes de describir rutas de datos del daemon, DEBES leer AGENTS.md en la raíz, sección Daemon data directory contract.
🌍 Componible en cuatro planos. Los plugins llevan workflows · los skills funcionales llevan comportamiento del agente · las plantillas de diseño llevan planos de renderizado · los sistemas de diseño llevan la marca.
🔁 Renueva una base de código existente. Entrégale un repo git + DESIGN.md al agente y refactoriza tus componentes reales según la especificación de marca. Plugins dedicados migran flujos de Figma / Pencil a código React / Next.js / Vue.
🔒 Privacidad por convicción. Todo se ejecuta donde viven tus datos — tu laptop, el servidor de tu equipo, tu proyecto de Vercel. Cuando se necesita la red, el proxy BYOK está protegido contra SSRF.

Comparación

	Claude Design	Figma	Lovable / v0 / Bolt	Open Design
Código abierto	❌	❌	❌	✅ Apache-2.0
Self-host / escritorio	❌	❌	❌	✅ macOS + Windows + Docker
Agent-native (se ejecuta en tu CLI)	Solo Anthropic	❌	Solo agente en la nube	✅ 25 CLIs + BYOK
`DESIGN.md` de calidad de marca	Propietario	JSON de tema	Tokens limitados	✅ 151 sistemas incluidos
Skills / plugins / plantillas	Cerrado	Tienda de plugins	Cerrado	✅ Más de 100 skills funcionales · catálogo separado de plantillas de renderizado · 277 plugins
HyperFrames (HTML→MP4)	❌	❌	❌	✅ De primera clase
Renovar un repo existente a la marca	❌	❌	❌	✅ vía agente + `DESIGN.md`
Facturación mínima	Pro / Max / Team	Pro / Org	Pro / Team	BYOK · cualquier endpoint compatible

Inicio rápido

🖥️ Descarga la app de escritorio (recomendado — cero configuración)

La forma más rápida de usar Open Design. Sin Node, sin pnpm, sin clonar.

macOS (Apple Silicon · Intel x64) → open-design.ai o GitHub Releases
Windows (x64) → open-design.ai o GitHub Releases
Linux (AppImage, vía opcional) → GitHub Releases

Tras la instalación: la app detecta automáticamente cada CLI de agente de codificación en tu PATH, carga más de 100 skills funcionales, el catálogo separado de plantillas de renderizado y 151 paquetes de sistemas de diseño, y te deja escribir un brief en la vista de entrada.

🤖 Instálalo en tu agente de codificación (sin UI)

Puedes usar Open Design sin abrir nunca la GUI — llámalo como skill, plugin o servidor MCP dentro de Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi y más.

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
#         | pi | vibe | hermes | cline | kimi | kiro | trae | opencode

Luego, dentro del agente:

> Use open-design to generate a landing page with the Linear design system

En una ejecución CLI local con sistema de archivos, el agente combina el skill funcional o la plantilla elegida con tu DESIGN.md, escribe los archivos canónicos y Open Design los previsualiza. Una ejecución BYOK/API sin herramientas de archivos devuelve un único bloque <artifact> completo.

🐳 Ejecútalo con Docker

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
# open http://localhost:7456

🚀 Despliega en Sealos

La plantilla de Sealos App Store ejecuta la imagen Docker publicada de Open Design con almacenamiento persistente para el espacio de trabajo y Basic Auth en el proxy público. Para despliegues Docker públicos o compartidos personalizados, sigue la guía de proxy inverso y OPEN_DESIGN_ALLOWED_ORIGINS en deploy/README.md.

🧑‍💻 Ejecútalo 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 que imprime tools-dev; los puertos de desarrollo se asignan dinámicamente salvo que indiques flags de puerto.

Node ~24, pnpm 10.33.x. Usuarios de Windows, consulten docs/windows-troubleshooting.md. Inicio rápido completo, variables de entorno, Nix flake y flujo de compilación empaquetada → QUICKSTART.md.

Un flujo de trabajo completo — del brief al artefacto

brief → plugin → dirección → sistema de diseño → artefacto → entrega → memoria

Un PM envía un brief. El selector de plugins ofrece landing page · pitch deck · dashboard · publicación social · spec de PM · scorecard de OKR…
Un diseñador (o el agente) fija la dirección. ¿Sin marca? Elige entre 5 direcciones curadas. ¿Tienes una marca? Suelta una captura / URL → el agente conecta con GitHub, importa de Figma y codifica un DESIGN.md reutilizable.
El agente crea la primera entrega. Las ejecuciones CLI con filesystem escriben archivos canónicos; las ejecuciones BYOK/API sin herramientas de archivos devuelven un bloque <artifact> completo.
Entrega a ingeniería. El artefacto es HTML/CSS real — suéltalo en Cursor, Codex o Claude Code para seguir construyendo como código. O exporta PPTX / PDF / MP4 directamente a marketing.
Open Design se vuelve más inteligente conforme lo usas. Tus capturas, fuentes, paletas y artefactos confirmados se acumulan como valores por defecto para la próxima sesión. Menos retrabajo, menos deriva.

Usa Open Design desde tu agente de codificación

Open Design distribuye un servidor MCP por stdio y scripts de instalación por agente. Cualquier agente compatible con MCP en otro repo puede leer archivos de tus proyectos locales de Open Design directamente — tokens CSS, componentes JSX, HTML de entrada — como una API estructurada consultable por nombre. El agente siempre ve el archivo en vivo, no una exportación obsoleta.

# One-line install (16+ CLIs supported):
od mcp install <agent>

# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

¿Por qué MCP? Exportar y volver a adjuntar un zip en cada iteración rompe el flujo. MCP expone la fuente de diseño directamente — el agente siempre ve el archivo en vivo.

Para un agente que empieza desde cero, el instalador coloca ~/.config/<agent>/open-design.json (o el equivalente de la plataforma) más un fragmento MCP para copiar y pegar. Cursor obtiene un deeplink de un clic; Claude Code obtiene un comando claude mcp add-json de una línea; cada otro agente obtiene JSON en el esquema que su configuración espera. Flujo completo por agente → Settings → MCP server en la app de escritorio, o docs/agent-adapters.md.

Modelo de seguridad. De solo lectura por defecto, el daemon se enlaza a 127.0.0.1 y el SSRF se bloquea en el borde del proxy. La exposición a la LAN requiere un OD_BIND_HOST explícito más OD_ALLOWED_ORIGINS. Las credenciales de conectores y las rutas de vista previa de artefactos en vivo permanecen solo en loopback independientemente de ello.

Skills y plantillas de diseño

Más de 100 skills funcionales viven en skills/ y proporcionan comportamiento, referencias o utilidades reutilizables. Los starters renderizables viven por separado en design-templates/ y aparecen en el catálogo de plantillas, no en el registro de skills funcionales.

Dos modos anclan el catálogo de plantillas: prototype y deck; otras plantillas cubren image, video, audio y superficies utility.

Plantilla de diseño	Modo	Escenario	Qué produce
`web-prototype`	prototype	design	Landing page / hero por defecto
`saas-landing`	prototype	marketing	Hero / características / precios / CTA
`dashboard`	prototype	operation	Admin / analítica (con barra lateral)
`mobile-app`	prototype	design	App enmarcada en iPhone 15 Pro / Pixel
`mobile-onboarding`	prototype	design	Flujo de splash · propuesta de valor · inicio de sesión
`social-carousel`	prototype	marketing	Carrusel de 3 tarjetas 1080×1080
`email-marketing`	prototype	marketing	Email de marca con respaldo seguro en tablas
`magazine-poster`	prototype	marketing	Diseño de revista de una sola página
`motion-frames`	prototype	marketing	Hero de movimiento CSS en bucle
`sprite-animation`	prototype	marketing	Explicación animada en píxeles de 8 bits
`pm-spec`	prototype	product	Documento de spec de PM (con TOC + registro de decisiones)
`team-okrs`	prototype	product	Scorecard de OKR
`eng-runbook`	prototype	engineering	Runbook de incidentes
`finance-report`	prototype	finance	Resumen financiero ejecutivo
`hr-onboarding`	prototype	hr	Plan de onboarding por rol
`guizang-ppt`	deck	marketing	PPT web estilo revista (presentación por defecto)
`html-ppt-*`	deck	marketing	15 plantillas de presentación × 36 temas (plantilla maestra en `design-templates/html-ppt/`)
`hyperframes`	video	marketing	Gráficos en movimiento HTML → MP4 (framework OSS de HeyGen)
`critique`	utility	design	Hoja de puntuación de autocrítica de cinco dimensiones
`tweaks`	utility	design	Manifiesto de panel de ajustes emitido por IA

Protocolo y división de directorios → docs/skills-protocol.md. Endpoints: GET /api/skills para skills funcionales y GET /api/design-templates para plantillas.

Sistemas de diseño

151 paquetes de sistemas de diseño centrados en DESIGN.md vienen con el repo. Los paquetes heredados pueden contener solo ese contrato Markdown; los nuevos también pueden incluir manifest.json, tokens.css compilado, fixtures, assets y evidencia de procedencia. El catálogo combina sistemas derivados de upstream con aportes propios; design-systems/README.md documenta la forma y procedencia.

Catálogo completo (haz clic para expandir)

AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Developer Tools — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

Productivity — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-commerce — shopify · airbnb · uber · nike · starbucks · pinterest

Media — spotify · playstation · wired · theverge · meta

Automotive — tesla · bmw · ferrari · lamborghini · bugatti · renault

Other — apple · ibm · nvidia · vodafone · resend · spacex

Starters — default (Neutral Modern) · warm-editorial

Vuelve a importar la biblioteca con scripts/sync-design-systems.ts. Añade tu propia marca → suelta un DESIGN.md en design-systems/<brand>/. Guía completa → design-systems/README.md.

Plugins

277 plugins oficiales y 183 ejemplos remezclables viven en plugins/_official/. Cada entrada es un directorio portátil anclado por open-design.json y el payload de su tipo: SKILL.md para workflows, template.json para plantillas multimedia o DESIGN.md para sistemas de diseño.

Categoría	Cantidad	Contenido
`scenarios/`	13	Escenarios de diseño completos — `od-default`, `od-design-refine`, `od-figma-migration`, `od-code-migration`, `od-react-export`, `od-nextjs-export`, `od-vue-export`, `od-media-generation`, `od-new-generation`, `od-tune-collab`, `od-plugin-authoring`, `od-share-to-community`, `od-web-effect-extractor`
`image-templates/`	45	Prompts de imagen de una sola toma — editorial, cinematográfico, producto, retrato
`video-templates/`	63	Plantillas de movimiento HyperFrames / Seedance / Veo
`design-systems/`	143	`DESIGN.md` de marca empaquetados como plugins
`atoms/`	13	Fragmentos de UI reutilizables (botones, heroes, tarjetas de KPI)
`examples/`	183	Salidas de referencia remezclables

También plugins/community/ para plugins de la comunidad y plugins/registry/ para el flujo de publicación.

Qué pueden hacer los plugins

🤖 Ejecutarse en cualquier agente de codificación — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… a través del mismo protocolo de skills que el agente ya conoce.
🔁 Migrar flujos de trabajo de Figma / Pencil → código fuente React, Next.js o Vue. Consulta od-figma-migration.
🛠️ Renovar una base de código existente a una especificación de marca — apunta un plugin a un repo git + DESIGN.md, obtén un PR. Consulta od-code-migration.
💾 Persistir flujos de trabajo personalizados — las plantillas reutilizables de tu equipo conviven junto a las incluidas.

Usar plugins

Los plugins tienen plena paridad entre la UI web y la CLI od — los mismos endpoints /api/plugins, elige el que prefieras.

En la app de escritorio / web: abre la página Plugin para explorar el marketplace y haz clic en Install; dentro del Studio de un proyecto, los plugins aparecen como chips del compositor en los que haces clic para aplicar (con las entradas que declaran).

En la línea de comandos (se ejecuta sin UI — esta es la vía que usan los agentes externos):

od plugin list                       # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page"      # search by keyword
od plugin info od-default            # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # upgrade
od plugin uninstall od-default       # uninstall

Cada comando admite --json, así que puedes canalizarlo a través de jq / xargs hacia tu automatización.

Construir un plugin

Un plugin de Open Design requiere open-design.json y el payload de su tipo. Los skills y escenarios también incluyen SKILL.md; otros tipos usan su payload específico:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omit for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Campos principales de open-design.json: specVersion, name, version y el compat.agentSkills[].path opcional cuando la entrada expone un Agent Skill, además de od.kind, od.taskKind, od.mode, od.capabilities[] y od.inputs[].

Genera el esqueleto + valida localmente:

od plugin scaffold --id my-plugin --title "My Plugin"   # generate the skeleton
od plugin validate ./my-plugin                          # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

Conjunto completo de campos y contrato de runtime → plugins/spec/SPEC.md; desarrollar un plugin con un agente de codificación → plugins/spec/AGENT-DEVELOPMENT.md; plantillas mínimas para copiar y pegar → plugins/spec/examples/.

Contribuir un plugin

Suelta la carpeta del plugin en plugins/community/ (plugins de terceros), o — para distribuirlo empaquetado con Open Design — en el nivel correspondiente de plugins/_official/.
Pasa la validación: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
Completa el PR usando la plantilla en plugins/spec/CONTRIBUTING.md (ID, versión, vía, modo, capacidades, ejemplos de disparadores; adjunta una captura / vista previa para plugins visuales).
Para publicar en un registro externo (skills.sh / ClawHub / GitHub independiente) → plugins/spec/PUBLISHING-REGISTRIES.md.

Endpoint del registro de plugins: GET /api/plugins. Resumen del directorio → plugins/README.md (简体中文).

Arquitectura

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Base registry: 26 runtime definitions (including byok-opencode),       │
   │  backed by 25 distinct local CLI executables because byok-opencode      │
   │  shares the OpenCode executable.                                        │
   │  Composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Capa	Stack
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · streaming SSE · `better-sqlite3`
Almacenamiento	Antes de cambiar o documentar rutas de almacenamiento del daemon, DEBES leer `AGENTS.md` en la raíz, sección Daemon data directory contract. Este README NO DEBE repetirlo.
Vista previa	Las ejecuciones con filesystem renderizan archivos canónicos; BYOK/API analiza un bloque `<artifact>` completo en un iframe `srcdoc` aislado
Exportación	HTML (incorporado) · PDF (impresión del navegador) · PPTX (impulsado por el agente) · ZIP · Markdown · MP4 (HyperFrames)
Escritorio	Electron shell + renderizador en entorno aislado + IPC de sidecar (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Ciclo de vida	Un único punto de entrada: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check)

Arquitectura completa → docs/architecture.md. Protocolo de skills → docs/skills-protocol.md. Contrato del adaptador de agentes → docs/agent-adapters.md.

Hoja de ruta

Entrega por fases → docs/roadmap.md.

Comunidad

Personas reales detrás de cada canal.

💬 Discord — chat diario, intercambio de plugins, preguntas → discord.gg/mHAjSMV6gz
🐦 X / Twitter — notas de lanzamiento, hitos, detrás de cámaras → @OpenDesignHQ
🗣️ GitHub Discussions — preguntas y respuestas a fondo, RFCs, "muestra tu trabajo" → Discussions
🐛 GitHub Issues — reportes de bugs, solicitudes de características → Issues

Las etiquetas good-first-issue y help-wanted son la forma más fácil de empezar.

Contribuir

Open Design sigue avanzando porque los colaboradores — diseñadores, ingenieros, autores de prompts — siguen apareciendo. Muchos de los skills, sistemas de diseño y plugins más usados fueron escritos por personas ajenas al equipo principal.

🎯 Por dónde empezar (máximo impacto, mínimo cambio)

Quieres lanzar…	Cómo	Dónde
Un nuevo skill	Suelta una carpeta con `SKILL.md` + `assets/` + `references/`	`skills/` · especificación en `docs/skills-protocol.md`
Un nuevo sistema de diseño	Suelta un paquete centrado en `DESIGN.md`; añade `manifest.json`, `tokens.css`, componentes, assets o procedencia cuando haga falta	`design-systems/<brand>/`
Un nuevo plugin	Suelta `open-design.json` + el payload específico de su tipo bajo una carpeta de categoría	`plugins/community/` · especificación en `plugins/spec/SPEC.md` · guía de desarrollo con agente en `plugins/spec/AGENT-DEVELOPMENT.md`
Dar soporte a una nueva CLI de agente de codificación	Definición de runtime + registro; parser solo para un formato nuevo	`apps/daemon/src/runtimes/defs/`
Corregir un bug o pulir la UI	Explora la etiqueta `good-first-issue`	Issues →
Traducir la documentación	Actualiza los archivos `README.<lang>.md`	`TRANSLATIONS.md`

🤖 Contribuir como agente

Si tú eres el agente que lee esto, la vía más rápida es:

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

# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # create a branch and worktree

# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Open the PR
gh pr create --fill

Flujo de contribución completo y amigable para agentes, estilo de código y nivel exigido para el PR → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · Português).

🏅 Programa Open Design Fellow

Estamos reclutando Open Design Fellows en todo el mundo — los Fellows dan forma al producto junto al equipo principal, representan oficialmente a Open Design en su región y hacen crecer la comunidad localmente, respaldados por apoyo financiado ($1,000 / MR), créditos LLM gratuitos y una vía de revisión directa. Detalles → MAINTAINERS.md y el anuncio en Discord.

Mantenedores

Cargan con gran parte del trabajo — mantenimiento diario, revisión y apoyo a la comunidad.

_{@Nagendhra-web}
_Mantenedor

_@Sid-Qin
_Mantenedor

Reglas de los mantenedores, criterios de promoción y el protocolo de salida → MAINTAINERS.md (también Deutsch · Français · 简体中文 · 日本語 · Português).

Colaboradores

Gracias a todos los que han participado — código, documentación, comentarios, una incidencia certera, un nuevo skill, un nuevo sistema de diseño.

Actividad del repositorio

El SVG de arriba se regenera diariamente mediante .github/workflows/metrics.yml usando lowlighter/metrics.

Danos una estrella

Si esto te ahorró treinta minutos, dale una ★. Las estrellas no pagan el alquiler — pero le dicen al siguiente diseñador, agente y colaborador que este experimento merece su atención. Un clic, tres segundos, una señal real.

Referencias y linaje

Proyecto	Rol
Claude Design	El producto de código cerrado del que este repo es la alternativa de código abierto.
`alchaincyf/huashu-design`	La brújula de la filosofía de diseño — flujo de trabajo de diseñador junior, protocolo de recursos de marca, checklist anti-AI-slop, crítica de cinco dimensiones.
`op7418/guizang-ppt-skill`	El skill de PPT web estilo revista, empaquetado textualmente bajo `design-templates/guizang-ppt/`. Por defecto para el modo presentación.
`lewislulu/html-ppt-skill`	La familia HTML PPT Studio — 15 plantillas de presentación, 36 temas, 31 layouts de página, runtime de animación, modo presentador de tarjetas magnéticas.
`OpenCoworkAI/open-codesign`	La primera alternativa de código abierto a Claude Design; patrones de UX que tomamos prestados (bucle de artefacto en streaming, iframe en entorno aislado, panel de agente en vivo).
`multica-ai/multica`	La arquitectura de daemon + adaptador — detección de agentes por escaneo del PATH, daemon local como único proceso privilegiado.
`VoltAgent/awesome-design-md`	Fuente histórica del esquema original de 9 secciones de `DESIGN.md` y 70 sistemas derivados del upstream; los paquetes actuales pueden ampliar esa base.
`bergside/awesome-design-skills`	Origen de los 57 skills de diseño añadidos bajo `design-systems/`.
`heygen-com/hyperframes`	El framework de gráficos en movimiento HTML→MP4, integrado como el `hyperframes-html` de primera clase en Open Design.
Claude Code skills	La convención `SKILL.md` que adoptamos textualmente.

Procedencia detallada → docs/references.md.

Licencia

Apache-2.0. El design-templates/guizang-ppt/ incluido conserva su LICENSE original (MIT, @op7418). El design-templates/html-ppt/ incluido conserva su LICENSE original (MIT, @lewislulu).

FilesExpand file tree

README.es.md

Latest commit

History