Open Design — el reemplazo gratis de Claude Design
Si pagas el plan de $20/mes de Claude, ya sabes que Claude Design te quema los tokens rapidísimo y los diseños salen genéricos. Acaba de salir Open Design de nexu-io — el reemplazo gratis y open-source. Tiene 71 estilos de marca cargados (Linear, Stripe, Vercel, Apple, Tesla, Notion…), hace 19 cosas distintas (webs, dashboards, apps móviles que se ven como app real de iPhone, decks, reportes financieros), funciona con cualquier agente (Claude Code, Codex, Cursor, Gemini, Qwen) y vive 100% en tu computadora. Acá te lo explico como si tuvieras 5 años y te dejo el prompt listo para que Claude Code te lo instale.
comunidad · abril de 2026
Open-source · local-first · 71 estilos de marca · 19 skills · Apache-2.0
La diferencia clave: Claude Design vive en la nube de Anthropic y come tokens cada vez que diseñas algo. Open Design vive en tu computadora — el daemon detecta solo a Claude Code (u otro CLI) y lo usa de motor. Si conectas un modelo local como Qwen 3.5 o 3.6, cada diseño te sale completamente gratis. Cero suscripciones, cero límites, cero cuentas quemadas.
el anuncio · abril de 2026
Open Design — el reemplazo gratis de Claude Design
Te lo cuento como si tuvieras 5 años: Claude Design es como una caja de juguetes que Anthropic te presta cuando pagas el plan de $20 al mes. Tiene como tres juguetes (estilos), si juegas mucho se gasta la pila (los tokens) y a veces ni te deja prestártela un rato.
Open Design es la misma caja, pero la traes a tu casa, tiene 71 juguetes diferentes ya cargados (estilos de Linear, Stripe, Vercel, Apple, Tesla, Notion, Spotify…), no tiene pila — la pila eres tú decidiendo qué CLI usa de motor — y, lo más importante, es gratis. Si conectas un modelo local (Qwen 3.5 o 3.6) hasta los tokens te salen gratis.
Repo oficial · nexu-io
github.com/nexu-io/open-design — el repo de la herramienta, con los 71 estilos y las 19 skills incluidas.
5.2k stars · 629 forks
La comunidad ya hizo ruido con este lanzamiento. Es una de las alternativas open-source con más tracción de los últimos meses.
Licencia Apache-2.0
Licencia permisiva — lo puedes usar para tu trabajo, agencia, productos comerciales, lo que sea. Sin pedir permiso.
Lo que se dice de Claude Design (y por qué pesa)
Mucha gente reporta en redes que Claude Design come tokens muy rápido y, en algunos casos, deja la cuenta sin poder usarse el resto del día. Anthropic no ha publicado un cap oficial de tokens por skill — lo que sabemos viene de la comunidad. Lo que sí es cierto: cualquier herramienta hosted vive bajo los caps de tu plan.
Lo que cambia con Open Design (sin marketing)
Como vive en tu computadora, los caps son los del CLI que tú uses (Claude Code, Codex, Qwen local, etc.). Si usas un modelo local, no hay caps en absoluto. Y como los 71 estilos son archivos en tu disco, los puedes editar — algo imposible en una versión hosted.
¿Cómo se siente usarlo? — el flujo en 4 segundos
- Abres el browser en localhost (Open Design corre local).
- Eliges un estilo de los 71 (digamos Linear).
- Eliges una skill de las 19 (digamos SaaS Landing).
- Le escribes en español qué quieres y Claude (o el CLI que elegiste) lo arma — y los archivos quedan en tu carpeta para que los abras.
01 los 71 estilos
71 estilos de marca cargados — eliges uno y todos los diseños salen así
La diferencia más grande con Claude Design: cada estilo en Open Design es un archivo DESIGN.md que define todo el sistema visual de una marca — colores, tipografía, espaciado, animaciones, voz. No son temas superficiales: son sistemas de diseño completos. Eliges uno y todo lo que diseñes sale con esa estética.
Acá te dejo una selección de los más reconocidos, agrupados por categoría. En el repo hay más de 70 — incluyendo BMW, Ferrari, IBM, PlayStation, The Verge, Wired, SpaceX, Resend, Sentry, Webflow, Sanity y muchos más.
AI · LLM
Las marcas que ya viven cerca de Claude. Buenas para apps que se sienten conversacionales o de laboratorio.
Claude
Sereno, terracota, tipografía con personalidad — el aire de Anthropic.
Cohere
Gradientes morados y rosas, sensación de plataforma para developers.
Mistral
Naranjas vivos y blanco, vibe europeo limpio.
ElevenLabs
Negro profundo con violetas, ondas de sonido — todo lo que es voz.
Replicate
Mono, blanco y negro, super técnico — para landings de modelos.
X.AI
Negro absoluto, contrastes filosos — la línea de Grok.
Herramientas de Developer
Marcas con disciplina visual fuerte. Si tu producto es para makers o engineers, este grupo te queda como guante.
Linear
Gris-azul espacial, líneas precisas, ese minimalismo que todos copian.
Vercel
Negro y blanco puros, geometría aguda, cero ruido.
Stripe
Gradientes vivos sobre blanco, animaciones suaves — el rey de las landings.
Supabase
Verde eléctrico sobre negro, vibe open-source con personalidad.
Framer
Fluido, lleno de movimiento, todo se desliza — sale gritando 'animación'.
PostHog
Naranja juguetón con ilustraciones, calientito y nada serio.
Cursor
Negro técnico con acentos eléctricos, IDE-first.
Productividad y Creativos
Marcas suaves, cálidas y bien tipografiadas. Para apps que se usan todo el día sin cansar la vista.
Notion
Blanco hueso, mucho aire, tipografía tipo libreta — wiki vibes.
Figma
Multi-color flat con sombras suaves, sensación de herramienta de diseño.
Raycast
Modo oscuro pulido con highlights rojos, command-palette aesthetic.
Miro
Amarillo cálido y ilustración mano, vibe de pizarrón infinito.
Superhuman
Editorial elegante con tipografía serif — premium sin gritarlo.
Fintech
Para productos donde la confianza pesa. Tipografía sólida, gridlines numéricos, paletas serenas.
Coinbase
Azul institucional, cards grandes, sensación de banco moderno.
Binance
Amarillo con negro, energía de exchange — todo se mueve.
Revolut
Negro premium con gradientes púrpura, banca para milennials.
Kraken
Morado profundo, vibe institucional pero crypto-nativo.
Lifestyle, Auto y Media
Las marcas que cualquier persona reconoce. Buenas cuando quieres un look pulido sin pensarle mucho.
Apple
Mucho blanco, tipografía inmaculada, fotos grandes — premium clásico.
Tesla
Negro y rojo eléctrico, hairline tipografía, vibe automotriz.
Spotify
Negro con verde neón, tarjetas redondeadas, energía joven.
Airbnb
Coral cálido con fotos de viaje, friendly y aspiracional.
Nike
Negro con tipografía bold, todo en mayúsculas, energía de campaña.
SpaceX
Negro espacial con azul eléctrico, geometría orbital.
¿Y si ninguno me encaja?
Como cada estilo es un archivo de texto en tu disco, puedes copiar uno y editarlo a tu gusto — cambiar paleta, tipografía, voz — y guardarlo como tu propio sistema de diseño. También puedes pedirle a Claude Code que te arme uno desde cero leyendo la página de tu marca. Ese nivel de control no existe en versiones hosted.
02 las 19 skills
19 cosas distintas que puedes diseñar
No solo páginas web. Open Design viene con 19 skills distintas — recetas completas para tipos de entregables específicos. Cada skill sabe qué estructura usar, qué secciones meter y cómo presentar la info. Le dices qué quieres y arma el resultado.
Para diseño y prototipos (10)
Las superficies clásicas de marketing y producto. Salen como sitios HTML navegables — los puedes deployar tal cual a Vercel o Netlify.
Web Prototype
Una landing o sitio completo navegable, listo para deployar.
SaaS Landing
La landing clásica con hero, features, pricing y CTA — bien armada.
Dashboard
Panel de métricas con cards, charts y tablas — listo para conectar a tus datos.
Pricing Page
Página de precios con planes, feature comparison y FAQ.
Docs Page
Documentación con sidebar, navegación y bloques de código.
Blog Post
Un post tipográficamente bien tratado — listo para publicar.
Mobile App
Pantallas de app móvil que se ven como app real de iPhone.
Mobile Onboarding
Las primeras 3-5 pantallas que enamoran al usuario nuevo.
Simple Deck
Pitch deck limpio en HTML/PDF, sin pelearse con PowerPoint.
Guizang PPT (magazine)
Decks estilo revista con fotografía grande, super editoriales.
Para documentos y entregables de trabajo (9)
Las cosas que se mandan por correo o se imprimen. Salen como HTML/PDF/PPTX exportables — más bonitas que los templates de Google Docs.
PM Spec
Documento de especificación de producto — formato bonito y leíble.
Weekly Update
El resumen semanal del equipo, listo para mandarse.
Meeting Notes
Notas de junta estructuradas — decisiones, acciones, dueños.
Engineering Runbook
El documento que guía a oncall cuando algo se rompe en producción.
Finance Report
Reporte financiero con tablas y charts — buena pinta para inversionistas.
HR Onboarding
El paquete de bienvenida del primer día de trabajo.
Invoice
Factura con tu marca — exportable a PDF.
Kanban Board
Tablero de tareas estilo Trello/Linear, listo para imprimir o screenshot.
Team OKRs
Página de objetivos y resultados clave del equipo.
La parte más cool: cada skill es un SKILL.md editable
Como los estilos, las skills son archivos de texto en tu disco. Si quieres una skill nueva (digamos "Reporte de marketing mensual" con el formato exacto que usa tu equipo), copias una existente, la editas y ya — Claude la usa al instante. Esto es lo que hace que la herramienta crezca contigo en vez de quedarte estancado en lo que el provider decidió.
03 funciona con cualquier agente
Funciona con cualquier CLI — y gratis si usas un modelo local
Open Design no está casado con un modelo. Su daemon detecta solo el binario del agente que ya tengas instalado en tu PATH (Claude Code, Codex, Cursor, Gemini, Qwen…) y lo usa de motor. No hay que configurar MCPs ni pegar URLs. Si tienes Claude Code, ya está. Si lo desinstalas y mañana usas Codex, también ya está.
Claude Code
Soporte principalEl soporte principal. Streaming de eventos tipados, mejor fidelidad y la integración más estable. Si ya tienes Claude Code instalado, Open Design lo detecta solo al arrancar.
binario detectado: claude
Codex CLI
SoportadoEl CLI de OpenAI. Detección automática si está en tu PATH.
binario detectado: codex
Cursor Agent
SoportadoEl agente headless de Cursor. Útil si ya pagas Cursor y no quieres tocar otro CLI.
binario detectado: cursor-agent
Gemini CLI
SoportadoEl CLI oficial de Google. Bueno para tareas grandes con contexto largo.
binario detectado: gemini
OpenCode
SoportadoAgente open-source para los que prefieren no depender de un proveedor.
binario detectado: opencode
Qwen Code
SoportadoEl CLI de Qwen. Lo puedes correr contra modelos locales (Qwen 3.5, Qwen 3.6) — completamente gratis, cero tokens gastados.
binario detectado: qwen
GitHub Copilot CLI
SoportadoEl CLI de Copilot. Útil si ya tienes Copilot Pro y trabajas en repos GitHub.
binario detectado: copilot
Anthropic API (BYOK)
Fallback en browserSi no tienes ningún CLI instalado, puedes pegar tu API key de Anthropic directamente en el browser. Bring Your Own Key.
La jugada para que te salga 100% gratis
Si conectas Qwen Code apuntando a un modelo local (Qwen 3.5 o 3.6 corriendo en tu Mac con Ollama, LM Studio o llama.cpp), cada diseño te sale con cero gasto en tokens. La pila se la pone tu computadora. Es ideal si estás iterando mucho — puedes regenerar 50 veces el mismo dashboard hasta que quede como quieres, sin pensar en el medidor.
¿Cómo lo detecta sin configurar?
Cuando arrancas Open Design, su daemon hace un which claude, which codex, etc. Si encuentra un binario, lo marca como disponible en la UI. Después tú eliges cuál usar para cada diseño. La UI te muestra el badge de "detectado" al lado del agente — si no aparece, abre la terminal y revisa que el binario esté en tu PATH.
04 instalación · 5 pasos
Cómo instalarlo en tu computadora (paso a paso)
Si no quieres pelearte con el setup manual, salta directo a la sección de prompts listos — ahí abajo te dejo un prompt completo para que Claude Code te lo instale solito. Pero si prefieres entender qué pasa, acá están los 5 pasos a mano.
requisitos antes de empezar
- Node ~24 en tu máquina (recomiendo instalarlo con
nvmomise). - pnpm 10.33.x — viene incluido vía corepack (no hay que instalarlo a mano).
- git instalado para clonar el repo.
- Al menos uno de los CLIs soportados (Claude Code, Codex, Cursor, Gemini, Qwen) — o tu API key de Anthropic para el fallback en browser.
cuánto se tarda
Entre 3 y 6 minutos la primera vez (la mayoría es pnpm install descargando dependencias). Las siguientes corridas son instantáneas — solo prendes el servidor con un comando.
Los 5 pasos en detalle:
paso 01
Clonar el repo de nexu-io
Lo más básico: descargas la carpeta del proyecto a tu computadora. Esto baja todo el código, los 71 estilos y las 19 skills al disco — Open Design vive 100% local.
paso 02
Activar pnpm con corepack
pnpm es el manejador de paquetes que usa Open Design. corepack viene con Node — solo le dices que active la versión de pnpm que el repo pide (10.33.x).
paso 03
Instalar dependencias
Una vez con pnpm activo, corres pnpm install dentro de la carpeta. Esto baja todas las librerías que necesita Open Design para funcionar (es la primera vez que tarda; después es instantáneo).
paso 04
Levantar el web server
Open Design corre en tu browser pero el cerebro vive en una pequeña daemon en tu computadora. pnpm tools-dev run web prende ambos al mismo tiempo. Ahí es cuando detecta automáticamente tu Claude Code (u otro CLI) en el PATH.
paso 05
Abrir la URL local
El comando te imprime la URL (algo tipo http://localhost:3000). La pegas en tu browser y ya estás dentro — eliges estilo, eliges skill, le escribes lo que quieres y Claude empieza a diseñar.
Los comandos exactos que vas a correr:
Clonar el repo a tu computadora
git clone https://github.com/nexu-io/open-design.gitEntrar a la carpeta del proyecto
cd open-designActivar pnpm via corepack
corepack enablecorepack ya viene con Node 16.13+ — solo lo prendes una vez por máquina.
Confirmar versión de pnpm (debe imprimir 10.33.x)
corepack pnpm --versionSi imprime otra versión, no pasa nada — corepack la jala automáticamente al correr pnpm.
Bajar todas las dependencias
pnpm installLa primera vez tarda un par de minutos. Después la cache hace que sea instantáneo.
Levantar el web server (daemon + browser)
pnpm tools-dev run webTe imprime la URL local en consola — la pegas en tu browser y listo.
Cuando termines: la URL local sale en tu consola
Después de pnpm tools-dev run web verás algo como web → http://localhost:3000. Esa es la URL — ábrela en tu browser y vas a ver la UI de Open Design con todos los estilos y skills disponibles. Si tu Claude Code ya estaba instalado, va a aparecer detectado en la lista de agentes.
05 prompts listos
Prompts copy-paste — instala y empieza a diseñar
Estos son los prompts que recomiendo para arrancar. El primero es el más importante: lo pegas en Claude Code en cualquier carpeta y Claude se encarga de bajar Open Design, instalar dependencias y prender el servidor. Después tienes los 4 prompts de ejemplo para diseñar cosas concretas con la herramienta ya corriendo.
paso 1 · prompt para instalar todo
Pega este prompt en Claude Code (cualquier carpeta sirve). Claude verifica tu entorno, clona el repo, instala dependencias, prende el servidor y te da la URL local. Si algo falla en el camino se para a preguntarte antes de seguir.
Claude Code · instala Open Design por mí
Verifica Node 24, clona el repo de nexu-io, instala dependencias, levanta el web server y confirma que detectó tu Claude Code.
Por favor instala Open Design en mi computadora. Es un proyecto open-source de nexu-io que reemplaza a Claude Design — corre 100% local y se conecta automáticamente con mi Claude Code. Repo oficial: https://github.com/nexu-io/open-design Carpeta donde lo quiero clonar: ~/Projects (si esa carpeta no existe, créala primero. Si tú prefieres otra, dime cuál usaste). Por favor sigue estos pasos en orden, una operación a la vez: 1. Verifica mi entorno antes de empezar: - ¿Tengo Node 24 instalado? Corre `node --version`. Si no es 24.x, párate y dime exactamente qué comando correr para instalarlo con `nvm` o `mise` (NO instales nada por mí — yo lo corro). - ¿Tengo `git` y `corepack` disponibles? Si falta alguno, párate y dime cómo instalarlo. 2. Una vez confirmado el entorno, ejecuta en orden (avísame cuando empiece y termine cada uno): - `cd ~/Projects && git clone https://github.com/nexu-io/open-design.git` - `cd open-design` - `corepack enable` - `corepack pnpm --version` (debe imprimir 10.33.x — si imprime algo distinto a la familia 10.33, párate y avísame antes de seguir). - `pnpm install` (puede tardar un par de minutos la primera vez). 3. Cuando termine la instalación, levanta el servidor con `pnpm tools-dev run web` en background y dame la URL local que imprimió en consola (algo tipo http://localhost:3000). 4. Confirma que el daemon detectó mi binario `claude` (Claude Code) en el PATH — Open Design lo auto-detecta al boot. Mira los logs y dime "Claude Code detectado" o "no encontró claude en PATH". Si no lo encontró, dime qué hago para arreglarlo. 5. Al final, abre la URL en mi browser por defecto (`open <url>` en macOS, `xdg-open <url>` en Linux). Reglas importantes: - Una operación a la vez. Si algo falla, párate y avísame antes de seguir — no intentes "arreglarlo" por tu cuenta. - No edites NADA fuera de la carpeta `open-design/`. - Si algún paso requiere `sudo`, párate y avísame qué necesitas y por qué. - Si tienes que asumir algo (por ejemplo dónde está mi PATH), márcalo con [VERIFICAR] al final. Cuando todo esté listo, dame un resumen corto: dónde quedó instalado, qué URL abrir, y qué CLI detectó.
Paso 2 · prompts de ejemplo para diseñar (úsalos dentro de Open Design):
Una vez que tengas la UI abierta en localhost, eliges estilo y skill, y le pegas uno de estos prompts en el campo de texto. Reemplaza los [PLACEHOLDERS] con tus datos.
Landing de SaaS estilo Linear
Una landing entera para tu producto, con la disciplina visual de Linear (gris-azul espacial, líneas precisas, mucho aire).
Estilo (Design System): Linear Skill: SaaS Landing Quiero una landing para mi producto. Llénala con estos datos: - Nombre del producto: [NOMBRE] - Una línea: [QUÉ HACE EN UNA FRASE] - Audiencia: [QUIÉN LO USA] - 3 features clave: [FEATURE 1, FEATURE 2, FEATURE 3] - Tres planes de pricing: [GRATIS / PRO / EQUIPO con precios y diferencias] - 2 testimonios cortos: [INVENTA 2 PLAUSIBLES si no te paso] - CTA principal: [QUÉ QUIERO QUE LA GENTE HAGA — agendar demo, registrarse, etc.] Hazme la landing entera con: hero, features (alternando lado), social proof, pricing, FAQ con 4 preguntas, footer. Disciplina total con el estilo Linear — sin colores random, sin animaciones que peleen con el sistema.
Dashboard estilo Stripe
Un panel de métricas que se ve como Stripe Atlas — gradientes vivos, animaciones suaves, cards grandes con números.
Estilo (Design System): Stripe Skill: Dashboard Quiero el dashboard de [NOMBRE DEL PRODUCTO O ÁREA]. KPIs principales arriba (4 cards grandes): 1. [MÉTRICA PRINCIPAL — ej. MRR] 2. [MÉTRICA SECUNDARIA — ej. usuarios activos] 3. [MÉTRICA DE CONVERSIÓN] 4. [MÉTRICA DE SALUD] Luego: - Una gráfica de línea: [QUÉ TENDENCIA SEGUIR — últimos 30 días] - Una tabla con [LISTADO DE 10 ITEMS — clientes, transacciones, lo que sea] - Un side panel con filtros y rango de fechas Mantén la estética Stripe — gradientes vivos sobre blanco, sombras suaves, tipografía fina pero legible. Nada de neón.
Pitch deck estilo magazine (Guizang PPT)
Un deck que se siente como revista de diseño — fotografía grande, tipografía editorial, transiciones que enamoran.
Estilo (Design System): elige el que mejor encaje con la marca; si no tengo, usa Default Editorial Skill: Guizang PPT (magazine) Quiero un pitch deck de [10-12 SLIDES] para mi ronda [SEED / SERIE A / etc]. Los datos del negocio: - Empresa: [NOMBRE] - One-liner: [QUÉ HACEMOS EN UNA FRASE] - Problema: [EL DOLOR DEL CLIENTE] - Solución: [CÓMO LO RESOLVEMOS] - Tracción actual: [USUARIOS, MRR, GROWTH RATE] - Mercado: [TAM/SAM/SOM en una línea cada uno] - Modelo de negocio: [CÓMO COBRAMOS] - Equipo: [3-4 BULLETS DE QUIÉNES SOMOS] - Pedido: [CUÁNTO LEVANTAMOS, A QUÉ PRECIO, EN QUÉ SE GASTA] Estructura editorial estilo revista — fotografía grande en cada slide, tipografía con personalidad, mucho aire blanco. Nada de bullets aburridos.
Onboarding de app móvil estilo Apple
Las primeras 4 pantallas de tu app que enamoran al usuario nuevo — limpio, tipografía perfecta, vibe de app real de iPhone.
Estilo (Design System): Apple Skill: Mobile Onboarding Quiero el onboarding de mi app [NOMBRE DE LA APP]. Lo que hace la app: [DESCRIBE QUÉ HACE] Mi audiencia: [QUIÉN LA USA] Necesito 4 pantallas de onboarding: 1. Welcome: cuál es la promesa principal de la app en 5 palabras. 2. Cómo funciona: ilustra el flujo en 3 pasos. 3. Permisos: pide los permisos necesarios ([NOTIFICACIONES, CÁMARA, etc.]) explicando el porqué de cada uno. 4. Empezar: el botón que arranca la primera tarea. Estética Apple total — mucho blanco, una tipografía elegante, ilustraciones simples, transición suave entre pantallas. Que se sienta como app real del App Store, no como mockup.
Tip pro: deja que Claude itere antes de mostrar
Open Design genera archivos en tu carpeta .od/projects/. Si no te gusta lo que salió, no regeneres desde cero — abre el archivo, dile a Claude Code "haz X ajuste manteniendo el estilo" y deja que itere. Iterar es 10x más barato que regenerar (sobre todo si estás usando un modelo en la nube).
Guía de la comunidad
Esta guía traduce y profundiza el lanzamiento de Open Design por nexu-io y lo conecta con el resto de las herramientas de diseño y creatividad que ya viven en tododeia. El stack creativo completo: alguien que piensa la idea (Claude Code), alguien que arma el video o la imagen (Hyperframes / Higgsfield) y alguien que diseña la página o el deck final (Open Design).
Hyperframes (Claude Design)
La versión hosted de Anthropic — útil de comparar para entender qué te ahorras al moverte a Open Design.
Agencia de Marketing con Claude
El combo de 3 herramientas open-source para reemplazar a tu agencia entera — auditoría, SEO y creativos.
Meta Ads CLI Oficial
Si Open Design diseña la landing, este lanza la campaña. El conector oficial de Facebook con Claude.
¿Para quién NO es esta guía?
Si nunca has usado un agente CLI (Claude Code, Codex, Cursor) en tu terminal, no empieces aquí — primero instala uno y aprende lo básico. Open Design asume que ya tienes ese músculo. Si vienes de productos no-code 100% (Webflow, Framer, Figma) y no quieres tocar terminal, esto te va a frustrar. Y si tu trabajo es 100% diseño visual fino con decisiones a pixel, esto te ayuda a sacar borradores rápido pero el pulido final lo sigues haciendo tú — Open Design es un acelerador, no un reemplazo del criterio del diseñador.