● 커뮤니티 dsphper 🔑 본인 키 필요

Lanhu MCP

Name: Lanhu MCP MCP Server
Author: dsphper

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.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

Fetch design board structure
Extract specs (sizes, colors, fonts) as JSON
Download annotated 切图 (slice) assets
Cross-platform: web, miniprogram, native
Token export for Tailwind / UnoCSS

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %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 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "lanhu-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ],
      "env": {
        "LANHU_TOKEN": "${LANHU_TOKEN}"
      }
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "lanhu-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ],
      "env": {
        "LANHU_TOKEN": "${LANHU_TOKEN}"
      }
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "lanhu-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ],
      "env": {
        "LANHU_TOKEN": "${LANHU_TOKEN}"
      }
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

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

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "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로 제거.

사용 사례

실전 활용법: Lanhu MCP

Generate a React component from a 蓝湖 board

👤 Developers ⏱ ~15 min intermediate

언제 쓸까: 设计师 just shipped a board; you want the component scaffolded with correct tokens.

흐름

Fetch board

lanhu_get_board with board URL.✓ 복사됨

→ Spec returned
Download slices

lanhu_download_slices into /assets.✓ 복사됨

→ Images saved
Generate

Author component using spec tokens.✓ 복사됨

→ Component ready

결과: Component matches the spec without you eyeballing pixel values.

조합

다른 MCP와 조합해 10배 효율

lanhu-mcp + filesystem

Save downloaded slices into your project tree

Combine lanhu-mcp with filesystem: Save downloaded slices into your project tree✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
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

비용 및 제한

운영 비용

API 쿼터: 蓝湖 plan limits apply
호출당 토큰: Spec JSON is mid-size
금액: 免费 MCP; 蓝湖订阅 applies
팁: Cache specs locally — don't refetch on every prompt

보안

권한, 시크릿, 파급범위

최소 스코프: lanhu:read

자격 증명 저장: Lanhu token in env

데이터 외부 송신: lanhuapp.com

문제 해결

자주 발생하는 오류와 해결

401 from Lanhu

Token expired or wrong project scope; regenerate in Lanhu settings

Slice download empty

设计师 hasn't marked slices — ask them to mark 切图 in the board

대안

Lanhu MCP 다른 것과 비교

대안	언제 쓰나	단점/장점
figma MCP	Source is Figma	Different design tool
stitch-mcp	Source is Google Stitch	Different design tool