- 核心概念
在 Antigravity 中,技能系统分为两层:
Skills (全局库):实际的代码、脚本和指南,存储在系统级目录(如 ~/.gemini/antigravity/skills)。它们是"能力"的本体。
Workflows (项目级):存储在项目根目录的 .agent/workflows 中。它们是"遥控器",定义了如何在当前项目中调用全局的 Skills。
这种分离设计确保了你的项目代码库保持轻量,同时又能复用强大的全局能力。
- 全局安装 Skills
2.1 准备目录
首先,确保全局 Skills 目录存在。Antigravity 通常使用以下路径:
mkdir -p ~/.gemini/antigravity/skills
cd ~/.gemini/antigravity/skills
2.2 安装 Anthropic 官方 Skills
这是基础技能库,包含前端设计、文档编写、测试等通用能力。
git clone https://github.com/anthropics/skills.git
此时目录结构应为 ~/.gemini/antigravity/skills/skills/...
2.3 安装 UI-UX-Pro-Max
这是进阶的前端设计技能,包含智能配色、排版和反模式检查。
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
此时目录结构应为 ~/.gemini/antigravity/skills/ui-ux-pro-max-skill/...
全部安装完成后,目录如下:
image
- 项目级配置 (Workflows)
要在某个项目中使用这些技能,你需要创建 Workflow 文件。建议将 .agent/ 添加到 .gitignore 中,以免污染代码库。
3.1 配置 UI-UX-Pro-Max
在项目根目录下创建 .agent/workflows/ui-ux-pro-max.md:
description: Generate a professional design system using UI UX Pro Max skill.
UI UX Pro Max Workflow
This workflow uses the globally installed `ui-ux-pro-max-skill` to generate a comprehensive design system and implementation guidelines.
1. Identify Requirements
-
**Query**: What is the user trying to build? (e.g., "SaaS landing page", "Crypto dashboard").
-
**Stack**: What is the tech stack? (Default: `vue` or `html-tailwind` based on project).
2. Generate Design System
-
Run the search script to generate the design system.
-
**Command**:
```bash
python3 /Users/weiz/.gemini/antigravity/skills/ui-ux-pro-max-skill/src/ui-ux-pro-max/scripts/search.py "[User Query]" --design-system --format markdown --stack vue
```
(Replace `[User Query]` with the actual request)
3. Apply Design
-
Read the output from the script.
-
Use the generated colors, typography, and patterns to implement the user's request.
-
**Critical**: Follow the "Anti-patterns" section to avoid generic AI mistakes.
3.2 配置通用 Skills (如 Frontend Design)
创建 .agent/workflows/frontend-design.md:
description: Apply the frontend-design skill to create distinctive interfaces.
Frontend Design Workflow
This workflow guides the creation of distinctive, production-grade frontend interfaces, avoiding generic "AI aesthetics".
1. Analyze Requirements
-
**Context**: Understand the user's request (component, page, app).
-
**Goal**: Identify the problem to solve and the target audience.
2. Adopt Design Persona
-
**Tone**: Choose a bold aesthetic (e.g., Brutalist, Glassmorphism, Neobrutalism, Minimalist Luxury).
-
**Differentiation**: What makes this design unforgettable?
-
**Constraint**: Respect technical constraints (Vue/VitePress in this project).
3. Aesthetic Guidelines (The "Pro Max" Standard)
-
**Typography**: Use distinctive font weights and tracking. Avoid generic system font stacks if possible, or style them uniquely.
-
**Color**: Use cohesive, bold palettes. High contrast or subtle sophisticated gradients.
-
**Motion**:
-
Use `transition-all duration-xxx` for smooth state changes.
-
Add entrance animations (e.g., `animate-fade-in`).
-
Micro-interactions on hover/active states.
-
**Composition**:
-
Use generous negative space.
-
Break the grid where appropriate.
-
Use depth (shadows, layers, blur).
-
**Details**:
-
Add texture (noise, gradients).
-
Custom cursors or scrollbars if appropriate.
-
Glassmorphism (`backdrop-blur`, `bg-opacity`).
4. Implementation Steps
-
**Scaffold**: Create the file structure.
-
**Style**: Apply Tailwind classes for the chosen aesthetic.
-
**Interact**: Add Vue logic for state and animations.
-
**Refine**: Review against the "Generic AI" trap. Is it too boring? Add more "juice".
5. Review Checklist
-
\] Is the typography distinct?
-
\] Is the layout responsive?
3.3 配置技能列表查询
创建 .agent/workflows/list-skills.md:
description: List all available agent skills installed in the global workspace.
List Available Skills (Global)
- **Check Global Skills Directory**:
- List directories in `/Users/weiz/.gemini/antigravity/skills/skills/skills`.
- **Display Skills**:
-
Show the list of available skills to the user.
-
Provide a brief description if possible (by reading `SKILL.md`).
// turbo 3. **Run Command**:
`bash ls /Users/weiz/.gemini/antigravity/skills/skills/skills`
- 如何在项目中使用
配置完成后,你可以通过 Slash Commands 或 自然语言 来调用这些能力。
场景 A:设计一个高大上的落地页
指令:
/ui-ux-pro-max 为我的 SaaS 产品设计一个落地页,风格要科技感强
Agent 行为:
Agent 会自动运行全局的 Python 脚本。
脚本分析需求,生成一套包含配色(如深空蓝+霓虹绿)、排版(如 Inter + JetBrains Mono)和布局建议的设计系统。
Agent 读取这些建议,并直接编写 Vue/React 代码实现页面。
场景 B:查看有哪些能力可用
指令:
/list-skills
Agent 行为:
列出所有已安装的全局技能包。
场景 C:日常开发辅助
指令:
使用 frontend-design skill 帮我优化这个按钮的交互
Agent 行为:
Agent 会参考 frontend-design 工作流中的"反平庸"指南。
它不会只写一个简单的 :hover,而是可能会添加 transform: scale(1.05)、光影流光效果或磁吸效果,确保符合"Pro Max"标准。
- 总结
通过这种 全局存储 + 本地引用 的方式,你可以:
节省空间:不需要在每个项目中重复下载几百 MB 的技能文件。
保持整洁:项目代码库中只有轻量级的 Workflow 配置文件。
能力复用:一次安装,所有项目受益。婆钢和锤