博客 / 詳情

返回

Cursor AI Skills 實戰：自動生成 Flutter 頁面、代碼與文檔

Cursor AI Skills 實戰：自動生成 Flutter 頁面、代碼與文檔

flutter skills

視頻

https://youtu.be/UeJYlTpm4ek

https://www.bilibili.com/video/BV1xpipBYE24/

前言

本文系統介紹如何使用 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，升級後重啓。

Update Access 選擇 Nightly

在 Rules, Subagents，Commands 面板下，開啓 Import Agent Skills 重啓。

開啓 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

輸出

cursor skills 新建頁面

例子 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 項目

輸出

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 編寫技術説明

輸出

使用 skill 編寫技術説明

總結要點

通過 Cursor AI Skills，Flutter 開發者可以將頁面創建、項目初始化以及技術文檔維護等重複性工作交給 AI 自動完成。本文結合實際示例，系統講解了如何構建全局與項目級別的 Cursor Skills，實現高效、可持續的 Flutter 自動化開發流程。這種 AI 輔助編程方式，正在成為 Flutter 項目提效的新標準。

感謝閲讀本文

如果有什麼建議，請在評論中讓我知道。我很樂意改進。

貓哥 APP

  • SaaS Fast
  • Flutter GetX Generator

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

cursor , 人工智能 , flutter
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.