lanhu-context-mcp

简体中文 | English

✨ Lanhu 디자인 시안을 AI가 코드로 구현할 수 있도록 컨텍스트로 정리해 줍니다.

주요 기능

• 🎨 HTML+CSS 또는 HTML+Tailwind 출력 지원, 프로젝트 기술 스택에 맞춰 선택 가능

• 🖼️ 이미지 리소스 매핑 및 다운로드 명령어 제공으로 수동 처리 단계 최소화

• 🧱 Design Tokens 및 디자인 미리보기 이미지 제공으로 후속 모델의 구현 및 시각적 검증 지원

• 🧭 AI를 위한 구현 가이드 제공 (우선순위, 적응 방식, 제약 조건 명시)

• ⚙️ CLI 인자 및 환경 변수를 통한 Tailwind 출력, 이미지 추출 건너뛰기, 단위 스케일링, 프롬프트 언어 설정 지원

Related MCP server: componentize

문서

전체 문서는 lanhu.refineup.com에서 확인하세요.

빠른 시작

환경 요구 사항

• Node.js ^20.19.0 || >=22.12.0

디자인 시안 코드 변환

• 디자인 시안은 먼저 변환 기능을 활성화한 후 Lanhu에 업로드해야 합니다.

Step 1. 환경 변수 준비

먼저 .env.local 파일을 생성합니다.

사용 가능한 Lanhu 로그인 토큰이 필요합니다. Lanhu 토큰 가져오기를 참고하세요.

LANHU_TOKEN=your_lanhu_token_here

Step 2. MCP 설정

아래 각 클라이언트에 맞는 MCP 설정을 해당 파일에 작성하세요:

Codex (.codex/config.toml)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

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

Codex의 MCP 설정은 다소 특수하며, cwd를 추가로 설정하여 현재 프로젝트의 절대 경로를 입력해야 합니다. 이 경로는 사용자마다 다르므로 .codex/config.toml을 Git에 커밋하지 않는 것이 좋으며, Git 제외 설정을 하고 각 개발자가 로컬에서 관리하는 것을 권장합니다.

Windows

Windows에서 위 npx 설정으로 실행이 실패할 경우, 아래와 같이 변경해 보세요:

Codex (WSL2)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Codex (Native)

[mcp_servers.lanhu-context-mcp]
cwd = "C:\\absolute\\path\\to\\current-project"
command = "C:\\Program Files\\nodejs\\npx.cmd"
args = ["-y", "lanhu-context-mcp"]

[mcp_servers.lanhu-context-mcp.env]
APPDATA = "C:\\Users\\{your-name}\\AppData\\Roaming"
LOCALAPPDATA = "C:\\Users\\{your-name}\\AppData\\Local"
USERPROFILE = "C:\\Users\\{your-name}"
HOME = "C:\\Users\\{your-name}"
SYSTEMROOT = "C:\\Windows"
COMSPEC = "C:\\Windows\\System32\\cmd.exe"

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "lanhu-context-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "lanhu-context-mcp"]
    }
  }
}

Codex 네이티브 fallback 참고: openai/codex#2555

Step 3. Lanhu Helper 구글 크롬 확장 프로그램 설치

Lanhu Helper를 설치하면 Lanhu에서 우클릭으로 선택한 레이어 링크나 예시 프롬프트를 바로 복사할 수 있습니다.

Step 4. Lanhu 링크와 프롬프트를 AI에게 전달

请根据这个蓝湖设计稿实现
@https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}

https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}

프롬프트는 원하는 대로 작성할 수 있지만, Lanhu URL은 반드시 완전하고 정확해야 합니다. 그렇지 않으면 도구가 정상적으로 호출되지 않습니다.

더 자세한 문서 보기

생태계

Lanhu Helper — Lanhu 전용 크롬 브라우저 확장 프로그램, Lanhu에서 우클릭으로 선택한 레이어 링크 및 예시 프롬프트 복사 가능

라이선스

MIT

Copyright (c) 2026-present, REFINIST