Antigravity AI编程工具添加和使用Skill完整教程

📌 为什么需要Skills?

在AI辅助编程中,Skills就像是给AI配备的"专业工具包"。

实际案例对比:

没有Skill时:

• AI生成的前端页面千篇一律
• 设计平庸,缺乏专业感
• 代码质量参差不齐

使用frontend-design Skill后:

• 遵循现代设计规范
• 视觉效果专业精美
• 用户体验显著提升

我长期使用Antigravity进行AI编程,本教程将详细介绍Antigravity中Skills的安装和使用方法。其他工具(Claude Code/Cursor/Trae)的操作流程基本相同。

---

在Antigravity中安装Skills

方法一:使用Git克隆(推荐)

# 克隆Anthropic官方Skills仓库
git clone https://github.com/anthropics/skills.git

方法二:直接下载

访问 https://github.com/anthropics/skills 下载ZIP压缩包（针对不懂编程的）

安装步骤

1. 解压下载的文件

2. 将Skills文件夹复制到指定目录:

~/.gemini/antigravity/skills/<skill-folder>/

我使用的Windows系统，存放目录是 C:\Users\Administrator.gemini\antigravity\skills

目录结构示例:

~/.gemini/antigravity/skills/
├── frontend-design/
├── backend-api/
├── database-design/
└── ...

---

查看可用的Skills

安装完成后,在Antigravity中可以查看所有已安装的Skills列表:

常用Skills包括:

• frontend-design - 前端设计专家
• backend-api - 后端API开发
• database-design - 数据库设计
• testing - 测试用例生成
• documentation - 文档编写

---

使用Skills生成代码

基础用法示例

在Antigravity命令行中输入:

创建一个导航站的落地页HTML,使用 frontend-design skill

AI将会:

1. 调用frontend-design专业知识
2. 应用现代设计原则
3. 生成高质量HTML代码
4. 包含响应式布局和优雅动效

生成效果

---

进阶:安装ui-ux-pro-max-skill

这是一个增强版UI/UX设计Skill,提供更专业的设计能力。

安装命令

# 全局安装CLI工具
npm install -g uipro-cli

# 初始化并配置到Antigravity
uipro init --ai antigravity

使用方法

润色现有设计:

/ui-ux-pro-max-skill 对当前html页面进行UI/UX优化

从零开始设计:

/ui-ux-pro-max-skill 创建一个现代化的产品展示页面

推荐一下我的书

《人人都是AI产品经理》，一本专门讲AI编程的书。