Open Design para equipos: skills versionables, tu propio sistema de marca y barreras anti-slop
Cómo usar Open Design como un flujo de trabajo de diseño real y versionable para un equipo: crear tus propios skills y un DESIGN.md de marca, apoyarte en la compuerta de crítica anti-slop y mantener expectativas honestas sobre el uso en producción. Basado en el análisis de AICodeKing.
Esta guía trata de usar Open Design como un flujo de trabajo de diseño real y versionable, no solo como un generador de prototipos puntual. La combinación que lo hace interesante para un equipo: tu agente actual, skills basados en archivos y sistemas de marca DESIGN.md, con barreras anti-slop que evitan que el resultado parezca generado. Sigue el análisis que AICodeKing ofrece en su video, reescrito y actualizado para la versión actual. Mira el video de arriba para el desglose completo, o sigue leyendo para la versión escrita.
La biblioteca de plugins: instala skills directamente desde el registro, incluidos skills de diseño anti-slop.
¿Qué es Open Design?
Open Design es una aplicación de diseño local-first y de código abierto que se conecta al agente de programación que ya usas. En vez de incluir su propio modelo, detecta en tu PATH herramientas como Claude Code, Codex, Cursor, Gemini, OpenCode y Qwen Code, y usa ese agente como motor de diseño, con un repliegue a la API de Anthropic (BYOK) si no hay ninguno instalado. Es Apache-2.0, y el único costo es el del modelo que elijas. Como dice AICodeKing, es «una cáscara de diseño alrededor de los agentes que ya tienes».
Por qué es un flujo de trabajo de equipo, no solo una caja de chat
La razón por la que AICodeKing lo valora: no es una caja de prompt en blanco con una vista previa. El valor está en la combinación de tres cosas, todas versionables:
- Tu agente de programación actual: el motor, ya pagado.
- Skills basados en archivos: cada skill le da al agente reglas para una superficie específica (landing SaaS, dashboard, página de precios, documentación, blog, app móvil, presentaciones) en vez de «hazme una página bonita».
- Sistemas de marca
DESIGN.md: sistemas de diseño en markdown plano que cubren color, tipografía, espaciado, maquetación, componentes, movimiento, tono, reglas de marca y antipatrones.
Como los skills y los sistemas de diseño son archivos, un equipo puede crear su propio skill interno de dashboard y su propio DESIGN.md de marca, hacerles commit en git y lograr que Claude Code, Codex o cualquier agente genere artefactos que sigan esas reglas. Eso es un flujo de trabajo de diseño versionado, forkeable y revisable, algo que una caja de chat de diseño cerrada no puede ofrecer.
El centro de plugins: explora el registro, importa plugins y prepáralos para tu equipo.
La maquinaria anti-slop
La parte favorita de AICodeKing, y la razón por la que el resultado del equipo se mantiene presentable: Open Design combate las señales delatoras de la UI generada por IA. La pila de prompts ejecuta una crítica multidimensional antes de emitir un artefacto (filosofía de diseño, jerarquía, ejecución, especificidad, contención), cada skill puede incluir una lista de verificación P0/P1/P2 que el agente debe satisfacer, y el repositorio prohíbe explícitamente los modos de fallo habituales: degradados morados agresivos, iconos emoji genéricos, tarjetas redondeadas al azar con acento en el borde izquierdo, métricas falsas, relleno decorativo. Combinado con el formulario de descubrimiento (pregunta por superficie, audiencia, tono, marca y escala antes de escribir) y el selector de dirección (direcciones visuales curadas con paletas deterministas), el agente cuenta con una fuente de verdad estable en lugar de irse a la deriva en cada refinamiento.
Instalación
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webAbre la URL local que imprime (un puerto dinámico; no lo escribas a mano de forma fija). ¿Prefieres sin configuración? Consigue la aplicación de escritorio en open-design.ai/download. En la primera carga detecta los CLI de agente instalados; elige uno o usa la opción Anthropic BYOK. Explora la biblioteca completa de plugins en open-design.ai/plugins.
Una demo con sabor de equipo
El flujo que sugiere AICodeKing se traslada limpiamente al trabajo real: elige Codex o Claude Code como agente, elige un skill (landing SaaS o dashboard) y un sistema de diseño (p. ej., Linear o Stripe, fáciles de juzgar). Da un prompt concreto, como una landing page para un producto interno, completa el formulario de descubrimiento, elige una dirección y déjalo correr. El plan llega en streaming, el agente lee el skill y el DESIGN.md, y escribe archivos reales.
La galería HyperFrames: piezas de motion y vídeo impulsadas por código que puedes forkear y remezclar.
Las salidas se renderizan en una vista previa en sandbox y se exportan a HTML, PDF, ZIP y Markdown (estilo PPTX para los skills de presentaciones). Como el sistema de diseño y el skill permanecen en la pila de prompts, los refinamientos no se desvían: el agente conserva una referencia estable en vez de reinventar el aspecto en cada turno.
Sé honesto sobre la producción
AICodeKing lo ve con claridad, y tú también deberías: este es un proyecto temprano, así que trátalo como un punto de partida sólido, no como un equipo de diseño de producción listo para enchufar. La calidad del resultado depende mucho del modelo al que lo apuntes: un modelo débil más un buen sistema de diseño sigue dando un criterio de diseño débil. Claude Code obtiene el streaming más rico; los demás CLI van en búfer por líneas. Y como el daemon lanza agentes con un directorio de trabajo, piensa bien qué skills instalas y qué directorios expones. Para prototipos rápidos, landing pages, dashboards internos y presentaciones es realmente útil; para una UI de producción que se publica, genera y luego revisa el código, prueba la responsividad y refínalo.
Consejos
- Escribe tu propio skill +
DESIGN.mdde marca y hazles commit: ese es el superpoder del equipo. - Elige un sistema de diseño reconocible (Linear/Stripe) al juzgar el resultado, para que la calidad sea fácil de evaluar.
- Apóyate en el formulario de descubrimiento y el selector de dirección para fijar la dirección antes de generar.
- Usa un CLI local para que la generación se apoye en una suscripción que ya pagas.
- Trata el resultado como un punto de partida para producción: revisa, prueba, refina.
Preguntas frecuentes
¿Puede un equipo crear sus propios skills y sistemas de diseño?
Sí: los skills son carpetas y los sistemas de diseño son archivos DESIGN.md. Hazles commit en git y cualquier agente conectado genera contra ellos, así que todo el flujo de trabajo queda versionado y forkeable.
¿Qué evita que el resultado parezca generado por IA? Una autocrítica multidimensional antes de emitir, listas de verificación P0/P1/P2 por skill y una prohibición explícita de los patrones de slop comunes (degradados morados, iconos genéricos, métricas falsas), además del formulario de descubrimiento y el selector de dirección.
¿Está listo para producción? Es un punto de partida temprano pero capaz. Úsalo para prototipos, dashboards, landing pages y presentaciones; para UI de producción, revisa y refina el código generado.
¿Es gratis? La aplicación es de código abierto bajo Apache-2.0 y gratuita para ejecutar en local. Solo pagas el uso del modelo del agente y la clave que conectes.
Esta guía escrita se basa en el análisis de AICodeKing. Mira el video completo de arriba y suscríbete a AICodeKing para más análisis a fondo de herramientas de IA.