用 Cursor 生成 Zion 代码组件

用户8212

用户3702

用户6911

用户981

用户6031

2025年9月17日修改

一句话介绍 Zion 代码组件

Zion 代码组件是可以嵌入在 Zion 无代码应用中基于 React 框架实现的高度自定义的前端组件​

什么时候用的上代码组件？

当我们在 Zion 开发无代码应用的时候偶尔会遇到一些平台无法满足的个性化需求如：统计图表、语音输入的交互、强视效的UI动画（中间放大的轮播图）、第三方SDK 嵌入，此时我们就可以利用 Zion 平台的代码组件来实现个性化需求的开发。​

代码组件示例：https://4n76rxk0l9x7k.villa.functorz.com/showcase

用 Cursor 生成你的 Zion 代码组件

大部分 Zion 开发者是没有代码经验的开发者，所以我们设计了一套借助 AI Coding 工具 Cursor 生成代码组件的保姆级帮助文档来帮助你完成Zion 代码组件的开发。​

Cursor 是一款基于 AI 的智能代码编辑器，能够通过自然语言交互帮助开发者快速生成和优化代码。​

Cursor 内有 Cursor Rules 规则配置功能，可以用于定义 Cursor 在写代码项目时的行为规范、代码风格、项目结构和开发流程，让 Cursor 能够按照特定标准生成代码。而Zion 的代码组件有一定的规范和限制，因此我们准备了一系列用于 Zion 代码组件开发的 Cursor Rules ，再结合我们的个性化需求描述，最终输出可用的代码组件。​

方案简介

1.
在 Zion 账号信息内绑定登录邮箱和密码​

2.
完成 Cursor 的各项配置（Cursor Rules 、 Zion MCP）​

3.
将描述好自己想要开发的功能发送给 Cursor​

4.
等待 Cursor 生成代码组件​

5.
调试并最终发布到你的 Zion 代码组件库​

方案详解

Zion 账号准备

💡

代码组件开发过程中会需要用到你的 Zion 注册邮箱和登录密码​

进入 Zion 编辑器，在右上角头像-账号信息内绑定登录邮箱并设置密码

common.docs_name - LarkCCM_Docs_Menu_Image

Cursor 配置准备

本章节将带你安装登录 Cursor 并在 Cursor 内完成相关配置，让 Cursor 能够按照我们的 Zion 代码组件开发的规则生成代码​

2.1

安装并登陆 Cursor

▪

访问 Cursor 官网下载并安装

▪
注册账户 或 点击 "Sign in" 登录 ​

2.2
使用 Cursor 新建一个文件夹​

用 Cursor 生成 Zion 代码组件​

用 Cursor 生成 Zion 代码组件