纯干货！如何用Cursor+宜搭，3天完成三周开发量（附超详细视频教学）

方案概述

Cursor是现在最火的代码编辑器之一，它率先提出了Composer的代码生成方案（现在的Agent模式），再加上Claude模型强大的代码生成能力，使得程序员的研发效率大大提升，同时它还完美的支持MCP能力，能够在进行代码研发过程中轻松接入三方能力，因此，我们提供一套利用Cursor来快速进行宜搭页面的方案。

先来感受下 Cursor 如何在几分钟内完成「设备巡检」应用的搭建：

感兴趣的开发者，欢迎打开钉钉扫码加入【Yida × Cursor 交流群】

现有的方案包含以下个能力：

• 通过Cursor编辑器连接宜搭表单设计器，支持低代码页面生成，用户可以基于生成的宜搭页面继续在设计器中进行二次编辑；
  
• 通过Cursor编辑器连接宜搭自定义组件设计器，支持源码组件（目前支持React、antd、chart.js和lodash模块）的生成，同时可以自动生成属性面板，无法在宜搭中进行二次编辑，但是可以在自定义页面、表单页面中直接使用；
  

PS: 本方案主要针对有前端开发经验的开发者，后续我们也计划提供Chat模式版，无需安装任何开发环境，也无需关注代码细节，直接在宜搭中通过对话便可进行复杂的宜搭功能实现。

案例展示

本部分主要介绍通过我们现有的Yida x Cursor方案生成的一些典型的案例。

表单生成

表单生成的场景主要通过将宜搭Schema转成React源码，让Cursor生成代码后再转成宜搭Schema方案，生成后用户可以基于宜搭继续已低代码方式进行二次编辑。

学生信息收集

自定义组件生成

自定义组件生成的场景主要for 纯源码的场景，我们会在本地将源码进行编译上传到宜搭，类似V0的方案。

公司财报

通过Cursor联网查询能力查询财报数据，通过chart.js组件进行数据可视化。

TodoList

借助Antd组件制作一个简单的TodoList组件，支持设置任务上限及状态变化监听。

贪吃蛇

制作一个简单的贪吃蛇游戏，支持设置游戏区域大小及游戏速度。

快速开始

本部分将介绍如何从0开始搭建一个Cursor连接宜搭的研发工具，并通过Cursor来快速生成宜搭页面，首先我会通过文字形式介绍，章节最后会提供视频教程。

环境准备

开始之前我们需要安装开发环境，如果已经安装可以忽略；

• Nodejs - 前端基础的研发工具，可以借助nvm等node管理工具进行安装；
  
• Cursor - 现在非常火的代码编辑器，可以通过Cursor官网进行下载安装，初次注册可以免费试用15天；
  
• Yida-Code插件 -  用于连接Cursor及宜搭设计器的编辑器插件，需要下载安装包，并通过VSIX方式安装到Cusror中；

>>>钉钉扫码加入【Yida × Cursor 交流群】获取插件安装包<<<

>>>钉钉扫码加入【Yida × Cursor 交流群】获取插件安装包<<<

下面是一个视频教程，默认认为用户已经有了NodeJS和Cursor，仅演示Yida-Code插件的安装；

项目初始化

接下来我们就可以初始化我们的项目环境了，项目初始化只需要进行一次，主要分为以下几步：

• 创建开发项目文件夹 - 可以创建一个空的文件夹，并用Cursor打开该文件夹；
  
• 初始化项目 - 通过Cmd+Shift+P打开Cursor的Command工具，并选择“Yida-初始化项目”命令进行项目初始化；
  
• 创建NotePad。文件 - 创建一个NotePad文件，并将项目目录下的rule.md文件拷贝到NotePad中，同时需要将文件中的global.d.ts 和 propType.d.ts 引入到NotePad中（Cursor工具中的NotePad支持引用文件，但是需要手动引入，可以参考视频中的操作）；
  
• MCP配置 - Yida-Cursor插件提供了连接宜搭AI能力的MCP Server，我们目前提供了一个文生图的MCP Server，可以从package.json文件中复制mcp配置脚本并在Cursor Setting中进行配置；
  

代码生成

到这一步我们就可以通过Cusror连接宜搭设计器进行代码生成了，代码生成分成表单生成和自定义组件生成，我会分为两个部分来讲解：

表单生成

Cursor可以通过连接表单设计器进行表单页面生成，具体步骤如下：

• 启动宜搭代码同步服务 - 在Cursor中通过Cmd+Shift+P命令打开“Yida-启动代码同步服务”；
  
• 打开设计器源码面板 - 打开宜搭表单设计器，在Url上增加showCodePane=true参数，会发现设计器中会增加一个源码面板，打开源码面板宜搭设计器会自动连接Cursor编辑器（若没有自动连接，可以点击手动连接）；
  
• 同步代码 - 点击源码面板中的“同步代码到本地”按钮，会将页面Schema转换成React代码并同步到本地项目，对应页面会按照应用ID及页面ID的目录层级存放到pages目录下；
  
• 代码生成 - 用户可以打开刚刚同步过来的页面代码，同时在Cursor的Chat模式下引入项目初始化是创建的NotePad文件，就可以进行页面生成和修改了，首先Cursor会修改本地文件，当文件保存时本地代码会自动转成宜搭页面的Schema并同步到宜搭设计器中；
  

自定义组件生成

Cursor可以通过连接表单设计器进行表单页面生成，具体步骤如下：

• 启动宜搭代码同步服务 - 在Cursor中通过Cmd+Shift+P命令打开“Yida-启动代码同步服务”；
  
• 打开设计器源码面板 - 打开宜搭自定义组件设计器，在Url上增加showCodePane=true参数，会发现设计器中会增加一个源码面板，打开源码面板宜搭设计器会自动连接Cursor编辑器（若没有自动连接，可以点击手动连接）；
  
• 组件改造 - 首先需要对自定义组件进行改造（仅第一次创建组件时需要），点击源码面板中的“改造组件”按钮将组件改造为源码组件；
  
• 同步代码 - 点击源码面板中的“同步代码到本地”按钮，会将页面Schema转换成React代码并同步到本地项目，对应页面会按照组件ID放到对应的components目录下，初始情况是两个空文件index.tsx 和 proptype.json；
  
• 代码生成 - 用户可以直接在刚刚同步的文件中进行组件生成了（目前生成的源码组件仅支持React、antd、chart.js 和 lodash），cursor会自动生成两个文件内容，当文件保存时会将信息同步到组件设计器：

• index.tsx - 组件的主要代码实现；
  
• proptype.json - 组件属性面板描述；
  

• 组件安装 - 组件生成好后，将组件安装到对应的应用就可以直接在应用中使用该组件了；
  
• 组件使用 - 在自定义页面或者表单页面的自定义组件Tab就可以看到刚刚生成的组件，用户可以直接将该组件拖到页面中进行使用；
  

功能列表

本部分标明了现有Yida x Cursor方案支持的功能列表，后续我们会不断完善。

低代码页面生成

源码自定义组件生成

常见问题

1，增加了参数，但是设计器中未出现源码面板？

本功能在进行小范围的功能内测，因此如果发现增加showCodePane=true参数后设计器源码面板未展示，需要申请内测，申请通过后，我们会开启组织灰度；

2，源码面板始终连接不上本地Cursor编辑器？

可以从两个方面进行排查：

• 确保在Cursor编辑器中启动了代码同步服务；
  
• 判断本地3000端口是否被占用，代码同步服务会在本地启动3000的端口进行消息通讯，若3000端口被占用，则无法启动同步服务；
  

3，如果生成的代码在宜搭中报异常了怎么办？

由于代码是大模型生成的，具有一定的随机性，因此有可能出现宜搭不兼容的情况，遇到这种情况，可以在Cursor编辑器中回滚一下上次修改，并保存页面先恢复到上次的效果，再借助Chat重新生成；

4，生成页面代码时没有按照rule的规则进行生成？

可以进行以下排查：

• NotePad中是否正确引用了global.d.ts 和 propType.d.ts声明文件;
  

• 代码生成的时候是否开启Agent模式，同时是否引入了当前编辑文件及NotePad文件；
  

5，自定义组件生成过程中无法进行文生图？

由于权限管控，目前只有页面生成场景可以调用文生图的 MCP Server 能力；

>>>钉钉扫码加入【Yida × Cursor 交流群】<<<