Zum Inhalt springen
WingoUI

Wingo UI für Claude Code

Claude Code baut mit echten Komponenten.

Ein Befehl fügt deinem Projekt den Wingo-UI-Skill, einen Block in CLAUDE.md und den MCP-Server hinzu. Danach durchsucht Claude Code 374 Komponenten, Blöcke und Hooks, liest ihre Props und installiert den Quellcode, statt alles neu zu schreiben.

Kostenlosen API-Schlüssel holenPreise ansehen

75 kostenlose Elemente mit einem kostenlosen Konto. Pro ab 8 $ im Monat.

In zwei Befehlen eingerichtet

  1. Im Terminal anmelden

    npx wingo-ui@latest login

  2. Für Claude Code installieren

    npx wingo-ui@latest agents install claude

Starte Claude Code neu (oder führ /mcp aus) und gib den Server wingo-ui für dieses Projekt frei.

Einrichtung

Was die Installation schreibt

Führ beide Befehle in deinem Projektordner aus. Die Installation lässt sich gefahrlos wiederholen: Sie ändert nur die Teile, die sie verwaltet, und npx wingo-ui@latest agents update aktualisiert sie.

  • .claude/skills/wingo-ui/SKILL.mdDer Wingo-UI-Skill: erst suchen, dann schreiben, Screens mit einem Block beginnen, mit der CLI installieren, die Designregeln befolgen.
  • CLAUDE.mdEin kurzer markierter Block mit denselben Regeln. Dein eigener Text in der Datei bleibt, wie er ist.
  • .mcp.jsonDer MCP-Server wingo-ui für dieses Projekt, damit ihn jeder bekommt, der das Repo klont.

npx wingo-ui@latest login öffnet deinen Browser, um die CLI freizugeben, und speichert einen Schlüssel für die CLI und den lokalen MCP-Server. Für ein kostenloses Konto reicht eine E-Mail-Adresse.

Ist WINGO_UI_API_KEY in deiner Shell gesetzt, zeigt die Konfiguration auf den Remote-Server und liest den Schlüssel aus dieser Variable. Sonst startet sie den lokalen Server (npx wingo-ui mcp), der den beim Login gespeicherten Schlüssel nutzt.

Lieber von Hand einrichten?

Erstell in deinem Konto unter API-Schlüssel einen Schlüssel, exportier ihn als WINGO_UI_API_KEY und füg den Server hinzu:

Im Terminal ausführen

Terminal
claude mcp add --transport http wingo-ui https://wingo-ui.com/mcp --header "Authorization: Bearer $WINGO_UI_API_KEY"

In .mcp.json einfügen

.mcp.json
{
  "mcpServers": {
    "wingo-ui": {
      "type": "http",
      "url": "https://wingo-ui.com/mcp",
      "headers": {
        "Authorization": "Bearer ${WINGO_UI_API_KEY}"
      }
    }
  }
}
Agenten-Doku lesen

Prompts zum Ausprobieren

Drei Screens für den Anfang

Füg einen davon in Claude Code ein. Das sind die Blöcke, die der Agent findet und installiert.

Kostenlos und Pro

Kostenlos starten, Pro bei Bedarf

Suche, Doku, Props und Designregeln funktionieren ohne Schlüssel. Für den Quellcode brauchst du einen Schlüssel: die kostenlosen Elemente mit einem kostenlosen Konto, alle Elemente mit Pro.

Kostenloses Konto

0 $ohne Karte

  • 75 von 374 Elementen mit vollem Quellcode
  • Ein API-Schlüssel für den MCP-Server und die CLI
  • Anmeldung nur mit einer E-Mail-Adresse
Kostenlosen API-Schlüssel holen

Pro

8 $im Monat

Oder 80 $ im Jahr, oder einmalig 150 $ für Lifetime.

  • Alle 374 Elemente mit vollem Quellcode
  • 107 Blöcke, darunter Seitenvorlagen und App-Screens
  • 14 Tage Rückerstattung beim ersten Kauf, solange kein Pro-Element heruntergeladen wurde
Preise ansehen

FAQ

Fragen zu Claude Code

Drei: den Skill in .claude/skills/wingo-ui/SKILL.md, einen markierten Block in CLAUDE.md (der Rest der Datei bleibt deiner) und den Server wingo-ui in .mcp.json. Committe sie, dann hat das ganze Team dieselbe Einrichtung.

Ja. npx wingo-ui@latest agents install claude --scope user legt den Skill in ~/.claude/skills ab und registriert den Server mit claude mcp add für deinen Benutzer, sofern der Befehl claude installiert ist.

Nein. Suche, Doku, Props und Designregeln funktionieren ohne Schlüssel, und ein kostenloses Konto (nur E-Mail, keine Karte) bekommt einen Schlüssel mit dem Quellcode aller 75 kostenlosen Elemente. Pro schaltet den Quellcode aller Elemente frei, ab 8 $ im Monat. Siehe Preise.

Nein. Der MCP-Server bekommt nur die Tool-Aufrufe, die Claude Code macht, etwa eine Suchanfrage oder einen Komponentennamen. Deine Projektdateien bleiben bei dir und deinem Agenten.

Anleitungen

Alle Agenten-Funktionen

Dein nächster Screen, schon gebaut.

Erstell einen kostenlosen Schlüssel, führ die Installation aus und bitte Claude Code um deinen nächsten Screen.

Pläne ansehenKomponenten ansehen