/ Annuaire / Playground / Open Design
← Tous les serveurs ↗ GitHub
● Communauté nexu-io ⚡ Instantané

Open Design

par nexu-io · nexu-io/open-design

Un clone open source de Claude Design — 19 skills + 71 systèmes de design de qualité marque, prévisualisation sandboxée, exports vers HTML/PDF/PPTX/MP4.

open-design de nexu-io est une alternative communautaire à Claude Design d'Anthropic. Il regroupe 19 skills couvrant web design, prototypes mobiles, slides, images, vidéo et HyperFrames, plus 71 systèmes de design de marque préconstruits (Linear, Stripe, Vercel, Notion, style Toss...). Fonctionne dans tout harness compatible Claude Code et inclut une prévisualisation sandboxée + pipelines d'export.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

~/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
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.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 utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "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
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

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

Continue utilise un tableau d'objets serveur plutôt qu'une 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"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Open Design

Générer un pitch deck dans un style de marque spécifique

👤 Fondateurs / PMs ⏱ ~30 min beginner

Quand l'utiliser : Vous avez besoin d'un deck de 10 slides et ne voulez pas vous battre avec Keynote.

Déroulement
  1. Choisir la marque
    Utilise open-design. Choisis le skin style Stripe. Liste ses tokens.✓ Copié
    → Tokens du skin affichés
  2. Rédiger
    Génère un deck de 10 slides pour notre lancement — titre, problème, solution, traction, roadmap, demande. Utilise le skin Stripe.✓ Copié
    → 10 slides avec style cohérent
  3. Exporter
    Exporte en PPTX pour que je puisse l'éditer dans Keynote.✓ Copié
    → Fichier PPTX écrit

Résultat : Deck qui ne ressemble pas à du IA-généré ; feeling marque cohérent.

Pièges
  • La génération d'images semble générique — Le skill fournit des jeux d'icônes et d'illustrations ; précisez lequel utiliser
Combiner avec : filesystem

Prototyper une page d'atterrissage dans un style de marque

👤 Devs / designers itérant sur des pages hero ⏱ ~25 min intermediate

Quand l'utiliser : Vous avez besoin de 3 directions visuelles avant de construire pour de vrai.

Déroulement
  1. Variantes
    Génère 3 variantes de hero — skins Linear, Notion et Vercel. Même contenu, style différent.✓ Copié
    → 3 prévisualisations HTML
  2. Choisir + itérer
    Prends celle Linear. Resserre la typographie et ajoute un CTA secondaire.✓ Copié
    → HTML raffiné

Résultat : Décisions directionnelles rapides avant la construction approfondie.

Pièges
  • Les tokens du skin entrent en conflit avec votre CSS existant — La prévisualisation sandboxée évite les conflits ; intégrez sélectivement
Combiner avec : ui-ux-pro-max-skill

Générer une courte vidéo marketing depuis un script

👤 Marketing / DevRel ⏱ ~60 min intermediate

Quand l'utiliser : Vous avez un script de 30 secondes et avez besoin d'une vidéo.

Déroulement
  1. Storyboard
    Transforme ce script en storyboard HyperFrames — 6 plans, avec style de marque.✓ Copié
    → Storyboard
  2. Rendre
    Rends en MP4.✓ Copié
    → Fichier MP4 écrit

Résultat : Courte vidéo de marque cohérente sans passer par un designer.

Pièges
  • Le temps de rendu n'est pas négligeable — Itérez sur le storyboard avant le rendu final

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

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

Skins de marque + fondamentaux du design

Utilise UI/UX Pro Max pour la typographie, open-design pour le skin de marque.✓ Copié
open-design-skill + filesystem

Sortie vers les répertoires du projet

Exporte le deck vers /presentations/launch/.✓ Copié

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
list_skins (aucun) Choisir le style de marque gratuit
design_web spec, skin Pages web / prototypes tokens
design_slides outline, skin Decks de pitch / conférence tokens
export format: html|pdf|pptx|mp4 Livraison finale temps de rendu

Coût et limites

Coût d'exécution

Quota d'API
N/A
Tokens par appel
Lourd pour les sorties à fort rendu (vidéo)
Monétaire
Gratuit
Astuce
Itérez sur le storyboard, pas sur le rendu final

Sécurité

Permissions, secrets, portée

Portées minimales : Sandbox local + écriture de fichiers
Stockage des identifiants : Aucun
Sortie de données : Aucune — local

Dépannage

Erreurs courantes et correctifs

Le rendu vidéo échoue

Assurez-vous que ffmpeg est installé ; le skill signale les dépendances manquantes

Le skin ne s'applique pas de façon cohérente

Certains templates sont antérieurs au système de skins ; utilisez les templates skin-aware listés dans le README

Alternatives

Open Design vs autres

AlternativeQuand l'utiliserCompromis
Anthropic Claude DesignVous voulez un support first-partyFermé ; moins personnalisable
Designs codés à la mainVous avez un designerItération plus lente

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills