为什么需要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
方法二:直接下载
访问 github.com/anthropics/… 下载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将会:
- 调用frontend-design专业知识
- 应用现代设计原则
- 生成高质量HTML代码
- 包含响应式布局和优雅动效
生成效果
进阶:安装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编程的书。
