作者 dsphper · dsphper/lanhu-mcp
Designed for the China design-to-code workflow: pulls 蓝湖 specs, marks 切图, and lets Claude write 前端 + 后端 from the spec.
Lanhu MCP exposes 蓝湖's design boards as MCP tools. Claude can fetch spec values (px sizes, colors, fonts), download slices, and use the structured spec to author React/Vue components or Mini Program pages.
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"lanhu-mcp": {
"command": "npx",
"args": [
"-y",
"lanhu-mcp"
],
"env": {
"LANHU_TOKEN": "${LANHU_TOKEN}"
}
}
}
}Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。
{
"mcpServers": {
"lanhu-mcp": {
"command": "npx",
"args": [
"-y",
"lanhu-mcp"
],
"env": {
"LANHU_TOKEN": "${LANHU_TOKEN}"
}
}
}
}Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。
{
"mcpServers": {
"lanhu-mcp": {
"command": "npx",
"args": [
"-y",
"lanhu-mcp"
],
"env": {
"LANHU_TOKEN": "${LANHU_TOKEN}"
}
}
}
}Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。
{
"mcpServers": {
"lanhu-mcp": {
"command": "npx",
"args": [
"-y",
"lanhu-mcp"
],
"env": {
"LANHU_TOKEN": "${LANHU_TOKEN}"
}
}
}
}Claude Desktop と同じ形式。Windsurf を再起動して反映。
{
"mcpServers": [
{
"name": "lanhu-mcp",
"command": "npx",
"args": [
"-y",
"lanhu-mcp"
]
}
]
}Continue はマップではなくサーバーオブジェクトの配列を使用。
{
"context_servers": {
"lanhu-mcp": {
"command": {
"path": "npx",
"args": [
"-y",
"lanhu-mcp"
]
}
}
}
}context_servers に追加。保存時に Zed がホットリロード。
claude mcp add lanhu-mcp -- npx -y lanhu-mcpワンライナー。claude mcp list で確認、claude mcp remove で削除。
使うタイミング： 设计师 just shipped a board; you want the component scaffolded with correct tokens.
結果： Component matches the spec without you eyeballing pixel values.
Save downloaded slices into your project tree
| ツール | 入力 | 呼び出すタイミング | コスト |
|---|---|---|---|
| get_board | (see docs) | Fetch a design board structure + specs | 1 call |
| download_slices | (see docs) | Download annotated slice assets | 1 call |
| export_tokens | (see docs) | Export design tokens as JSON/CSS variables | 1 call |
lanhu:read401 from LanhuToken expired or wrong project scope; regenerate in Lanhu settings
Slice download empty设计师 hasn't marked slices — ask them to mark 切图 in the board
| 代替案 | 代わりに使う場面 | トレードオフ |
|---|---|---|
| figma MCP | Source is Figma | Different design tool |
| stitch-mcp | Source is Google Stitch | Different design tool |