Antigravity Skills 全局安装与配置指南

本文将指导你如何为 Antigravity 编辑器安装全局 Skills（技能），特别是强大的 ui-ux-pro-max 设计系统，并演示如何在具体项目中调用它们。
1. 核心概念

在 Antigravity 中，技能系统分为两层：

• Skills (全局库)：实际的代码、脚本和指南，存储在系统级目录（如 ~/.gemini/antigravity/skills）。它们是“能力”的本体。
  
• Workflows (项目级)：存储在项目根目录的 .agent/workflows 中。它们是“遥控器”，定义了如何在当前项目中调用全局的 Skills。
  

这种分离设计确保了你的项目代码库保持轻量，同时又能复用强大的全局能力。
2. 全局安装 Skills

2.1 准备目录

首先，确保全局 Skills 目录存在。Antigravity 通常使用以下路径：

1. mkdir -p ~/.gemini/antigravity/skills
2. cd ~/.gemini/antigravity/skills

复制代码

2.2 安装 Anthropic 官方 Skills

这是基础技能库，包含前端设计、文档编写、测试等通用能力。

1. git clone https://github.com/anthropics/skills.git
2. # 此时目录结构应为 ~/.gemini/antigravity/skills/skills/...

复制代码

2.3 安装 UI-UX-Pro-Max

这是进阶的前端设计技能，包含智能配色、排版和反模式检查。

1. git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
2. # 此时目录结构应为 ~/.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：

1. ---
2. description: Generate a professional design system using UI UX Pro Max skill.
3. ---
5. # UI UX Pro Max Workflow
7. This workflow uses the globally installed `ui-ux-pro-max-skill` to generate a comprehensive design system and implementation guidelines.
9. ## 1. Identify Requirements
11. - **Query**: What is the user trying to build? (e.g., "SaaS landing page", "Crypto dashboard").
12. - **Stack**: What is the tech stack? (Default: `vue` or `html-tailwind` based on project).
14. ## 2. Generate Design System
16. - Run the search script to generate the design system.
17. - **Command**:
18.   ```bash
19.   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
20.   ```
21.   _(Replace `[User Query]` with the actual request)_
23. ## 3. Apply Design
25. - Read the output from the script.
26. - Use the generated colors, typography, and patterns to implement the user's request.
27. - **Critical**: Follow the "Anti-patterns" section to avoid generic AI mistakes.

复制代码

3.2 配置通用 Skills (如 Frontend Design)

创建 .agent/workflows/frontend-design.md：

1. ---
2. description: Apply the frontend-design skill to create distinctive interfaces.
3. ---
5. # Frontend Design Workflow
7. This workflow guides the creation of distinctive, production-grade frontend interfaces, avoiding generic "AI aesthetics".
9. ## 1. Analyze Requirements
11. - **Context**: Understand the user's request (component, page, app).
12. - **Goal**: Identify the problem to solve and the target audience.
14. ## 2. Adopt Design Persona
16. - **Tone**: Choose a bold aesthetic (e.g., Brutalist, Glassmorphism, Neobrutalism, Minimalist Luxury).
17. - **Differentiation**: What makes this design unforgettable?
18. - **Constraint**: Respect technical constraints (Vue/VitePress in this project).
20. ## 3. Aesthetic Guidelines (The "Pro Max" Standard)
22. - **Typography**: Use distinctive font weights and tracking. Avoid generic system font stacks if possible, or style them uniquely.
23. - **Color**: Use cohesive, bold palettes. High contrast or subtle sophisticated gradients.
24. - **Motion**:
25.   - Use `transition-all duration-xxx` for smooth state changes.
26.   - Add entrance animations (e.g., `animate-fade-in`).
27.   - Micro-interactions on hover/active states.
28. - **Composition**:
29.   - Use generous negative space.
30.   - Break the grid where appropriate.
31.   - Use depth (shadows, layers, blur).
32. - **Details**:
33.   - Add texture (noise, gradients).
34.   - Custom cursors or scrollbars if appropriate.
35.   - Glassmorphism (`backdrop-blur`, `bg-opacity`).
37. ## 4. Implementation Steps
39. 1.  **Scaffold**: Create the file structure.
40. 2.  **Style**: Apply Tailwind classes for the chosen aesthetic.
41. 3.  **Interact**: Add Vue logic for state and animations.
42. 4.  **Refine**: Review against the "Generic AI" trap. Is it too boring? Add more "juice".
44. ## 5. Review Checklist
46. - [ ] Is the typography distinct?
47. - [ ] Are there micro-interactions?
48. - [ ] Is the layout responsive?
49. - [ ] Does it feel "Premium"?

复制代码

3.3 配置技能列表查询

创建 .agent/workflows/list-skills.md：

1. ---
2. description: List all available agent skills installed in the global workspace.
3. ---
5. # List Available Skills (Global)
7. 1.  **Check Global Skills Directory**:
8.     - List directories in `/Users/weiz/.gemini/antigravity/skills/skills/skills`.
9. 2.  **Display Skills**:
10.     - Show the list of available skills to the user.
11.     - Provide a brief description if possible (by reading `SKILL.md`).
13. // turbo 3. **Run Command**:
14. `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 配置文件。
  
• 能力复用：一次安装，所有项目受益。
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

这个好，看起来很实用

过来提前占个楼

热心回复！