Open Design (Claude Skill) — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

19 skills de diseño — web, móvil, slides, imagen, video
71 pieles de sistema de diseño de calidad de marca
Preview en sandbox (HTML/PDF/PPTX/MP4)
Funciona con Claude Code, Codex, Cursor, Gemini, OpenCode, Copilot
Local primero; sin dependencia de SaaS

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "open-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "open-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nexu-io/open-design",
          "~/.claude/skills/open-design"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add open-design-skill -- git clone https://github.com/nexu-io/open-design ~/.claude/skills/open-design

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

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

Elegir marca

Usa open-design. Elige la piel estilo Stripe. Lista sus tokens.✓ Copiado

→ Tokens de la piel mostrados
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
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

Variantes

Genera 3 variantes de hero — pieles Linear, Notion y Vercel. Mismo contenido, estilo diferente.✓ Copiado

→ 3 previews HTML
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

Storyboard

Convierte este script en un storyboard de HyperFrames — 6 planos, con estilo de marca.✓ Copiado

→ Storyboard
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

Herramienta	Entradas	Cuándo llamar	Coste
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

Alternativa	Cuándo usarla	Contrapartida
Anthropic Claude Design	Quieres soporte de primera parte	Cerrado; menos personalizable
Diseños escritos a mano	Tienes un diseñador	Iteración más lenta

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills