nexu-io-open-design/docs/i18n/README.es.md

<h1 align="center">Open Design: la alternativa de código abierto a Claude Design</h1>

> 🔥 **Open Design 0.10.0 ya está aquí: el espacio de trabajo de diseño Agentic todo en uno.** Todo el oficio vive ahora en una sola ventana — pasa de una idea difusa a descubrir referencias, reunir material, editar de forma interactiva, encolar comentarios, pulir las animaciones y entregar el resultado a un editor o a un Code Agent — sin salir de la app. Con sesiones en paralelo, deja de sentirse como un asistente y empieza a sentirse como un equipo de diseño local trabajando para ti. [Descargar 0.10.0](https://github.com/nexu-io/open-design/releases) · [Únete a la conversación](https://github.com/nexu-io/open-design/discussions/4153)
>
> ⚡ **Open Design AMR (Agentic Model Router) — 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 AMR](https://open-design.ai/amr/)
>
> 🏅 **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`](../../MAINTAINERS.md) y [Discord](https://discord.gg/mHAjSMV6gz).

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/hero.png" alt="Open Design — la alternativa de código abierto a Claude Design · 150 sistemas de diseño · 261 plugins · 21 agentes de codificación · 14 proveedores de medios" width="100%" />
</p>

<p align="center">
  <a href="https://open-design.ai/">Sitio web</a> ·
  <a href="https://open-design.ai/">Descargar</a> ·
  <a href="https://open-design.ai/amr/">Model Router</a> ·
  <a href="https://discord.gg/mHAjSMV6gz">Discord</a> ·
  <a href="https://x.com/OpenDesignHQ">Sigue a @OpenDesignHQ</a>
</p>

<p align="center">
  <a href="https://github.com/nexu-io/open-design/releases"><img alt="release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat&color=blueviolet&label=release&include_prereleases&display_name=tag" /></a>
  <a href="../../LICENSE"><img alt="license" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" /></a>
  <a href="https://discord.gg/mHAjSMV6gz"><img alt="discord" src="https://img.shields.io/discord/1479002485040480266?style=flat&logo=discord&logoColor=white&label=discord&color=5865F2&cacheSeconds=3600" /></a>
  <a href="../../QUICKSTART.md"><img alt="quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat" /></a>
</p>

<p align="center"><a href="../../README.md">English</a> · <b>Español</b> · <a href="README.pt-BR.md">Português</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · <a href="README.ar.md">العربية</a> · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a> · <a href="README.tr.md">Türkçe</a></p>

---

## Qué es Open Design

🎨 **La alternativa de código abierto y local-first a [Claude Design][cd].** &nbsp;🖥️ **App de escritorio nativa para macOS y Windows.** &nbsp;⚡ **Más de 100 skills** · ✨ **150 sistemas `DESIGN.md` de calidad de marca** · 📦 **261 plugins listos para usar.** &nbsp;🖼️ 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. &nbsp;🤖 **Funciona sobre Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity y 21 CLIs locales**, o cualquier endpoint compatible con OpenAI mediante BYOK.

Open Design es lo que obtienes cuando el bucle **agent-native** que Anthropic lanzó con Claude Design —descubrir el brief, fijar la dirección, transmitir el artefacto, criticar, entregar— deja de estar cerrado y se convierte en un **sistema de archivos de skills, sistemas de diseño y plugins** que los agentes de codificación que ya tienes en tu laptop pueden leer, escribir y remezclar. Tu CLI se convierte en el motor de diseño, tu laptop se convierte en el estudio y el `DESIGN.md` de tu equipo se convierte en el contrato de marca.

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.

[cd]: https://x.com/claudeai/status/2045156267690213649

---

## 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

<table>
<tr>
<td valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/home.png" alt="Página de inicio" /><br/>
<sub><b>Home</b> — 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.</sub>
</td>
</tr>
</table>

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/automation.png" alt="Página de automatización" /><br/>
<sub><b>Automation</b> — orquesta flujos de diseño repetitivos en automatizaciones reutilizables y programables.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/design-system.png" alt="Página del sistema de diseño" /><br/>
<sub><b>Design System</b> — destila el <code>DESIGN.md</code> de tu equipo en un contrato de marca que da forma a cada salida.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/plugin.png" alt="Página de plugins" /><br/>
<sub><b>Plugin</b> — explora, instala y distribuye plugins de flujo de trabajo para ampliar la generación bajo demanda.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/integrations.png" alt="Página de integraciones" /><br/>
<sub><b>Integrations</b> — conecta sistemas externos y herramientas MCP, y usa Open Design desde cualquier IDE, script o automatización.</sub>
</td>
</tr>
</table>

### 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:

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-prototype.png" alt="Prototipo" /><br/>
<sub><b>Prototype</b> — 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.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-hyperframe.png" alt="HyperFrame" /><br/>
<sub><b>HyperFrame</b> — movimiento programático y gráficos animados, renderizados a un MP4 real (p. ej. 1920×1080 · 30fps).</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-ppt.png" alt="Presentación" /><br/>
<sub><b>Deck</b> — presentaciones de pitch que puedes recorrer página a página, navegar con el teclado y exportar a PPTX / PDF.</sub>
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-image.png" alt="Imagen" /><br/>
<sub><b>Image</b> — imágenes y recursos visuales de calidad de marca, con generación y descarga en alta resolución.</sub>
</td>
</tr>
</table>

---

## 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Estado &nbsp;&nbsp; | Instalación del servidor MCP en una línea &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
|---|:---:|---|
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ Compatible | `od mcp install claude` |
| [Codex CLI](https://github.com/openai/codex) | ✅ Compatible | `od mcp install codex` |
| [Cursor](https://www.cursor.com/cli) | ✅ Compatible | `od mcp install cursor` |
| [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ Compatible | `od mcp install copilot` |
| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ Compatible | `od mcp install copilot` |
| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | ✅ Compatible | `od mcp install gemini` |
| [OpenCode](https://opencode.ai/) | ✅ Compatible | `od mcp install opencode` |
| [OpenClaw](https://github.com/openclaw/openclaw) | ✅ Compatible | `od mcp install openclaw` |
| [Antigravity](https://antigravity.google) | ✅ Compatible | `od mcp install antigravity` |
| [Cline](https://github.com/cline/cline) | ✅ Compatible | `od mcp install cline` |
| [Trae](https://www.trae.ai/) | ✅ Compatible | `od mcp install trae` |
| [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ Compatible | `od mcp install kimi` |
| [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ Compatible | `od mcp install pi` |
| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ Compatible | `od mcp install vibe` |
| [Hermes Agent](https://github.com/nousresearch/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`.

<p align="center">
  <img src="https://repo-assets.open-design.ai/resources/images/coding-agents.png" alt="Las 21 CLIs de agentes de codificación que admite Open Design — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae" width="100%" />
</p>

**¿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.

El contrato del adaptador y los analizadores de stream viven en [`apps/daemon/src/agents.ts`](../../apps/daemon/src/agents.ts). Añadir una nueva CLI es una sola entrada — consulta [`docs/agent-adapters.md`](../../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.

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/01-entry-view.png" alt="Vista de entrada" /><br/>
<sub><b>Vista de entrada</b> — 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.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/mobile-onboarding.png" alt="Onboarding móvil" /><br/>
<sub><b>Prototipo móvil</b> — 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 <code>assets/frames/</code>.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/dating-web.png" alt="Prototipo web dating-web" /><br/>
<sub><b>Prototipo web</b> — un dashboard editorial con barras de desplazamiento, KPIs y gráficos. Renderizado directamente desde <code>design-templates/dating-web/</code>.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/gamified-app.png" alt="App gamificada" /><br/>
<sub><b>Prototipo de app móvil</b> — 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.</sub>
</td>
</tr>
</table>

### 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.

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/live-dashboard.png" alt="Dashboard en vivo" /><br/>
<sub><b>Dashboard en vivo</b> — 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.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/research-decision-room.png" alt="Sala de decisión" /><br/>
<sub><b>Sala de decisión</b> — un artefacto de briefing multifuente para reuniones de producto / investigación / operaciones.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/github-dashboard.png" alt="Dashboard estilo GitHub" /><br/>
<sub><b>Dashboard estilo GitHub</b> — métricas del repo presentadas como un artefacto en vivo.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/flowai-live-dashboard-template.png" alt="Dashboard en vivo Flow" /><br/>
<sub><b>Plantilla de dashboard en vivo Flow</b> — una plantilla de KPI específica de un dominio, con marca aplicada a través del <code>DESIGN.md</code> activo.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/07-magazine-deck.png" alt="Presentación tipo revista (guizang-ppt)" /><br/>
<sub><b>Modo presentación (guizang-ppt)</b> — diseños tipo revista, hero WebGL, checklists P0/P1/P2. Empaquetado textualmente desde <a href="https://github.com/op7418/guizang-ppt-skill"><code>op7418/guizang-ppt-skill</code></a> con su licencia original preservada.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/deck-swiss-international.png" alt="Presentación suiza" /><br/>
<sub><b>Presentación estilo Swiss International</b> — anclada a una cuadrícula, con acentos monocromáticos. Una de las <b>15 plantillas de presentación</b> y <b>36 temas</b> bajo <code>design-templates/html-ppt-*/</code>.</sub>
</td>
</tr>
</table>

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

<table>
<tr>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776662673014_nf0taw_HGRMNDybsAAGG88.jpg" alt="Mapa gastronómico ilustrado de una ciudad" /><br/><sub><b>Mapa gastronómico ilustrado de una ciudad</b><br/>Póster de viaje editorial dibujado a mano</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453149026_gd2k50_HHCSvymboAAVscc.jpg" alt="Escena cinematográfica de ascensor" /><br/><sub><b>Escena cinematográfica de ascensor</b><br/>Toma editorial de un solo fotograma</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg" alt="Retrato anime cyberpunk" /><br/><sub><b>Retrato cyberpunk</b><br/>Avatar de perfil — rostro con texto de neón</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg" alt="Evolución de escalera de piedra 3D" /><br/><sub><b>Escalera de piedra 3D</b><br/>Infografía de piedra tallada</sub></td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg" alt="Retrato glamuroso" /><br/><sub><b>Retrato glamuroso</b><br/>Toma editorial de estudio</sub></td>
</tr>
</table>

**93 prompts listos para replicar** viven en [`prompt-templates/`](../../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][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.

<table>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-saas-product-promo-30s.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt="Promo SaaS" /></a><br/><sub><b>Promo de producto SaaS de 30s</b> · 16:9 · revelaciones 3D de UI</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" alt="Karaoke de TikTok" /></a><br/><sub><b>Talking-head de karaoke para TikTok</b> · 9:16 · TTS + subtítulos sincronizados por palabra</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-brand-sizzle-reel.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Sizzle reel de marca" /></a><br/><sub><b>Sizzle reel de marca de 30s</b> · 16:9 · tipografía cinética reactiva al audio</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-data-bar-chart-race.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" alt="Carrera de gráfico de barras" /></a><br/><sub><b>Carrera de gráfico de barras</b> · 16:9 · infografía de datos estilo NYT</sub></td>
</tr>
<tr>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-flight-map-route.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" alt="Mapa de vuelo" /></a><br/><sub><b>Mapa de vuelo</b> · 16:9 · revelación de ruta estilo Apple</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-logo-outro-cinematic.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Outro de logo" /></a><br/><sub><b>Outro de logo cinematográfico de 4s</b> · 16:9 · ensamblaje pieza a pieza + bloom</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-money-counter-hype.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" alt="Contador de dinero" /></a><br/><sub><b>Contador de dinero $0 → $10K</b> · 9:16 · hype estilo Apple</sub></td>
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-website-to-video-promo.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt="Sitio web a video" /></a><br/><sub><b>Sitio web a video</b> · 16:9 · captura el sitio en 3 viewports</sub></td>
</tr>
</table>

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/`](../../design-templates/hyperframes/).

[hyperframes]: https://github.com/heygen-com/hyperframes

---

## Por qué Open Design

> **En abril de 2026, Anthropic lanzó [Claude Design][cd] — 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` activo — un esquema de 9 secciones que cubre paleta, tipografía, espaciado, movimiento, voz y antipatrones. 150 sistemas se incluyen en el repo (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). 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 tres planos.** Los **plugins** llevan flujos de trabajo ejecutables · los **skills** llevan el gusto de diseño del agente · los **sistemas de diseño** llevan la marca. Los tres son archivos planos que cualquiera puede crear, versionar y publicar.
- 🔁 **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][cd] | Figma | Lovable / v0 / Bolt | **Open Design** |
|---|---|---|---|---|
| Código abierto | ❌ | ❌ | ❌ | **✅ Apache-2.0** |
| Self-host / escritorio | ❌ | ❌ | ❌ | **✅ macOS + Windows + Vercel** |
| Agent-native (se ejecuta en tu CLI) | Solo Anthropic | ❌ | Solo agente en la nube | **✅ 21 CLIs + BYOK** |
| `DESIGN.md` de calidad de marca | Propietario | JSON de tema | Tokens limitados | **✅ 150 sistemas incluidos** |
| Skills / plugins / plantillas | Cerrado | Tienda de plugins | Cerrado | **✅ Más de 100 skills · 261 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**](https://open-design.ai/) o [GitHub Releases](https://github.com/nexu-io/open-design/releases)
- **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) o [GitHub Releases](https://github.com/nexu-io/open-design/releases)
- **Linux** (AppImage, vía opcional) → [GitHub Releases](https://github.com/nexu-io/open-design/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 y 150 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.

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

Luego, dentro del agente:

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

El agente lee `skills/`, elige el `SKILL.md` correcto, vincula el `DESIGN.md` que nombraste y emite un `<artifact>` con vista previa en `http://localhost:7456`.

### 🐳 Ejecútalo con Docker

```bash
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

[![Deploy on Sealos](https://sealos.io/Deploy-on-Sealos.svg)](https://sealos.io/products/app-store/open-design/)

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`](../../deploy/README.md#local-compose).

### 🧑‍💻 Ejecútalo desde el código fuente

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

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

### Un flujo de trabajo completo — del brief al artefacto

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

1. **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…
2. **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.
3. **El agente emite el primer `<artifact>`.** Plugin + skill + `DESIGN.md` quedan vinculados. Se transmite a un iframe en entorno aislado, editable en el sitio — no "regenerar desde cero".
4. **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.
5. **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.

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

# Then the agent can:
od search-files "primary button"      # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug>                # latest rendered artifact
od plugin run web-prototype --brief "..."
od skill list --scenario marketing
```

**¿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`](../../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

**Más de 100 skills vienen incluidos** — cada uno es una carpeta bajo [`skills/`](../../skills/) que sigue la convención [`SKILL.md`][skill] de Claude Code, extendida con un frontmatter `od:` (`mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `fidelity`, `example_prompt`). Suelta una carpeta, reinicia el daemon y aparece en el selector.

Dos **modos** anclan el catálogo: `prototype` (artefactos de una sola página para web/móvil/escritorio) y `deck` (presentaciones de deslizamiento horizontal). También los modos `image`, `video`, `audio`, `template`, `design-system` y `utility`. El campo **`scenario`** los agrupa por audiencia: `design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`.

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

Protocolo de skills completo → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Endpoint del registro de skills: `GET /api/skills`.

---

## Sistemas de diseño

**150 sistemas `DESIGN.md` de calidad de marca** vienen con el repo — cada uno un único archivo Markdown con un esquema de 9 secciones (color, tipografía, espaciado, layout, componentes, movimiento, voz, marca, antipatrones), de [`VoltAgent/awesome-design-md`][acd2]. Cambia un sistema → el siguiente render usa los nuevos tokens. Sin JSON de tema.

<details>
<summary><b>Catálogo completo (haz clic para expandir)</b></summary>

**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`

</details>

Vuelve a importar la biblioteca con [`scripts/sync-design-systems.ts`](../../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`](../../design-systems/README.md).

[acd2]: https://github.com/VoltAgent/awesome-design-md

---

## Plugins

**261 plugins oficiales** viven en [`plugins/_official/`](../../plugins/_official/). Cada plugin es una **carpeta portátil de agent-skill** — un `SKILL.md` (legible por cualquier agente que admita Agent Skills), más un manifiesto opcional `open-design.json` que le da a Open Design metadatos de marketplace, entradas, vistas previas, pipelines y declaraciones de capacidades. Salta directamente a una categoría:

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

También [`plugins/community/`](../../plugins/community/) para plugins de la comunidad y [`plugins/registry/`](../../plugins/registry/) para el flujo de publicación.

### Qué pueden hacer los plugins

- 🤖 **Ejecutarse en cualquier agente de codificación** — [Claude Code](../../docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), 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`](../../plugins/_official/scenarios/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`](../../plugins/_official/scenarios/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):

```bash
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 **necesita como mínimo solo un `SKILL.md`**; para listarlo en el marketplace de Open Design, añade un `open-design.json`:

```
my-plugin/
├── SKILL.md            ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json    ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── 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` (actualmente `1.0.0`), `name` (ID estable), `version` (semver), `compat.agentSkills[].path` (apunta a `./SKILL.md`), `od.kind` (`skill` / `scenario` / `atom` / `bundle`), `od.taskKind` (`new-generation` / `figma-migration` / `code-migration` / `tune-collab`), `od.mode` (la superficie de salida, p. ej. `prototype` / `deck` / `live-artifact` / `image` / `video` / `hyperframes` / `audio` / `design-system` / `scenario`), `od.capabilities[]` (**declara el mínimo** — una instalación restringida otorga solo `prompt:inject` por defecto), `od.inputs[]` (parámetros en tiempo de aplicación).

Genera el esqueleto + valida localmente:

```bash
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`](../../plugins/spec/SPEC.md); desarrollar un plugin con un agente de codificación → [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md); plantillas mínimas para copiar y pegar → [`plugins/spec/examples/`](../../plugins/spec/examples/).

### Contribuir un plugin

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

Endpoint del registro de plugins: `GET /api/plugins`. Resumen del directorio → [`plugins/README.md`](../../plugins/README.md) ([简体中文](../../plugins/README.zh-CN.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/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 })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
   │  gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) ·    │
   │  pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek     │
   │  reads SKILL.md + DESIGN.md, writes artifacts to disk             │
   └──────────────────────────────────────────────────────────────────┘
```

| 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 | Iframe `srcdoc` en entorno aislado + analizador de `<artifact>` por streaming |
| 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`](../../docs/architecture.md). Protocolo de skills → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Contrato del adaptador de agentes → [`docs/agent-adapters.md`](../../docs/agent-adapters.md).

---

## Hoja de ruta

- [x] Daemon + 21 adaptadores de CLI de agentes de codificación + registro de skills + catálogo de sistemas de diseño
- [x] App web + chat + formulario de preguntas + selector de 5 direcciones + progreso de tareas + vista previa en entorno aislado
- [x] Más de 100 skills · 150 sistemas de diseño · 5 direcciones visuales · 5 marcos de dispositivo
- [x] Proyectos · conversaciones · mensajes · pestañas · plantillas respaldados por SQLite
- [x] Proxy BYOK multiproveedor (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + protección SSRF
- [x] Importación de ZIP de Claude Design (`/api/import/claude-design`)
- [x] Protocolo de sidecar + escritorio Electron + automatización IPC
- [x] API de lint de artefactos + barrera de autocrítica de 5 dimensiones previa a la emisión
- [x] **0.8.0** — infraestructura del marketplace de plugins (261 plugins oficiales, especificación de manifiesto, scripts de instalación por agente)
- [x] **0.9.0** — Open Design AMR (Model Router oficial integrado en la app: cero configuración, inicio de sesión de un clic)
- [x] Compilaciones empaquetadas de Electron — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (vía opcional)
- [ ] Ediciones quirúrgicas en modo comentario — parcialmente lanzado; aplicación de parches dirigida y fiable en progreso
- [ ] UX del panel de ajustes emitido por IA — aún no implementado
- [ ] `npx od init` para generar un proyecto con `DESIGN.md`
- [ ] SDK de plugins + CLI `od plugin {add,list,remove,test,publish}`
- [ ] Plugins de migración Figma / Pencil → React / Next / Vue (alfa)
- [ ] Plugin de renovación de base de código existente (apuntar a un repo git + `DESIGN.md`)

Entrega por fases → [`docs/roadmap.md`](../../docs/roadmap.md).

---

## Comunidad

Personas reales detrás de cada canal.

- 💬 **Discord** — chat diario, intercambio de plugins, preguntas → [**discord.gg/mHAjSMV6gz**](https://discord.gg/mHAjSMV6gz)
- 🐦 **X / Twitter** — notas de lanzamiento, hitos, detrás de cámaras → [**@OpenDesignHQ**](https://x.com/OpenDesignHQ)
- 🗣️ **GitHub Discussions** — preguntas y respuestas a fondo, RFCs, "muestra tu trabajo" → [**Discussions**](https://github.com/nexu-io/open-design/discussions)
- 🐛 **GitHub Issues** — reportes de bugs, solicitudes de características → [**Issues**](https://github.com/nexu-io/open-design/issues)

Las etiquetas [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) y [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) 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/`](../../skills/) · especificación en [`docs/skills-protocol.md`](../../docs/skills-protocol.md) |
| Un nuevo **sistema de diseño** | Suelta un `DESIGN.md` usando el esquema de 9 secciones | [`design-systems/<brand>/`](../../design-systems/) |
| Un nuevo **plugin** | Suelta `open-design.json` + manifiesto bajo una carpeta de categoría | [`plugins/community/`](../../plugins/community/) · especificación en [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md) · guía de desarrollo con agente en [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md) |
| Dar soporte a una nueva **CLI de agente de codificación** | Una entrada de adaptador + analizador de stream | [`apps/daemon/src/agents.ts`](../../apps/daemon/src/agents.ts) |
| Corregir un bug o pulir la UI | Explora la etiqueta [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) | [Issues →](https://github.com/nexu-io/open-design/issues) |
| Traducir la documentación | Actualiza los archivos `README.<lang>.md` | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) |

### 🤖 Contribuir como agente

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

```bash
# 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`](../../CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [Português](CONTRIBUTING.pt-BR.md)).

### 🏅 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`](../../MAINTAINERS.md) y el anuncio en [Discord](https://discord.gg/mHAjSMV6gz).

---

## Mantenedores

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

<table>
  <tr>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Nagendhra-web">
        <img src="https://github.com/Nagendhra-web.png" width="96" alt="@Nagendhra-web" /><br/>
        <sub><b>@Nagendhra-web</b></sub>
      </a><br/>
      <sub>Mantenedor</sub>
    </td>
    <td align="center" valign="top" width="200">
      <a href="https://github.com/Sid-Qin">
        <img src="https://github.com/Sid-Qin.png" width="96" alt="@Sid-Qin" /><br/>
        <sub><b>@Sid-Qin</b></sub>
      </a><br/>
      <sub>Mantenedor</sub>
    </td>
  </tr>
</table>

Reglas de los mantenedores, criterios de promoción y el protocolo de salida → [`MAINTAINERS.md`](../../MAINTAINERS.md) (también [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [Português](MAINTAINERS.pt-BR.md)).

## 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.

<a href="https://github.com/nexu-io/open-design/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=nexu-io/open-design&max=500&columns=20&anon=1&cache_bust=2026-06-29" alt="Open Design contributors" />
</a>

---

## Actividad del repositorio

<picture>
  <img alt="Open Design — métricas del repositorio" src="https://repo-assets.open-design.ai/resources/images/github-metrics.svg" />
</picture>

El SVG de arriba se regenera diariamente mediante [`.github/workflows/metrics.yml`](../../.github/workflows/metrics.yml) usando [`lowlighter/metrics`](https://github.com/lowlighter/metrics).

---

## Danos una estrella

<p align="center">
  <a href="https://github.com/nexu-io/open-design"><img src="https://repo-assets.open-design.ai/resources/images/star-us.png" alt="Dale una estrella a Open Design en GitHub — github.com/nexu-io/open-design" width="100%" /></a>
</p>

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.

<a href="https://star-history.com/#nexu-io/open-design&Date">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&theme=dark&cache_bust=2026-06-29" />
    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-06-29" />
    <img alt="Open Design star history" src="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-06-29" />
  </picture>
</a>

---

## Referencias y linaje

| Proyecto | Rol |
|---|---|
| [Claude Design][cd] | El producto de código cerrado del que este repo es la alternativa de código abierto. |
| [`alchaincyf/huashu-design`](https://github.com/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`](https://github.com/op7418/guizang-ppt-skill) | El skill de PPT web estilo revista, empaquetado textualmente bajo [`design-templates/guizang-ppt/`](../../design-templates/guizang-ppt/). Por defecto para el modo presentación. |
| [`lewislulu/html-ppt-skill`](https://github.com/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`](https://github.com/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`](https://github.com/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`](https://github.com/VoltAgent/awesome-design-md) | Origen del esquema `DESIGN.md` de 9 secciones y 70 sistemas de producto. |
| [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills) | Origen de los 57 skills de diseño añadidos bajo `design-systems/`. |
| [`heygen-com/hyperframes`](https://github.com/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][skill] | La convención `SKILL.md` que adoptamos textualmente. |

Procedencia detallada → [`docs/references.md`](../../docs/references.md).

[skill]: https://docs.anthropic.com/en/docs/claude-code/skills

## Licencia

Apache-2.0. El `design-templates/guizang-ppt/` incluido conserva su [LICENSE](../../design-templates/guizang-ppt/LICENSE) original (MIT, [@op7418](https://github.com/op7418)). El `design-templates/html-ppt/` incluido conserva su [LICENSE](../../design-templates/html-ppt/LICENSE) original (MIT, [@lewislulu](https://github.com/lewislulu)).