一个插件要你的 Antigravity 有审美的能力!!

日期：2024-03-01 00:00 / 作者：网络

点击上方公众号关注我✅

大家好，我是程序员太阳鸟，主要介绍副业和AI 合集，在这里整理了一份开源的 AI 学习资料。

作为一名全栈开发者，我们往往面临一个尴尬的境地：后端代码写得行云流水，前端页面却设计得“惨不忍睹”。

即使我们熟练掌握 CSS 语法，懂得 Flexbox 和 Grid 布局，但缺乏设计直觉（Design Intuition）让我们很难选对颜色、拿捏好间距。

*近在 GitHub 上发现了一个名为 UI/UX Pro Max 的开源项目，它不仅仅是一个代码库，更是一套赋予 AI 编程助手（如 Cursor, Antigravity, Windsurf）“设计智能” 的技能包。

今天就来实战分享一下，如何用它让 AI 一键画出专业级的 UI。

什么是 UI/UX Pro Max？

简单来说，它是一个设计知识库 + AI 工作流。它并没有提供现成的 UI 组件库（如 AntD 或 MUI），而是教会 AI “如何像设计师一样思考”。

它内置了：

• 57 种 UI 风格：从极简主义 (Minimalism) 到玻璃拟态 (Glassmorphism)，甚至新拟态 (Neumorphism)。
• 95 套配色方案：针对 SaaS、电商、医疗等不同行业的专业配色。
• UX *佳实践：包含无障碍设计 (A11y)、交互反馈等规则。

安装：赋予 Agent 设计能力

这个工具*酷的地方在于，它是以 Skill（技能） 的形式存在的。以我使用的 Antigravity (Google Deepmind’s Agent) 为例，安装过程非常 Hacker：

1. Clone 仓库：将项目克隆到本地。
2. 植入工作流：将 .agent/workflows/ui-ux-pro-max.md 放入项目配置中。
3. 注入知识：将 .shared/ui-ux-pro-max/ 目录复制到共享空间。

一旦安装完成，你的 AI Assistant 就不仅仅是一个 Coder，更是一个 Designer。它能听懂 /ui-ux-pro-max 这样的指令。

实战：重构“关于”页面

为了测试效果，我拿自己博客的 about.styl（关于页面样式）做了个实验。

1. 原始状态 (Before)

我的旧页面充满了 2015 年代的审美：

• Heavy Gradients：使用了深紫色的线性渐变背景，略显沉重。
• Drop Shadows：卡片阴影过深，显得很“脏”。
• Icons：使用了简单的 Unicode 字符（如 ✓）。

2. 下达指令

我直接在编辑器中对 AI 下达指令：

/ui-ux-pro-max 优化 about 页面，使用极简风格 (Minimalist Style)

3. AI 的设计思考

安装了 UI/UX Pro Max 后，AI 并没有直接开始写代码，而是先检索设计库：

• Searching Style: “Minimalist” -> 关键词：Whitespace, Slate Colors, Subtle Borders.
• Searching Rules: 检查对比度、呼吸感间距。

4. 优化结果 (After)

AI 迅速重写了样式代码，带来的变化令人惊叹：

• 色彩升级：移除了渐变，改用 Slate (板岩灰) 色阶 (#0f172a, #475569)，这是 Tailwind CSS 中备受推崇的高级灰，看起来非常 Premium。
• 呼吸感排版：

• line-height 从 1.8 提升到 1.9。
• Padding 大幅增加，留白即是奢华。

• 极简细节：

• 原本的 border-bottom 被移除。
• 原本的 box-shadow 被替换为极细的边框 (border: 1px solid #e2e8f0)，这种 “Flat but Deep” 的效果是现代 SaaS 产品的标配。
• 列表符号从 ✓ 变成了更有设计感的 — (Em dash)。

代码对比片段

// Before: 沉重、过时.about-headerbackground: linear-gradient(135deg, #667eea0%, #764ba2100%)text-shadow: 02px4pxrgba(0, 0, 0, 0.1)// After: 清爽、现代.about-headerbackground: transparentcolor: #1e293b // Slate-900 Slate灰letter-spacing: -0.02em // 微调字间距提升质感

总结

UI/UX Pro Max 的核心价值在于填补了“逻辑”与“审美”之间的鸿沟。

以前我们让 AI 写页面，它只能写出“对的”代码；现在有了这套 Skill，它能写出“美的”设计。对于独立开发者来说，这意味着你可以节省寻找设计灵感的时间，直接用自然语言生成符合行业标准的界面。

如果你也是一名追求极致体验的开发者，强烈建议在你的 AI 助手（Cursor/Windsurf/Antigravity）中安装这个 Skill。

AI 时代到来，要个体的能力加强，在自媒体时代下用 AI + 副业要这一切变得。在当下*好发展一份属于自己的副业 AI + 智能体的模式要副业变得更加简单，智能体从生活到工作都将慢慢的融入。如果你想了解智能体那么可以加我微信聊一聊。

太阳鸟

98年在职成长型博主

【添加太阳鸟微信送你一份惊喜副业大礼包+技术交流群】