一、一句话讲清楚这是做什么的
- 在本地运行一个 蓝湖 MCP 服务
- 把服务连接到 Codex（AI 编程客户端）
- 让 Codex 自动读取蓝湖设计稿，并生成：
- 代码结构
- 切图分类
- UnoCSS 样式
- 需求文档
👉 本质：用 AI + MCP 打通设计与代码
二、整体架构
蓝湖网页版
↓ Cookie
蓝湖 MCP 服务（HTTP）
↓ MCP 协议
Codex 客户端
↓
自动读取设计稿 / 切图 / 生成代码
三、准备工作
- ✅ Node.js / npm
- ✅ Python 3.10+
- ✅ Git
- ✅ Codex 客户端（已安装）
- ✅ 蓝湖账号（有项目或设计稿权限）
四、第一步：搭建蓝湖 MCP 服务
4.1 克隆项目
git clone https://github.com/dsphper/lanhu-mcp.git
cd lanhu-mcp
4.2 创建 Python 虚拟环境
python -m venv venv
source venv/bin/activate # macOS / Linux
# .\venv\Scripts\activate # Windows
4.3 安装依赖
pip install -r requirements.txt
python -m playwright install chromium
4.4 配置蓝湖 Cookie（重点）
- 登录 蓝湖
- 打开浏览器开发者工具（F12）
- 切换到 Network 标签
- 刷新页面或点击另一张图
- 任意请求 → Request Headers → 复制完整
Cookie
项目根目录：
cp .env.example .env
编辑 .env：
LANHU_COOKIE=你复制的完整Cookie
4.5 启动服务
export SERVER_PORT=8000
python lanhu_mcp_server.py
看到：
Uvicorn running on http://0.0.0.0:8000
✅ 服务已就绪（保持此终端运行）
五、第二步：连接 Codex
确保上一步服务在运行
执行：
codex mcp add lanhu \
--url "http://localhost:8000/mcp?role=前端&name=你的名字"
验证是否成功：
codex mcp list
如果出现 lanhu，说明 ✅ 连接成功。
六、使用示例（读者最关心的）
6.1 自动读取设计稿
在 Codex 中发送：
请读取这个蓝湖设计稿：https://lanhuapp.com/xxx
AI 会调用：
lanhu_get_design
6.2 自动生成切图 + 代码
- 自动下载切图
- 分类为：
iconbgimg
- 生成 UnoCSS 样式代码
6.3 生成需求文档
使用命令：
$lanhu-requirements-doc
并附上 PRD 链接
七、模式选择（帮你避坑）
| 模式 | 方式 | 适合场景 |
|---|---|---|
| HTTP（推荐） | --url | 长期运行、多项目使用 |
| Stdio | Codex 直接启动 Python | 一次性任务、调试 |
👉 教程用的是 HTTP 模式
八、常见问题（FAQ）
❌ Codex 连不上服务
- 检查 MCP 服务是否还在运行
- 检查端口：
lsof -i :8000
❌ 蓝湖读取失败
- Cookie 是否过期（重新登录获取）
- 是否有设计稿访问权限
只要本地装好lanhu MCP 配置并正确填入了cookie，遇到问题可以直接让codex帮你排查并解决。
九、总结 & 应用价值
通过本方案你可以做到：
- ✅ 设计稿 → 结构化数据 → 直接给 AI
- ✅ 不让 AI “看图瞎猜”
- ✅ 团队可复用 MCP 服务
- ✅ 为 AI 编程接入真实设计资产
MCP 是一个桥梁，蓝湖是内容源，Codex 是消费端。
