• CODE
  • STRUKTUR
  • MENSCH
  • DOKUS

Design-Ebenen mit deiner KI präzise extrahieren

Verbinde Lanhu einmal mit deinem KI-Client. Danach kann dein Agent Design-Dateien lesen und genau die Ebenennamen sowie Eigenschaften finden, die du für die Entwicklung benötigst.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie erhalte ich Ebenennamen und Eigenschaften per KI?

Deine KI nutzt Lanhu, um auf Design-Dateien zuzugreifen und alle Ebenen samt ihrer Eigenschaften aufzulisten. So erhältst du die präzisen Daten für deinen Code. Unten siehst du, wie der Agent diese Dateien verarbeitet.

Die Ergebnisse.

So werden die Daten genutzt.

Die KI verarbeitet die Design-Datei und bereitet die Informationen in diesen Ergebnissen auf.

CODE

Exakte CSS-Werte

Die KI extrahiert spezifische Eigenschaften wie Hex-Codes oder Abstände. Du erhältst die genauen Werte für deine Stylesheets.

STRUKTUR

Ebenen-Mapping

Der Agent identifiziert jeden Ebenennamen in der Datei. Das stellt sicher, dass deine Komponenten mit der Design-Hierarchie übereinstimmen.

MENSCH

Manuelle Design-Prüfung

Die KI markiert Unstimmigkeiten zwischen den Ebenen. Du entscheidst, ob das Design korrigiert werden muss, bevor du mit dem Coden beginnst.

DOKUS

Design-System Spezifikationen

Der Agent extrahiert wiederkehrende Eigenschaften. Nutze dies, um deine lokalen Design Tokens aufzubauen.

Der Ablauf

Was deine KI tut, sobald die Datei vorliegt.

Die KI übernimmt die komplexe Arbeit, die Struktur der Design-Datei zu durchsuchen.

  1. Datei aufrufen

    Dein Agent findet und öffnet die spezifische Design-Datei, die du vorgibst.

    get_file

  2. Hierarchie scannen

    Die KI durchsucht die gesamte Datei, um den Aufbau zu verstehen.

    list_layers

  3. Eigenschaften identifizieren

    Der Agent liest die spezifischen Attribute jeder gefundenen Ebene aus.

    list_layers

  4. Bereitstellung für Dev

    Die KI bereitet die Ebenennamen und Werte so auf, dass du sie direkt in deinem Editor nutzen kannst.

    list_layers

Probieren Sie es

Kopiere diese Befehle zum Starten.

Nutze diese Prompts, um mit deinen Design-Dateien zu interagieren.

Startpunkte

Dies sind Beispiele. Ersetze die Dateinamen und Ebenenbeschreibungen einfach durch deine eigenen Daten.

Lanhu Connector

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

Connector-Linkhttps://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/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 — Lanhu capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "lanhu-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_4iCH3CfiI2AC3jXYEzpWp1PeEIfLrczfwHOLhlzu/mcp"
    }
  }
}
In den Chat kopieren04

  • Liste alle Ebenennamen in der Design-Datei 'LandingPage_v2' auf.

  • Wie lauten die Hex-Codes und Schriftgrößen für die Ebenen in der Datei 'Mobile_App_Header'?

  • Suche die Ebene 'Primary_Button' in der Datei 'Dashboard_UI' und gib mir die Padding-Werte.

  • Prüfe die Datei 'Hero_Section' und liste alle Ebenen-Eigenschaften für die Hintergrundelemente auf.

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

Starten Sie hier

Einmal verbinden, dann fragen.

Klicke einfach auf den Link, um die Verbindung herzustellen. Deine Zugangsdaten bleiben verschlüsselt und du kannst sofort Fragen zu deinen Design-Dateien an deine KI stellen.

Lanhu mit deiner KI verbinden

FAQ

So funktioniert die Aufgabe.

  • 01

    Kann die KI die Design-Ebenen verändern?

    Nein. Die KI kann die Ebenen und Eigenschaften nur lesen und auflisten. Sie kann die Design-Datei selbst nicht modifizieren.

  • 02

    Löscht die KI Ebenen?

    Nein. Dieser Connector ist schreibgeschützt. Er kann in deinen Design-Dateien nichts löschen oder verschieben.

  • 03

    Kann ich das mit Cursor nutzen?

    Ja. Solange du einen MCP-kompatiblen Client wie Cursor nutzt, funktioniert es.

  • 04

    Woher weiß die KI, welche Datei sie öffnen soll?

    Du sagst der KI, auf welche Datei sie zugreifen soll, indem du den Dateinamen oder den Pfad in deinen Prompt schreibst.

  • 05

    Kann die KI die tatsächlichen Bilder in den Ebenen sehen?

    Nein. Die KI sieht die Ebenennamen und deren Eigenschaften, kann aber den visuellen Bildinhalt nicht sehen oder interpretieren.

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

Verbinde Lanhu mit Claude, Cursor, ChatGPT & mehr