Antigravity 新增 Skills 支持,前端 UI 开发效率飙升


就在前几天,Antigravity 也更新支持 Skills

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

Skills 是一个用于扩展 AI Agent 能力的开放标准。每个 Skill 是一个包含 SKILL.md 文件的文件夹,里面有 Agent 在执行特定任务时可以遵循的指令。

更新完以后会在 ~/.gemini/antigravity 目录下多了一个 skills 目录,这里是一个全局的配置

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

Antigravity 支持两种配置方式:

  • 工作目录 workspace-root/.agent/skills/[skill-folder]/
  • 全局 ~/.gemini/antigravity/skills/[skill-folder]/

在"业界"使用 Gemini 模型来开发前端页面已经算是大家公认的,所以配合一些强大的 UI 设计类型的 Skill ,那么效果是不是就该炸裂了哈

ui-ux-pro-max

这是一个当前作为前端页面开发很火的 Skill,配合 Gemini 3 pro 模型做 UI 页面开发应该是如虎添翼。

它包括 57 种 UI 风格、95 种配色方案、56 种字体搭配和 98 条 UX 指南等等。

仓库地址 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

仓库中提供了不同开发工具的技能目录,如图所示

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

按照上面的说明文档,Antigravity 使用的是 .agent/workflows/ui-ux-pro-max.md + .shared/ui-ux-pro-max/

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

那么我们把项目克隆下来后,将上面的两个目录相关的文件放到项目的 .agent/skills/ui-ux-pro-max,如下图所示

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

我们大概看一下这个 md 文件内容,里面就是一些技能描述和提示词指令,而且也能够看到里面有一些 python 的脚本代码,所以使用这个 skill 需要提前安装 Python 环境

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

接下来,我们就可以通过提示词的方式,来调用这个 skill 来进行页面代码开发,例如让它开发一个产品官网,而且可以通过提示词的方式强制让大模型使用某个技能。

帮我设计一个玩具产品官网,风格要现代简洁。请使用 ui-ux-pro-max 技能,并使用 html 代码编写。

在思考的过程中可以看到,它会遵从指定,使用 ui-ux-pro-max 并查看里面的内容。

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

而且还能够看到请求执行 python 脚本

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

然后就可以看到生成了执行计划,确认了整个网站的配色方案等

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

最终生成了两个页面,一个是主页,一个是产品页,个人感觉配色方面还蛮符合玩具这种主题的。

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

图片使用的是 unsplash 平台的开放数据,所以有些可能就没有展示出来

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升
Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

对比

那么我们比较一下不使用 skill 的话,用相同的提示词来看看实际效果。

它这边并没有完整的配色方案,只是给了一个笼统的方案

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

强如 Gemini,它居然用大香蕉帮我画产品展示图!

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

做出来的页面个人感觉还蛮符合现代简洁设计的

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

这些图也是直接大香蕉画出来的!

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

其他的前端开发 skill

在前端UI开发中,除了上面介绍的 ui-ux-pro-maxAnthropics 官方也有一个叫 frontend-design 的 skill

仓库地址 https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

如果是想做 seo 相关优化的话,可以试试 seo-review

仓库地址 https://github.com/leonardomso/33-js-concepts/tree/master/.opencode/skill/seo-review

如果想找其他的 Skills,可以到 skillsmp 找找

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

创建自己的 skill

如果找不到合适的话,也可以自己写一个,Anthropics 有一个 skill 叫 skill-creator,顾名思义就是用 skill 创建 skill

仓库地址 https://github.com/anthropics/skills/tree/main/skills/skill-creator

由于 Google Antigravity IDE 已原生支持 Agent Skills 标准,所以通过 Claude 创建的 skill,也能够放到 Antigravity 中来使用。

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

我们只需要将这个 skill-creator 放入到 ~/.claude/skills/ 目录内,然后打开 Claude,并输入指令 /skill-creator,以下为 VSCode 的 Claude Code插件来演示

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

以下就以示例如何创建一个 sql 美化 的技能为示例

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

然后它会提示要你输入一些与这个技能相关的一些问题

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

接下来就相应的填入内容,有些内容不太知道该如何描述清楚也没关系,大模型也会帮助你做细化

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

像最后的使用示例标签中,如果你没有什么想法,也可以选择继续跟模型讨论出建议

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

这里也会继续问你关于这个技能的使用场景

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

然后我基本上是直接用它的列举的内容

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

它就会根据你的需求,罗列出这个技能相关的资源内容

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

最后它就开始执行这个 skill 的初始化

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

生成好了以后,它就会在当前目录下,生成对应的技能目录,还有一个打包后的 .skill 文件

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

那么我们就可以将技能目录,复制到 Antigravity 项目中来使用

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

然后我们给它一段不规范书写的 sql 语句

ounter(lineounter(lineounter(lineounter(lineounter(lineSELECT u.id,u.name as userName, (SELECT COUNT(*) FROM orders o WHERE o.user_id = u.id AND o.status IN ('paid','shipped')) AS totalOrders,(SELECT MAX(created_at)FROM orders WHERE user_id=u.id)AS lastOrderDateFROM users uWHERE u.created_at > '2020-01-01' AND u.id NOT IN (SELECT user_id FROM bans WHERE reason LIKE '%spam%')ORDER BY totalOrders DESC , lastOrderDate ASC;

由于提示词已经强制让它使用 sql-beautify 这个技能,所以它能够检索出来并使用里面的相关规范内容

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

最终的输出

Antigravity 新增 Skills 支持,前端 UI 开发效率飙升

有兴趣的话,也可以根据自己场景,写出相关的 skill 技能来使用


RAG技术前沿技术新闻资讯

使用FastGPT实现本地焊接知识库“带图”回答

2026-5-4 11:51:10

Agent智能体coze新闻资讯

我们又发了一篇 Coze 本地部署教程,但这次,你只需动动嘴

2026-5-4 11:55:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
搜索