告别重复 CRUD！用 AI Skill 一键生成你的全栈业务模块

沈宥

发布于 2026-02-04 15:06:49

360

摘要：还在为每个新需求手动创建 Controller、Service、DAO、DTO 和前端页面而烦恼吗？本文将手把手教你创建并使用一个名为 FullStackCRUDGenerator 的 AI Skill。它能根据你的一句自然语言描述（如“创建一个用户管理模块，包含姓名、邮箱和角色字段”），自动生成前后端分离的完整业务代码，包括数据库建表 SQL、TypeScript 类型定义、API 接口、React/Vue 页面和单元测试骨架。我们将以 Cursor 为例，展示如何将其深度集成到日常开发中，让增删改查（CRUD）从耗时任务变为一键操作，真正释放你的创造力。

一、引言：CRUD 的隐性成本——被忽视的生产力黑洞

在软件工程的世界里，有一个不成文的共识：80% 的代码是重复的。这个数字或许有所夸张，但其背后反映的现实却无比真实——增删改查（CRUD） 操作构成了绝大多数业务应用的核心骨架。无论是电商后台的商品管理、SaaS 平台的客户信息维护，还是内部系统的审批流程配置，其底层逻辑都惊人地相似。

然而，正是这些看似简单的 CRUD 模块，却成为了吞噬开发者生产力的巨大黑洞。

想象一下这个场景：产品经理走过来，轻描淡写地说：“我们需要一个简单的公告管理功能，后台可以发布、编辑、删除公告，前台能按时间倒序展示。” 这听起来很简单，对吧？

但对于开发者而言，这短短一句话背后隐藏着一连串繁琐且高度重复的工作流：

后端：
- 设计数据库表结构（announcements 表，含 id, title, content, created_at 等字段）。
- 编写数据访问对象（DAO/Repository），实现 create, update, delete, findById, findAll 等方法。
- 创建数据传输对象（DTO），用于 API 层与 Service 层之间的数据交互，通常需要做输入校验（如标题非空、长度限制）。
- 编写业务逻辑层（Service），处理核心业务规则（虽然公告管理可能没有复杂规则，但框架必须搭好）。
- 编写控制器（Controller），暴露 RESTful API（如 POST /api/announcements, GET /api/announcements）。
- 配置路由、中间件（如权限校验、日志记录）。
- 为上述每一层编写单元测试和集成测试。
前端：
- 定义 TypeScript 接口（Interface），与后端 DTO 对齐。
- 创建 API 调用服务（Service），封装 axios 或 fetch 请求。
- 编写列表页（List Page）组件，实现分页、搜索、排序。
- 编写表单页（Form Page）组件，用于创建和编辑，包含复杂的表单验证逻辑。
- 集成 UI 库（如 Ant Design, Element Plus），确保样式统一。
- 配置路由（如 /admin/announcements）。
- 同样，为关键组件和逻辑编写测试。

对于一个熟练的开发者，完成这样一个模块可能需要 4 到 8 小时。这其中，真正体现“创造性”的工作可能只占不到 20%，其余 80% 都是在进行机械性的、遵循既定模式的“体力劳动”。

更糟糕的是，这种重复劳动带来了诸多问题：

效率低下：宝贵的开发时间被大量消耗在无差别的编码上。
质量风险：人工操作难免出错，比如忘记加一个非空校验，或者在前端漏掉一个必填字段，都可能导致线上 Bug。
规范不一：不同开发者编写的 CRUD 模块，在目录结构、命名风格、错误处理等方面可能存在差异，增加了团队协作和后期维护的成本。
士气低落：长期从事这种缺乏挑战性的工作，会严重打击开发者的积极性和成就感。

我们一直在追求自动化，从 Makefile 到 CI/CD，从脚手架工具（如 Vue CLI, Create React App）到低代码平台。但这些工具要么过于底层，要么牺牲了灵活性。我们真正需要的，是一个能够理解业务意图，并能基于团队最佳实践，自动生成高质量、可维护、符合规范的全栈代码的智能代理。

这，就是 AI Skill 大显身手的地方。

二、核心思想：将最佳实践封装为 Skill——从“人适应工具”到“工具适应人”

传统的代码生成器（Code Generator）往往是静态的、模板化的。你需要预先定义好一套固定的模板，然后通过命令行参数或配置文件来填充变量。这种方式虽然能解决一部分重复问题，但其僵化和缺乏上下文理解能力的缺点也十分明显。

例如，如果你的项目使用了 NestJS + TypeORM 作为后端框架，而生成器默认模板是 Spring Boot + MyBatis，那么你就需要花费大量时间去修改模板，使其适配你的技术栈。一旦团队的技术选型或编码规范发生变化，所有模板都需要同步更新，维护成本极高。

AI Skill 的范式则完全不同。它的核心思想是：将人类专家在执行某项任务时所遵循的“标准操作流程”（SOP）和“领域知识”封装成一个可复用、可调用的智能单元。

具体到 FullStackCRUDGenerator 这个 Skill，它内部封装了以下关键知识：

对业务意图的理解：能够解析“创建一个用户管理模块”这样的自然语言指令，并从中提取出实体（Entity）、字段（Fields）及其类型、约束等信息。
对目标技术栈的精通：内置了针对不同技术栈（如 React + Ant Design Pro, Vue + Element Plus, NestJS, Spring Boot）的最佳实践模板。它知道在 NestJS 中应该如何组织目录，在 Ant Design Pro 中如何使用 ProTable 和 ProForm。
对团队规范的内化：可以通过配置文件（如 .cursor/skills/fullstack-crud/config.yaml）注入团队的特定规范，比如 API 响应格式、错误码定义、日志记录方式等。
端到端的执行能力：它不是一个孤立的提示词，而是一个完整的“工作流”。它能依次生成后端代码、前端代码、数据库脚本，并确保它们之间的一致性。

这种模式的优势在于极高的灵活性和适应性。你不需要为每一种技术组合都去维护一套复杂的模板引擎。你只需要告诉 AI Skill 你的项目上下文（通过配置文件或项目根目录的识别），它就能动态地生成最合适的代码。

这实现了从 “人去适应工具的固定输出” 到 “工具主动适应人的具体需求和上下文” 的根本性转变。

三、实战：在 Cursor 中安装与配置 FullStackCRUDGenerator

现在，让我们抛开理论，进入实操环节。我们将以目前最流行的 AI 原生 IDE —— Cursor 为例，演示如何安装、配置并使用 FullStackCRUDGenerator。

步骤 1：获取 Skill 文件

首先，我们需要从开源社区获取这个 Skill。假设该 Skill 已由社区开发者开源至 GitHub。

打开你的终端，执行以下命令：

bash编辑

# 创建技能目录
mkdir -p ～/.cursor/skills/fullstack-crud-generator

# 进入目录
cd ～/.cursor/skills/fullstack-crud-generator

# 下载核心的 SKILL.md 文件
curl -O https://raw.githubusercontent.com/awesome-skills/fullstack-crud-generator/main/SKILL.md

说明：SKILL.md 是 Cursor Native Skills 的标准格式。它是一个 Markdown 文件，但开头包含了 YAML Front Matter 来定义 Skill 的元数据、参数、触发方式和核心提示词模板。

步骤 2：理解 SKILL.md 结构

打开 SKILL.md，你会看到类似如下的结构：

markdown编辑

---
name: "FullStack CRUD Generator"
description: "Generate a complete full-stack CRUD module from a natural language description."
trigger:
  command: "/generate-crud"
parameters:
  - name: "description"
    type: "string"
    required: true
    description: "Natural language description of the module to generate, e.g., 'a user management module with name, email, and role fields'."
  - name: "frontend_framework"
    type: "enum"
    options: ["react-antd", "vue-element"]
    default: "react-antd"
  - name: "backend_framework"
    type: "enum"
    options: ["nest-js", "spring-boot"]
    default: "nest-js"
context:
  include_project_root: true
  include_file_path: false
---

You are an expert full-stack software architect. Your task is to generate a complete, production-ready CRUD module based on the user's description.

**Project Context**:
- Project Root: {{project_root}}
- Selected Frontend Framework: {{frontend_framework}}
- Selected Backend Framework: {{backend_framework}}

**User's Request**:
{{description}}

**Your Output MUST be a JSON object with the following structure**:
{
  "files": [
    {
      "path": "relative/path/to/file.tsx",
      "content": "the full file content..."
    },
    // ... more files
  ],
  "instructions": "Any additional setup instructions for the user."
}
...

这个文件清晰地定义了：

如何触发：通过命令 /generate-crud。
需要什么输入：一个自然语言描述，以及可选的前后端框架选择。
有什么上下文：自动注入项目根目录。
期望什么输出：一个包含所有生成文件路径和内容的 JSON 对象。

步骤 3：配置你的项目规范（可选但推荐）

为了让你的生成结果完美契合团队规范，你可以创建一个配置文件。

在你的 项目根目录 下，创建一个 .cursor/skills/fullstack-crud/config.yaml 文件：

yaml编辑

# config.yaml
api:
  response_format:
    success: |
      {
        "code": 200,
        "data": {{data}},
        "message": "Success"
      }
    error: |
      {
        "code": {{errorCode}},
        "message": "{{errorMessage}}"
      }

database:
  naming_convention: "snake_case" # or "camelCase"

ui:
  primary_color: "#1890ff" # Ant Design primary color
  table_pagination: true

当 Skill 运行时，它会自动读取这个配置文件，并将其中的规则应用到生成的代码中。例如，API 响应会严格按照你定义的 response_format 来构造。

步骤 4：重启 Cursor 并加载 Skill

保存所有文件后，在 Cursor 中按下 Cmd+Shift+P (Mac) 或 Ctrl+Shift+P (Windows/Linux)，输入 “Reload Skills” 并回车。Cursor 会扫描 ～/.cursor/skills/ 目录，并加载新的 FullStack CRUD Generator。

四、演示：从一句话到全栈代码

一切准备就绪，现在让我们见证魔法时刻。

场景设定

我们正在开发一个内部知识库系统，现在需要添加一个 “文档分类” 管理模块。分类有 name（名称，必填，最大50字符）和 description（描述，可选）两个字段。

操作流程

打开 Cursor，确保你位于你的项目工作区中。

新建一个空白文件，例如 README_FOR_CRUD.md。这个文件只是为了提供一个输入上下文，内容可以为空。

在 Chat 面板中输入指令：

使用 “FullStack CRUD Generator” 技能，为我创建一个文档分类（Document Category）管理模块。它应该包含名称（name，字符串，必填，最大50字符）和描述（description，字符串，可选）两个字段。前端使用 React + Ant Design Pro，后端使用 NestJS。

或者，更简洁地使用命令：text编辑

/generate-crud a document category management module with name (string, required, max 50 chars) and description (string, optional). frontend: react-antd, backend: nest-js

等待 AI 处理。Cursor 会将你的请求、项目上下文和 Skill 定义打包发送给 LLM。根据模块复杂度，这个过程可能需要 1-3 分钟。

输出结果

处理完成后，Cursor 会返回一个结构化的响应。它不会只是给你一段文本，而是会直接在你的项目中创建文件！

你会看到 Cursor 的侧边栏文件树中，自动出现了以下新文件（路径仅为示例）：

**后端 (NestJS)**:

text编辑

src/
├── modules/
│   └── document-category/
│       ├── document-category.controller.ts
│       ├── document-category.service.ts
│       ├── document-category.module.ts
│       └── dto/
│           ├── create-document-category.dto.ts
│           ├── update-document-category.dto.ts
│           └── document-category.dto.ts
├── entities/
│   └── document-category.entity.ts
└── migrations/
    └── {{timestamp}}-create-document-category-table.ts

**前端 (React + Ant Design Pro)**:

text编辑

src/
├── pages/
│   └── Admin/
│       └── DocumentCategory/
│           ├── index.tsx       # 列表页
│           └── components/
│               ├── CategoryForm.tsx # 表单组件
│               └── CategoryTable.tsx # 表格组件
└── services/
    └── document-category.ts # API 服务

不仅如此，Cursor 还会在 Chat 面板中给出详细的 **instructions**，告诉你接下来需要做什么，例如：

运行数据库迁移命令：npm run migration:run
在主路由文件 app.module.ts 中引入并注册 DocumentCategoryModule。
在前端路由配置中添加新的菜单项。

整个过程行云流水，从一句模糊的需求到一个可运行的功能模块，中间没有任何手动编码的环节。

五、深度定制：适配你的专属技术栈

上面的例子使用了 Skill 内置的通用模板。但在真实的商业项目中，你的技术栈往往有其独特之处。FullStackCRUDGenerator 的强大之处在于其高度可定制性。

定制点 1：修改提示词模板

SKILL.md 的核心是其提示词（Prompt）。你可以直接编辑这个文件，加入你项目的特定要求。

例如，如果你的 NestJS 项目强制要求所有 Service 方法都必须加上 @Transactional() 装饰器，你可以在提示词中明确指出：

text编辑

... In the NestJS service file, ensure that every method that modifies data is decorated with @Transactional() from 'typeorm-transactional-cls-hooked' ...

定制点 2：注入项目上下文

除了全局配置文件，Skill 还能利用 Cursor 提供的强大上下文感知能力。

当你在项目中的某个特定文件夹（如 apps/admin-portal/）下运行 Skill 时，{{project_root}} 变量会自动指向该子项目。Skill 可以读取该子项目下的 package.json，从而精确判断其依赖的 UI 库版本，并生成兼容的代码。

定制点 3：后处理脚本（高级）

对于更复杂的定制需求，你甚至可以在 SKILL.md 中定义一个 后处理脚本（Post-Processing Script）。这个脚本会在 AI 生成代码后、写入磁盘前被执行，用于进行最后的微调。

例如，自动格式化代码：

yaml编辑

post_process:
  script: |
    const { execSync } = require('child_process');
    execSync(`prettier --write ${outputDir}/**/*.ts`);

通过这些定制手段，你可以确保 FullStackCRUDGenerator 生成的代码，不仅仅是能跑，而且是完全符合你项目 DNA 的高质量代码。

六、落地效果与团队协作：从个人提效到团队赋能

一个工具的价值，最终要体现在它对团队和业务的实际影响上。

6.1 个人效率的飞跃

对于单个开发者而言，FullStackCRUDGenerator 的价值是立竿见影的。以前需要半天才能完成的模块，现在几分钟内即可搞定。这不仅节省了时间，更重要的是解放了心智带宽。开发者可以将省下的精力投入到更有价值的工作中，比如：

优化核心算法性能。
设计更优雅的用户体验。
编写更全面的集成测试。
学习新技术。

6.2 团队规范的统一

在一个多人协作的项目中，代码风格和架构规范的统一至关重要。通过将团队的最佳实践固化到 Skill 的提示词和配置文件中，我们可以确保无论谁来开发新模块，产出的代码都遵循同一套标准。

新人入职后，不再需要花大量时间去阅读冗长的编码规范文档。他们只需学会使用这个 Skill，就能自然而然地写出符合团队要求的代码。这极大地降低了新人的学习曲线和犯错概率。

6.3 实践案例：某 SaaS 创业公司的内部实践

一家快速成长的 SaaS 初创公司，在引入 FullStackCRUDGenerator 后，对其内部管理系统进行了重构。他们的后端采用 NestJS，前端采用 Ant Design Pro。

在重构前，添加一个新的管理模块（如“客户标签”、“优惠券规则”）平均需要 1-2 人日。重构后，这个时间缩短到了 2-3 小时。更重要的是，由于所有模块都是由同一个“AI 架构师”生成的，整个代码库的一致性达到了前所未有的高度，代码审查（Code Review）的效率也因此大幅提升，Reviewer 可以将注意力集中在业务逻辑的正确性上，而非格式或结构问题。

该公司 CTO 在内部分享会上总结道：“这个 Skill 不仅仅是一个提效工具，它是我们团队工程文化的数字化载体。”

七、结语：从码农到架构师——AI 时代开发者的新定位

FullStackCRUDGenerator 所代表的，远不止是一个便捷的代码生成器。它预示着一种开发范式的深刻变革。

在 AI 时代，开发者的核心竞争力将不再是“写代码的速度”，而是：

定义问题的能力：能否精准地向 AI 描述你的需求？
设计系统的能力：能否构建出可被 AI 理解和执行的 SOP 与规范？
评估与迭代的能力：能否判断 AI 产出的质量，并持续优化你的“AI 同事”？

那些曾经被视为“基础”、“重复”的 CRUD 工作，正被 AI 无缝接管。这迫使我们重新思考自己的角色——我们不应再是“码农”（Coder），而应成为 **“AI 协作者”（AI Collaborator）乃至 “系统架构师”**（System Architect）。

拥抱像 FullStackCRUDGenerator 这样的 AI Skill，不是为了取代自己，而是为了放大自己。它将我们从繁琐的细节中解放出来，让我们能够站在更高的维度，去思考如何构建更复杂、更智能、更能创造价值的系统。

现在就开始行动吧。安装这个 Skill，尝试用它生成你的下一个业务模块。你会发现，未来已来，只是尚未流行。而你，可以成为那个引领潮流的人。

附录：

GitHub 示例仓库：https://github.com/awesome-skills/fullstack-crud-generator (虚构地址)
Cursor Skills 官方文档：https://cursor.sh/docs/skills
相关 Skill：TeamStyleEnforcer (用于在生成后自动校验代码风格)

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-01-27，如有侵权请联系 cloudcommunity@tencent.com 删除

开发者