[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-28":3,"comments-28":22},{"id":4,"title":5,"summary":6,"cover":7,"author":8,"tags":13,"viewCount":14,"likeCount":15,"collectCount":15,"commentCount":15,"status":16,"publishedAt":17,"contentMd":18,"contentHtml":19,"likedByMe":20,"collectedByMe":20,"updatedAt":21},28,"MCP 到底是什么？前端工程师如何让 AI 真正“连接”开发工具","Skill 给 AI 方法，MCP 给 AI 工具。","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002Fb6a6f860-3ba9-4881-a2d1-d09cc7d0bdd8.png",{"id":9,"username":10,"avatar":11,"bio":12},1,"DevShareAdmin","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F98609a86-e08d-437b-b921-1291fc5a1b4d.jpg","DevShare（技享）官方账号",[],20,0,"published","2026-09-16T15:55:18.485Z","一、为什么需要 MCP？\n\n假设你让 AI：\n\n> “帮我检查一下这个页面。”\n\n如果 AI 只有代码：\n\n```text\nsrc\u002F\ncomponents\u002F\npages\u002F\n```\n\n它可以检查：\n\n- 代码结构\n- 类型\n- 逻辑\n\n但是它不知道：\n\n> 页面实际长什么样。\n\n如果给它 Browser MCP：\n\n```text\nAI\n ↓\nBrowser MCP\n ↓\n打开网页\n ↓\n读取 DOM\n ↓\n截图\n ↓\n检查页面\n```\n\nAI 就可以开始进行视觉验证。\n\n## 二、MCP 可以理解成 AI 的“USB 接口”\n\n传统 AI：\n\n```text\nAI\n ↓\n文字\n```\n\nMCP：\n\n```text\nAI\n ↓\nMCP\n ↓\n工具\n```\n\n工具可以是：\n\n```text\nBrowser\nFigma\nGitHub\nDatabase\nFile System\nDocumentation\nJira\nNotion\n```\n\nMCP 的核心意义是：\n\n> **让 AI 可以使用外部能力。**\n\n## 三、前端值得接入的 MCP\n\n```text\nBrowser MCP\n    ↓\n页面检查\n\nFigma MCP\n    ↓\n读取设计\n\nGitHub MCP\n    ↓\nPR \u002F Issue\n\nDocs MCP\n    ↓\n查询技术文档\n\nDatabase MCP\n    ↓\n查询开发数据\n```\n\n## 四、Skill + MCP + Agent\n\n理想的前端开发链路：\n\n```text\n设计稿\n  ↓\nFigma MCP\n  ↓\nAI Agent\n  ↓\nVue Component\n  ↓\nBrowser MCP\n  ↓\n截图验证\n  ↓\nCode Review\n```\n\n这已经不再是简单的“AI 写代码”。\n\n而是：\n\n> **AI 参与整个前端交付流程。","\u003Cp>一、为什么需要 MCP？\u003C\u002Fp>\n\u003Cp>假设你让 AI：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>“帮我检查一下这个页面。”\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>如果 AI 只有代码：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">src\u002F\ncomponents\u002F\npages\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>它可以检查：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>代码结构\u003C\u002Fli>\n\u003Cli>类型\u003C\u002Fli>\n\u003Cli>逻辑\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>但是它不知道：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>页面实际长什么样。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>如果给它 Browser MCP：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">AI\n ↓\nBrowser MCP\n ↓\n打开网页\n ↓\n读取 DOM\n ↓\n截图\n ↓\n检查页面\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>AI 就可以开始进行视觉验证。\u003C\u002Fp>\n\u003Ch2>二、MCP 可以理解成 AI 的“USB 接口”\u003C\u002Fh2>\n\u003Cp>传统 AI：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">AI\n ↓\n文字\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>MCP：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">AI\n ↓\nMCP\n ↓\n工具\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>工具可以是：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Browser\nFigma\nGitHub\nDatabase\nFile System\nDocumentation\nJira\nNotion\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>MCP 的核心意义是：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>让 AI 可以使用外部能力。\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>三、前端值得接入的 MCP\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-text\">Browser MCP\n    ↓\n页面检查\n\nFigma MCP\n    ↓\n读取设计\n\nGitHub MCP\n    ↓\nPR \u002F Issue\n\nDocs MCP\n    ↓\n查询技术文档\n\nDatabase MCP\n    ↓\n查询开发数据\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>四、Skill + MCP + Agent\u003C\u002Fh2>\n\u003Cp>理想的前端开发链路：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">设计稿\n  ↓\nFigma MCP\n  ↓\nAI Agent\n  ↓\nVue Component\n  ↓\nBrowser MCP\n  ↓\n截图验证\n  ↓\nCode Review\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这已经不再是简单的“AI 写代码”。\u003C\u002Fp>\n\u003Cp>而是：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>**AI 参与整个前端交付流程。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",false,"2026-10-09T12:00:00.232Z",{"items":23,"nextCursor":24},[],null]