/ Diretório / Playground / Open Design
← Todos os servidores ↗ GitHub
● Comunidade nexu-io ⚡ Instantâneo

Open Design

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

Um clone open-source do Claude Design — 19 skills + 71 design systems com qualidade de marca, preview em sandbox, exportação para HTML/PDF/PPTX/MP4.

open-design da nexu-io é uma alternativa comunitária ao Claude Design da Anthropic. Ele inclui 19 skills cobrindo design web, protótipos mobile, slides, imagens, vídeo e HyperFrames, além de 71 sistemas de design de marcas pré-construídos (Linear, Stripe, Vercel, Notion, estilo Toss...). Funciona em qualquer harness compatível com Claude Code e oferece pipeline de preview em sandbox + exportação.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu 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
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a 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
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o 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"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.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"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Open Design

Gerar um pitch deck em um estilo de marca específico

👤 Fundadores / PMs ⏱ ~30 min beginner

Quando usar: Você precisa de um deck de 10 slides e não quer brigar com o Keynote.

Fluxo
  1. Escolher marca
    Use open-design. Escolha a skin no estilo Stripe. Liste seus tokens.✓ Copiado
    → Tokens da skin exibidos
  2. Rascunhar
    Gere um deck de 10 slides para nosso lançamento — título, problema, solução, tração, roadmap, pedido. Use a skin Stripe.✓ Copiado
    → 10 slides com estilo consistente
  3. Exportar
    Exporte para PPTX para que eu possa editar no Keynote.✓ Copiado
    → Arquivo PPTX gravado

Resultado: Deck que não parece gerado por IA; sensação de marca consistente.

Armadilhas
  • Geração de imagem parece genérica — A skill fornece conjuntos de ícones e ilustrações; especifique qual usar
Combine com: filesystem

Prototipar uma landing page em um estilo de marca

👤 Devs / designers iterando em páginas hero ⏱ ~25 min intermediate

Quando usar: Você precisa de 3 direções visuais antes de construir de verdade.

Fluxo
  1. Variantes
    Gere 3 variantes de hero — skins Linear, Notion e Vercel. Mesmo conteúdo, estilo diferente.✓ Copiado
    → 3 previews HTML
  2. Escolher + iterar
    Pegue a Linear. Enxugue a tipografia e adicione um CTA secundário.✓ Copiado
    → HTML refinado

Resultado: Decisões direcionais rápidas antes do build profundo.

Armadilhas
  • Tokens da skin colidem com seu CSS existente — O preview em sandbox evita conflitos; integre seletivamente
Combine com: ui-ux-pro-max-skill

Gerar um vídeo curto de marketing a partir de um script

👤 Marketing / DevRel ⏱ ~60 min intermediate

Quando usar: Você tem um script de 30 segundos e precisa de um vídeo.

Fluxo
  1. Storyboard
    Transforme este script em um storyboard HyperFrames — 6 shots, com estilo de marca.✓ Copiado
    → Storyboard
  2. Renderizar
    Renderize para MP4.✓ Copiado
    → MP4 gravado

Resultado: Vídeo curto consistente com a marca sem precisar de um designer.

Armadilhas
  • Tempo de render não é trivial — Itere no storyboard antes do render final

Combinações

Combine com outros MCPs para 10× de alavancagem

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

Skins de marca + fundamentos de design

Use UI/UX Pro Max para tipografia, open-design para skin de marca.✓ Copiado
open-design-skill + filesystem

Exportar para diretórios do projeto

Exporte o deck para /presentations/launch/.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
list_skins (nenhum) Escolher estilo de marca free
design_web spec, skin Páginas web / protótipos tokens
design_slides outline, skin Decks de pitch / apresentação tokens
export format: html|pdf|pptx|mp4 Entrega final tempo de render

Custo e limites

O que custa rodar

Cota de API
N/A
Tokens por chamada
Pesado em outputs com render intenso (vídeo)
Monetário
Gratuito
Dica
Itere no storyboard, não no render final

Segurança

Permissões, segredos, alcance

Escopos mínimos: Sandbox local + escrita de arquivo
Armazenamento de credenciais: Nenhum
Saída de dados: Nenhuma — local

Solução de problemas

Erros comuns e correções

Render falha para vídeo

Certifique-se de que o ffmpeg está instalado; a skill sinaliza dependências ausentes

Skin não aplica de forma consistente

Alguns templates são anteriores ao sistema de skins; use templates conscientes de skin listados no README

Alternativas

Open Design vs. outros

AlternativaQuando usarTroca
Anthropic Claude DesignVocê quer suporte first-partyFechado; menos customizável
Designs feitos à mãoVocê tem um designerIteração mais lenta

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills