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

📌 为什么需要Skills?

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

实际案例对比:

没有Skill时:

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

使用frontend-design Skill后:

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

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

在Antigravity中安装Skills

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

bash 复制代码

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

方法二:直接下载

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

安装步骤

1. 解压下载的文件

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

bash 复制代码

~/.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将会:

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

生成效果

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

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

安装命令

bash 复制代码

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

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

使用方法

润色现有设计:

复制代码

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

从零开始设计:

复制代码

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

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

📌 为什么需要Skills?

在Antigravity中安装Skills

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

方法二:直接下载

安装步骤

查看可用的Skills

使用Skills生成代码

基础用法示例

生成效果

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

安装命令

使用方法

推荐一下我的书