1. 项目概述：当设计稿遇上AI，如何让“落地”不再卡壳？
如果你是一名前端开发者，或者经常需要将UI设计稿转化为实际代码，那你一定对“蓝湖”这个设计协作平台不陌生。设计师把精美的界面丢过来，标注、切图一应俱全，但真正动手写代码时，那种“隔靴搔痒”的感觉依然存在。标注告诉你这个按钮宽72px，高36px，圆角8px，颜色是#2878ff，但如何把这些零散的像素和色值，高效、准确地组织成可维护的、符合现代前端工程规范的代码，依然是个费时费力的手工活。更别提那些复杂的布局、响应式适配和交互状态了。
这就是 lanhu-context-mcp 这个项目诞生的背景。它不是一个简单的“设计稿转代码”工具，而是一个 MCP（Model Context Protocol）服务器 。简单来说，MCP是连接AI助手（如Claude Desktop、Cursor等）与外部工具和数据源的一套标准协议。 lanhu-context-mcp 扮演的角色，就是让AI助手能够“理解”并“操作”蓝湖设计稿。你只需要给AI助手一条蓝湖设计稿的详情页链接，它就能通过这个MCP服务器，获取到一份极其丰富的“上下文信息包”，然后基于这些信息，直接为你生成可落地的前端代码。
这个信息包具体包含什么？这正是它的核心价值所在： HTML+CSS（基于Tailwind CSS） 、 一键下载所有切图资源 、 结构化的Design Tokens（设计令牌） 、 分步骤的实现指引 ，以及 设计预览图 。它解决的不仅仅是“转译”问题，更是“理解”和“工程化”的问题。对于独立开发者、小型团队，或是希望大幅提升设计稿交付效率的任何人来说，这相当于给你的AI编程伙伴装上了一双能直接“看懂”设计稿的眼睛和一双能“直接动手”写代码的手。
2. 核心原理与架构拆解：MCP如何成为AI与设计稿的“翻译官”？
要理解 lanhu-context-mcp 的价值，得先弄明白MCP和传统设计转代码工具的根本区别。
2.1 传统设计转代码工具的局限性
市面上早就有各种“一键生成代码”的插件或在线工具。它们通常的工作流程是：你上传一张设计稿图片（或Sketch/Figma文件），工具通过图像识别或解析设计文件格式，尝试生成对应的HTML和CSS。这类工具普遍存在几个痛点：
2.2 MCP协议带来的范式转变
MCP协议的核心思想是 让AI模型能够安全、可控地调用外部工具和访问特定数据 。 lanhu-context-mcp 就是一个实现了MCP Server标准的Node.js服务。它的架构可以这样理解：
[AI助手 (Claude/Cursor)] <–(MCP协议通信)–> [lanhu-context-mcp Server] <–(HTTP请求)–> [蓝湖开放平台API]
- 对AI助手而言 ：它不需要理解蓝湖的复杂API，也不需要学习如何解析设计稿数据。它只需要知道，有一个叫 lanhu-context-mcp 的“工具”可用，这个工具提供了一个“获取设计稿上下文”的能力。AI助手按照MCP规定的格式，把蓝湖设计稿链接“告诉”这个工具，工具就会返回一份结构化的数据。
- 对开发者而言 ：你不再需要手动在蓝湖和代码编辑器之间来回切换，复制色值、下载图片、计算间距。你只需要用自然语言对AI助手说：“帮我把这个设计稿（附上链接）实现成Tailwind代码。” AI助手会自行调用 lanhu-context-mcp 获取所有必要信息，然后生成高度可用的代码。
lanhu-context-mcp 在这个链条中做的，是 专业的数据聚合与格式化 工作：
- 将原始的像素、色值转换为Tailwind CSS的类名（如 w-72 h-36 rounded-lg bg-[#2878ff] ）。
- 分析图层层级关系，推断出合理的HTML语义化结构（ <div> 容器、 <button> 、 <input> 等）。
- 提取颜色、字体、间距、圆角等样式，并归类生成Design Tokens对象，便于统一管理。
- 组织切图资源，生成可直接下载的URL列表。
