Cursor AI Skills 实战：自动生成 Flutter 页面、代码与文档

Cursor AI Skills 实战：自动生成 Flutter 页面、代码与文档

视频

youtu.be/UeJYlTpm4ek

www.bilibili.com/video/BV1xp...

前言

本文系统介绍如何使用 Cursor AI Skills 自动生成 Flutter 页面、初始化项目结构，并持续维护项目技术文档。适合 Flutter 开发者与 AI 编程实践者，快速构建高效、可复用的 Flutter 开发工作流。

原文 使用 Cursor AI Skills 实现 Flutter 自动化开发（完整指南）

分类: Cursor AI / Cursor AI Skills、Flutter / Flutter AI、AI 编程 / AI 代码生成

参考

• Cursor Agent Skills
• Claude Agent Skills

正文

配置 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 项目提效的新标准。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

---

© 猫哥 ducafecat.com

end