Lanhu（蓝湖）デザインコラボレーションプラットフォーム向けの Model Context Protocol（MCP）サーバーです。
LLMやAIコーディングアシスタントがデザインアートボードを直接検査し、ピクセル単位のCSSプロパティとレイヤー階層を抽出し、エクスポート可能なアセットをダウンロードできるようにします。ビジョン・トークンのオーバーヘッドはゼロです。
AIコーディングエージェント（Claude、Cursor、Copilot、Antigravityなど）でUIデザインを実装する際、スクリーンショットを渡すと、よく次のような問題が発生します。
ビジョンモデルのトークンコストが高い
位置が不正確で、マージンは推測、色もおおよその近似になる
フォントサイズや行の高さが幻覚（ハルシネーション）で誤っている
SVGや画像アセットを自動的に抽出・ダウンロードできない
Lanhu MCP Server は、Lanhuの構造化されたデザイン仕様を、型安全なデータツリーに直接パースします。
⚡ ビジョン・トークンのオーバーヘッドゼロ: 重いスクリーンショットの代わりに純粋なJSON構造化データを使用
📐 ピクセル・パーフェクトな精度: レイヤーの正確な座標（x、y、width、height）、色（HEX/RGBA）、タイポグラフィ（fontSize、fontWeight、fontFamily、lineHeight）、角丸、塗り、ボーダー、シャドウまで取得
🎨 スマートなアセット抽出: スライスアセットを自動検出し、CDNの直接ダウンロードリンクを提供。WebPまたはSVG形式へのロスレス変換にも対応
🔄 堅牢な認証: Playwrightによる自動ヘッドレストークン更新で、セッションを継続的に維持
Related MCP server: Lanhu MCP Server
チーム・プロジェクト探索: チームやワークスペースのデザインファイルの照会、およびプロジェクト検索をシームレスに実行。
アートボード検査: アートボード（screens）の一覧取得、サムネイルのプレビュー、画面名での検索に対応。
詳細なレイヤー注釈: 完全なレイヤーツリーを、CSS/UIスタイル属性を含めて再帰的に取得。
アセットパイプライン: SVGデータとビットマップ画像をローカルワークスペースへ直接ダウンロード。
自動セッション維持: ヘッドレスのPlaywrightスクリプトがバックグラウンドでLanhuセッションを維持し、手動ログインの繰り返しを不要に。
Python: >= 3.10
パッケージマネージャー: uv（推奨）
MCPクライアント: Cursor、Claude Desktop、Claude Code、Antigravity、Windsurf、Cline、Codex、VS Code、その他MCP互換ツール
uvx で実行する（インストール不要）リポジトリをクローンしなくても、lanhu-mcp を直接実行できます。
uvx --from git+https://github.com/xinayida/lanhu-mcp.git lanhu-mcp# Clone the repository
git clone https://github.com/xinayida/lanhu-mcp.git
cd lanhu-mcp
# Sync environment and dependencies
uv sync
# Run the server (stdio mode)
uv run lanhu-mcpLanhu MCPは、ブラウザのセッションCookieを使用して lanhuapp.com に接続します。Cookieは ~/.lanhu/cookie から読み取ります（ファイル権限 0600）。
同梱のPlaywright自動化スクリプトを実行します。
uv run scripts/refresh_cookie.pyログイン済みの場合: ヘッドレスでセッションを検証し、トークンを更新して、~/.lanhu/cookie に書き込みます。
セッションが切れている場合: Chromeウィンドウが自動的に開き、一度だけログイン（SMSコードまたはパスワード）します。認証が完了すると、セッションを保存してブラウザを閉じます。
定期実行のヒント: cronジョブで
--headless-onlyを指定して実行すると、ウィンドウを表示せずに定期的にCookieを更新できます。uv run scripts/refresh_cookie.py --headless-only
AIチャット内でMCPツールを直接呼び出します。
lanhu_set_cookie(cookie="session=...; user_token=...")手動でCookieを取得する方法:
Chromeで lanhuapp.com を開き、DevTools（F12）を起動します。
Network タブに移動し、lanhuapp.com へのリクエストをクリックします。
Request Headers にある Cookie 全体の文字列（session と user_token を含）をコピーします。
.env をプロジェクト直下に作成するか、LANHU_COOKIE を設定します。
cp .env.example .env
# Edit .env and set LANHU_COOKIE=session=...; user_token=...ご利用のMCPクライアントに lanhu-mcp を追加します。
Cursor Settings → MCP → Add new MCP Server の順に開きます。
Name: lanhu
Type: command
Command:
uvx --from git+https://github.com/xinayida/lanhu-mcp.git lanhu-mcpまたは ~/.cursor/mcp.json で設定します。
{
"mcpServers": {
"lanhu": {
"command": "uvx",
"args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
}
}
}claude_desktop_config.json（macOS: ~/Library/Application Support/Claude/claude_desktop_config.json）に追加します。
{
"mcpServers": {
"lanhu": {
"command": "uvx",
"args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
}
}
}Claude CodeのCLIを使用します。
claude mcp add lanhu uvx --from git+https://github.com/xinayida/lanhu-mcp.git lanhu-mcpAntigravityの設定、または settings.json に追加します。
{
"mcpServers": {
"lanhu": {
"command": "uvx",
"args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
}
}
}~/.codeium/windsurf/mcp_config.json に追加します。
{
"mcpServers": {
"lanhu": {
"command": "uvx",
"args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
}
}
}cline_mcp_settings.json に追加します。
{
"mcpServers": {
"lanhu": {
"command": "uvx",
"args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"],
"disabled": false,
"autoApprove": []
}
}
}Codex CLIを使用して追加します。
codex mcp add lanhu uvx "--from" "git+https://github.com/xinayida/lanhu-mcp.git" "lanhu-mcp"または ~/.codex/config.toml を編集します。
[mcp_servers.lanhu]
command = "uvx"
args = ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]VS CodeのMCP拡張機能、または設定から追加します。
{
"mcpServers": {
"lanhu": {
"command": "uvx",
"args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
}
}
}Tool Name | Description | Key Parameters |
| 認証Cookieを更新し、 |
|
| ユーザーのチーム一覧を取得します（認証のヘルスチェックを兼ねます）。 | (なし) |
| 指定チーム内のデザインプロジェクトを取得します。 |
|
| キーワードでチーム内のプロジェクトを検索します。 |
|
| プロジェクト内の全アートボード/スクリーンを寸法・サムネイル付きで一覧表示 |
|
| キーワードでアートボードを検索します。 |
|
| ⭐ 中核ツール: 完全なレイヤーツリー、CSSスタイル、タイポグラフィ、アセットを取得 |
|
| ダウンロード URL 付きで、書き出し可能な画像/アイコンアセットを取得します。 |
|
| アセットをローカルディスクにダウンロード（WebPロスレス / SVG / PNG 対応）。 |
|
AIエージェントにLanhuのUIを実装させる場合：
User: "Please implement the checkout screen from our Lanhu project and download necessary icons."エージェントは以下の流れを自動的に実行します。
graph LR
A[1. lanhu_get_teams] --> B[2. lanhu_get_projects]
B --> C[3. lanhu_get_screens]
C --> D[4. lanhu_get_annotations]
D --> E[5. Generate Code CSS/HTML/React/Flutter]
D --> F[6. lanhu_download_asset]# 1. Fetch team list
teams = lanhu_get_teams()
team_id = teams[0]["id"]
# 2. Get project list
projects = lanhu_get_projects(team_id=team_id)
project_id = projects[0]["id"]
# 3. Get artboards list
screens = lanhu_get_screens(project_id=project_id, team_id=team_id)
image_id = screens[0]["id"]
# 4. Extract full annotations
annotations = lanhu_get_annotations(
project_id=project_id,
image_id=image_id,
team_id=team_id
)
# 5. Download icons/slices
assets = lanhu_get_assets(project_id=project_id, image_id=image_id, team_id=team_id)
lanhu_download_asset(
asset_id=assets[0]["id"],
asset_name=assets[0]["name"],
download_url=assets[0]["download_url"],
format="webp" # or "svg"
)lanhu_get_annotations を呼び出すと、構造化JSONが返ります。
{
"id": "651234567890abcdef",
"name": "Checkout Page",
"width": 375.0,
"height": 812.0,
"thumbnail_url": "https://...",
"layers": [
{
"id": "layer_01",
"name": "Submit Button",
"type": "rect",
"bounds": { "x": 16.0, "y": 740.0, "width": 343.0, "height": 48.0 },
"border_radius": 8.0,
"opacity": 1.0,
"visible": true,
"fills": [
{ "type": "color", "color": "#0066FF", "opacity": 1.0 }
],
"shadows": [
{ "x": 0.0, "y": 4.0, "blur": 12.0, "spread": 0.0, "color": "#0066FF33" }
],
"children": [
{
"id": "layer_02",
"name": "Button Label",
"type": "text",
"text": "Confirm & Pay",
"bounds": { "x": 140.0, "y": 754.0, "width": 95.0, "height": 20.0 },
"font": {
"size": 16.0,
"weight": "600",
"family": "PingFang SC",
"line_height": 20.0,
"letter_spacing": 0.0,
"color": "#FFFFFF",
"text_align": "center"
}
}
]
}
],
"assets": [
{
"id": "asset_01:svg",
"name": "icon_cart",
"format": "svg",
"download_url": "https://..."
}
]
}Variable | Default | Description |
| (空) | フォールバック用の生のCookie文字列（ |
|
| ダウンロードしたアセットの保存先ディレクトリ |
|
| APIのHTTPリクエストタイムアウト（秒） |
|
| ログレベル（ |
このプロジェクトは、教育、テスト、AI生産性の研究を目的とした独立したオープンソースツールです。リバーエンンジニアリングされたWebインターフェースを介してLanhuに連携します。本ツールのご利用にあたっては、Lanhuの利用規約を遵守してください。著者は、不適切な使用方法について一切の責任を負いません。
このプロジェクトは MITライセンス で提供されています。
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
A design-style library for AI agents: search real styles, fetch a ready-to-apply design spec.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/xinayida/lanhu-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server