Stoppen Sie KI-Halluzinationen.
Ihr KI-Editor kennt Tailwind CSS.
Cherry ist ein kostenloser MCP-Server (Model Context Protocol), der Ihrem KI-Codierungsassistenten genau die Tailwind-CSS-Komponentenspezifikationen, Themes, Dokumente und Blöcke liefert, die er benötigt – auf Abruf, ohne Halluzinationen.
Warum KI-Assistenten Tailwind CSS falsch verstehen – und wie Cherry das Problem behebt
Ohne Kirsche
- KI halluziniert Klassennamen, die es in Frutjam nicht gibt
- Sie kopieren Dokumente und fügen sie in jede Eingabeaufforderung ein, wodurch Token verschwendet werden
- llms.txt verwirft alles – die KI ist überfordert
- Es wurden UI-Unterbrechungen generiert, weil die KI veraltete Komponenten-APIs verwendete
Mit Kirsche
- KI ruft für jede benötigte Komponente die genaue Spezifikation ab
- Richtiger Kontext zur richtigen Zeit – keine symbolische Verschwendung
- Immer synchron mit der neuesten Frutjam-Version
- Die Ausgabe ist präzise, semantisch und produktionsbereit
Was Cherry kann
Beschreiben Sie einfach, was Sie wollen. Cherry gibt Ihrer KI genau das Wissen, das sie braucht, um sie richtig aufzubauen.
| Sie fragen Ihre KI... | Cherry macht es möglich |
|---|---|
| „Fügen Sie dieser Seite einen Preisabschnitt hinzu“ | Ruft den echten Preisblock-HTML ab und fügt ihn ein |
| „Welche Abzeichenvarianten gibt es bei Frutjam?“ | Ruft die vollständige Abzeichenspezifikation ab – Klassen, Größen, Zustände, Beispiele |
| „Wenden Sie das Blaubeer-Thema auf dieses Layout an.“ | Lädt die genauen Design-Tokens für dieses Thema |
| „Konvertieren Sie diese Bootstrap-Navigationsleiste in Frutjam“ | Migriert das Markup, um Frutjam-Klassen zu korrigieren |
| „Verwandeln Sie dieses Figma-Design in Frutjam-HTML“ | Liest den Figma-Link und reproduziert ihn mit Frutjam-Komponenten |
| „Migriere diese einfache Tailwind-Karte zu Frutjam“ | Ersetzt Tailwind-Dienstprogramme durch die richtigen Frutjam-Komponentenklassen |
Integrierte KI-Slash-Befehle
Cherry enthält vorgefertigte Eingabeaufforderungen für die häufigsten Frutjam-Aufgaben. Geben Sie den Befehl in Ihren KI-Editor ein, geben Sie Ihre Eingaben ein und erhalten Sie präzisen Frutjam-Code – keine manuelle Eingabeaufforderung erforderlich.
/figma_to_frutjam
Figma → Frutjam
Fügen Sie eine Figma-Designbeschreibung oder exportiertes JSON ein. Cherry konvertiert es in präzises, kopier- und einfügbares Frutjam-HTML.
/image_to_frutjam
Screenshot → Frutjam
Beschreiben Sie einen UI-Screenshot oder teilen Sie eine Bild-URL. Cherry reproduziert es mit den Frutjam-Komponenten, die ihm am nächsten kommen.
/tailwind_to_frutjam
Rückenwind → Frutjam
Fügen Sie rohes Tailwind-HTML ein. Cherry ersetzt handgefertigte Dienstprogramme durch die richtigen Frutjam-Komponentenklassen.
/bootstrap_to_frutjam
Bootstrap → Frutjam
Bootstrap-Markup einfügen. Cherry ordnet jede Bootstrap-Klasse ihrem Frutjam-Äquivalent zu und gibt sauberen HTML aus.
/generate_theme
Generieren Sie ein Thema
Beschreiben Sie eine Stimmung, Marke oder Farbpalette. Cherry generiert ein komplettes Frutjam-Theme mit allen erforderlichen CSS-Variablen.
＋
Mit jedem Update werden weitere Eingabeaufforderungen hinzugefügt.
Alle Schrägstrichbefehle sind in Claude Code, Cursor, VS Code und jedem MCP-kompatiblen Editor verfügbar.
Wie Cherry im Vergleich abschneidet
Nicht jeder KI-Kontext ist gleich.
| Cherry MCP | llms.txt | No context | |
|---|---|---|---|
| Genaue Klassennamen | ✓ | Teilweise | ✗ |
| Auf Abruf – nur das, was benötigt wird | ✓ | ✗ wirft alles weg | ✗ |
| Token-effizient | ✓ | ✗ | ✓ |
| Immer auf dem neuesten Stand | ✓ | ✓ | ✗ |
| Themen und Design-Token | ✓ | Teilweise | ✗ |
| Vorgefertigte Seitenblöcke | ✓ | ✗ | ✗ |
| Figma / Bild → Code | ✓ | ✗ | ✗ |
| Framework-Migration | ✓ Rückenwind, Bootstrap | ✗ | ✗ |
| Tailwind CSS v4 genaue Klassennamen | ✓ | Teilweise | ✗ |
Einrichtung in weniger als einer Minute
Für den Einstieg ist kein Konto erforderlich. Die kostenlose Stufe ist sofort einsatzbereit – fügen Sie einfach Cherry zu Ihrem Editor hinzu und legen Sie los. Lizenzschlüssel und E-Mail sind nur für Pro- und Team-Pläne erforderlich.
Claude Code
Kostenloses Kontingent kein Konto erforderlich
claude mcp add frutjam-cherry -- npx -y frutjam-cherry@latestProfi / Team Lizenz erforderlich
claude mcp add frutjam-cherry \
--env LICENSE=your-license-key \
--env EMAIL=your@email.com \
-- npx -y frutjam-cherry@latestCursor
Öffnen Sie Cursoreinstellungen → MCP und fügen Sie Folgendes hinzu:
Kostenloses Kontingent kein Konto erforderlich
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}Profi / Team Lizenz erforderlich
{
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}VS Code
Drücken Sie Strg+Umschalt+P → MCP: Benutzerkonfiguration öffnen, dann hinzufügen:
Kostenloses Kontingent kein Konto erforderlich
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Profi / Team Lizenz erforderlich
{
"servers": {
"frutjam-cherry": {
"type": "stdio",
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Other editors
Kostenloses Kontingent kein Konto erforderlich
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"]
}
}
}Profi / Team Lizenz erforderlich
{
"mcpServers": {
"frutjam-cherry": {
"command": "npx",
"args": ["-y", "frutjam-cherry@latest"],
"env": {
"LICENSE": "your-license-key",
"EMAIL": "your@email.com"
}
}
}
}Nach der Einrichtung – Ihre ersten 60 Sekunden
Drei Schritte, um zu bestätigen, dass Cherry funktioniert, und mit dem Bau zu beginnen.
Überprüfen Sie, ob es ausgeführt wird
VS Code
Strg+Umschalt+U → MCP im Dropdown-Menü „Ausgabe“ auswählen. Suchen Sie nach frutjam-cherry: Running.
Cursor
Einstellungen → MCP. Der Server sollte neben frutjam-cherry einen grünen Verbindungsstatus anzeigen.
Claude Code
Führen Sie claude mcp list im Terminal aus. frutjam-cherry sollte als verbunden angezeigt werden.
Führen Sie Ihren ersten Test durch
Öffnen Sie Ihr AI-Chat-Panel und geben Sie Folgendes ein:
List all available Frutjam componentsWenn Cherry aktiv ist, ruft Ihre KI list_components auf und gibt eine Liste mit Komponentennamen zurück. Das ist es – es funktioniert.
Beginnen Sie mit dem Erstellen – Beispielaufforderungen
| Sagen Sie dies Ihrer KI | Was Cherry macht |
|---|---|
| "Show me how to use the Frutjam button component" | Ruft get_component auf und gibt die vollständige Spezifikation zurück |
| "Build me a pricing card using Frutjam" | Sucht nach der Kartenkomponente und schreibt den genauen Code |
| "Show me the darkberry theme tokens" | Ruft get_theme auf und gibt alle CSS-Variablen zurück |
| "Get me the hero block" | Ruft get_block auf und gibt HTML zum Kopieren und Einfügen zurück |
| "How do I install Frutjam?" | Ruft get_docs auf und gibt die Installationsanleitung zurück |
Sie müssen Cherry nicht erwähnen – beschreiben Sie einfach, was Sie wollen. Ihre KI ruft automatisch das richtige Werkzeug auf.
Cherry ist in Pro und Team enthalten
Kostenloses Kontingent verfügbar – begrenzte tägliche Anfragen, kein Konto erforderlich.
Upgrade auf Pro oder Team für unbegrenzte Anfragen und Zugriff auf Premium-Blöcke und KI-Slash-Befehle.
FAQ
Was ist ein MCP-Server?
MCP (Model Context Protocol) ist ein offener Standard, der es KI-Assistenten ermöglicht, zur Laufzeit externe Tools aufzurufen. Cherry fungiert als Tool-Server – Ihr KI-Editor ruft es auf, um Frutjam-Spezifikationen bei Bedarf abzurufen, anstatt anhand von Trainingsdaten zu raten.
Warum halluzinieren KI-Assistenten CSS-Klassennamen von Tailwind?
KI-Modelle werden anhand einer Momentaufnahme des Webs trainiert – sie kennen die genauen Klassennamen Ihrer spezifischen Komponentenbibliothek nicht, insbesondere bei neueren Bibliotheken oder Tailwind CSS v4-APIs. Ohne Live-Kontext erfinden sie plausibel klingende, aber nicht existierende Klassen. Cherry löst dieses Problem, indem es Ihrer KI die echten, aktuellen Frutjam-Komponentendokumente in dem Moment zuführt, in dem sie sie benötigt, und so Halluzinationen vollständig eliminiert.
Welche Editoren unterstützt Cherry?
Jeder Editor mit MCP-Unterstützung: Claude Code, Cursor, VS Code, Windsurf, Zed, Cline und jeder andere Editor, der den MCP-Standard implementiert.
Was ist der Unterschied zwischen kostenlos und Pro/Team?
Free bietet Ihnen begrenzte tägliche Anfragen und Zugriff auf Komponentendokumente und kostenlose Blöcke. Pro und Team schalten unbegrenzte Anfragen, Premium-Blöcke, Vorlagen und alle KI-Slash-Befehle frei.
Wie erhalte ich meinen Lizenzschlüssel?
Ihr Lizenzschlüssel wird Ihnen unmittelbar nach dem Abonnement per E-Mail zugesandt. Sie können Ihr Abonnement und Ihre Sitzplätze auch über Ihr Konto-Dashboard verwalten.
Kann ich Cherry offline nutzen?
Cherry validiert Ihre Lizenz online bei der ersten Verwendung und speichert sie dann 7 Tage lang lokal zwischen. Danach erfolgt eine erneute Validierung. Eine kurze Internetverbindung genügt.
Kann ich jederzeit kündigen?
Ja. Jederzeit kündbar. Ihr Zugriff bleibt bis zum Ende des Abrechnungszeitraums bestehen.
Sind Sie bereit, schneller zu bauen?
Lassen Sie Ihre KI ab der ersten Eingabeaufforderung mit präzisem Frutjam-Code arbeiten.