作者 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 |