🎨 告别繁琐切图：基于 Lanhu MCP 与 Agent 构建全自动前端页面切图与Trae实战

namehu
0 阅读6分钟

本文旨在提供一套 基于 当前 AI Coding 的下的设计思考以及工具技术集成。并且 文末提供 TRAE 接入实战。并不代表绝对正确或最佳实践。 如果你有更好的方案 也欢迎评论区 讨论交流.

注: Figma MCP 同理, 不在本篇讨论范畴。

作为一名前端架构师。我一直在思考一个问题：在 AI 编程时代，前端研发的提效瓶颈究竟在哪？ 对于我司业务场景来讲，问题很明显：UI 还原与切图。

尽管现在的 AI IDE（如 Cursor、Trae）已经能写出极其优雅的业务逻辑，但在面对复杂的设计稿时，它们往往像个“盲人”。开发者依然需要手动在蓝湖上测量间距、下载切图、重命名、拖入项目，最后再小心翼翼地把数值喂给 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 并非简单的数据透传，而是一个具备智能缓存、并发处理和团队上下文管理的“中央大脑”。整个链路的设计非常清晰：

graph TD
  A["AI客户端(Cursor/Windsurf)"] -->|"MCP协议(Tool调用)"| B["Lanhu MCP 核心业务层"]
  B --> C{"检查本地智能缓存"}
  C -- "命中(基于版本号)" --> D["直接返回JSON/图片"]
  C -- "未命中" --> E["调用蓝湖平台API"]
  E --> F["下载Axure/UI资源"]
  F --> G["HTML/CSS转换与处理"]
  G --> H["数据持久化(文件/JSON)"]
  H --> D

✨ 杀手级功能特性

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

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

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

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

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

git clone https://xxxx/lanhu-mcp.git

cd lanhu-mcp

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

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

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

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. 一键启动

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

启动后，在你的 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 设定了不可跨越的红线。整个执行流水的状态机如下：

sequenceDiagram
  participant User as "前端开发者"
  participant Agent as "Lanhu Expert Agent"
  participant MCP as "Lanhu MCP"
  participant SkillCut as "lanhu-cutout 技能"
  participant SkillSync as "lanhu-design-sync 技能"

  User->>Agent: "提供蓝湖链接，要求生成 Taro 页面"
  
  rect rgb(40, 44, 52)
    Note over Agent: "Step 1-3: 上下文定位与数据获取"
    Agent->>MCP: "lanhu_get_designs & lanhu_get_ai_analyze_design_result"
    MCP-->>Agent: "返回设计图参数与结构"
  end

  rect rgb(40, 50, 60)
    Note over Agent: "Step 4-5: 核心思考与策略输出"
    Agent->>Agent: "输出视觉参数提取表(CoT)"
    Agent->>Agent: "输出组件拆分计划"
  end

  rect rgb(50, 40, 60)
    Note over Agent,SkillCut: "Step 6: 切图决策与委派下载"
    Agent->>SkillCut: "传入非CSS切图URL与目标路径"
    SkillCut-->>Agent: "静默下载完毕，返回本地路径"
    Note right of SkillCut: "触发防中断信号，强制进入下一步"
  end

  rect rgb(40, 60, 50)
    Note over Agent,SkillSync: "Step 7-9: 数据隔离与代码生成"
    Agent->>Agent: "抽离 Interface 与 Mock (生成Hooks)"
    Agent->>SkillSync: "传入视觉参数、图片路径、模板类型"
    SkillSync-->>Agent: "生成 .tsx 与 .less"
    Note right of SkillSync: "触发防中断信号，阻止向用户提问"
    Agent->>Agent: "主页面组装"
  end

  Agent->>Agent: "Step 10: 像素级合规自检与复盘"  
  Agent-->>User: "输出 SOP 复盘报告与最终代码"

🛡️ 为什么如此设计

  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）。

Trae 实战

创建智能体

在Trae中点击 设置 - 智能体。 新建一个智能体 agent，把定义好的agent 提示词 放在 智能体中

image.png

定义skills

Trae 也支持了 skills 的定义。 如图。我在项目级别 .trae/skills 下新增了对应的 skill

image.png

启动MCP

启动本地 lanhu-mcp

image.png

Trae 中配置 MCP

在Trae中点击 设置 - MCP。 手动添加一个MCP并粘贴如下内容

{
    "mcpServers": {
        "lanhu-mcp": {
            "url": "http://localhost:8000/mcp?role=Developer&name=jack"
        }
    }
}

使用

在编辑器对话框中站体 蓝湖的切图链接 - 回车。就可以喝杯咖啡啦~

image.png

💡 总结

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

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

如果你也对提升研发工程效能感兴趣，也建议去体验一下 Lanhu MCP Server。AI 不会淘汰开发者，但一定会淘汰不善用 AI 的开发者。

有什么问题，欢迎在评论区交流探讨，也欢迎分享给你的团队！

avatar
文章
阅读
粉丝