Open Design · el reemplazo gratis de Claude Design

Claude Design (claude.ai/design) es excelente pero requiere plan Pro y solo funciona dentro del producto de Anthropic. Si querés algo equivalente que corra con tu modelo local, con cualquier CLI agentic (no solo Claude), y sin pagar suscripción, Open Design de nexu-io es la respuesta.

71 sistemas de diseño de marcas reales (Linear, Stripe, Vercel, Apple, Tesla, Notion, Spotify, etc.), 19 skills distintas, conecta con Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, Copilot CLI y más. Open source, local-first, gratis si conectás modelo local.

Qué es exactamente

Open Design es un set de skills + assets que cualquier agente compatible puede usar. No es producto centralizado — es repo de GitHub que clonás (o instalás vía npx) y vive en tu máquina. Una vez instalado:

• Tu CLI agentic conoce 71 sistemas de diseño profesionales.
• Cuando pedís "armame una landing estilo Linear", el agente carga el design system de Linear (colores, typography, spacing, componentes) y aplica.
• 19 skills cubren tareas específicas: hero sections, pricing pages, dashboards, login flows, settings UIs, etc.

Los 71 sistemas de diseño

La lista incluye sistemas de marcas que la gente reconoce instantáneamente. Cada uno con:

• Paleta de colores (primaria, secundaria, neutrales, semánticos).
• Typography scale (h1-h6, body, caption con specs exactos).
• Spacing system (escala de 4px, 8px, etc. según la marca).
• Border radius scale.
• Shadows / elevation.
• Componentes signature (cómo se ven los botones, cards, inputs en esa marca).

Sistemas top:

Tech/SaaS:

• Linear, Stripe, Vercel, Notion, Figma, GitHub, Slack, Discord, Spotify.

Big Tech:

• Apple (Human Interface Guidelines), Google (Material 3), Microsoft (Fluent 2), Adobe (Spectrum).

Consumer:

• Tesla, Airbnb, Uber, Lyft, DoorDash, Robinhood, Instagram, X.

Enterprise:

• IBM (Carbon), Salesforce (Lightning), Atlassian, ServiceNow.

Diseño-first:

• Awwwards-style brutalist, Minimal Monochrome, Editorial, Brutalist, Glassmorphism, Neo-skeumorphic.

Más unos 40 sistemas estilos/aesthetics que no son de marcas específicas pero cubren tendencias (Y2K, Memphis, Swiss, etc.).

Las 19 skills

Cubren todo el lifecycle de un proyecto frontend:

1. landing-hero — hero sections.
2. landing-features — secciones de features.
3. landing-pricing — páginas de pricing.
4. landing-testimonials — social proof.
5. landing-cta — call-to-action final.
6. dashboard-shell — layouts de dashboard (sidebar + main).
7. dashboard-kpi-cards — cards de métricas.
8. dashboard-chart — visualizaciones de data.
9. forms-auth — login/signup/recovery.
10. forms-settings — UI de settings.
11. forms-onboarding — flows de onboarding.
12. navigation-top — top navs.
13. navigation-side — sidebars.
14. navigation-mobile — mobile menu patterns.
15. modals-dialogs — modales y diálogos.
16. lists-tables — listas y tablas complejas.
17. empty-states — estados vacíos con CTAs.
18. error-states — manejo de errores.
19. loading-states — skeletons y spinners.

Cada skill toma como parámetro el design system a usar. Si pedís landing-hero con vercel-style, sale distinto que con notion-style.

Instalación

git clone https://github.com/nexu-io/open-design ~/.config/open-design

Después conectás con tu agente. Para Claude Code:

npx skills@latest add nexu-io/open-design

Para Codex:

npx skills@latest add nexu-io/open-design --agent codex

Para Cursor:

# Agregás en .cursor/rules el archivo de Open Design
cp ~/.config/open-design/rules/cursor.md .cursor/rules/open-design.md

Cada CLI tiene su forma. El repo tiene instrucciones por cada uno en INSTALL.md.

Modelo local: cómo y por qué

La diferencia clave con Claude Design es que Open Design no asume un modelo específico. Conectás el que quieras:

Opción 1: Modelo local (Ollama)

ollama pull qwen2.5-coder:32b

Configurás tu CLI agentic para usar Ollama como backend. Una vez configurado:

• Diseñás con costo $0 marginal.
• Sin internet también funciona (importante para freelances en condiciones de conectividad variable).
• Privacy: tu código y tus diseños no salen del disco.

Limitación: modelos locales de 32B son menos capaces que Claude/GPT. La calidad del output baja en proyectos complejos. Para landings simples está bien. Para apps full-featured con lógica intrincada, mejor un modelo cloud.

Opción 2: Modelos cloud (Claude, GPT, Gemini)

Cualquier API key sirve. La diferencia con Claude Design "puro": vos elegís el modelo, vos pagás solo por tokens, no por suscripción.

Combinación: design con local, lógica con cloud

El power user move: usás Ollama local para diseño (donde no necesitás razonamiento profundo), Claude cloud para lógica de negocio (donde sí).

Comparación con Claude Design

Claude Design gana en: UX integrada, modelo de calidad asegurada, soporte oficial.

Open Design gana en: costo, flexibilidad, sistemas de marcas más diversos, no lock-in.

Cuándo elegir cada uno

Elegí Claude Design si:

• Ya tenés Pro/Max.
• Querés algo que funcione bien sin configuración.
• Trabajás dentro de claude.ai principalmente.
• No necesitás emular marcas específicas con precision.

Elegí Open Design si:

• Querés costo cero o sub-$10/mes.
• Trabajás con CLI agentic distinta a Claude Code (Cursor, Codex, etc.).
• Tu trabajo requiere emular marcas reales (cliente que quiere "estilo Linear").
• Privacy es importante (cliente confidencial, código no comparable).
• Querés forkear y customizar el sistema de skills.

4 prompts copy-paste

Prompt 1: Landing estilo Vercel

Usá open-design con vercel-style.
Skill: landing-hero, landing-features (3 features), landing-pricing (3 planes), landing-cta.
Producto: SaaS de inventario para tiendas pequeñas.
Audiencia: dueños de comercio en LatAm.
Tono: profesional pero accesible.
Stack: Next.js 15 + Tailwind v4. Sin shadcn.

Prompt 2: Dashboard estilo Linear

Usá open-design con linear-style.
Skill: dashboard-shell con sidebar, dashboard-kpi-cards (4 KPIs:
revenue, customers, MRR, churn), dashboard-chart (líneas, multi-series).
Datos mockeados creíbles, pero estructura que reciba JSON real después.

Prompt 3: Forms con estilo brutalist

Usá open-design con brutalist-style.
Skill: forms-auth con email magic link, sin password.
Quiero el contraste extremo, typography monospace,
bordes gruesos, ningún radius.

Prompt 4: Empty states con estilo notion

Usá open-design con notion-style.
Skill: empty-states.
Casos: lista vacía de proyectos, no resultados de búsqueda,
inbox sin mensajes. Cada uno con ilustración SVG inline (no
externa) y CTA primario.

Lo que no es Open Design

Para evitar expectativas equivocadas:

• No es un Figma alternativo. No tiene UI gráfica para diseñar. Es texto/código.
• No te genera mockups visuales — genera el código que renderiza el diseño.
• No reemplaza copywriting. Te da estructura visual; los textos los escribís vos o le pedís a otra skill.
• No actualiza automático cuando una marca cambia su sistema. Los snapshots son del momento que se capturaron.

Cómo contribuir

El repo acepta PRs para:

1. Sistemas de diseño nuevos — si una marca relevante falta.
2. Skills nuevas — si identificás un patrón frontend recurrente que no está.
3. Mejoras a las existentes — refactor de skills que producen output sub-óptimo.

PR template está en el repo. Cada PR es reviewado por mantainers y la comunidad.

Conclusión

Open Design es el ejemplo concreto de cómo el ecosistema open source compite con productos propietarios: 71 sistemas vs. 30, 19 skills vs. built-in cerrado, costo cero o pay-per-use vs. suscripción, cualquier modelo backend vs. modelo único.

Si Claude Design te alcanza y tenés Pro, seguí ahí. Si querés más flexibilidad, modelos alternativos, o trabajás con otros CLIs, instalá Open Design hoy mismo. La fricción de setup es 10 minutos. El upside es años de diseños sin lock-in ni costo recurrente.

Tags: open-design, claude-design-alternativa, nexu-io, open-source, local-first, 71-estilos