一句话看懂：一位前端开发者在掘金发文，讲述自己用 Anthropic 开源的 MCP 协议为约 60 个组件的组件库搭建 MCP Server，让 Claude Code 在写代码前自动查询组件 Props 与设计规范，从而减少反复对话、提高生成代码的可用性。
事件核心：发生了什么
2026 年 11 月 10 日，掘金作者 ErpanOmer 发布实践记录。他指出，Cursor、Claude Code 等 AI 编码工具虽然普及，但生成业务组件时常常来回三四轮仍不可用，根本原因是模型不了解项目内部的组件库、Props、间距规范和表单校验约定。他花约两天时间，基于官方 @modelcontextprotocol/sdk 编写 MCP Server，把组件元信息、设计 Token 以 Resource 形式暴露，并增加组件推荐、用法校验两个 Tool，再在 Claude Code 配置中注册。对比同一需求，接入前生成的是原生 HTML 加内联样式，接入后则调用了项目内的 AppCard、LazyImage、PriceDisplay 等组件。
为什么重要
MCP 是 Anthropic 于 2024 年底开源的协议，核心是让模型主动连接外部数据源和工具，而不是依赖用户在对话框里反复粘贴上下文。这个案例的价值不在于协议本身多新，而在于它把“项目私有知识”变成了 AI 可调用的接口。对前端团队而言，组件库、设计系统、类型定义过去散落在 Storybook、README 和 TypeScript 文件中，模型触达不到；MCP Server 相当于给这些资产加了一层标准查询入口。目前公开信息显示，这类实践仍以个人和团队自建为主，尚未形成统一的前端工程标准。
对用户/开发者/创作者的影响
对开发者来说，短期最现实的收益是减少重复“喂文档”和代码返工，尤其适合组件数量多、规范严格的团队。实现门槛不高：用 SDK 暴露 Resource 和 Tool，通过 stdio 启动即可接入 Claude Code 等支持 MCP 的客户端。但需要注意，示例中的组件推荐只是基于描述和标签的关键词匹配，作者也提到生产环境可接入向量检索；组件用法校验同样依赖自建规则，效果取决于元数据质量。对普通用户和创作者，这类进展意味着未来 AI 编码工具可能更懂具体项目，但离开箱即用仍有距离。
AI 工具推荐
想把多个 AI 模型放在一个入口？
GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。
推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。
值得关注的后续
一是 MCP 能否从个人实践走向团队标配，出现组件库、设计系统层面的通用 Server 模板；二是 Cursor、Claude Code 之外的 IDE 和 AI 应用是否跟进支持 MCP，扩大生态；三是检索与校验能力能否从关键词匹配升级为向量检索和类型级检查，真正降低生成代码的返工率。
来源：juejin
