1. 项目概述
作为一名全栈开发者,我最近完成了一个从零到一搭建AI编程辅助系统的实战项目。这个系统的核心设计理念是将"能力"与"调用方式"分离,通过全局技能库(Skills)和项目级工作流(Workflows)的架构,实现了代码复用和项目整洁的完美平衡。
在传统开发中,我们经常遇到这样的困境:要么在每个项目中重复编写相似的代码,导致维护成本高;要么将所有依赖都塞进项目目录,造成项目臃肿。这个系统通过创新的目录结构设计,完美解决了这些问题。全局技能库存放通用的代码能力和工具脚本,而项目级工作流则像遥控器一样,轻量地定义如何调用这些能力。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计
2.1 核心组件解析
系统由两大核心组件构成:
-
Skills(全局技能库)
- 存储路径:
~/.gemini/antigravity/skills/ - 包含内容:可复用的代码模块、脚本工具、设计指南等
- 特点:一次安装,所有项目共享
- 存储路径:
-
Workflows(项目级工作流)
- 存储路径:项目根目录下的
.agent/workflows/ - 包含内容:Markdown格式的配置文件
- 特点:定义如何在本项目中使用全局技能
- 存储路径:项目根目录下的
这种架构的优势在于:
- 避免代码重复:通用能力只需开发一次
- 保持项目轻量:每个项目只需维护少量配置文件
- 便于升级维护:更新全局技能库即可影响所有项目
2.2 目录结构设计
合理的目录结构是系统稳定运行的基础。经过多次迭代,我确定了以下最佳实践:
code复制~/.gemini/antigravity/skills/
├── skills/ # 官方基础技能库
│ ├── frontend-design/ # 前端设计能力
│ ├── docs-generator/ # 文档生成工具
│ └── testing/ # 测试相关工具
└── ui-ux-pro-max-skill/ # 高级UI/UX技能
├── src/ # 源代码
└── scripts/ # 可执行脚本
项目级工作流目录:
code复制项目根目录/
└── .agent/
└── workflows/
├── ui-ux-pro-max.md # UI设计工作流
├── frontend-design.md # 前端开发工作流
└── list-skills.md # 技能查询工作流
提示:建议将
.agent/目录添加到.gitignore中,避免将工作流配置误提交到代码库。
3. 环境搭建与技能安装
3.1 基础环境准备
在开始安装技能前,需要确保系统环境满足以下要求:
- 操作系统:支持Linux/macOS(Windows需使用WSL)
- Python版本:3.8+
- Git:用于克隆技能库
- 目录权限:确保对
~/.gemini目录有读写权限
创建基础目录结构的命令:
bash复制mkdir -p ~/.gemini/antigravity/skills
cd ~/.gemini/antigravity/skills
3.2 安装基础技能库
官方基础技能库包含了开发中最常用的能力集合:
bash复制git clone https://github.com/anthropics/skills.git
安装完成后,你应该能在~/.gemini/antigravity/skills/skills/目录下看到多个子目录,每个子目录对应一个特定的技能模块。
3.3 安装高级UI/UX技能
对于需要专业设计支持的项目,我推荐安装UI-UX-Pro-Max技能库:
bash复制git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
这个技能库特别适合:
- 需要高水平视觉设计的项目
- 缺乏专业UI/UX团队的小型开发组
- 想要突破"AI生成式审美"局限的开发者
安装后,你可以在~/.gemini/antigravity/skills/ui-ux-pro-max-skill/目录中找到各种设计工具和模板。
4. 项目级工作流配置
4.1 UI/UX设计工作流
在项目根目录下创建.agent/workflows/ui-ux-pro-max.md文件:
markdown复制---
description: 使用UI UX Pro Max技能生成专业设计系统
---
# UI UX Pro Max工作流
## 1. 需求分析
- **用户查询**:明确用户要构建的内容(如"SaaS登录页"、"加密仪表盘")
- **技术栈**:确定使用的框架(默认为Vue或HTML+Tailwind)
## 2. 生成设计系统
```bash
python3 ~/.gemini/antigravity/skills/ui-ux-pro-max-skill/src/ui-ux-pro-max/scripts/search.py "[用户查询]" --design-system --format markdown --stack vue
3. 应用设计
- 阅读脚本输出的设计指南
- 根据生成的配色、排版和模式实现需求
- 特别注意"反模式"部分,避免常见AI设计陷阱
code复制
### 4.2 前端开发工作流
创建`.agent/workflows/frontend-design.md`文件:
```markdown
---
description: 应用前端设计技能创建独特界面
---
# 前端设计工作流
## 1. 设计风格选择
- **美学风格**:选择鲜明风格(如粗野主义、玻璃拟态、新粗野主义、极简奢华)
- **差异化**:确定设计的记忆点
- **约束**:考虑技术限制(如Vue/VitePress)
## 2. 设计实施要点
- **排版**:使用独特字重和字距
- **色彩**:采用大胆而协调的调色板
- **动效**:
- 状态变化使用平滑过渡
- 添加入场动画
- 实现微交互效果
- **细节**:
- 添加纹理效果
- 考虑自定义光标或滚动条
- 应用玻璃拟态效果
4.3 技能查询工作流
创建.agent/workflows/list-skills.md文件:
markdown复制---
description: 列出全局工作区中所有可用技能
---
# 可用技能列表
## 1. 查询全局技能
```bash
ls ~/.gemini/antigravity/skills/skills/skills
2. 显示技能详情
- 显示每个技能的简要描述
- 可通过读取各技能目录中的SKILL.md获取更多信息
code复制
## 5. 实战应用场景
### 5.1 设计高端落地页
**指令示例**:
/ui-ux-pro-max 为我的SaaS产品设计科技感强的落地页
code复制
**系统行为**:
1. 解析用户需求
2. 调用UI-UX-Pro-Max技能生成设计系统
- 配色方案(如深空蓝+霓虹绿)
- 字体组合(如Inter + JetBrains Mono)
- 布局建议
3. 根据设计指南自动生成Vue/React代码
**效果对比**:
| 传统方式 | 本系统方式 |
|---------|------------|
| 需要手动设计 | 自动生成专业设计方案 |
| 代码与设计分离 | 设计与代码紧密关联 |
| 难以保持一致风格 | 确保设计系统性 |
### 5.2 日常开发辅助
**指令示例**:
使用frontend-design技能优化这个按钮的交互
code复制
**系统响应**:
1. 避免简单的:hover效果
2. 建议添加:
- 缩放动画:`transform: scale(1.05)`
- 光影流动效果
- 磁吸交互效果
3. 确保符合"Pro Max"设计标准
### 5.3 技能管理
**指令示例**:
/list-skills
code复制
**系统响应**:
1. 扫描全局技能目录
2. 列出所有可用技能
3. 显示每个技能的简要描述
## 6. 开发经验与技巧
### 6.1 性能[优化实践](https://taotoken.net?utm_source=ai)
在使用AI辅助开发过程中,我总结了以下性能优化技巧:
1. **技能懒加载**:
- 不是所有技能都需要常驻内存
- 按需加载技能模块
- 使用后及时释放资源
2. **缓存策略**:
- 对频繁使用的设计模式建立缓存
- 缓存有效期设置为24小时
- 避免缓存过期导致的设计不一致
3. **并行处理**:
- 多个独立技能可以并行执行
- 使用Python的multiprocessing模块
- 注意控制并发数量
### 6.2 设计一致性维护
保持多页面设计一致性是挑战,我的解决方案是:
1. **设计令牌系统**:
- 在项目根目录创建`design-tokens.json`
- 包含颜色、间距、字体等设计参数
- 所有技能都引用同一套令牌
2. **版本控制**:
- 对全局技能库使用语义化版本
- 项目工作流中指定技能版本
- 避免自动更新导致的设计断裂
3. **差异检测**:
- 定期运行设计一致性检查
- 使用像素级对比工具
- 建立设计差异报告机制
### 6.3 错误处理与调试
在系统开发过程中,我遇到了以下典型问题及解决方案:
**问题1**:技能路径解析错误
- **现象**:工作流无法找到对应的技能脚本
- **原因**:路径硬编码或环境差异
- **解决**:使用相对路径或环境变量
**问题2**:设计生成结果不符合预期
- **现象**:生成的UI与描述不符
- **原因**:自然语言描述模糊
- **解决**:提供更具体的描述和参考图
**问题3**:技能执行超时
- **现象**:复杂设计任务耗时过长
- **原因**:未设置合理的超时限制
- **解决**:添加超时机制和进度反馈
## 7. 系统扩展与定制
### 7.1 开发自定义技能
除了使用预设技能,还可以开发自己的技能:
1. **技能结构规范**:
my-custom-skill/
├── src/ # 源代码
├── scripts/ # 可执行脚本
├── SKILL.md # 技能说明文档
└── config.json # 技能配置
code复制
2. **开发流程**:
- 确定技能功能边界
- 实现核心逻辑
- 编写使用文档
- 测试并发布到全局技能库
3. **发布规范**:
- 使用语义化版本控制
- 提供清晰的变更日志
- 确保向后兼容性
### 7.2 工作流模板共享
优秀的工作流配置可以团队共享:
1. **模板库建设**:
- 建立团队内部的工作流模板库
- 按项目类型分类(如Web应用、移动端、Dashboard等)
- 提供搜索和版本管理功能
2. **质量评估标准**:
- 完整性:是否覆盖所有关键场景
- 可读性:文档是否清晰易懂
- 可维护性:是否易于更新扩展
3. **评审机制**:
- 新工作流需经过团队评审
- 定期回顾和优化现有工作流
- 建立贡献者认可机制
## 8. 项目总结与反思
经过这个项目的实践,我深刻体会到合理架构设计的重要性。将"能力"与"调用"分离的设计理念,不仅解决了代码复用问题,还大大提升了开发效率。
几个关键收获:
1. **标准化带来效率**:统一的工作流格式使团队协作更顺畅
2. **自动化释放创造力**:将重复性工作交给系统,开发者可以专注于创新
3. **可扩展性至关重要**:良好的架构设计应该预留扩展空间
在实际使用中,我也发现了一些可以改进的地方:
- 技能间的依赖管理需要加强
- 工作流版本控制机制可以更完善
- 需要更好的技能搜索和发现机制
这个系统仍在不断演进中,我计划接下来重点优化技能组合能力和跨技能协作机制,让AI辅助开发变得更加强大和智能。
