• REDUNDANZ
  • ENTDECKUNG
  • STRUKTUR
  • MENSCH

UI-Komponenten mit deiner KI im Storybook finden

Verbinde Storybook einmal mit deinem KI-Client. Danach kannst du dein gesamtes Design System einfach per natürlicher Sprache abfragen.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie finde ich vorhandene UI-Komponenten mit meiner KI?

Deine KI nutzt den Storybook MCP, um deine Komponentenbibliothek und deren Kategorien zu scannen. Sie identifiziert passende Treffer basierend auf deiner Beschreibung, damit du nichts doppelt baust.

Das ermöglicht die Suche

Dein Nutzen durch diese Suche

Die KI macht dein Design System zu einer durchsuchbaren Wissensdatenbank.

REDUNDANZ

Kein doppelter Code

Die KI findet bestehende Komponenten, die deinen Anforderungen entsprechen. Du vermeidest es, CSS oder Logik für Dinge neu zu schreiben, die bereits in der Library existieren.

ENTDECKUNG

Komponenten sofort finden

Statt dich durch Ordner zu klicken, fragst du einfach nach dem, was du brauchst. Die KI findet die richtige Komponente in Sekunden.

STRUKTUR

Organisierte Systemübersicht

Die KI bildet deine Komponenten-Kategorien ab. Das hilft dir, die Struktur des Design Systems zu verstehen, ohne manuell suchen zu müssen.

MENSCH

Check der Implementierung

Die KI schlägt die beste Komponente vor. Du entscheidest am Ende, ob sie wirklich zum spezifischen UI-Pattern passt, das du gerade baust.

Der Ablauf

Was deine KI tut, wenn die Anfrage kommt.

Die KI fungiert als Brücke zwischen deinem Chat-Interface und deinen Storybook-Dateien.

  1. System erfassen

    Die KI analysiert die Gruppierung deiner Komponenten, um die Struktur der Library zu verstehen.

    list_categories

  2. Verfügbare Teile auflisten

    Sie ruft eine vollständige Liste von Komponenten aus bestimmten Kategorien ab, um die Auswahl zu prüfen.

    list_components

  3. Gezielte Suche

    Wenn du ein bestimmtes UI-Element beschreibst, sucht die KI nach der passendsten Komponente in der Library.

    search_components

  4. Treffer verifizieren

    Die KI gleicht deine Anforderungen mit den Eigenschaften der Komponente ab, um die richtige Wahl sicherzustellen.

    search_components

Probieren Sie es

Kopiere diese Beispiele zum Start.

Nutze diese Prompts, um die Interaktion mit deinem Design System zu beginnen.

Startpunkte

Ersetze die Komponentennamen oder Kategorien durch die Bezeichnungen aus deinem Storybook-Setup.

Storybook Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Storybook capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
In den Chat kopieren04

  • Finde alle Button-Komponenten in meinem Storybook.

  • Suche nach Input-Komponenten, die für Texteingaben gedacht sind.

  • Liste alle verfügbaren Kategorien in meinem Design System auf.

  • Ich brauche eine Card-Komponente für ein Benutzerprofil; was haben wir in Storybook?

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Starten Sie hier

Einmal Storybook verbinden, dann fragen.

Verknüpfe deine Storybook-Instanz einfach mit Vinkius. Deine Zugangsdaten bleiben verschlüsselt und du kannst sofort damit beginnen, deiner KI Fragen zu deinen Komponenten zu stellen.

Storybook mit deiner KI verbinden

FAQ

So funktioniert die Aufgabe.

  • 01

    Kann die KI meinen Komponenten-Code ändern?

    Nein. Die KI kann deine Storybook-Daten nur lesen und durchsuchen. Sie kann deinen Quellcode oder deine Dateien nicht modifizieren.

  • 02

    Sieht die KI meine private Komponenten-Logik?

    Die KI sieht nur die Metadaten und die Struktur der Komponenten, die über Storybook bereitgestellt werden. Sie hat keinen Zugriff auf dein gesamtes lokales Dateisystem.

  • 03

    Kann sie neue Komponenten für mich erstellen?

    Nein. Die Tools erlauben es der KI lediglich, bestehende Komponenten aufzulisten, zu kategorisieren und zu suchen.

  • 04

    Woher weiß sie, welche Komponenten existieren?

    Sie nutzt die Such- und List-Tools, um das aktuelle Komponenten-Register direkt aus deiner Storybook-Instanz abzurufen.

  • 05

    Funktioniert das mit jedem Storybook-Setup?

    Ja, solange die Storybook-Instanz über die Verbindung erreichbar ist, die du über Vinkius einrichtest.

  • Noch Fragen zu Storybook? Die Connector-Seite liefert Antworten. Alle Funktionen des Storybook Connectors ansehen

Verbinde Storybook mit Claude, Cursor, ChatGPT & mehr