# AI Skills 王炸组合: OpenCode + Skills + Node, Flutter 自动化开发 ![OpenCode + Skills + Node](https://files.ducafecat.com:443/docs/2026/01/17/0cf69258fba9a3bf4acb5d1bbacc6f62.png) ## 视频 ## 前言本文深入讲解 OpenCode Skills 的正确使用方式，结合免费模型与 Node 脚本，实现 Flutter 页面自动生成、项目初始化与系统消息通知。通过 3 个真实 Skills 示例，带你掌握 AI 编程自动化的核心方法，适合独立开发者与 Vibe Coding 实战学习。 > 原文 [OpenCode Skills 实战：用 Node 脚本自动生成 Flutter 页面](https://ducafecat.com/blog/opencode-skills-node-flutter) 有的同学会问为什么用 opencode ，cursor，cc 不好么？（跑 skills 就不要乱消耗 claude 模型了）现在 opencode 有 4 个免费模型，用来跑跑 skills 最适合了，随便跑。为了节约大家时间，很多操作直接看视频，本文用来当资料查看即可。分类: OpenCode, OpenCode Skills, AI Skills, Node 脚本, Flutter 自动生成, Flutter 项目初始化, AI 编程, Vibe Coding, 自动化开发 ## 参考 - [OpenCode Agent Skills](https://opencode.ai/docs/skills/) - [terminal-notifier](https://github.com/julienXX/terminal-notifier) ## Git 管理你的 skills 我代码放在了 https://github.com/ducafecat/ai-skills-ducafecat，如果需要保密，记得打开私有选项。将代码 git clone ... 到～/.claude/skills 查看 https://opencode.ai/docs/skills/ 文档得知， opencode 会自动扫描这个目录的 skills。我们进入 opencode 输入提示词 ```markdown get skills list ``` 返回 ```shell Thinking: The user asked "get skills list". Looking at the available tools, there is a "skill" tool that loads a skill to get detailed instructions. But the description says "Load a skill to get detailed instructions for a specific task." and it mentions with some examples. Interpreting User Request - The user asked for a "skills list," likely seeking information on available skills or their details. Flutter项目初始化: 初始化一个规范的 flutter 项目。系统消息通知: 此脚本发送 macOS 系统通知。 Flutter创建页面组手: Flutter 项目中创建页面 ``` > 到这里我们就完成了 skills 的关联，接下来只要关心功能实现就是了。 ## 先说重点 **skills 中可执行脚本，可执行其它 skills ，相当丝滑智能。（重点）** ## 系统消息通知这个系统通知 skills ，每次任务完成都给 macos 发个通知，这样我们切屏忙其它事情也能知道。采用 [terminal-notifier](https://github.com/julienXX/terminal-notifier) 方案。 ### 安装插件 ```shell $ brew install terminal-notifier ``` ### 创建脚本 notify.sh `系统消息通知/notify.sh` ```shell #!/usr/bin/env bash set -euo pipefail TITLE="${1:-AI Skills}" BODY="${2:-任务完成}" terminal-notifier -title "${TITLE}" -message "${BODY}" -open "https://ducafecat.com" ``` > 这是一个 shell 脚本 > > 调用 terminal-notifier 传入 title message 和一个点击 open 事件，你记得改（可以加个传入参数）。 ### 编辑主文件 `系统消息通知/SKILL.md` ````markdown --- name: "系统消息通知" description: "此脚本发送 macOS 系统通知。" --- # 系统消息通知当任务完成时，调用此脚本发送 macOS 系统通知。 ## 调用方式 ```bash ./notify.sh "标题" "消息内容" ``` ## 参数 - 参数1: 通知标题（默认: AI Skills） - 参数2: 通知内容（默认: 任务完成） ## 依赖需要先安装 terminal-notifier: ```bash brew install terminal-notifier ``` ```` > 如何调试见视频，文中就不详细说了。 ## Flutter创建页面组手进入 `Flutter创建页面组手` 目录，上次我们有。 ### 初始化 node 环境 ```shell npm init 输入项目名称 flutter-getx-create-page ``` ### 翻译 js 代码将原来的 SKILL.md 文件用 ai 抽取 `Flutter创建页面组手/create-page.js` ```js #!/usr/bin/env node const fs = require("fs"); const path = require("path"); const https = require("https"); // 检测输入中是否包含中文字符 function hasChinese(str) { return /[\u4e00-\u9fa5]/.test(str); } // 使用 Google 翻译将中文转换为英文，失败时返回原文 async function translateToEnglish(text) { return new Promise((resolve, reject) => { const options = { hostname: "translate.googleapis.com", path: `/translate_a/single?client=gtx&sl=zh-CN&tl=en&dt=t&q=${encodeURIComponent( text )}`, method: "GET", timeout: 5000, }; const req = https.request(options, (res) => { let data = ""; res.on("data", (chunk) => (data += chunk)); res.on("end", () => { try { const json = JSON.parse(data); const translated = json[0][0][0]; resolve(translated); } catch (e) { resolve(text); } }); }); req.on("error", () => resolve(text)); req.on("timeout", () => { req.destroy(); resolve(text); }); req.end(); }); } // 转为 snake_case，适用于文件/目录命名 function toSnakeCase(str) { return str .replace(/([A-Z])/g, "_$1") .toLowerCase() .replace(/^_/, "") .replace(/[^\w]+/g, "_") .replace(/_+/g, "_") .replace(/^_|_$/g, ""); } // 转为 PascalCase，适用于类名 function toPascalCase(str) { const snake = toSnakeCase(str); return snake .split("_") .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(""); } // 转为 camelCase，适用于变量名 function toCamelCase(str) { const pascal = toPascalCase(str); return pascal.charAt(0).toLowerCase() + pascal.slice(1); } // 生成模板中使用的命名形式 function generateCode(businessName) { const fileCode = toSnakeCase(businessName); const classCode = toPascalCase(businessName); const varCode = toCamelCase(businessName); const interfaceCode = "I" + classCode; return { fileCode, classCode, varCode, interfaceCode }; } // 写文件前确保目录存在 function createDirectory(dirPath) { if (!fs.existsSync(dirPath)) { fs.mkdirSync(dirPath, { recursive: true }); } } // 写文件并自动创建父级目录 function writeFile(filePath, content) { const dir = path.dirname(filePath); createDirectory(dir); fs.writeFileSync(filePath, content, "utf8"); } // 生成 index.dart 的导出内容 function generateIndexCode(fileCode) { return `library; export './controller.dart'; export './view.dart'; `; } // 生成 controller 模板 function generateControllerCode(classCode, fileCode) { return `import 'package:get/get.dart'; class ${classCode}Controller extends GetxController { ${classCode}Controller(); _initData() { update(["${fileCode}"]); } void onTap() {} // @override // void onInit() { // super.onInit(); // } @override void onReady() { super.onReady(); _initData(); } // @override // void onClose() { // super.onClose(); // } } `; } // 生成 view 模板 function generateViewCode(classCode, fileCode) { return `import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'index.dart'; class ${classCode}Page extends GetView<${classCode}Controller> { const ${classCode}Page({super.key}); // 主视图 Widget _buildView() { return const Center( child: Text("${classCode}Page"), ); } @override Widget build(BuildContext context) { return GetBuilder<${classCode}Controller>( init: ${classCode}Controller(), id: "${fileCode}", builder: (_) { return Scaffold( appBar: AppBar(title: const Text("${fileCode}")), body: SafeArea( child: _buildView(), ), ); }, ); } } `; } // 追加导出到 lib/pages/index.dart，便于统一引用 function updatePagesIndex(saveDir, fileCode, classCode) { const indexPath = path.join(process.cwd(), "lib/pages/index.dart"); const pagesDir = path.join(process.cwd(), "lib/pages"); const relativePath = path.relative(pagesDir, saveDir); const exportPath = relativePath ? `${relativePath}/${fileCode}` : fileCode; const exportLine = `export '${exportPath}/index.dart';\n`; if (fs.existsSync(indexPath)) { const content = fs.readFileSync(indexPath, "utf8"); if (!content.includes(exportLine.trim())) { fs.appendFileSync(indexPath, exportLine, "utf8"); } } else { writeFile(indexPath, exportLine); } } // CLI 入口：创建页面文件并更新导出 async function main() { const args = process.argv.slice(2); if (args.length < 2) { console.error("用法: node create-page.js <保存目录> <业务名称>"); process.exit(1); } const saveDir = path.resolve(args[0]); let businessName = args[1]; console.log(`saveDir: ${saveDir}`); console.log(`businessName: ${businessName}`); if (hasChinese(businessName)) { console.log(`检测到中文，正在翻译: ${businessName}`); businessName = await translateToEnglish(businessName); console.log(`翻译结果: ${businessName}`); } const { fileCode, classCode } = generateCode(businessName); const pageDir = path.join(saveDir, fileCode); const widgetDir = path.join(pageDir, "widget"); createDirectory(widgetDir); writeFile(path.join(pageDir, "index.dart"), generateIndexCode(fileCode)); writeFile( path.join(pageDir, "controller.dart"), generateControllerCode(classCode, fileCode) ); writeFile( path.join(pageDir, "view.dart"), generateViewCode(classCode, fileCode) ); updatePagesIndex(saveDir, fileCode, classCode); console.log(`页面创建成功: ${fileCode}`); } main(); ``` > 脚本特别适合处理这种有规则的逻辑 > > 好处是执行速度快了 > > 留给 ai 的工作是语义理解，智能加工 > > 你熟手 python 都可以，脚本语言不限制 > > 小功能就 js 了，不要去整 ts，减少复杂度 ### 编辑主文件 `Flutter创建页面组手/SKILL.md` ````markdown --- name: "Flutter创建页面组手" description: "Flutter 项目中创建页面" --- # Flutter创建页面组手按规则生成空页面脚手架代码。 ## 执行步骤 1. 询问用户 [保存目录] 和 [业务名称] 2. 调用 create-page.js 脚本创建页面 ```bash node $SKILL_DIR/create-page.js <保存目录> <业务名称> ``` 1. 按导报名称排序 lib/pages/index.dart 2. 通过 skills 系统消息通知 "猫哥Skills助手" "<业务名称>GetX页面创建完成" ## 生成规则脚本会自动处理： - 中文翻译成英文（英文直接使用） - 命名转换（snake_case） - 创建目录结构（lib/pages/<业务代码>/） - 生成 view.dart、controller.dart、index.dart ```` ## Flutter项目初始化 ### 初始化 node 环境 ```shell npm init 输入项目名称 flutter-getx-init ``` ### 翻译 js 代码 `Flutter项目初始化/index.js` ```js #!/usr/bin/env node const fs = require("fs"); const path = require("path"); const { execSync } = require("child_process"); const targetDir = process.cwd(); // 创建目录 function mkdirSync(dir) { if (!fs.existsSync(dir)) { fs.mkdirSync(dir, { recursive: true }); } } // 写入文件 function writeFile(filePath, content) { const dir = path.dirname(filePath); mkdirSync(dir); fs.writeFileSync(filePath, content.trim() + "\n"); console.log(`✓ ${filePath}`); } // 安装依赖 function installDeps() { console.log("📦 安装依赖包..."); execSync("flutter pub add get", { cwd: targetDir, stdio: "inherit" }); execSync("flutter pub add ducafe_ui_core", { cwd: targetDir, stdio: "inherit", }); } // 创建 index 页面 function createIndexPage() { const pagesDir = path.join(targetDir, "lib/pages"); writeFile( path.join(pagesDir, "index/controller.dart"), ` import 'package:get/get.dart'; class IndexController extends GetxController {} ` ); writeFile( path.join(pagesDir, "index/view.dart"), ` import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'controller.dart'; class IndexPage extends GetView { const IndexPage({super.key}); @override Widget build(BuildContext context) { return const Scaffold( body: Center(child: Text('Index')), ); } } ` ); writeFile( path.join(pagesDir, "index/index.dart"), ` library; export 'controller.dart'; export 'view.dart'; ` ); writeFile( path.join(pagesDir, "index.dart"), ` library; export 'index/index.dart'; ` ); } // 创建 Global function createGlobal() { writeFile( path.join(targetDir, "lib/global.dart"), ` import 'package:flutter/material.dart'; class Global { static Future init() async { // 插件初始化 // WidgetsFlutterBinding.ensureInitialized(); // // 工具类 // await Storage().init(); // // 提示框 // Loading(); // // 加载服务 // Get.put(ConfigService()); // 配置 // Get.put(WPHttpService()); // 网络请求 // Get.put(UserService()); // 用户 // Get.put(CartService()); // 购物车 // // 初始化配置 // await ConfigService.to.init(); } } ` ); } // 创建 common 模块 function createCommon() { const commonDir = path.join(targetDir, "lib/common"); // routers writeFile( path.join(commonDir, "routers/names.dart"), ` class RouteNames { static const main = '/'; } ` ); writeFile( path.join(commonDir, "routers/pages.dart"), ` class RoutePages { // 列表 // static List list = []; } ` ); writeFile( path.join(commonDir, "routers/index.dart"), ` library; export 'names.dart'; export 'pages.dart'; ` ); // values writeFile( path.join(commonDir, "values/constants.dart"), ` /// 常量 class Constants { // 服务 api static const apiUrl = 'https://api.example.com'; } ` ); writeFile( path.join(commonDir, "values/images.dart"), ` /// 图片 assets class AssetsImages { } ` ); writeFile( path.join(commonDir, "values/svgs.dart"), ` /// svgs assets class AssetsSvgs { } ` ); writeFile( path.join(commonDir, "values/index.dart"), ` library; export 'constants.dart'; export 'images.dart'; export 'svgs.dart'; ` ); // 其他模块 const modules = [ "api", "components", "extension", "i18n", "models", "services", "style", "utils", "widgets", ]; modules.forEach((mod) => { writeFile( path.join(commonDir, `${mod}/index.dart`), ` library; // export './xxxx.dart'; ` ); }); // common/index.dart writeFile( path.join(commonDir, "index.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'; ` ); } // 重写 main.dart function createMain() { writeFile( path.join(targetDir, "lib/main.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(), ); }, ); } } ` ); } // 主函数 function main() { console.log("🚀 Flutter 项目初始化开始...\n"); installDeps(); createIndexPage(); createGlobal(); createCommon(); createMain(); console.log("\n✅ 初始化完成!"); } main(); ``` > 提示词可以这样写抽取 SKILL.md 中的逻辑保存到 `index.js` ### 编辑主文件 `Flutter项目初始化/SKILL.md` ````markdown --- name: Flutter项目初始化 description: 初始化一个规范的 flutter 项目。 --- # Flutter项目初始化用猫哥的 ducafe_ui_core + getx 初始化一个规范的 flutter 项目。 ## 执行步骤 - 执行 index.js 自动完成项目初始化。 ```bash node index.js ``` - 通过 skills 系统消息通知 "猫哥Skills助手" "Flutter项目初始化完成" ```` ## 代码 [我的代码](https://github.com/ducafecat/ai-skills-ducafecat) ## 总结要点通过 OpenCode Skills 结合 Node 脚本，可以将重复、规则化的 Flutter 开发流程彻底自动化。本文通过 Flutter 页面生成、项目初始化和系统消息通知三个实战 Skills，展示了 AI Skills 在真实开发中的高效用法。这种以 OpenCode 免费模型为核心的 AI 编程方式，是独立开发者和 Vibe Coding 时代的理想选择。感谢阅读本文如果有什么建议，请在评论中让我知道。我很乐意改进。 --- ## 猫哥 APP - [SaaS Fast](https://saas.ducafecat.com/) - [Flutter GetX Generator](https://marketplace.visualstudio.com/items?itemName=ducafecat.getx-template) ## flutter 学习路径 - [Flutter 优秀插件推荐](https://flutter.ducafecat.com) - [Flutter 基础篇1 - Dart 语言学习](https://ducafecat.com/course/dart-learn) - [Flutter 基础篇2 - 快速上手](https://ducafecat.com/course/flutter-quickstart-learn) - [Flutter 实战1 - Getx Woo 电商APP](https://ducafecat.com/course/flutter-woo-2025) - [Flutter 实战2 - 上架指南 Apple Store、Google Play](https://ducafecat.com/course/flutter-upload-apple-google) - [Flutter 基础篇3 - 仿微信朋友圈](https://ducafecat.com/course/flutter-wechat) - [Flutter 实战3 - 腾讯即时通讯第一篇](https://ducafecat.com/course/flutter-tim) - [Flutter 实战4 - 腾讯即时通讯第二篇](https://ducafecat.com/course/flutter-tim-s2) --- © 猫哥 ducafecat.com end

标签

评论