目标:只需提供蓝湖
Cookie(文档中也称 Token),即可快速拉起lanhu-mcp,并在 Claude/Codex 中调用。
0. Cookie 获取方式
1.登录蓝湖网页,打开开发者工具。
2.进入Network,选择任意Fetch/XHR请求。
3.在Request Headers复制完整Cookie。
1. 3 分钟跑通(安装 + 启动 + 接入)
1.1 先设置路径变量
export PROJECT_DIR="$HOME/path/to/your-project" # 你的业务项目目录 export LANHU_MCP_DIR="$HOME/lanhu-mcp-main" # lanhu-mcp 本地目录1.2 一次性安装(首次机器执行)
# 基础检查 python3 --version npm -v git --version # 拉取代码 [ -d "$LANHU_MCP_DIR" ] || git clone https://github.com/dsphper/lanhu-mcp.git "$LANHU_MCP_DIR" cd "$LANHU_MCP_DIR" cp -f .env.example .env # 写入蓝湖 Cookie export LANHU_TOKEN='这里替换成你的蓝湖Cookie' if grep -q '^LANHU_COOKIE=' .env; then sed -i '' "s|^LANHU_COOKIE=.*|LANHU_COOKIE=\"${LANHU_TOKEN}\"|" .env else printf '\nLANHU_COOKIE="%s"\n' "${LANHU_TOKEN}" >> .env fi # 安装依赖 python3 -m venv venv source venv/bin/activate python -m pip install -U pip setuptools pip install -r requirements.txt python -m playwright install chromium1.3 每次启动服务(推荐方式)
cd "$PROJECT_DIR" mkdir -p data/messages export LANHU_COOKIE="$(awk -F'"' '/^LANHU_COOKIE=/{print $2}' "$LANHU_MCP_DIR/.env")" export SERVER_PORT=8000 "$LANHU_MCP_DIR/venv/bin/python" "$LANHU_MCP_DIR/lanhu_mcp_server.py"启动成功日志应包含:
Uvicorn running on http://0.0.0.0:80001.4 接入 Claude/Codex MCP
# Claude claude mcp remove lanhu >/dev/null 2>&1 || true claude mcp add --transport http lanhu "http://localhost:8000/mcp?role=测试&name=Lucas" claude mcp list # Codex codex mcp remove lanhu >/dev/null 2>&1 || true codex mcp add lanhu --url "http://localhost:8000/mcp?role=测试&name=Lucas" codex mcp list1.5 快速验证
lsof -iTCP:8000 -sTCP:LISTEN -n -Pcodex mcp list2. 标准流程
第 1 节是最短路径;本节是详细版。若两处文字有重复,统一以本节命令为准。
2.1 环境要求
gitPython 3.10+(建议3.11)Node.js + npm
2.2 为什么推荐在业务目录启动服务
lanhu-mcp会写入相对路径data/messages。若历史上用过sudo启动,容易出现目录归属为root,导致普通用户写入失败。推荐固定在$PROJECT_DIR启动,并确保:
cd "$PROJECT_DIR"mkdir -p data/messagesBash
2.3 Cookie 配置约定
lanhu-mcp实际读取的是.env里的LANHU_COOKIE本文所有“Token”都按 Cookie 字符串处理
写入方式已在1.2给出,后续只需复用1.3里的读取逻辑。
3.lanhu-requirements-docSkill 使用
3.1 Skill 路径
Claude:
<项目根目录>/.claude/skills/lanhu-requirements-doc/SKILL.mdClaude:
<项目根目录>/.claude/skills/lanhu-requirements-doc/template.mdCodex:
$CODEX_HOME/skills/lanhu-requirements-doc/SKILL.mdCodex:
$CODEX_HOME/skills/lanhu-requirements-doc/template.md
3.2 单页面扫描(带pageId)
触发条件:URL 包含docId + product + pageId。
Claude:
/lanhu-requirements-doc https://lanhuapp.com/web/#/item/project/product?...&versionId=...&docId=...&pageId=...Codex:
$lanhu-requirements-doc https://lanhuapp.com/web/#/item/project/product?...&versionId=...&docId=...&pageId=...输出文件:需求文档-[项目名]-[页面名]-[YYYYMMDD].md
3.3 全版本页面扫描(不带pageId)
触发条件:URL 包含docId + product,但不带pageId。
Claude:
/lanhu-requirements-doc https://lanhuapp.com/web/#/item/project/product?...&versionId=...&docId=...Codex:
$lanhu-requirements-doc https://lanhuapp.com/web/#/item/project/product?...&versionId=...&docId=...如果手里是单页链接但要扫全量,删除 URL中pageId(通常也删掉image_id、parentId)。
3.4 Codex 无 Slash 技能入口时(等价提示词)
请按 <项目根目录>/.claude/skills/lanhu-requirements-doc/SKILL.md 的规则处理以下蓝湖链接: 1) 先判断是邀请链接、PRD单页、PRD全文档还是UI设计; 2) 使用 lanhu MCP 的对应工具读取并分析; 3) 按 <项目根目录>/.claude/skills/lanhu-requirements-doc/template.md 输出完整中文需求文档; 4) 保存为 需求文档-[项目名]-[YYYYMMDD].md(若是单页则带页面名)。 蓝湖链接:<在这里粘贴>4. 按症状查错(实战版)
症状 | 常见原因 | 处理 |
| 当前执行环境不能写
| 在可写权限下执行 |
/ |
内层沙箱影响 MCP 调用链路 | 排障阶段用 |
|
不可写(常见于历史
| 在 启动并
|
| 端口监听权限受限 | 使用允许监听端口的执行权限启动 |
Python < 3.10 | 版本不满足依赖 | 升级到 3.11 并重建
|
| 旧环境依赖冲突 | 删除 |
Playwright | 浏览器依赖安装权限不足 | 优先修复目录权限并重建; |
5.蓝湖MCP支持
功能名称 | 功能类别 | 功能描述 |
| 项目协作 | 解析并加入项目 。该功能允许开发者或AI客户端通过蓝湖的邀请链接,自动解析项目信息并加入到指定的蓝湖项目中,省去手动查找和申请的步骤,快速建立协作环境。 |
| 设计获取 | 获取页面列表 。用于查询指定蓝湖项目或设计稿中包含的所有页面。开发者可以通过该命令了解设计稿的结构,例如一个App设计稿中包含“登录页”、“首页”、“个人中心页”等。 |
| AI分析 | 分析页面关联关系 。调用AI能力分析蓝湖项目中各个页面之间的逻辑跳转关系或流程。通常用于生成用户流程图(User Flow),帮助理解产品交互逻辑,可能与蓝湖自带的设计图连线功能相关。 |
| 设计获取 | 获取设计稿列表 。用于获取指定项目或团队下的所有设计稿文件。这是进行后续操作(如获取页面、切图)的起点,方便AI了解当前有哪些可用的设计资源。 |
| AI分析 | AI分析设计稿 。针对单张特定的设计稿,利用AI进行深度分析。可能包括识别设计稿中的UI组件(如按钮、卡片)、布局结构、颜色规范等,为代码生成或设计走查提供依据。 |
| 资源获取 | 获取设计切图 。用于获取指定设计稿或页面中所有标记好的切图资源(如PNG、SVG、WebP格式)。开发者可以利用此功能让AI自动下载所需图标和图片,无需手动逐一导出。 |
| 评论协作 | 发送评论 。在蓝湖的设计稿上针对某个元素或页面发送评论。可用于向设计师提问、反馈开发问题或确认设计细节,将沟通记录与具体设计关联。 |
| 评论协作 | 查看评论列表 。获取指定设计稿或页面上的所有评论历史。方便开发者和设计师回顾沟通过程,追踪待解决问题,避免信息遗漏。 |
| 评论协作 | 查看评论详情 。查看某一条特定评论的详细内容、回复记录以及@的相关成员信息,深入理解沟通上下文。 |
| 评论协作 | 编辑评论 。允许用户修改已发送的评论内容,用于修正错误、补充信息或更新讨论要点,保持沟通的准确性和时效性。 |
| 评论协作 | 删除评论 。根据评论ID删除已发送或已解决的评论,用于管理设计稿上的讨论内容,保持界面整洁。 |
| 团队管理 | 获取成员列表 。查询当前蓝湖项目或团队中的所有成员信息。这对于自动识别设计师、产品经理或开发负责人,或者在进行协作(如@成员)时非常有用。 |
6. 验收清单
服务日志出现
Uvicorn running on http://0.0.0.0:8000claude mcp list可见lanhucodex mcp list可见lanhu能用蓝湖链接成功执行一次
lanhu-requirements-doc