lanhu-context-mcp

简体中文 | English

✨ 蓝湖（Lanhu）のデザイン原稿を、AIがコードを生成してページを再現するためのコンテキストに整理します。

Features

• 🎨 HTML+CSS または HTML+Tailwind の出力をサポート。プロジェクトの技術スタックに合わせて最適な形式を選択可能

• 🖼️ 画像リソースのマップとダウンロードコマンドを返し、手動で一つずつ処理する手間を削減

• 🧱 Design Tokens とデザインプレビュー画像を追加し、後続のモデルによる実装や視覚的な検証を容易に

• 🧭 後続のAIに向けた実装ガイドラインを付与し、優先順位、適応方法、制約条件を明確化

• ⚙️ CLI引数および環境変数を通じて、Tailwind 出力、画像切り出しのスキップ、単位のスケーリング、プロンプト言語の設定をサポート

Related MCP server: componentize

ドキュメント

完全なドキュメントは lanhu.refineup.com をご覧ください。

クイックスタート

環境要件

• Node.js ^20.19.0 || >=22.12.0

デザイン原稿のコード変換

• デザイン原稿でコード変換機能を有効にし、藍湖（Lanhu）にアップロードする必要があります

Step 1. 環境変数の準備

まず .env.local ファイルを作成します。

有効な藍湖（Lanhu）ログインTokenが必要です。詳細は 藍湖（Lanhu）Tokenの取得 を参照してください。

LANHU_TOKEN=your_lanhu_token_here

Step 2. MCPの設定

以下の各クライアントに対応するMCP設定を、該当するファイルに書き込みます：

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"]
    }
  }
}

Codex のMCP設定は特殊で、追加で cwd を設定し、現在のプロジェクトの絶対パスを指定する必要があります。このパスは通常人によって異なるため、.codex/config.toml をGitにコミットすることは推奨されません。Gitの除外設定を行い、各開発者がローカルで管理することをお勧めします。

Windows

Windowsで上記の npx 設定を使用して起動に失敗する場合は、以下の書き方に変更してください：

Codex（WSL2）

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

Codex（ネイティブ）

[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"]
    }
  }
}

Codex ネイティブのフォールバックについては以下を参照： openai/codex#2555

Step 3. Lanhu Helper Google Chrome拡張機能のインストール

Lanhu Helper をインストールすると、藍湖（Lanhu）上で右クリックして選択したレイヤーのリンクやサンプルプロンプトを直接コピーできます。

Step 4. 藍湖（Lanhu）のリンクとプロンプトをAIに送信

请根据这个蓝湖设计稿实现
@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}

プロンプトは自由に記述できますが、藍湖（Lanhu）のURLは完全かつ正確であることを確認してください。そうでない場合、ツールを正常に呼び出せません。

詳細なドキュメントを見る

エコシステム

Lanhu Helper — 藍湖（Lanhu）用Chrome拡張機能。藍湖上で右クリックして選択したレイヤーのリンクやサンプルプロンプトをコピー可能

ライセンス

MIT

Copyright (c) 2026-present, REFINIST