mmdoc

Appearance

🎨 告别繁琐切图：基于 Lanhu MCP 与 Agent 构建全自动前端研发流水线 ​

我一直在思考一个问题：在 AI 编程时代，前端研发的提效瓶颈究竟在哪？ 结论很明显：UI 还原与切图。

尽管现在的 AI IDE（如 Cursor、Windsurf）已经能写出极其优雅的业务逻辑，但在面对复杂的设计稿时，它们往往像个“盲人”。开发者依然需要手动在蓝湖上测量间距、下载切图、重命名、拖入项目，最后再小心翼翼地把数值喂给 AI。这不仅割裂了开发心流，更让每个开发者的 AI 变成了一座“信息孤岛”——A 同学踩过的坑，B 同学的 AI 完全不知情。

直到 Lanhu MCP Server 项目，配合我们定制的 Agent SOP，真正实现了从“设计稿”到“像素级 Taro 代码”的 100% 全自动流水线。

今天这篇文章，我就来硬核拆解一下这套架构的设计与落地实践，希望能给深耕前端与全栈领域的同学们带来一些启发。

🏗️ 揭秘 Lanhu MCP：打破 AI IDE 的信息孤岛 ​

Model Context Protocol (MCP) 是近期 AI 领域最振奋人心的标准之一，它让 AI 能够标准化地访问外部数据源。而 lanhu-mcp 就是专为蓝湖协作平台量身打造的 MCP 服务器。

🧠 核心架构设计 ​

lanhu-mcp 并非简单的数据透传，而是一个具备智能缓存、并发处理和团队上下文管理的“中央大脑”。整个链路的设计非常清晰：

✨ 杀手级功能特性 ​

在实际接入中, 它有三个直击痛点的核心功能：

  1. 🎨 智能 UI 设计支持：它不仅能返回设计图预览，更能精准提取组件尺寸、间距、颜色、字体等细节参数，甚至直接将 Schema 转为 HTML+CSS 参考代码。
  2. 💬 团队协作留言板（知识共享）：这是我最欣赏的设计。所有接入该 MCP 的 AI 助手共享同一个上下文。后端 AI 分析出的字段校验规则，测试 AI 可以直接读取；你踩过的坑只要记录在案，团队其他人的 AI 就能帮你避坑。配合飞书 Webhook 还能实现 @ 提醒。
  3. 📋 多维度需求分析：内置“开发/测试/探索”三种分析模式，准确率极高，彻底告别了反复翻阅长篇大论的原型文档。

🛠️ 硬核实操：通过 Docker 本地部署 Lanhu MCP ​

保持环境的纯净是架构师的强迫症，所以我强烈推荐使用 Docker 进行本地或内网服务器部署。官方提供的脚本已经非常完善。

1. 克隆项目与初始化环境

bash
git clone https://github.com/dsphper/lanhu-mcp.git

cd lanhu-mcp

# 运行环境配置脚本（支持 Mac/Linux）
# 此时终端会引导你输入从蓝湖网页版抓取的 Cookie
bash setup-env.sh

2. 核心环境变量配置 (.env)

为了保证服务稳定，除了必要的 LANHU_COOKIE，建议配置好数据目录和飞书机器人的 Webhook：

bash
LANHU_COOKIE="your_lanhu_cookie_here"
DATA_DIR="./data"
FEISHU_WEBHOOK_URL="[https://open.feishu.cn/open-apis/bot/v2/hook/xxx](https://open.feishu.cn/open-apis/bot/v2/hook/xxx)"
# 开启调试模式方便排查问题
DEBUG="true"

3. 一键启动

bash
docker-compose up -d
docker-compose logs -f

启动后，在你的 Cursor/Trae 中配置 MCP Server 即可接入： http://localhost:8000/mcp?role=Developer&name=YourName

🤖 见证魔法：配合 Agent 与 Skill 实现全自动切图与编码 ​

有了数据源只是第一步，真正让生产力发生质变的是 Agent SOP 工作流。

在我们的前端流水线中，我为 AI 助手设计了一个名为 lanhu-expert 的 Agent，并配合两个纯执行态的 Skill：

  • lanhu-cutout（负责文件 I/O 下载切图）
  • lanhu-design-sync（负责基于参数生成 Taro 代码）。

📋 严格的 10 步强制 SOP (Standard Operating Procedure) ​

为了保证 100% 的像素级还原并且防范 AI 的幻觉（例如凭空捏造 padding 或 line-height），我给 Agent 设定了不可跨越的红线。整个执行流水的状态机如下：

🛡️ 为什么如此设计 ​

  1. 彻底剥离决策与执行：lanhu-cutout 只负责静默执行 curl 请求 @3x 资源并按 snake_case 强制重命名，它绝对不碰业务逻辑；而 lanhu-design-sync 只负责把确切的视觉参数 1:1 写入 Less，坚决杜绝面条代码。
  2. 防中断系统信号 (System Signal)：在使用 LLM 调度多工具时，AI 极其容易在某个工具执行完毕后停下来问你：“图片下载好了，接下来要生成代码吗？”。在我们的 Skill 设计中，强行注入了防中断指令：

    [SYSTEM_SIGNAL]: 切图下载工具执行完毕。Agent 请立即接收上述路径...不要停顿！请立刻静默执行 SOP 的 Step 7 和 Step 8！ 这种工程化 Hack 让流水线能够一气呵成。

  3. 视觉防呆约束：强制提取 line-height（防垂直居中失效）、约束特殊字体（数字强制使用 DIN 字体）、防滚轮裁切血泪教训（绝对定位底栏强制加 padding-bottom）。

💡 总结 ​

通过 lanhu-mcp 将设计资产转化为结构化数据，再结合严格约束的 Agent SOP，我们实质上在本地构建了一个属于前端工程师的“黑灯工厂”。

以前需要耗费一上午的“看图 - 测距 - 切图 - 写样式”体力活，现在只需要提供一个链接，喝杯咖啡的功夫，一份结构清晰、样式完美还原、数据解耦的组件代码就已经静静地躺在你的项目中了。