Zum Inhalt springen
WingoUI

Wingo UI für App-Builder

Apps aus v0, Lovable und Bolt, fertig mit echten Blöcken.

Diese Builder laufen im Browser, es gibt also keine MCP-Konfiguration zum Einfügen. Verbinde das Projekt mit GitHub, öffne es auf deinem Rechner, füg Komponenten aus 374 Elementen mit der CLI oder deinem lokalen Agenten hinzu und pushe.

Kostenlosen API-Schlüssel holenPreise ansehen

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

Ein Block in zwei Befehlen

  1. Das geklonte Projekt einrichten

    npx wingo-ui@latest init

  2. Die Blöcke hinzufügen, die du brauchst

    npx wingo-ui@latest add marketing-header faq-section marketing-footer

Führ die Befehle im geklonten Repository aus, nicht im Builder.

Vom Builder ins Repo

Vier Schritte, ganz ohne MCP

Die Builder laufen im Browser. Deshalb kommt Wingo UI dorthin, wo der Code liegt: in das Repository, mit dem das Projekt synchronisiert.

  1. Projekt mit GitHub verbinden

    v0, Lovable und Bolt können ein Projekt jeweils mit einem GitHub-Repository verbinden.

  2. Klonen und init ausführen

    Wingo UI braucht React 19 und Tailwind CSS v4 in einer Next.js- oder Vite-App. init prüft das Projekt und sagt, was fehlt.

  3. Komponenten hinzufügen

    Installier mit der CLI oder lass einen lokalen Agenten wie Claude Code oder Cursor das übernehmen. Kostenlose Elemente lassen sich auch mit der shadcn-CLI installieren.

  4. In den synchronisierten Branch pushen

    Committe und pushe in den Branch, mit dem das Projekt synchronisiert. Die FAQ unten erklärt, wie jeder Builder externe Commits übernimmt.

Kostenlose Elemente mit der shadcn-CLI, ohne Konto:

npx shadcn@latest add https://wingo-ui.com/r/faq-section.json
Anleitung für die shadcn-CLI

Prompts zum Ausprobieren

Drei Screens für den Anfang

Füg einen davon in deinen lokalen Agenten im geklonten Repository ein. Das sind die Blöcke, die er 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 v0, Lovable und Bolt

Wir haben in keinem von ihnen eine MCP-Einrichtung geprüft, deshalb versprechen wir keine. Der Weg, den wir unterstützen, ist das exportierte Repository: Projekt mit GitHub verbinden, klonen und Komponenten mit der CLI oder einem lokalen Agenten wie Claude Code oder Cursor hinzufügen.

Sie brauchen React 19 und Tailwind CSS v4 in einer Next.js- oder Vite-App. Die Builder wählen den Stack für dich, und er ändert sich mit der Zeit, also prüf zuerst die package.json. npx wingo-ui@latest init sagt dir, was fehlt.

Pushe in den Branch, mit dem das Projekt synchronisiert. Lovable dokumentiert eine Zwei-Wege-Synchronisierung für seinen aktiven Branch, und v0 behandelt das verbundene Repository als maßgebliche Quelle. Auch Bolt verbindet Projekte mit GitHub; wie es externe Commits übernimmt, steht in seiner Doku.

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.

Anleitungen

Alle Agenten-Funktionen

Dein nächster Screen, schon gebaut.

Klon das Projekt, führ init aus und füg deinen ersten Block hinzu.

Pläne ansehenKomponenten ansehen