news 2026/4/30 14:53:02

这才是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/5/1 5:06:13

JS文件批量下载并打包成ZIP的功能

方法一&#xff1a;使用JSZip和FileSaver&#xff08;推荐&#xff09;1. 安装依赖npm install jszip file-saver # 或使用CDN2. HTML结构<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"vie…

作者头像 李华
网站建设 2026/4/29 1:05:47

Docker 常用命令解析

一、镜像相关命令 1.1 docker search docker search [OPTIONS] TERM功能&#xff1a;搜索 Docker Hub 镜像。 常用选项&#xff1a; --filter&#xff1a;过滤条件&#xff0c;如–filter stars3表示只显示星标不少于3的镜像。--limit&#xff1a;限制搜索结果数量。--no-trunc…

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

如何快速预览STL文件:终极3D模型预览工具指南

如何快速预览STL文件&#xff1a;终极3D模型预览工具指南 【免费下载链接】stl-thumb Thumbnail generator for STL files 项目地址: https://gitcode.com/gh_mirrors/st/stl-thumb 在现代3D打印和CAD设计工作中&#xff0c;STL文件预览工具已经成为提高工作效率的关键利…

作者头像 李华
网站建设 2026/4/23 15:03:19

Font Awesome 文件类型图标

Font Awesome 文件类型图标 随着互联网技术的飞速发展,网站和应用程序的界面设计变得越来越重要。图标作为界面设计的重要组成部分,能够直观地传达信息,提升用户体验。Font Awesome 是一个流行的图标库,提供了大量的图标资源。本文将详细介绍 Font Awesome 中的文件类型图…

作者头像 李华
网站建设 2026/3/29 18:41:56

企业级RPA工具终极应用指南:从零构建智能自动化工作流

企业级RPA工具终极应用指南&#xff1a;从零构建智能自动化工作流 【免费下载链接】openrpa Free Open Source Enterprise Grade RPA 项目地址: https://gitcode.com/gh_mirrors/op/openrpa 在当今数字化转型浪潮中&#xff0c;企业级RPA技术正成为提升运营效率的关键利…

作者头像 李华
网站建设 2026/4/29 1:50:17

XPath 节点

XPath 节点 引言 XPath(XML Path Language)是一种在XML文档中定位信息的方法。它是XSLT(XSL Transformations)和XQuery等XML处理技术的核心组成部分。在本文中,我们将深入探讨XPath中的节点概念,以及如何使用XPath来定位和操作XML文档中的节点。 XPath 节点概述 在XP…

作者头像 李华