Claude Code Design Skills MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Figma-to-Next.js-Fähigkeit mit Priorität bei der Wiederverwendung von Komponenten
Figma-Variante → Prop-Mapping
Strikte TypeScript-Typen sofort einsatzbereit
Integrierte Standardeinstellungen für Barrierefreiheit
Scheindatenmuster für Frontend-/Backend-Grenzhygiene

Live-Demo

In der Praxis

claude-code-design-skills.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

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

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

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

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Claude Code Design Skills

Erstellen Sie ein Gerüst für eine neue Seite aus einem Figma-Frame

👤 Frontend-Ingenieure konvertieren Designs in Code ⏱ ~45 min intermediate

Wann einsetzen: Sie haben einen fertigen Figma-Frame und möchten React/Next.js-Code, der zu Ihrer Codebasis passt.

Voraussetzungen

Figma MCP eingerichtet — Installieren Sie Figma MCP und stellen Sie einen PAT bereit
Fertigkeit installiert — Git-Klon in ~/.claude-code/skills/

Ablauf

Zeigen Sie auf den Rahmen

Konvertieren Sie diesen Figma-Frame in eine Next.js-Seite: <figma URL>. Komponenten aus src/components/ wiederverwenden.✓ Kopiert

→ Der Agent inventarisiert vorhandene Komponenten, bevor er neue schreibt
Prop-Map-Varianten

Ordnen Sie die Figma-Varianten typisierten Requisiten zu (Größe, Absicht, deaktiviert).✓ Kopiert

→ TS-Typen generiert; Nein
Scheindaten

Verwenden Sie Scheindaten; Erfinden Sie keine API-Aufrufe. Halten Sie das Backend draußen.✓ Kopiert

→ Bereinigen Sie die Komponente ohne Abruf mit einer Mock-Datei

Ergebnis: Eine echte Next.js-Seite, zusammengefasst in einer PR – kein Umschreiben durch den Rezensenten.

Fallstricke

Generieren einer parallelen Komponentenbibliothek neben der vorhandenen — Beginnen Sie mit „Vorhandene Komponenten auflisten“, damit der Agent die vorhandenen Komponenten wiederverwendet

Kombinieren mit: figma · magic-ui-mcp

Synchronisieren Sie die Requisiten einer Komponente mit Figma-Varianten

👤 Teams pflegen ein Designsystem ⏱ ~25 min intermediate

Wann einsetzen: Der Designer hat in Figma eine neue Variante hinzugefügt und der Code muss aufholen.

Ablauf

Vergleichen Sie Figma mit der Komponente

Vergleichen Sie Button-Varianten (Figma) mit src/components/Button.tsx props.✓ Kopiert

→ Klare Delta-Liste: neue Variante, umbenannte Variante usw.
Wenden Sie den Unterschied an

Aktualisieren Sie Button.tsx, um die neue „Ghost“-Variante einzuschließen; Bewahren Sie die API auf.✓ Kopiert

→ Typisiertes Update mit einer Standardeinstellung, die Anrufer nicht unterbricht

Ergebnis: Design-System-Drift geschlossen, ohne die Verbraucher zu unterbrechen.

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

claude-code-design-skills + figma

Figma-Frames über MCP ziehen; Konvertieren Sie mit dieser Fertigkeit

Figma-Frame X abrufen; Nutzen Sie die Fähigkeit zur Konvertierung mit Wiederverwendung bestehender Komponenten.✓ Kopiert

claude-code-design-skills + magic-ui-mcp

Ordnen Sie Figma-Muster den Magic UI-Komponenten zu, wo sie vorhanden sind

Wenn Figma einen Blur-In-Helden verwendet, verwenden Sie den Blur-Fade von Magic UI, anstatt einen zu schreiben.✓ Kopiert

claude-code-design-skills + claude-design-auditor-skill

Stellen Sie sicher, dass der generierte Code die Prüfung mit 18 Regeln besteht

Führen Sie nach der Konvertierung den Design-Auditor aus und korrigieren Sie alle HIGH-Ergebnisse.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
figma-to-code (SKILL)	Figma frame URL + repo conventions	Verwandeln Sie ein Design in Code, der zu Ihrer Codebasis passt	0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Keine für die Fähigkeit; Figma MCP hat eine eigene Quote
Tokens pro Aufruf: Figma-Frame + vorhandener Code + Ausgabe – kann groß sein; Richten Sie den Rahmen genau aus
Kosten in €: Frei
Tipp: Konvertieren Sie jeweils einen Frame. Eine riesige Auswahl verschwendet sowohl Kontext als auch Rezensionsenergie.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Figma PAT gehört zum Figma MCP, nicht zu dieser Fähigkeit

Datenabfluss: Keine aus der Fertigkeit; Netzwerkaufrufe erfolgen in Figma MCP

Der generierte Code muss noch überprüft werden. „Übergibt Typen“ bedeutet nicht „funktioniert zur Laufzeit ordnungsgemäß“.
Akzeptieren Sie nicht blind Importe von Komponenten, die nicht auf Ihrer Zulassungsliste stehen. Der Skill bevorzugt die Wiederverwendung, aber Sie besitzen immer noch die Rezension.

Fehlerbehebung

Häufige Fehler und Lösungen

Der Agent schreibt einen neuen Button, anstatt den vorhandenen wiederzuverwenden

Listen Sie das Komponentenverzeichnis des Repos explizit in der Eingabeaufforderung auf.

Prüfen: Include 'check src/components/ first' in the request

Fehlende Requisiten für eine neuere Figma-Variante

Fragen Sie vor der Konvertierung nach einem Variantenunterschied. Aktualisieren Sie die Komponente, anstatt sie zu forken.

Prüfen: Agent output includes a 'variants' section

Typen zu locker (überall vorhanden)

Erfordern 'nein, irgendein; schlagen lautstark fehl, wenn eine Variante nicht eingegeben werden kann.

Prüfen: Search the diff for ': any'

Alternativen

Claude Code Design Skills vs. andere

Alternative	Wann stattdessen	Kompromiss
magic-ui-mcp	Sie möchten vorgefertigte animierte Komponenten und keinen Figma-Konverter	Die Bibliothek steht an erster Stelle, nicht das Design steht an erster Stelle
claude-design-auditor-skill	Sie möchten die Designqualität bewerten und keinen Code generieren	Auditieren, nicht produzieren
hue-brand-skill	Sie benötigen eine Designsprache, keine Rahmenkonvertierung	System-First, nicht Frame-First

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen