Primero el formulario
Surface · audiencia · tono · marca · escala. Treinta segundos de radios valen más que treinta minutos de retoques.
Open source · Local primero · BYOK
Open Design
La alternativa open source a Claude Design.
Impulsado por el coding-agent CLI que ya tienes — Claude Code, Codex, Cursor, Gemini, OpenCode, más otros once. 110 Skills · 141 Design Systems · 5 direcciones visuales · Apache-2.0.
Apache-2.0 · sin registro · tu CLI, tus claves
Open Design · demo en vivo
Ver los 110 skills Por qué existe esto
Claude Design se hizo viral. Y se quedó cerrado.
Claude Design de Anthropic (Opus 4.7, abril de 2026) mostró qué pasa cuando un LLM deja de escribir prosa y empieza a entregar artifacts de diseño. Se hizo viral — y se quedó cerrado, de pago, solo en la nube, atado al modelo de Anthropic y a los skills de Anthropic. Open Design es la alternativa open source. El mismo loop. La misma idea de «artifact primero». Sin el lock-in.
Cerrado → abierto
Apache-2.0, de arriba abajo.
Cada skill es un archivo. Cada design system es un archivo Markdown. Cada prompt es un módulo TypeScript que puedes leer y editar.
Agente incluido → el tuyo
Usa el CLI que ya tienes.
16 CLIs de coding-agents detectados automáticamente en tu PATH. ¿Sin CLI? Pega cualquier baseUrl + apiKey compatible con OpenAI.
Nube → local
Corre en tu portátil. Despliega en Vercel.
pnpm tools-dev para ejecutarlo en local. SQLite en .od/. Vercel opcional. Tus datos, tu sistema de archivos, tú decides.
Cómo un prompt se vuelve un artifact
Cuatro pasos. Sin improvisar.
OD no deja al modelo improvisar ni un píxel. Cada brief queda fijado antes de que arranque la pintura.
Selector de dirección
¿Sin guía de marca? Elige entre 5 direcciones visuales curadas — cada una con paleta OKLch determinista y stack tipográfico.
TodoWrite en streaming
El plan del agente llega como tarjeta en vivo. in_progress → completed se actualiza en tiempo real. Cambiar de rumbo a mitad de vuelo sale barato.
<artifact> renderiza
Vista previa en iframe sandbox. Editable in situ. Descargable como HTML, PDF, PPTX o ZIP.
Lo que viene en la caja
110 Skills × 141 Design Systems.
Cada Skill es una carpeta. Cada Design System es un archivo Markdown de 9 secciones. Suelta una carpeta, reinicia el daemon, y aparece en el picker. Cambia de sistema y el siguiente render usa los nuevos tokens.
Skill spotlight · html-ppt
Un solo skill. 36 temas, 31 layouts, 47 animaciones, 14 plantillas de deck.
El skill html-ppt incluido trae cada primitiva que un agente de deck necesita: modo presentador, biblioteca de layouts, set de animaciones cinéticas y 14 plantillas listas para forkear. Suelta la carpeta, reinicia el daemon y tienes un motor PPT en el navegador.
Variantes «taste-locked»
El mismo motor, tres tastes.
html-ppt-taste-brutalist y html-ppt-taste-editorial se envían como wrappers «taste-locked» independientes — el mismo skill, estética hard-coded. Y tres más para prototipos web: web-prototype-taste-{brutalist,editorial,soft}.
Bring your own agent
16 CLIs detectados automáticamente en tu PATH.
Los que tengas instalados se vuelven candidatos a motor de diseño. Cámbialos con un clic desde el picker de modelo.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
¿Sin CLI? POST /api/proxy/stream acepta cualquier baseUrl + apiKey + model compatible con OpenAI, Azure o Google. Shim Anthropic-via-OpenAI, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, tu vLLM auto-alojado — el mismo loop. Protegido contra SSRF en el borde del daemon, bloqueando loopback, link-local y RFC1918.
Siete ideas que sostienen todo
En qué creemos, en siete líneas.
01
No traemos un agente. El tuyo basta.
+
01
No traemos un agente. El tuyo basta.
El daemon escanea tu PATH buscando 16 CLIs de coding-agents conocidos. Lo que encuentra se vuelve candidato a motor de diseño, conducido por stdio con un adaptador por CLI.
02
Los Skills son archivos, no plugins.
+
02
Los Skills son archivos, no plugins.
Cada skill es SKILL.md + assets/ + references/. Suelta una carpeta en skills/, reinicia el daemon, aparece en el picker. El bundle magazine-web-ppt va incluido tal cual, con su licencia preservada.
03
Los Design Systems son Markdown portable, no JSON de tema.
+
03
Los Design Systems son Markdown portable, no JSON de tema.
El esquema DESIGN.md de 9 secciones — color, tipografía, spacing, layout, componentes, motion, voice, marca, anti-patterns. Cada artifact lee del sistema activo. Cambias de sistema → el siguiente render usa los nuevos tokens.
04
El formulario interactivo evita el 80 % de las correcciones.
+
04
El formulario interactivo evita el 80 % de las correcciones.
El turno 1 es solo un <question-form>: nada de pensar, ni herramientas, ni narrativa. Surface · audiencia · tono · marca · escala. El coste de equivocarse de dirección es una ronda de chat, no un deck terminado.
05
El daemon hace que el agente sienta que está en tu portátil.
+
05
El daemon hace que el agente sienta que está en tu portátil.
El daemon arranca el CLI con cwd en la carpeta de artifacts de tu proyecto. El agente recibe Read, Write, Bash, WebFetch — herramientas reales sobre un sistema de archivos real. SQLite persiste proyectos, conversaciones, mensajes y tabs.
06
El prompt stack es el producto.
+
06
El prompt stack es el producto.
Discovery directives + identity charter + DESIGN.md activo + SKILL.md activo + metadatos del proyecto + side-files del skill. Cada capa es composable. Cada capa es un archivo que puedes editar.
07
Open Design no es un silo. Tus otros agentes lo leen.
+
07
Open Design no es un silo. Tus otros agentes lo leen.
`od mcp` expone el proyecto como servidor MCP por stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — cualquier cosa que hable MCP — lee tus artifacts, archivos y metadatos directamente. Read-only en el borde: lectura de archivos, search, metadatos. Sin superficie de escritura, sin llamadas externas.
El prompt stack
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
Cada capa es composable. Cada capa es un archivo que puedes editar.
Comparativa
Open Design frente al resto.
Producto cloud cerrado, par desktop abierto, web app abierta. Tomamos prestado con generosidad de open-codesign y lo acreditamos en /about — otro formato, otro prompt-stack, la misma estrella polar.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Licencia y coste | |||
| Licencia | cerrada | MIT | Apache-2.0 |
| Facturación mínima | Pro / Max / Team | BYOK | BYOK — cualquier URL compatible con OpenAI |
| Formato | |||
| Formato | Web (claude.ai) | Desktop (Electron) | Web app + daemon local |
| Desplegable en Vercel | — | — | sí |
| Runtime IA y flujo | |||
| Runtime del agente | incluido (Opus 4.7) | incluido (pi-ai) | tu CLI existente |
| Flexibilidad de proveedor | solo Anthropic | 7+ vía pi-ai | 16 CLI + proxy BYOK |
| Formulario (turno 1) | — | — | regla dura |
| 5 direcciones visuales | — | — | sí |
| Autocrítica de 5 dimensiones | — | — | puerta antes de emitir |
| Skills, sistemas y migración | |||
| Skills | propietarios | 12 módulos TS | 110 bundles SKILL.md soltables |
| Design systems | propietarios | DESIGN.md (v0.2) | 141 sistemas incluidos |
| Importación ZIP de Claude Design | n/d | — | sí — sigue editando donde Anthropic lo dejó |
Claude Design es marca registrada de Anthropic. Open Design no está afiliado a Anthropic ni respaldado por Anthropic.
Más allá del chat
Imagen, vídeo, audio — la misma superficie.
El mismo chat que produce HTML <artifact> mueve también la generación de imagen, vídeo y audio. Cada render aterriza como un .png o .mp4 real en el workspace de tu proyecto. 95 prompts listos para reproducir bajo prompt-templates/.
01
gpt-image-2
Pósters · avatares · mapas ilustrados · infografías · tarjetas sociales tipo revista · UI de juego · stills narrativos de juego
ampliar gpt-image-2
Evolución de escalera de piedra 3D
ampliar gpt-image-2
Mapa gastronómico ilustrado de la ciudad
ampliar gpt-image-2
Escena de ascensor cinematográfica
ampliar gpt-image-2
Retrato anime cyberpunk
ampliar gpt-image-2
Retrato de estudio glamuroso
ampliar gpt-image-2
Anime Fighting Game — Captain Ryuuga vs Kaze Renshin
ampliar gpt-image-2
Three Kingdoms — Guanyu mata a Yanliang
ampliar gpt-image-2
Three Kingdoms — Lyubu en el tiro al arco de Yuanmen
ampliar gpt-image-2
Three Kingdoms — Zhaoyun escapa con la cuna
ampliar gpt-image-2
HUD MMO de mundo abierto en la China antigua
ampliar gpt-image-2
Dibujo infantil a ceras → reinterpretación fotorrealista
ampliar gpt-image-2
Desglose de coreografía otaku — 16 paneles
ampliar gpt-image-2
Storyboard de baile sensacional — 8 planos
02
Seedance 2.0
15 s de t2v + i2v cinematográficos con audio · shorts narrativos · pelis de producto
Seedance 2.0
Music Podcast & guitarra
Seedance 2.0
Primer plano emocional
Seedance 2.0
Supercoche de lujo cinematográfico
Seedance 2.0
Sátira del gato de la Ciudad Prohibida
Seedance 2.0
Short de romance japonés
Seedance 2.0
Vuelo cinematográfico de dragón
Seedance 2.0
Persecución en fábrica del yermo
Seedance 2.0
Tráiler de juego cyberpunk
Seedance 2.0
Crimson Horizon Sci-Fi
Seedance 2.0
Storyboard de academia mágica
Seedance 2.0
Pelea de vampiros en callejón
Seedance 2.0
Estética wuxia retro de HK
Seedance 2.0
Three Kingdoms — Guanyu mata a Yanliang
Seedance 2.0
Three Kingdoms — Lyubu en el tiro al arco de Yuanmen
Seedance 2.0
Three Kingdoms — Zhaoyun escapa con la cuna
Seedance 2.0
Niño 3D animado construyendo Lego
Seedance 2.0
Rescate del antiguo dragón guardián
Seedance 2.0
Antiguo reino indio — FPV
Seedance 2.0
Motion graphics de intro de personaje
Seedance 2.0
Danza de manos de mujer asiática oriental
Seedance 2.0
Bióloga marina explorando
Seedance 2.0
Carrera callejera cinematográfica
Seedance 2.0
Jumpscare de cohete-tostadora
Seedance 2.0
Pirata Disney vintage con cocodrilo
Seedance 2.0
Fantasía haute couture hollywoodiense
03
HyperFrames
Motion graphics HTML→MP4 · revelaciones de producto · tipografía cinética · gráficos de datos
ampliar HyperFrames
Outro de logo cinematográfico
ampliar HyperFrames
Showcase de app en tres móviles
ampliar HyperFrames
Karaoke TikTok
ampliar HyperFrames
Carrera de barras
ampliar HyperFrames
Ruta en mapa de vuelo
ampliar HyperFrames
Contador de billetes hype
ampliar HyperFrames
Pila de overlays sociales
ampliar HyperFrames
UI 3D-reveal
Quickstart
Tres comandos. Sin registro.
Node ~24, pnpm 10.33.x. Corre en macOS, Windows y Linux (build AppImage vía `pnpm tools-pack linux build --to appimage`). El daemon crea una carpeta .od/ local para SQLite y artifacts por proyecto. Sin paso de init.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run webQué hay de nuevo · v0.5.0
Cuatro giros desde v0.4.0.
v0.5.0 mueve el loop del artifact de «renderiza una vez y listo» a «sigue puliéndolo» — Inspect mode para ajustar el estilo elemento a elemento, los live dashboards ascienden a categoría de artifact de primera, la rúbrica del Design Jury más afilada. El `od mcp` de v0.4.0 sigue ahí y enhebra todo eso con los demás coding agents que tienes en el portátil.
Ajuste por elemento
Inspect mode — clic en cualquier cosa del preview.
Pasa el ratón, haz clic, ajusta el computed style del elemento — color, espaciado, tamaño de fuente — sin volver al agente. El artifact se actualiza al instante. Cuando estés conforme, los cambios bajan a los archivos fuente.
v0.5.0 · PR #362
Categoría de primera
Los live dashboards saltan de demo a opción por defecto.
Tres nuevos skills de dashboard (`live-dashboard`, la plantilla `clinic-console` bajo `live-artifact`, `flowai-live-dashboard-template`) más una prompt template de tablero de equipo estilo Notion — todos enchufan los artifacts a conectores Composio reales. Lo que corre en el panel de preview son datos vivos, no mocks congelados.
v0.5.0 · PR #778 + #795 + #801 + #799
Puerta de calidad · Fase 5
La rúbrica del Design Jury pasa por el system composer.
La rúbrica de cada panelista vive ahora en una prompt template a nivel del panel, inyectada vía el system composer compartido. De una corrida a la siguiente, las evaluaciones se mantienen coherentes. Persistencia, transcript y orquestador de la Fase 4 siguen en pie.
v0.5.0 · PR #524
Protocolo
od mcp — Open Design como servidor MCP.
Lanza `od mcp` y cualquier coding-agent que hable MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) lee directamente los archivos, el índice de búsqueda y los metadatos de tu proyecto. Read-only en el borde. El proyecto que la app OD tiene abierto es el que ahora ven todos los demás agentes.
v0.4.0 · PR #399
El linaje de Open Design
De qué se compuso Open Design.
alchaincyf
Brújula filosófica del diseño
huashu-design ↗
Workflow Junior-Designer, protocolo brand-asset de 5 pasos, checklist anti-AI-slop, autocrítica de 5 dimensiones y las 5 escuelas × 20 filosofías de diseño detrás del selector de dirección de Open Design.
op7418
Modo deck
guizang-ppt-skill ↗
Incluido tal cual bajo skills/guizang-ppt/ con su LICENSE original. Los layouts tipo revista, el hero WebGL y la cultura de checklists P0/P1/P2 se filtraron al resto de skills de Open Design.
OpenCoworkAI
Pariente más cercano · estrella polar de UX
open-codesign ↗
Loop de artifact en streaming, vista previa en iframe sandbox, panel de agente en vivo (todos + tool calls + interrumpible), exportación a cinco formatos, anotaciones en modo comentario. El formato diverge a propósito — open-codesign envía Electron + pi-ai, Open Design envía web + daemon local + tu CLI.
multica-ai
Arquitectura del daemon
multica ↗
Detección de agentes por escaneo de PATH, daemon local como único proceso privilegiado, visión del agente como un compañero de equipo. Open Design adopta el modelo de arquitectura; el código de multica en sí no se incluye.
Danos una estrella
Si esto te ahorró media hora — ponle un ★.
Las estrellas no pagan el alquiler, pero le dicen al próximo diseñador, agente y contributor que este experimento merece su atención.
Apache-2.0
Open source
110
Skills
141
Design Systems
16 + BYOK
CLIs
FAQ
Preguntas frecuentes
¿Qué es Open Design?
+
Open Design es la alternativa open source a Claude Design de Anthropic. Corre en local con pnpm tools-dev, despliega en Vercel y usa el coding-agent CLI que ya tienes (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 más) como motor de diseño. Bajo licencia Apache-2.0.
¿En qué se diferencia Open Design de Claude Design?
+
Claude Design es cerrado, de pago (Pro/Max/Team), solo en la nube y atado al modelo y skills de Anthropic. Open Design es open source, BYOK, local primero, y te deja cambiar de modelo libremente entre 16 adaptadores CLI o cualquier endpoint compatible con OpenAI / Azure / Google.
¿Puede Open Design reemplazar Claude Design en mi equipo?
+
Si necesitas auto-alojamiento, flexibilidad de modelos o skills propios, sí. El loop completo (detectar agente → elegir skill + design system → chat → parsear <artifact> → preview → guardar) corre de extremo a extremo. v0.4.x sumó Critique Theater (puntuación de la Design Jury antes de enviar), Tweaks mode (selector de elemento + adjuntos al chat), Manual edit mode y live artifacts que tiran datos vivos vía conectores Composio.
¿Hace falta una suscripción de Claude Pro para usar Open Design?
+
No. Open Design usa el coding-agent CLI que ya tengas en el PATH, o cualquier API key compatible con OpenAI vía el proxy BYOK. Trae tus propias claves para el proveedor que prefieras.
¿Qué CLIs de coding-agents soporta Open Design?
+
16 de fábrica: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI y Pi. Detectados automáticamente en el PATH al arrancar el daemon.
¿Cómo importo un proyecto de Claude Design existente a Open Design?
+
Suelta un ZIP de export de Claude Design en el diálogo de bienvenida. POST /api/import/claude-design lo extrae en una carpeta real .od/projects/<id>/, abre el archivo de entrada como tab y prepara un continue-prompt para tu agente local.
¿Puedo auto-alojar Open Design en Vercel?
+
Sí. La capa web es Next.js 16 + React 18 + TypeScript, desplegable en Vercel. El daemon local se queda en tu portátil. Topology B (Vercel + túnel) para setups completamente remotos está en la roadmap.
¿Cómo añado un design system propio a Open Design?
+
Suelta un archivo DESIGN.md en design-systems/<tu-marca>/ siguiendo el esquema de 9 secciones (color, tipografía, spacing, layout, componentes, motion, voice, marca, anti-patterns). Reinicia el daemon — aparece en el picker.
¿Open Design es gratis? ¿Qué licencia tiene?
+
Apache-2.0. Los bundles skills/guizang-ppt/ y skills/html-ppt/ conservan su licencia MIT original con la atribución preservada. Sin niveles de pago. Sin límites de uso. El único coste es lo que cobre el proveedor LLM que elijas.
¿Cómo evita Open Design el look de AI-slop?
+
Un formulario en el turno 1 fija el brief antes de que el modelo pinte. Un selector de 5 direcciones aporta paletas deterministas cuando no hay guía de marca. Una autocrítica de 5 dimensiones puntúa la salida antes de emitirla. Cada skill trae una checklist P0/P1/P2 forzada vía inyección de side-files en pre-flight. Los degradados violetas agresivos, los emojis genéricos y usar Inter como display están explícitamente prohibidos en el prompt stack.
¿Puedo usar Open Design sin instalar ningún CLI?
+
Sí. POST /api/proxy/stream reenvía chunks SSE a cualquier endpoint compatible con OpenAI, Azure o Google. Pega baseUrl, apiKey y model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, tu vLLM auto-alojado, el shim Anthropic-via-OpenAI — todo funciona. Protegido contra SSRF en loopback y redes privadas.
¿Cómo valido mi configuración de provider BYOK sin abrir un chat?
+
Settings → Execution tiene un botón de Connection test (v0.5.0, PR #507). Pega baseUrl + apiKey + model, dale a Test — Open Design dispara un handshake mínimo contra el provider y muestra la respuesta o el frame de error exacto. Funciona con Anthropic, OpenAI compatible, Azure y Google. Te ahorras el rodeo «abrir un chat para rastrear el fallo» cuando la clave está mal, el nombre del modelo está mal escrito o el gateway está bloqueando.
¿Mis datos se mandan a Anthropic cuando uso Open Design?
+
Solo si eliges el modelo de Anthropic (Claude Code o vía el proxy BYOK con una clave de Anthropic). Open Design en sí guarda todo en un SQLite local en .od/app.sqlite y archivos por proyecto bajo .od/projects/. Nada se sube a servidores de Open Design — no hay servidores de Open Design.
¿Mis otros coding-agents pueden leer proyectos de Open Design?
+
Sí. Lanza `od mcp` y Open Design se expone como servidor MCP por stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — cualquier herramienta que hable MCP — puede leer los archivos de tu proyecto, ejecutar search e inspeccionar metadatos. La interfaz es read-only en el borde: lectura de archivos, search, metadatos. Sin superficie de escritura, sin llamadas externas. Enviado en v0.4.0.
¿Qué es Critique Theater?
+
Una Design Jury de 5 panelistas que puntúa cada artifact antes de enviarlo — accesibilidad, fit de marca, craft, contenido, estructura. Persistencia + transcript + orquestador están de extremo a extremo desde la Fase 4 de v0.4.0. Por debajo del umbral configurado el agente revisa y vuelve a puntuar; por encima, el artifact se emite.
¿Qué son los live artifacts y qué conectores se soportan?
+
Los live artifacts traen datos en vivo al panel de preview vía un catálogo de conectores Composio — GitHub, Linear, Notion, Gmail y más. Los skills incluidos orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion y social-media-dashboard muestran el cableado de extremo a extremo. Enviado en v0.4.0 (PR #381).
Enviar
Envía tu primer artifact en tres minutos.
Clona el repo. Lanza tres comandos. Escribe un prompt. Mira llegar el formulario, rellénalo, mira la tarjeta todo en streaming, mira renderizar el artifact.