CodeBuddy Flutter AI 技能安装与配置指南

发布时间:2026/7/19 13:57:34
CodeBuddy Flutter AI 技能安装与配置指南 1. 使用场景本文档列出了为 Flutter 前端开发配置的 11 个 CodeBuddy AI 技能覆盖从环境搭建、架构设计、UI 开发、状态管理到项目升级的完整开发流程。同事只需将对应的 SKILL.md 文件复制到指定目录即可完成安装。2. 技能清单总览#技能名称定位解决的核心问题1flutter-dev通用开发Widget 模式 / 状态管理 / 路由 / 性能优化2flutter-architecture项目架构MVVM 四层组件化架构规范3flutter-state-management状态管理Riverpod / Bloc / Provider 状态管理方案4flutter-ui-from-design设计→代码第一步设计稿分析→Widget 代码生成5flutter-ui-refineUI 精细化最后一公里像素级差异诊断与修复6flutter-responsive-layout响应式布局多屏幕 / 横竖屏 / 安全区域适配7flutter-animation动画动效隐式 / 显式动画 / 页面过渡 / Hero8flutter-design-token设计 Token 管理颜色 / 间距 / 字体一致性9flutter-setup-declarative-routing路由配置GoRouter 声明式路由配置10flutter-build-responsive-layout响应式布局构建LayoutBuilder / MediaQuery 响应式布局11flutter-fix-layout-issues布局修复修复布局溢出等常见问题12flutter-add-widget-testWidget 测试Widget 单元测试编写13flutter-add-integration-test集成测试端到端集成测试编写14flutter-updater项目升级SDK / 依赖自动升级 安全回滚15flutter-cn-setup开发环境搭建中国区 Flutter 环境一键安装3. 技能安装方法3.1 方式一文件复制推荐将下方各技能的 SKILL.md 内容保存到对应目录mkdir -p ~/.codebuddy/skills/flutter-cn-setup # 复制 flutter-cn-setup 的 SKILL.md 内容到上述目录 mkdir -p ~/.codebuddy/skills/flutter-architecture 复制 flutter-architecture 的 SKILL.md 内容到上述目录 以此类推共 11 个目录3.2 方式二通过 CodeBuddy 设置导入打开 CodeBuddy 设置页面进入 Skills 管理点击「导入 Skill」按钮选择对应的 SKILL.md 文件导入3.3 方式三AI 对话创建在 CodeBuddy 对话中直接说请帮我创建一个用于 XXX 的自定义 Skill触发条件是…4. 解决「UI 设计图 vs 实际效果差距大」的完整链路以下工作流程展示了从设计稿到完美 UI 的完整链路设计稿 ──→ flutter-ui-from-design ──→ 初始代码 │ ▼ flutter-design-token ──→ 颜色 / 间距 / 字体对齐 │ ▼ flutter-responsive-layout ──→ 多屏幕适配 │ ▼ flutter-animation ──→ 过渡 / 微交互 │ ▼ flutter-ui-refine ──→ 像素级精细化 │ ▼ flutter-state-management ──→ 状态逻辑完善 │ ▼ 完美 UI ✅5. 各技能使用示例5.1 flutter-cn-setup环境安装触发条件用户提到安装 Flutter、中国区镜像、修复 flutter doctor、或新 macOS 初始化 Flutter 环境时使用。大多数场景直接执行cd .codebuddy/skills/flutter-cn-setup bash install.sh5.2 flutter-ui-from-design设计稿→代码触发条件用户提供设计截图、Figma 链接或描述 UI 组件要求生成 Flutter 代码时使用。核心流程设计稿分析 → 组件树识别 → 布局策略 → Widget 代码生成。5.3 flutter-ui-refineUI 精细化触发条件UI 还原度不高、像素级对齐问题、与设计稿有细微差异时使用。核心诊断维度间距对比、颜色一致性、字体匹配、组件状态覆盖。6. 注意事项新技能安装后需要重启 CodeBuddy 或重新加载窗口才能生效可以通过 CodeBuddy 设置页面的 Skills 管理界面查看和管理这些技能建议团队成员统一技能目录结构便于版本管理和共享如需团队间共享可直接复制整个 ~/.codebuddy/skills/ 目录