mirror of https://github.com/nexu-io/open-design.git synced 2026-07-03 12:27:55 +08:00

Files

kokisanai 54de349c47 fix: replace expired Discord invite (#4849 )

Co-authored-by: koki yanlai xu <koki@kokideMacBook-Air.local>

2026-06-29 15:00:45 +00:00

56 KiB

Raw Permalink Blame History

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

🔥 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 · Únete a la conversación

⚡ 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

🏅 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 · Model Router · 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 · ✨ 150 sistemas DESIGN.md de calidad de marca · 📦 261 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 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.

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`
Cursor	✅ Compatible	`od mcp install cursor`
VS Code + GitHub Copilot	✅ Compatible	`od mcp install copilot`
GitHub Copilot CLI	✅ Compatible	`od mcp install copilot`
Gemini CLI	✅ Compatible	`od mcp install gemini`
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`
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.

El contrato del adaptador y los analizadores de stream viven en apps/daemon/src/agents.ts. Añadir una nueva CLI es una sola entrada — 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 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	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 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 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.

# 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

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

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

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/ que sigue la convención SKILL.md 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`	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 de skills completo → 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. Cambia un sistema → el siguiente render usa los nuevos tokens. Sin JSON de tema.

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

261 plugins oficiales viven en 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/`	11	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`
`image-templates/`	45	Prompts de imagen de una sola toma — editorial, cinematográfico, producto, retrato
`video-templates/`	50	Plantillas de movimiento HyperFrames / Seedance / Veo
`design-systems/`	142	`DESIGN.md` de marca empaquetados como plugins
`atoms/`	13	Fragmentos de UI reutilizables (botones, heroes, tarjetas de KPI)
`examples/`	140	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 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:

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/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. Protocolo de skills → docs/skills-protocol.md. Contrato del adaptador de agentes → docs/agent-adapters.md.

Hoja de ruta

Daemon + 21 adaptadores de CLI de agentes de codificación + registro de skills + catálogo de sistemas de diseño
App web + chat + formulario de preguntas + selector de 5 direcciones + progreso de tareas + vista previa en entorno aislado
Más de 100 skills · 150 sistemas de diseño · 5 direcciones visuales · 5 marcos de dispositivo
Proyectos · conversaciones · mensajes · pestañas · plantillas respaldados por SQLite
Proxy BYOK multiproveedor (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + protección SSRF
Importación de ZIP de Claude Design (/api/import/claude-design)
Protocolo de sidecar + escritorio Electron + automatización IPC
API de lint de artefactos + barrera de autocrítica de 5 dimensiones previa a la emisión
0.8.0 — infraestructura del marketplace de plugins (261 plugins oficiales, especificación de manifiesto, scripts de instalación por agente)
0.9.0 — Open Design AMR (Model Router oficial integrado en la app: cero configuración, inicio de sesión de un clic)
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.

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 `DESIGN.md` usando el esquema de 9 secciones	`design-systems/<brand>/`
Un nuevo plugin	Suelta `open-design.json` + manifiesto 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	Una entrada de adaptador + analizador de stream	`apps/daemon/src/agents.ts`
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`	Origen del esquema `DESIGN.md` de 9 secciones y 70 sistemas de producto.
`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).

56 KiB Raw Permalink Blame History Unescape Escape