news 2026/4/14 21:41:31

这才是vibe coding正确的打开方式 - 手把手教你开发一个MCP服务

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
这才是vibe coding正确的打开方式 - 手把手教你开发一个MCP服务

1. 前言

从ChatGPT的出现,到现在Sonnet、Grok、DeepSeek等模型的百家齐放。AI的出现影响着人们的方方面面,尤其是编程领域,你的项目不涉及到AI,好像就是落后,好像就是老登,好像就是被时代抛弃。

最近一年vibe coding非常的火,它的意思就是开发者不用编写一行代码,通过对话就可以完成一个项目的上下线。非常适合有想法,但是不会编程(或者你是后端,不会前端)的同学。

下面我将以vibe coding为例,手把手教大家开发一个,随机生成用户身份证、姓名、手机号、银行卡号等信息的MCP服务,并且最终发布,上传github等等流程,完全不需要你懂一行代码,那我们开始吧

Github代码:https://github.com/wenbochang888/mcp-identity-service

示例图

2. Vibe Coding - 身份证号银行卡号MCP生成器

2.1 提前准备

  1. 通用模型:如GPT、DeepSeek、豆包等软件,用于生成优化提示词
  2. 编程软件:如cursor、Qcode、Trae、CodeBuddy、Claude Code等等,刚注册,会有非常多免费的额度
  3. 服务器(如果需要进行网站上线),如果是MCP服务则不需要

2.2 提示词

Vibe Coding中,你的软件效果如何,非常看喂给AI的提示词,因此我们尽量要把提示词写好。

所以我们一般要使用GPT、DeepSeek这种通用模型,帮我们生成优秀的提示词

问GPT:请给我生成一个cursor的提示词,目标是以下功能。我需要实现一个mcp服务,只有一个函数,传入姓名返回身份证号,身份证号是随机生成的18位数字,需要符合中国人的身份证格式,请给我一个cursor优秀的提示词

GPT答:你是一名资深的 TypeScript 开发工程师,正在为一个 MCP 服务编写代码。
请实现一个名为idService的 MCP 服务,它只有一个函数getIdCardByName(name: string): string
该函数的功能是:根据传入的姓名,返回一个随机生成的中国身份证号(18位),并且身份证号必须符合中国身份证的格式规则。
具体要求如下:

  1. 身份证号格式为:AAAAAAYYYYMMDDXXXC
  • 前6位:随机生成一个合法的行政区划代码(可以从常见的省市区代码中随机选取,如北京110000、上海>310000、广东440000等)。
  • 中间8位:随机生成一个合理的出生日期(例如1970-01-01到2010-12-31之间)。
  • 接着3位:顺序码,随机生成三位数字(001–999)。
  • 最后一位:校验码,按照中国身份证的校验算法(ISO 7064:1983.MOD 11-2)计算得到。
  1. 返回的身份证号必须是合法的(校验码正确)。
  2. 请使用 TypeScript 编写,代码应简洁、可读、可直接运行。
  3. 在实现中请包含:
    一个生成随机合法身份证号的辅助函数。
    校验码计算逻辑。
    示例调用。
  4. 最终输出完整的 TypeScript 代码,不要省略任何部分。

我们可以看到,类似于GPT生成的提示词非常的优秀,可以直接生产使用了,不需要我们修修改改了。

2.3 开发

将提示词喂给Cursor、Trae等编程软件。一包茶一包烟的功夫,你就会发觉代码生成好了。此时,注意,不要急!!!

让cursor自己理解下项目,并且生成README,类似于如何使用、如何部署、有哪些模块、有哪些功能、每个功能的作用等等。因为后续你需要用到这些README,让AI更好的理解项目便于新增、修改功能

这时候AI生成的可能不符合你的预期,这时候,你把README这些文件继续喂给AI,让AI继续编写。举一个例子,我生成完成身份证之后,想要实现一个三要素的生成。我就会继续让他帮我写如下

我需要完善mcp,新增2个函数。1. 返回三要素,返回类似如下:手机号:13823815272 身份证:210102198905199442 姓名:韩榕乐 2. 如果是四要素,则新增银行卡信息,给我一个cursor的提示词

然后AI这时候就会根据我的README,开始新增、修改功能了,最后你让它自己编写测试用例进行验证。

最终你会发现你完全不懂前端js ts,但是你用js语言实现了一个功能,你的想法得到了验证。

2.4 发布

MCP服务

我这次开发的是MCP服务,则直接问Cursor,将这个MCP部署到npm仓库,给所有人使用,最终他会自动的帮你发布(当然你需要登录npm仓库)。

最终链路如下:https://www.npmjs.com/package/@wenbochang888/mcp-identity-service

前端网页/后端

如果你发布的是一个服务,比如网站或者后端的一些接口,这时候你会使用到服务器。

像之前我们需要再服务器配置nginx、安装python、java等环境,现在有个AI,我们可以使用官方提供的MCP功能,直接让AI帮我们发布部署,完全是一键操作,不用自己做任何事情,非常的方便。

比如我使用的是腾讯云的服务器,他们就提供了一个MCP如下。你可以让AI来操控你的服务器做任何事情。

{ "mcpServers": { "lighthouse-mcp-server": { "command": "npx", "args": [ "-y", "lighthouse-mcp-server" ], "env": { "TENCENTCLOUD_SECRET_KEY": "YOUR_TENCENT_SECRET_KEY", "TENCENTCLOUD_SECRET_ID": "YOUR_TENCENT_SECRET_ID" } } } }

又比如我这个网站就是灵光一现的想法,让AI帮我写帮我发布的:https://www.gdufe888.top/wt/

3. 最后

在AI时代,编程、开发一个小项目变的触手可及。在这个时代只缺好的想法、好的创意。

只要你有创意,你有想法。AI之前需要你找前端、后端、运维等人员,十天半个月过去了,成本还高。现在你只需要AI就可以帮你实现需求,来快速上线验证你的想法、你的创意、你的商业模式是否可行。

当然我们程序员也要尽量用AI等编程工具提升自己,防止自己被时代所抛弃。

如果本文对你有所帮助,欢迎给我的github点赞,感谢。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/11 23:41:12

马达驱动芯片核心逻辑:从信号到动力的“功率放大密码”

马达驱动芯片的核心作用是接收控制信号,并输出足够的电压 / 电流来驱动电机运转,同时集成保护、调速、换向等功能,本质是一个功率放大与控制的专用集成电路(IC)。它能解决单片机、MCU 等控制芯片输出功率不足的问题&am…

作者头像 李华
网站建设 2026/4/12 20:34:33

OpenCore Legacy Patcher终极指南:让老Mac免费升级最新macOS

OpenCore Legacy Patcher终极指南:让老Mac免费升级最新macOS 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为2012年之前的Mac无法安装最新macOS系统而苦…

作者头像 李华
网站建设 2026/4/11 0:10:33

jQuery 尺寸

jQuery 尺寸 引言 jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画和 Ajax 操作等操作。在开发中,有时我们需要获取元素的大小,jQuery 提供了一系列方法来实现这一功能。本文将详细介绍 jQuery 中与尺寸相关的方法,帮助开发者更好地…

作者头像 李华
网站建设 2026/4/15 2:18:28

从SP到BP战略规划与解码全流程(华为案例)

华为公司能持续穿越产业周期、在多个领域取得全球领先地位,其核心引擎之一是一套严谨、闭环、动态迭代的战略管理体系。 这套体系的核心,即是从3-5年战略规划(SP)向年度业务计划(BP)的高质量解码与落地过程…

作者头像 李华
网站建设 2026/4/3 21:53:42

XML Schema 元素

XML Schema 元素 XML Schema 是一种用来定义 XML 文档结构的语言。它是 XML 文档类型定义(DTD)的替代品,提供了更强大和灵活的机制来描述 XML 文档的结构和内容。本文将详细探讨 XML Schema 中的元素,并解释它们在构建 XML 文档中的作用。 1. XML Schema 基础 在深入讨论…

作者头像 李华