01 Qué es y en qué se diferencia
Open Design es un espacio de trabajo para diseñar con agentes de IA. Escribes un encargo (una landing, un panel, una presentación, una ficha de producto), eliges un sistema de diseño y el agente genera el resultado en HTML y CSS reales, que puedes previsualizar, compartir, exportar a PDF, PPTX o vídeo, o pasar a tu proyecto como código.
La diferencia con herramientas alojadas como Claude Design es que no incluye un modelo: detecta los agentes de código que tienes en el ordenador (Claude Code, Codex, Cursor, Gemini, OpenCode y muchos más) y los usa como motor. También admite tu propia clave de API o modelos locales mediante Ollama o LM Studio.
Sistemas de diseño
Más de 150 paquetes basados en un archivo DESIGN.md que define colores, tipografía, espaciado y tono. Puedes añadir el tuyo.
Plantillas de diseño
Landing SaaS, panel de control, app móvil, onboarding, carrusel para redes, email, presentaciones de estilo revista, OKR, informes financieros…
Skills y plugins
Más de cien skills con el formato SKILL.md y un catálogo de plugins con flujos completos, todos editables.
Servidor MCP
Tu agente puede leer los proyectos de Open Design desde otro repositorio y seguir trabajando sobre el diseño como código.
02 Tres formas de instalarlo
| Opción | Para quién | Qué necesitas |
|---|---|---|
| App de escritorio | La mayoría: sin configuración | Mac (Apple Silicon o Intel) o Windows x64. Se descarga desde las releases de GitHub o la web del proyecto |
| Desde el código fuente | Linux o quien quiera modificarlo | Git, Node 24 y pnpm 10.33 (se activa con corepack) |
| Docker | Servidores o equipos | Docker y Docker Compose |
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run webEl último comando imprime la dirección local que debes abrir en el navegador; el puerto se asigna de forma dinámica. Al arrancar, Open Design busca los agentes disponibles en tu PATH y los marca como detectados. Si Claude Code no aparece, comprueba en la terminal que claude --version responde.
03 Usarlo desde Claude Code sin abrir la interfaz
Además de la interfaz web, Open Design funciona como servidor MCP. Una vez conectado, puedes pedir diseños directamente en Claude Code y leer los archivos de cualquier proyecto de Open Design desde otro repositorio.
od mcp install claude --print # vista previa sin cambios
od mcp install claudeUsa open-design para crear una landing de una sola página para [tu servicio] con el sistema de diseño [nombre del sistema o «default»].
Público: [a quién va dirigida].
Secciones: cabecera con la propuesta de valor, tres beneficios, cómo trabajamos en tres pasos, preguntas frecuentes y llamada a la acción para [pedir presupuesto / reservar una llamada].
Textos en español de España, sin testimonios ni cifras inventadas: deja huecos marcados donde falten datos reales.04 Trabajar con tu propia marca
Los sistemas incluidos imitan la estética de marcas conocidas y sirven para explorar estilos. Para entregables reales de tu empresa o de un cliente, crea un sistema propio: añade una carpeta en design-systems/ con un DESIGN.md que describa tus colores, tipografías, componentes y tono. Desde la interfaz también puedes dar una captura o la URL de tu web para que el agente lo redacte.
Analiza [URL de mi web o las capturas adjuntas] y redacta un DESIGN.md para Open Design con: paleta con valores hexadecimales y uso de cada color, tipografías y escala de tamaños, espaciados, radios y sombras, estilo de botones, tarjetas y formularios, y tono de los textos con ejemplos. Marca como [VERIFICAR] lo que deduzcas sin certeza. Guárdalo en design-systems/[mi-marca]/DESIGN.md.05 Ideas para un negocio
Landing de campaña
Una página por anuncio, coherente con su mensaje, lista para pasar a tu web.
Propuestas comerciales
Presentaciones de estilo editorial exportables a PDF o PPTX con la marca de tu agencia.
Paneles internos
Prototipos de cuadros de mando para validar con el cliente antes de programarlos.
Documentos de equipo
Onboarding de empleados, OKR o informes mensuales con un formato cuidado y repetible.
Con la plantilla de presentación de estilo revista y el sistema de diseño de mi marca, prepara una propuesta de 10 diapositivas para [cliente] sobre [servicio]. Incluye: contexto del cliente, problema, enfoque en tres fases, calendario, equipo, inversión y siguientes pasos. Una idea por diapositiva y poco texto. Usa solo los datos que te doy: [pega los datos].06 Privacidad y costes
- ✓El software es gratuito y de código abierto (Apache 2.0). Pagas los tokens del agente o modelo que uses.
- ✓Existe un servicio en la nube opcional con créditos de pago; no es necesario para usarlo en local.
- ✓Con modelos locales (Ollama, LM Studio) no hay coste por uso, aunque la calidad depende del modelo y de tu equipo.
- ✓La analítica de producto requiere tu consentimiento, pero la telemetría técnica de seguridad y fiabilidad (depurada de datos) está siempre activa; revísalo antes de usarlo con material confidencial.
- ✓El servidor escucha solo en tu equipo (127.0.0.1) salvo que lo expongas de forma explícita.
Preguntas frecuentes
Cubre un uso parecido con otro enfoque: local, abierto y con el agente que elijas. Claude Design está integrado en tu cuenta de Claude y no requiere instalar nada. Prueba ambos con el mismo encargo y quédate con el que encaje en tu flujo.
No para la app de escritorio. Sí ayuda saber usar la terminal si lo instalas desde el código o conectas el servidor MCP.
Sí. El resultado es HTML y CSS reales que Claude Code puede adaptar a tu framework, sea Laravel, Next.js, Astro u otro.
Sí, ejecutándolo desde el código fuente o con Docker. De momento no hay app de escritorio oficial para Linux.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.