Lanhu(蓝湖) 디자인 협업 플랫폼을 위한 MCP(Model Context Protocol) 서버
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는 브라우저 세션 쿠키를 사용해 lanhuapp.com에 연결합니다. ~/.lanhu/cookie 파일(파일 권한 0600)을 읽습니다.
포함된 Playwright 자동화 스크립트를 실행하세요:
uv run scripts/refresh_cookie.py이미 로그인된 경우: 헤드리스로 세션을 확인하고, 토큰을 갱신하여 ~/.lanhu/cookie에 저장합니다.
세션 만료된 경우: 한 번의 로그인을 위해 Chrome 창을 자동으로 열어줍니다(SMS 코드 또는 비밀번호). 인증이 완료되면 세션을 저장하고 브라우저를 닫습니다.
예약 작업 팁: cron 작업에서
--headless-only를 사용하여 창을 띄우지 않고 주기적으로 쿠키를 갱신하세요:uv run scripts/refresh_cookie.py --headless-only
AI 채팅에서 MCP 도구를 직접 호출하세요:
lanhu_set_cookie(cookie="session=...; user_token=...")쿠키를 수동으로 얻으려면:
Chrome에서 lanhuapp.com을 열고 DevTools를 엽니다(F12).
Network 탭으로 이동하여 lanhuapp.com에 대한 요청을 클릭하세요.
Request Headers에서 session과 user_token을 포함한 전체 Cookie 문자열을 복사하세요.
프로젝트 루트에 .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"]
}
}
}도구 이름 | 설명 | 주요 매개변수 |
| 인증 쿠키를 업데이트하고 |
|
| 사용자 팀 목록 가져오기(인증 건강 확인 역할도 함) | (없음) |
| 특정 팀의 디자인 프로젝트 가져오기 |
|
| 팀에서 키워드로 프로젝트 검색 |
|
| 프로젝트의 모든 아트보드/스크린 목록을 크기및 썸네일과 함께 나열 |
|
| 키워드로 아트보드 검색 |
|
| ⭐ 핵심 도구: 전체 레이어 트리, CSS 스타일, 타이포그래피 및 에셋 검색 |
|
| 다운로드 URL이 포함된 내보낼 수 있는 이미지/아이콘 에셋 가져오기 |
|
| 에셋을 로컬 디스크에 다운로드(WebP 무손실 / SVG / PNG 지원) |
|
Lanhu에서 AI 에이전트에게 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://..."
}
]
}변수 | 선언된 기본값 | 설명 |
| (빈 값) | 원시 쿠키 문자열 대체( |
|
| 다운로드한 에셋이 저장되는 디렉토리 |
|
| API HTTP 요청 제한 시간(초) |
|
| 로깅 수준( |
이 프로젝트는 교육, 테스트 및 AI 생산성 연구 목적으로 개발된 독립 오픈소스 도구입니다. 역공학된 갭인 웹 인터페이스를 통해 Lanhu와 상호 작용합니다. 이 도구를 사용할 때는 Lanhu의 서비스 약관을 준수하세요. 작성자는 오용에 대해 책임을 지지 않습니다.
이 프로젝트는 MIT License에 따라 라이선스가 부여됩니다.
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