/ Directorio / Playground / Open Design
← Todos los servidores ↗ GitHub
● Comunidad nexu-io ⚡ Instantáneo

Open Design

por nexu-io · nexu-io/open-design

Un clon open-source de Claude Design — 19 skills + 71 sistemas de diseño de calidad de marca, preview en sandbox, exporta a HTML/PDF/PPTX/MP4.

open-design de nexu-io es una alternativa comunitaria a Claude Design de Anthropic. Incluye 19 skills que cubren diseño web, prototipos móviles, slides, imágenes, video y HyperFrames, más 71 sistemas de diseño de marca preconfigurados (Linear, Stripe, Vercel, Notion, estilo Toss...). Corre en cualquier harness compatible con Claude Code y viene con preview en sandbox + pipelines de exportación.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: Open Design

Generar una presentación de pitch en un estilo de marca específico

👤 Fundadores / PMs ⏱ ~30 min beginner

Cuándo usarlo: Necesitas una presentación de 10 slides y no quieres luchar con Keynote.

Flujo
  1. Elegir marca
    Usa open-design. Elige la piel estilo Stripe. Lista sus tokens.✓ Copiado
    → Tokens de la piel mostrados
  2. Redactar
    Genera una presentación de 10 slides para nuestro lanzamiento — título, problema, solución, tracción, hoja de ruta, ask. Usa la piel Stripe.✓ Copiado
    → 10 slides con estilo consistente
  3. Exportar
    Exporta a PPTX para poder editar en Keynote.✓ Copiado
    → Archivo PPTX escrito

Resultado: Presentación que no parece generada por IA; sensación de marca consistente.

Errores comunes
  • Las imágenes generadas parecen genéricas — El skill proporciona conjuntos de iconos e ilustraciones; especifica cuál usar
Combinar con: filesystem

Prototipar una landing page en un estilo de marca

👤 Devs / diseñadores iterando en hero pages ⏱ ~25 min intermediate

Cuándo usarlo: Necesitas 3 direcciones visuales antes de construir en serio.

Flujo
  1. Variantes
    Genera 3 variantes de hero — pieles Linear, Notion y Vercel. Mismo contenido, estilo diferente.✓ Copiado
    → 3 previews HTML
  2. Elegir + iterar
    Toma la de Linear. Ajusta la tipografía y añade un CTA secundario.✓ Copiado
    → HTML refinado

Resultado: Decisiones de dirección rápidas antes de la construcción en profundidad.

Errores comunes
  • Los tokens de la piel colisionan con tu CSS existente — El preview en sandbox evita conflictos; integra selectivamente
Combinar con: ui-ux-pro-max-skill

Generar un video corto de marketing a partir de un script

👤 Marketing / DevRel ⏱ ~60 min intermediate

Cuándo usarlo: Tienes un script de 30 segundos y necesitas un video.

Flujo
  1. Storyboard
    Convierte este script en un storyboard de HyperFrames — 6 planos, con estilo de marca.✓ Copiado
    → Storyboard
  2. Renderizar
    Renderiza a MP4.✓ Copiado
    → MP4 escrito

Resultado: Video de marca consistente corto sin ir a un diseñador.

Errores comunes
  • El tiempo de renderizado no es trivial — Itera en el storyboard antes del renderizado final

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

open-design-skill + ui-ux-pro-max-skill

Pieles de marca + fundamentos de diseño

Usa UI/UX Pro Max para tipografía, open-design para la piel de marca.✓ Copiado
open-design-skill + filesystem

Exportar a directorios del proyecto

Exporta el deck a /presentations/launch/.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
list_skins (ninguno) Elegir estilo de marca free
design_web spec, skin Páginas web / prototipos tokens
design_slides outline, skin Decks de pitch / charlas tokens
export format: html|pdf|pptx|mp4 Entrega final render time

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
N/A
Tokens por llamada
Pesado en outputs con renderizado intensivo (video)
Monetario
Gratis
Consejo
Itera en el storyboard, no en el renderizado final

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: Local sandbox + file write
Almacenamiento de credenciales: Ninguno
Salida de datos: Ninguno — local

Resolución de problemas

Errores comunes y soluciones

El renderizado falla para video

Asegúrate de que ffmpeg está instalado; el skill señala las dependencias faltantes

La piel no se aplica de forma consistente

Algunas plantillas son anteriores al sistema de pieles; usa las plantillas compatibles con pieles listadas en el README

Alternativas

Open Design vs otros

AlternativaCuándo usarlaContrapartida
Anthropic Claude DesignQuieres soporte de primera parteCerrado; menos personalizable
Diseños escritos a manoTienes un diseñadorIteración más lenta

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills