Spec Flow MCP 在Cursor中的使用指南

想跟大家分享一下Spec Flow MCP 的一个安装使用方法，以及我个人的一个工作流分享，我在小红书说我几乎没有写一行代码就完成了一个项目，哈哈哈，肯定是有一些吹牛的成分在的。

公司的知识库项目搭建方案比较复杂，我只取其中精髓开发这个MCP服务，希望对大家有帮助。

我看网上有人说，你这个需求，用低代码也可以搭出来呀，还有就是想知道知识库搭建的方法，知识库写什么内容，还有想知道知识库对Cursor的帮助是什么等等。

先说一下低代码搭建，这当然是一个很好的处理B端项目搭建的方法，我们内部也在使用。但事实是低代码本身的维护让我们非常头疼，相信其他在用低代码的开发人员以及公司也会有同样的困扰，所以我们公司主流的项目仍然还是使用常规代码开发，来保证灵活性以及项目表达的准确性，并且可以应对复杂的需求。

知识库相关内容，跟着本教程走完即可搭建一个简易版本出来。

另外，我仅仅在我们自己的前端项目中做过测试，不保证在其他项目中的实际质量，实际使用质量和你生成的规范文档密切相关，这只是一种项目治理方法，不包含什么神奇的魔法。

基本开发流程是：

1. 设计师通过figma使用figma组件库按照产品PRD搭一个设计图出来交给前端开发
2. 前端开发根据设计稿进行开发

所以我会介绍，如何从figma读取数据，以及，如何通过figma设计稿还原成代码的流程

环境准备

• Nodejs 20+版本即可

• Cursor

安装 MCP（Cursor版本）

我是MAC电脑，对于windows版可能会长不太一样，但是操作方式大同小异，可以自己折腾一下

打开Cursor Setting

选择MCP，然后选择添加MCP

然后将下面的代码复制进去

{
    "mcpServers": {
        "spec-flow-mcp": {
        "command": "npx",
        "args": ["spec-flow-mcp@latest"]
    }
}
Code language: JSON / JSON with Comments (json)

看见这个即是安装完毕

总结自己的知识库

比如我想让他总结一下表格的开发规范，我可以向下面这样做

然后一路点击run就可以了，如果你不想点 run，你直接讲它加入到Allowlist 就可以让他自己执行了

总结好之后，会在项目根目录创建一个.spec，里面就是刚刚总结出来的开发规范文档

并且不仅仅是创建，我们还可以在开发过程中，对其生成代码不满意的地方进行调整。

可能很多朋友接触过正常的AI知识库，他们一般会基于embedding再加上什么redis、数据库分片技术等等来实现，但是我自己实测下来效果非常差，随机性太高了。

所以我觉得应该直接抛弃这种技术方案，让大模型直接模拟人的搜索方式，就像你在IDE中查找内容一样来查找我们的开发规范文档或者说知识库。

得益于现在Agent技术的发展，在多轮对话中，仍然能保持很好的一致性，这是这个MCP能够正常使用的基础

以上讲解是为了说明，为什么上面知识库总结方法如此简单，但仍然会起作用的原因。

下面将介绍如何配置figma实现代码生成，并使用刚才生成的知识库

使用Figma MCP + SpecFlow MCP 实现设计稿生成还原

Figma MCP 安装可以自己在网上搜索，这里只是做简单说明

1. 下载Figma客户端
2. 打开客户端中MCP服务
3. 在cursor中配置服务

客户端MCP服务位置

然后我们复制一个设计稿的link （最好是复制小一点的内容，这样可以保证准确性）

然后让AI帮我们生成代码

这里有一个很重要的一个提示词：“参考Spec开发规范“

只要带了Spec相关提示词，AI就会自己去查规范，如果你不想让他查，你就可以不带这个

结语

大模型编程目前还有其局限性，目前这种文档治理方案，可以在一定程度上解决大模型不遵循我们开发规范的问题，但是它并不是魔法，它仍然需要我们给出良好的提示词才能获得最佳效果。

这种方案对本地小批量文档非常有用，但是管理起来还是比较依赖个人的水平。

知识库搭建至关重要，如果有朋友对团队级别的的治理方案感兴趣，欢迎前往网站添加订阅关注最新动态 https://www.flowspec.online/