lanhu-context-mcp

Vereinfachtes Chinesisch | Englisch

✨ Bereitet Lanhu-Designentwürfe als Kontext auf, damit eine KI den Code zur Wiederherstellung der Seite generieren kann.

Funktionen

• 🎨 Unterstützt die Ausgabe von HTML+CSS oder HTML+Tailwind, wählbar je nach Technologie-Stack des Projekts

• 🖼️ Gibt eine Zuordnung der Bildressourcen und Download-Befehle zurück, um manuelle Schritte bei der Verarbeitung einzelner Bildressourcen zu reduzieren

• 🧱 Ergänzt Design Tokens und Design-Vorschaubilder, um nachgelagerten Modellen die Implementierung und visuelle Überprüfung zu erleichtern

• 🧭 Enthält Implementierungsrichtlinien für nachgelagerte KIs, die Prioritäten, Anpassungsmethoden und Einschränkungen festlegen

• ⚙️ Unterstützt die Konfiguration von Tailwind-Ausgabe, Überspringen von Bild-Downloads, Einheitenskalierung und Eingabeaufforderungssprache über CLI-Parameter und Umgebungsvariablen

Related MCP server: componentize

Dokumentation

Die vollständige Dokumentation finden Sie unter lanhu.refineup.com.

Schnellstart

Systemanforderungen

• Node.js ^20.19.0 || >=22.12.0

Design-Transkodierung

• Die Transkodierungsfunktion muss für den Designentwurf aktiviert sein, bevor er auf Lanhu hochgeladen wird.

Schritt 1. Umgebungsvariablen vorbereiten

Erstellen Sie zuerst eine .env.local-Datei.

Sie benötigen ein gültiges Lanhu-Anmelde-Token. Weitere Informationen finden Sie unter Lanhu-Token abrufen.

LANHU_TOKEN=your_lanhu_token_here

Schritt 2. MCP konfigurieren

Tragen Sie die MCP-Konfiguration für den entsprechenden Client in die jeweilige Datei ein:

Codex (.codex/config.toml)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "lanhu-context-mcp": {
      "command": "npx",
      "args": ["-y", "lanhu-context-mcp"]
    }
  }
}

Die MCP-Konfiguration für Codex ist etwas speziell; sie erfordert ein zusätzliches cwd, das als absoluter Pfad zum aktuellen Projekt angegeben werden muss. Da dieser Pfad normalerweise individuell ist, wird davon abgeraten, die .codex/config.toml in Git zu committen. Es wird empfohlen, sie in Git auszuschließen und von jedem Entwickler lokal zu verwalten.

Windows

Falls der Start mit der oben genannten npx-Konfiguration unter Windows fehlschlägt, können Sie die folgende Schreibweise verwenden:

Codex (WSL2)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Codex (nativ)

[mcp_servers.lanhu-context-mcp]
cwd = "C:\\absolute\\path\\to\\current-project"
command = "C:\\Program Files\\nodejs\\npx.cmd"
args = ["-y", "lanhu-context-mcp"]

[mcp_servers.lanhu-context-mcp.env]
APPDATA = "C:\\Users\\{your-name}\\AppData\\Roaming"
LOCALAPPDATA = "C:\\Users\\{your-name}\\AppData\\Local"
USERPROFILE = "C:\\Users\\{your-name}"
HOME = "C:\\Users\\{your-name}"
SYSTEMROOT = "C:\\Windows"
COMSPEC = "C:\\Windows\\System32\\cmd.exe"

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "lanhu-context-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "lanhu-context-mcp"]
    }
  }
}

Referenz für Codex native Fallback: openai/codex#2555

Schritt 3. Lanhu Helper Google Chrome-Erweiterung installieren

Nach der Installation von Lanhu Helper können Sie per Rechtsklick in Lanhu Links zu ausgewählten Ebenen oder Beispiel-Prompts kopieren.

Schritt 4. Lanhu-Link und Prompt an die KI senden

请根据这个蓝湖设计稿实现
@https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}

https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}

Der Prompt kann nach Ihren Vorstellungen verfasst werden, aber die Lanhu-URL muss vollständig und korrekt sein, da das Tool sonst nicht ordnungsgemäß aufgerufen werden kann.

Weitere Dokumentation ansehen

Ökosystem

Lanhu Helper — Die zugehörige Lanhu Chrome-Browsererweiterung, mit der Sie per Rechtsklick in Lanhu Links zu ausgewählten Ebenen und Beispiel-Prompts kopieren können.

Lizenz

MIT

Copyright (c) 2026-present, REFINIST