一、MCP介绍

AI时代下，大模型不断更新迭代，针对代码开发的场景需求也涌现出许多优秀大模型。随着mcp服务和ai的成熟，我们可以利用AI代码辅助来帮我们高效开发项目。以往的ai模型都是问答式的，Anthropic推出的mcp协议可以桥接外部工具和数据，让AI直接上手帮我们实现业务场景需求。

MCP 是 Claude (Anthropic) 主导发布的一个开放的、通用的、有共识的协议标准。，它标准化了应用程序向 LLM 提供上下文的方式。可以将 MCP 视为 AI 应用程序的 USB-C 端口。正如 USB-C 提供了一种将设备连接到各种外围设备和配件的标准化方式一样，MCP 提供了一种将 AI 模型连接到不同数据源和工具的标准化方式。

在ai辅助代码方面也有许多ai模型可以很好的理解并生成代码，我们可以利用mcp服务将其与设计图桥接，让ai阅读设计稿帮我们生成前端代码。本文以mastergo+cursor来展示如何利用mcp服务辅助代码生成。

二、cursor配置

cursor是一个ai代码编辑器，其内部集成许多ai模型，让我们在各场景和各语言下都能有高效的开发体验。CURSOR官网

1. setting各项配置

设置打开自动运行，可不用授权自动运行服务或工具。下面的各项保护可根据自己需求来开启。

cursor集成的ai模型，也可以自己增加新的ai模型。

2. mcp配置

选择 MCP 菜单，可点击 ‘Add new global MCP server’ 来添加自己的mcp服务器。

点击进来后根据自己需求来配置，mastergo的配置如图。

3. prompt

如图，右侧打开chat栏，可粘贴设计稿链接，然后直接写prompt即可。

mode使用agent，ai模型推荐使用claude-3.7-sonnet或claude-3.7-sonnet-max。

4. mac和windows分别配置

MacOS/Linux:

{
  "mcpServers": {
    "Framelink MCP Mac": {
      "command": "npx",
      "args": ["-y", "mcp-service-name", "--your-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows:

{
  "mcpServers": {
    "Framelink MCP Windows": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "mcp-service-name", "--your-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

三、使用步骤

1. mcp服务配置

登录mastergo网站，从 个人设置 进去，在 安全设置 点击生成令牌，然后复制。

然后在Cursor Settings的MCP配置中填写token值。

返回设置，看到前面的绿点亮起说明成功配置。

2. 复制链接

进入项目，如果想要开发某个页面，选择页面对应图层，右键找到 复制/粘贴为 选择 复制容器链接。

3. 创建chat

粘贴复制的链接，后续编写自己的prompt，然后发送即可。

4. 获取dsl

点击 run tool 执行工具，获取dsl信息。

可以看到获取到的dsl信息是一颗json树，描述了设计稿转换信息，ai将会根据这些描述来生成代码。

执行工具获取组件信息

完整的执行工具如图展示。

5. 多轮调用受限

在使用多轮生成后需要手动授权，在出现手动授权。

resume the conversation

点击图中出现的 resume the conversation，然后会继续构建页面代码。

6. 开发

正在生成代码

如图，ai开始生成代码。

记得最后点击 accept all确定接受更改，可根据自己项目来调适代码。

然后自己就可以运行查看效果。

四、进阶使用

1. 各场景prompt推荐

在使用cursor时要给出明确的指令，提示尽可能具体清晰，否则cursor会按着自己的想法来生成代码。

组件生成：

比如想要将设计的日历行程封装成组件，可以加一些具体要求。

请根据组件信息生成日历行程组件，要求：
1. 使用vue3+typescript方式开发；
2. 组件传入参数props需要account、userId、status、workType字段；
3. 代码符合当前项目的eslint规范和文件结构；

数据图表：
可使用@file 关键字指定项目文件路径，cursor会根据已有的文件来开发。

请根据图表信息开发，要求：
1. 使用echarts开发，且各组件独立开发；
2. 使用@file hooks下已经封装好的useEcharts；
3. 全局的echarts组件引入请在 @file plugins/echarts下增加新组件；

提供示例文档开发新领域：
对不熟悉的框架或工具可提供文档链接让他现学现用。

请用svelte帮我把链接的组件开发成webComponent，这里是相关文档：
https://blog.csdn.net/u012181546/article/details/128355988

2. 自定义规则

在配置mcp的地方可增加rule关键字来配置自己的规则。

3. 整站生成

mastergo官方的要求是需要一个meta信息，这个meta里面包含项目的路由结构和跳转原型设计；先执行getMeta生成站点的需求列表文档，然后根据文档上的信息来开发相应的页面；

生成的工程结构

运行效果图

安装依赖后运行，可以看到效果图，这个小项目的效果超出我的预期，相信未来mcp和ai模型的优化会更加精准的为高效开发赋能。

五、其他

1. 其他MCP服务获取

最简单的就是去百度搜索开放平台了，直接搜索自己感兴趣的即可。

百度搜索开放平台

也可以输入关键字搜索其他领域的相关mcp服务，比如输入天气、地图或者sql。然后找到自己感兴趣的直接点击进去看使用文档。

 如何学习大模型？

学习AI大模型是一个系统的过程，需要从基础开始，逐步深入到更高级的技术。

这里给大家精心整理了一份全面的AI大模型学习资源，包括：AI大模型全套学习路线图（从入门到实战）、精品AI大模型学习书籍手册、视频教程、实战学习、面试题等，资料免费分享！

这是一份大模型从零基础到进阶的学习路线大纲全览，小伙伴们记得点个收藏！

第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；

第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。

100套AI大模型商业化落地方案

大模型全套视频教程

200本大模型PDF书籍

👉学会后的收获：👈

• 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；

• 能够利用大模型解决相关实际项目需求： 大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；

• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；

• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。

LLM面试题合集

大模型产品经理资源合集

大模型项目实战合集

😝有需要的小伙伴，可以扫描下方二v码免费领取【保证100%免费】🆓