目录一、MCP 是什么二、要解决什么问题三、核心思路能力产品化四、三层架构五、生态发展六、可迁移的最佳实践七、案列从 Figma 设计稿到 Android / COUI 页面实现背景与目标整体流程Skill MCP 分工两个 MCP 各干什么对照分阶段举例阶段 A设计摄入Figma MCP阶段 B实现参考COUI MCP阶段 C-D实现与验收这个案例体现了 MCP 的什么价值八、总结一、MCP 是什么MCP 是一套开放协议、统一连接标准不是某种文件格式而是一组通用的接口约定。它的核心使命是让 AI 应用能够以统一、标准化的方式连接并调用外部的数据源与各类工具。它关注的是「如何连接」的底层方法与逻辑而不是规定「连接什么」的具体内容。MCP 统一架构图二、要解决什么问题传统 AI 集成存在三大痛点痛点表现重复造轮子每换一款 AI 产品或接入一个新数据源都要重写一整套集成逻辑标准不统一鉴权、数据格式、异常处理各不相同开发繁琐、迭代慢成本高昂开发与维护成本高团队成果难复用形成「技术孤岛」旧方案是 AI 应用与各类 Server/API/数据库之间点对点、网状直连MCP 则提供统一中间层实现能力可插拔、边界清晰、权限可控、迭代更轻松。新旧方案对比三、核心思路能力产品化MCP 的思路是把能力产品化成 Server。Server能力封装将数据源或工具封装成独立、可远程调用、符合 MCP 标准的标准化服务单元Client统一调度Host 侧通过标准 Client 自动发现可用 Server并按统一协议调用优势插拔扩展新增业务能力像搭积木一样接入系统边界清晰、权限可控、演进与升级更可控四、三层架构用户交互层 调度层 资源层┌─────────┐ ┌─────────┐ ┌───────────┐│ Host │ ←→ │ Client │ ←→ │ Server ││ AI 应用 │ │ 中间件 │ │ 真实资源 │└─────────┘ └─────────┘ └───────────┘层级职责典型代表Host应用层自然语言对话、用户交互入口Claude、Cursor 等 AI 客户端Client调度层请求翻译、任务分发与调度衔接上下层协议发现、调用转发、结果整理Server资源层直连真实资源执行读写、计算、工具调用数据库、文件系统、命令行、第三方 API数据流向闭环Server → Client → Host资源响应 → 任务分发 → 用户交互典型流程Host 发出请求 → Client 调度转发 → Server 获取数据 → 经 Client 整理后由 Host 呈现给用户。请求处理流程五、生态发展MCP 生态正在向「可查找、可安装、可管理」演进服务注册与发现按场景搜索可用服务降低试错成本AI 工具应用商店如 Smithery 等平台促进工具流通与分发统一规范推进官方推动 MCP Registry提供统一元数据标准与命名空间愿景聚合生态、一键接入、高效治理形成成熟的 AI 服务生态六、可迁移的最佳实践先定义输出字段明确各阶段要产出什么再调用 MCP避免盲目搜索硬编码上下文每次 MCP 请求带上版本、环境、产品线等约束减少幻觉明确数据源优先级例如仓库代码 Demo 文档/向量库人机协同约束用确认与验收清单限制 MCP外部结果用于加速检索而非最终裁决换设计平台或组件库时只需替换系统名称与查询约束阶段划分与优先级逻辑可复用。七、案列从 Figma 设计稿到 Android / COUI 页面实现背景与目标场景开发同学拿到一份 Figma 设计稿需要实现成 Android 页面且项目使用 COUI 组件库。传统痛点设计稿要手工导出 JSON节点树、文案、布局信息容易丢COUI 控件 API 分散版本差异大文档和仓库实现可能对不上AI 辅助写代码时上下文不全容易「猜 API」产生幻觉目标 Skill一句话分析设计稿 → 对照仓库既有写法做决策 → 用户确认 → 改代码 → 验收。其中MCP 专门负责「从外部系统取上下文」流程规则由 Skill 定义MCP 只负责按步骤接入外部数据与工具。整体流程Skill MCP 分工两个 MCP 各干什么对照Figma MCPCOUI MCP含文档 / 向量检索解决的问题设计稿上下文从哪来控件 API、版本差异、文档分散作用用 URL 等拉取 Figma 侧结构化信息减少手工导 JSON仓内搜不到时用带版本约束的查询补充语义边界与 REST、离线 JSON 平级Skill 规定「要拿到什么数据」不强制「必须用哪个工具」调用前先产出依赖证据如couiDependencyMajor与仓库实现冲突时 默认听仓库分阶段举例阶段 A设计摄入Figma MCP用户操作在 Cursor 里粘贴 Figma 链接说「按这个设计实现设置页。」MCP 调用Figma MCP 拉取结构化信息例如{ page: 设置页, nodes: [ { type: COUIButton, text: 保存, layout: { marginTop: 16 } }, { type: COUISwitch, text: 通知开关, checked: true } ] }要点Skill 只要求产出「节点树、文案、布局」等字段用 Figma MCP、REST 还是离线 JSON由实现选择输出格式保持一致。阶段 B实现参考COUI MCP优先顺序仓库代码 Demo 文档/向量库先在项目里搜COUISwitch、COUIButton的既有用法若仓内没有可参考实现再调 COUI MCP并带上硬约束查询COUISwitch 在 COUI 3.x 的用法约束couiDependencyMajor 3.x产品线 ColorOS边界MCP 返回的文档不能覆盖仓库里已有的业务写法冲突时以仓库为准。阶段 C-D实现与验收Agent 按设计上下文 仓库模式生成/修改代码用户确认布局、控件选型、文案验收清单编译、UI 对齐、交互通过后收尾外部 MCP 结果用于加速检索不是最终裁决。这个案例体现了 MCP 的什么价值传统做法MCP 做法每个 AI 产品各自对接 Figma、文档站Figma、COUI 文档封装成标准 ServerHost 通过 Client 统一调用换数据源就要重写集成逻辑换设计平台或组件库时只换 Server 名称和查询约束Skill 阶段与优先级可复用文档与代码容易不一致Skill 规定优先级 版本约束 人机确认降低幻觉风险八、总结MCP 是 AI 应用与外部世界之间的「USB 标准」——用统一协议把分散的数据源和工具封装成可发现、可插拔的 Server由 Client 统一调度让 Host 专注对话与交互从而告别重复集成、标准混乱和技术孤岛。
