Antigravity Skills 全局安装与配置指南
<p>本文将指导你如何为 Antigravity 编辑器安装全局 Skills（技能），特别是强大的 <code>ui-ux-pro-max</code> 设计系统，并演示如何在具体项目中调用它们。</p><h2 id="1-核心概念">1. 核心概念</h2>
<p>在 Antigravity 中，技能系统分为两层：</p>
<ul>
<li><strong>Skills (全局库)</strong>：实际的代码、脚本和指南，存储在系统级目录（如 <code>~/.gemini/antigravity/skills</code>）。它们是“能力”的本体。</li>
<li><strong>Workflows (项目级)</strong>：存储在项目根目录的 <code>.agent/workflows</code> 中。它们是“遥控器”，定义了如何在当前项目中调用全局的 Skills。</li>
</ul>
<p>这种分离设计确保了你的项目代码库保持轻量，同时又能复用强大的全局能力。</p>
<h2 id="2-全局安装-skills">2. 全局安装 Skills</h2>
<h3 id="21-准备目录">2.1 准备目录</h3>
<p>首先，确保全局 Skills 目录存在。Antigravity 通常使用以下路径：</p>
<pre><code class="language-bash">mkdir -p ~/.gemini/antigravity/skills
cd ~/.gemini/antigravity/skills
</code></pre>
<h3 id="22-安装-anthropic-官方-skills">2.2 安装 Anthropic 官方 Skills</h3>
<p>这是基础技能库，包含前端设计、文档编写、测试等通用能力。</p>
<pre><code class="language-bash">git clone https://github.com/anthropics/skills.git
# 此时目录结构应为 ~/.gemini/antigravity/skills/skills/...
</code></pre>
<h3 id="23-安装-ui-ux-pro-max">2.3 安装 UI-UX-Pro-Max</h3>
<p>这是进阶的前端设计技能，包含智能配色、排版和反模式检查。</p>
<pre><code class="language-bash">git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
# 此时目录结构应为 ~/.gemini/antigravity/skills/ui-ux-pro-max-skill/...
</code></pre>
<p>全部安装完成后，目录如下：</p>
<p><img src="https://img2024.cnblogs.com/blog/1086129/202601/1086129-20260127214147744-58534117.png" alt="image" loading="lazy"></p>
<h2 id="3-项目级配置-workflows">3. 项目级配置 (Workflows)</h2>
<p>要在某个项目中使用这些技能，你需要创建 <strong>Workflow</strong> 文件。建议将 <code>.agent/</code> 添加到 <code>.gitignore</code> 中，以免污染代码库。</p>
<h3 id="31-配置-ui-ux-pro-max">3.1 配置 UI-UX-Pro-Max</h3>
<p>在项目根目录下创建 <code>.agent/workflows/ui-ux-pro-max.md</code>：</p>
<pre><code class="language-markdown">---
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 "" --design-system --format markdown --stack vue
```
_(Replace `` 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.
</code></pre>
<h3 id="32-配置通用-skills-如-frontend-design">3.2 配置通用 Skills (如 Frontend Design)</h3>
<p>创建 <code>.agent/workflows/frontend-design.md</code>：</p>
<pre><code class="language-markdown">---
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"?
</code></pre>
<h3 id="33-配置技能列表查询">3.3 配置技能列表查询</h3>
<p>创建 <code>.agent/workflows/list-skills.md</code>：</p>
<pre><code class="language-markdown">---
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`
</code></pre>
<h2 id="4-如何在项目中使用">4. 如何在项目中使用</h2>
<p>配置完成后，你可以通过 <strong>Slash Commands</strong> 或 <strong>自然语言</strong> 来调用这些能力。</p>
<h3 id="场景-a设计一个高大上的落地页">场景 A：设计一个高大上的落地页</h3>
<p><strong>指令</strong>：</p>
<blockquote>
<p><code>/ui-ux-pro-max 为我的 SaaS 产品设计一个落地页，风格要科技感强</code></p>
</blockquote>
<p><strong>Agent 行为</strong>：</p>
<ol>
<li>Agent 会自动运行全局的 Python 脚本。</li>
<li>脚本分析需求，生成一套包含配色（如深空蓝+霓虹绿）、排版（如 Inter + JetBrains Mono）和布局建议的设计系统。</li>
<li>Agent 读取这些建议，并直接编写 Vue/React 代码实现页面。</li>
</ol>
<h3 id="场景-b查看有哪些能力可用">场景 B：查看有哪些能力可用</h3>
<p><strong>指令</strong>：</p>
<blockquote>
<p><code>/list-skills</code></p>
</blockquote>
<p><strong>Agent 行为</strong>：</p>
<ol>
<li>列出所有已安装的全局技能包。</li>
</ol>
<h3 id="场景-c日常开发辅助">场景 C：日常开发辅助</h3>
<p><strong>指令</strong>：</p>
<blockquote>
<p><code>使用 frontend-design skill 帮我优化这个按钮的交互</code></p>
</blockquote>
<p><strong>Agent 行为</strong>：</p>
<ol>
<li>Agent 会参考 <code>frontend-design</code> 工作流中的“反平庸”指南。</li>
<li>它不会只写一个简单的 <code>:hover</code>，而是可能会添加 <code>transform: scale(1.05)</code>、光影流光效果或磁吸效果，确保符合“Pro Max”标准。</li>
</ol>
<h2 id="5-总结">5. 总结</h2>
<p>通过这种 <strong>全局存储 + 本地引用</strong> 的方式，你可以：</p>
<ol>
<li><strong>节省空间</strong>：不需要在每个项目中重复下载几百 MB 的技能文件。</li>
<li><strong>保持整洁</strong>：项目代码库中只有轻量级的 Workflow 配置文件。</li>
<li><strong>能力复用</strong>：一次安装，所有项目受益。</li>
</ol>
</div>
<div id="MySignature" role="contentinfo">
<div id="copyrightWeizwz">
<p><span class="post-copyright-meta">文章作者：</span><span class="post-copyright-info">唯知为之</span></p>
<p><span class="post-copyright-meta">文章出处：</span><span class="post-copyright-info">https://www.cnblogs.com/weizwz/p/19540736</span></p>
<p><span class="post-copyright-meta">版权声明：</span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 「CC BY-NC-SA 4.0 DEED」 国际许可协议，转载请注明出处！</span></p>
<p>内容粗浅，如有错误，欢迎大佬批评指正</p>
</div><br><br>
来源：https://www.cnblogs.com/weizwz/p/19540736
頁:
[1]