Cursor AI Skills 实战：自动生成 Flutter 页面、代码与文档
本文系统介绍如何使用 Cursor AI Skills 自动生成 Flutter 页面、初始化项目结构，并持续维护项目技术文档。适合 Flutter 开发者与 AI 编程实践者，快速构建高效、可复用的 Flutter 开发工作流。
·
Cursor AI Skills 实战：自动生成 Flutter 页面、代码与文档
视频
https://youtu.be/UeJYlTpm4ek
https://www.bilibili.com/video/BV1xpipBYE24/
前言
本文系统介绍如何使用 Cursor AI Skills 自动生成 Flutter 页面、初始化项目结构，并持续维护项目技术文档。适合 Flutter 开发者与 AI 编程实践者，快速构建高效、可复用的 Flutter 开发工作流。
分类: Cursor AI / Cursor AI Skills、Flutter / Flutter AI、AI 编程 / AI 代码生成
参考
正文
配置 Cursor 支持 Skills
进入 Cursor Setting -> Beta , Update Access 选择 Nightly，升级后重启。
在 Rules, Subagents，Commands 面板下，开启 Import Agent Skills 重启。
重启后 claude 、codex 的 skills 就会全局可用。
例子 1： Flutter创建页面组手（全局）
编写文件 .codex/skills/Flutter创建页面组手/SKILL.md
---
name: "Flutter创建页面组手"
description: "Flutter 项目中创建页面"
---
# Flutter创建页面组手
按规则生成空页面脚手架代码。
## 读取变量
- 读取 [保存目录]
- 读取 [业务名称]
- 通过 [业务名称] 生成 [业务代码] (我的页面 -> my_page)
- [业务代码] 使用规则举例如下:
- 文件名 my_page
- 类名 MyPage
- 变量名 myPage
- 接口名 IMyPage
## 约束规则
页面必须包含在 lib/pages 目录下面
## 页面目录
如果 [业务代码] 时 my_page，目录结构如下:
- [保存目录]
- my_page // 业务目录
- widget // 业务组建
- view.dart // 视图代码
- controller.dart // 控制器代码
- index.dart // index 导包代码
## 页面代码
如果 [业务代码] 时 my_page，代码如下:
- index.dart // index 导包代码
```dart
library;
export './controller.dart';
export './view.dart';
```
- controller.dart // 控制器代码
```dart
import 'package:get/get.dart';
class MyPageController extends GetxController {
MyPageController();
_initData() {
update(["my_page"]);
}
void onTap() {}
// @override
// void onInit() {
// super.onInit();
// }
@override
void onReady() {
super.onReady();
_initData();
}
// @override
// void onClose() {
// super.onClose();
// }
}
```
- view.dart // 视图代码
```dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'index.dart';
class MyPagePage extends GetView<MyPageController> {
const MyPagePage({super.key});
// 主视图
Widget _buildView() {
return const Center(
child: Text("MyPagePage"),
);
}
@override
Widget build(BuildContext context) {
return GetBuilder<MyPageController>(
init: MyPageController(),
id: "my_page",
builder: (_) {
return Scaffold(
appBar: AppBar(title: const Text("my_page")),
body: SafeArea(
child: _buildView(),
),
);
},
);
}
}
```
## 保存总导包 index
文件 lib/pages/index.dart
追加在这个文件中即可
提示词
用 skill 在 lib/pages/cart 中创建页面 业务 购物历史，业务代码 cart_history
输出
例子 2：Flutter项目初始化（全局）
编写文件 .codex/skills/Flutter项目初始化/SKILL.md
---
name: Flutter项目初始化
description: 用猫哥的 ducafe_ui_core + getx 初始化一个规范的 flutter 项目。
---
# Flutter项目初始化
## 安装依赖包
```shell
flutter pub add get
flutter pub add ducafe_ui_core
```
## 1 创建业务 index 页面
- 使用 skill 在 lib/pages 目录下创建业务 首页，业务代码 index。
- 没有 lib/pages 目录自动创建。
## 2 创建全局 Global 模块
文件位置 lib/global.dart
```dart
import 'package:flutter/material.dart';
class Global {
static Future<void> init() async {
// 插件初始化
// WidgetsFlutterBinding.ensureInitialized();
// // 工具类
// await Storage().init();
// // 提示框
// Loading();
// // 加载服务
// Get.put<ConfigService>(ConfigService()); // 配置
// Get.put<WPHttpService>(WPHttpService()); // 网络请求
// Get.put<UserService>(UserService()); // 用户
// Get.put<CartService>(CartService()); // 购物车
// // 初始化配置
// await ConfigService.to.init();
}
}
```
## 3 创建 common 通用模块
文件位置 lib/common/
### 目录结构
```text
lib/common/
├── api/ # API 接口
│ └── index.dart
├── components/ # 通用组件
│ └── index.dart
├── extension/ # 扩展方法
│ └── index.dart
├── i18n/ # 国际化
│ └── index.dart
├── models/ # 数据模型
│ └── index.dart
├── routers/ # 路由配置
│ ├── index.dart
│ ├── names.dart
│ └── pages.dart
├── services/ # 服务层
│ └── index.dart
├── style/ # 样式
│ └── index.dart
├── utils/ # 工具类
│ └── index.dart
├── values/ # 常量值
│ ├── index.dart
│ ├── constants.dart
│ ├── images.dart
│ └── svgs.dart
├── widgets/ # 通用小部件
│ └── index.dart
└── index.dart # 统一导出
```
### 文件规则
#### lib/common/index.dart
```dart
library;
export 'api/index.dart';
export 'components/index.dart';
export 'extension/index.dart';
export 'i18n/index.dart';
export 'models/index.dart';
export 'routers/index.dart';
export 'services/index.dart';
export 'style/index.dart';
export 'utils/index.dart';
export 'values/index.dart';
export 'widgets/index.dart';
```
#### lib/common/routers/names.dart
```dart
class RouteNames {
static const main = '/';
}
```
#### lib/common/routers/pages.dart
```dart
class RoutePages {
// 列表
// static List<GetPage> list = [];
}
```
#### lib/common/routers/index.dart
```dart
library;
export 'names.dart';
export 'pages.dart';
```
#### lib/common/values/constants.dart
```dart
/// 常量
class Constants {
// 服务 api
static const apiUrl = 'https://api.example.com';
}
```
#### lib/common/values/images.dart
```dart
/// 图片 assets
class AssetsImages {
}
```
#### lib/common/values/svgs.dart
```dart
/// svgs assets
class AssetsSvgs {
}
```
#### lib/common/values/index.dart
```dart
library;
export 'constants.dart';
export 'images.dart';
export 'svgs.dart';
```
#### 其他模块 index.dart 模板
- api
- components
- extension
- i18n/
- models
- services
- style
- utils
- widgets
这些目录下的 index.dart 统一使用：
```dart
library;
// export './xxxx.dart';
```
## 重写 main.dart
lib/main.dart
```dart
import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'pages/index.dart';
import 'global.dart';
void main() async {
await Global.init();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(414, 896), // 设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致)
// splitScreenMode: false, // 支持分屏尺寸
// minTextAdapt: false, // 是否根据宽度/高度中的最小值适配文字
builder: (context, child) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const IndexPage(),
);
},
);
}
}
```
提示词
使用 skill 初始化当前 flutter 项目
输出
例子 3：编写技术说明（项目）
编写 .cursor/skills/编写技术说明/SKILL.md
---
name: 编写技术说明
description: 对当前项目进行技术整理并保存到文档中。
---
# 项目技术说明
你是一名资深 Flutter 架构师和技术文档专家。
我将持续向你提供一个 Flutter 项目的代码结构、关键文件、以及最近一次“改动内容”。
你的任务是：
1️⃣ 对当前 Flutter 项目进行技术架构分析
2️⃣ 在“已有技术文档”的基础上 **增量更新**，而不是全部重写
3️⃣ 明确标注「本次新增 / 修改 / 废弃」的技术点
4️⃣ 输出一份结构化、可长期维护的技术说明文档
请始终假设：
- 该项目是一个**长期维护的真实业务项目**
- 文档读者是：中高级 Flutter 开发者
- 目标是：**可读、可持续演进**
---
## 文档保存位置
docs/技术说明.md
## 📌 项目信息（如有）
- 项目名称：
- Flutter 版本：
- 状态管理方案（如 Riverpod / Bloc / GetX 等）：
- 架构风格（如 Clean Architecture / Feature First 等）：
## 📌 已有技术文档（如存在）
【我会粘贴当前版本的技术文档】
## 📌 本次改动内容
【我会描述或粘贴本次代码变更 / 新增模块 / 重构点】
---
## 🎯 输出要求
### 一、项目整体架构（如无重大变化，简要说明）
- 架构分层
- 模块职责
- 关键设计原则
### 二、本次迭代技术变更（重点）
- 🆕 新增内容
- 🔄 修改内容
- 🗑️ 废弃或替代方案
- 变更动机 & 技术取舍说明
### 三、关键代码设计解读
- 重要类 / 模块职责
- 状态流转说明
- 数据流 & 依赖方向
### 四、对项目长期维护的影响
- 可扩展性
- 可测试性
- 潜在风险 & 建议
### 五、文档版本记录（必须输出）
- 文档版本号（如 v1.2.0）
- 更新时间
- 本次更新摘要（3～5 条）
---
## ✍️ 写作风格要求
- 使用 **工程师视角**，避免空话
- 关键地方可用「为什么这样设计」
- 允许适度口语化，但保持专业
- 使用 Markdown 输出，方便直接入库或发布
提示词
使用 skill 编写技术说明
输出
总结要点
通过 Cursor AI Skills，Flutter 开发者可以将页面创建、项目初始化以及技术文档维护等重复性工作交给 AI 自动完成。本文结合实际示例，系统讲解了如何构建全局与项目级别的 Cursor Skills，实现高效、可持续的 Flutter 自动化开发流程。这种 AI 辅助编程方式，正在成为 Flutter 项目提效的新标准。
感谢阅读本文
如果有什么建议，请在评论中让我知道。我很乐意改进。
猫哥 APP
flutter 学习路径
- Flutter 优秀插件推荐
- Flutter 基础篇1 - Dart 语言学习
- Flutter 基础篇2 - 快速上手
- Flutter 实战1 - Getx Woo 电商APP
- Flutter 实战2 - 上架指南 Apple Store、Google Play
- Flutter 基础篇3 - 仿微信朋友圈
- Flutter 实战3 - 腾讯即时通讯 第一篇
- Flutter 实战4 - 腾讯即时通讯 第二篇
© 猫哥
ducafecat.com
end
小龙虾开发者社区是 CSDN 旗下专注 OpenClaw 生态的官方阵地，聚焦技能开发、插件实践与部署教程，为开发者提供可直接落地的方案、工具与交流平台，助力高效构建与落地 AI 应用
更多推荐
19
0- 0
已为社区贡献1条内容
所有评论(0)