本文將指導你如何為 Antigravity 編輯器安裝全局 Skills（技能），特別是強大的 ui-ux-pro-max 設計系統，並演示如何在具體項目中調用它們。
1. 核心概念
在 Antigravity 中，技能系統分為兩層：
- Skills (全局庫)：實際的代碼、腳本和指南，存儲在系統級目錄（如
~/.gemini/antigravity/skills）。它們是“能力”的本體。 - Workflows (項目級)：存儲在項目根目錄的
.agent/workflows中。它們是“遙控器”，定義瞭如何在當前項目中調用全局的 Skills。
這種分離設計確保了你的項目代碼庫保持輕量，同時又能複用強大的全局能力。
2. 全局安裝 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/...
全部安裝完成後，目錄如下：
3. 項目級配置 (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
1. **Scaffold**: Create the file structure.
2. **Style**: Apply Tailwind classes for the chosen aesthetic.
3. **Interact**: Add Vue logic for state and animations.
4. **Refine**: Review against the "Generic AI" trap. Is it too boring? Add more "juice".
## 5. Review Checklist
- [ ] Is the typography distinct?
- [ ] Are there micro-interactions?
- [ ] Is the layout responsive?
- [ ] Does it feel "Premium"?
3.3 配置技能列表查詢
創建 .agent/workflows/list-skills.md：
---
description: List all available agent skills installed in the global workspace.
---
# List Available Skills (Global)
1. **Check Global Skills Directory**:
- List directories in `/Users/weiz/.gemini/antigravity/skills/skills/skills`.
2. **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`
4. 如何在項目中使用
配置完成後，你可以通過 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”標準。
5. 總結
通過這種 全局存儲 + 本地引用 的方式，你可以：
- 節省空間：不需要在每個項目中重複下載幾百 MB 的技能文件。
- 保持整潔：項目代碼庫中只有輕量級的 Workflow 配置文件。
- 能力複用：一次安裝，所有項目受益。
