Creating-Oneshot-Hero-Landing-Pages README

The project's README from github.com/nroadley/Creating-Oneshot-Hero-Landing-Pages. As one markdown file: README.md.

Creating Oneshot Hero Landing Pages

An Antigravity (AGY) skill to plan, design, and build video-driven parallax hero landing pages using video scrubbing.


📋 Prerequisites

  1. Antigravity (AGY) (Recommended): Works out of the box with Antigravity. Can also run in other agent environments with minor adaptations.
  2. Gemini API Key: Required for Omni video generation. Get a key at Google AI Studio.
    export GEMINI_API_KEY="your-gemini-api-key"
    

⚡ Quickstart

1. Install or Reference the Skill


2. Prompt Your Agent

Once installed, you can invoke the skill via its slash command or by asking naturally:


🛠️ How It Works

  1. Reference Images: Generates reference images using Nano Banana (gemini-3.1-flash-image).
  2. Video Generation: Calls gemini-omni-flash-preview to generate 10s 16:9 .mp4 video assets in ./assets/.
  3. Frontend Implementation: Builds a 400vh sticky video-scrubbing layout (index.html) with progress-locked typography and clean design rules (no unnecessary icons, fake tickers, or toy widgets).
  4. Local Preview: Launches a local preview server so you can test the live page immediately.

📄 Licensing & Disclaimer

This project is licensed under the MIT License.

Distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

Disclaimer: This is not an official Google product.


Built with Antigravity and Gemini 3.7 Flash.

Creating-Oneshot-Hero-Landing-Pages (nroadley/Creating-Oneshot-Hero-Landing-Pages)

Searching Database…

这是什么?它是一个 Antigravity(AGY)智能体技能,只要一个提示词,就能规划、设计并构建由视频驱动的视差 hero 落地页,使用 Gemini 的视频和图像生成模型。
这是独立应用,还是加到智能体上的东西?它是为 Antigravity 智能体制作的技能定义;稍作适配也能在其他智能体环境里运行,但它不是独立应用。
怎么安装和使用这个技能?把它安装到全局或当前工作区,或者完全跳过安装,让智能体直接从聊天里的 URL 读取仓库;然后用它的斜杠命令,或用一段描述你想要页面的自然语言提示来调用。
需要 Gemini API 密钥吗?需要,Omni 视频生成步骤要用 Gemini API 密钥,可以从 Google AI Studio 获取。
除了技能本身,生成页面还有别的花销吗?有,每次构建都会调用付费的 Gemini 模型(gemini-omni-flash-preview 生成 10 秒视频,Nano Banana 生成参考图),所以使用它会消耗你自己的 Gemini API 额度。
这个技能实际上是怎么构建落地页的?它先用 Nano Banana(gemini-3.1-flash-image)生成参考图,再用 gemini-omni-flash-preview 生成一段 10 秒的 16:9 视频,然后组装出一个 400vh 的粘性视频拖动式 index.html(文字排版随进度锁定),最后启动本地预览服务器。
这是 Google 官方产品吗?不是,README 明确说明它不是 Google 官方产品,尽管它用了 Gemini 和 Nano Banana 模型。
它会避免什么样的设计?它执行简洁的设计规则,跳过多余的图标、虚假的滚动数字和玩具式小部件,让页面保持极简、内容优先。
能在 Antigravity 之外使用它吗?可以,稍作适配它就能在其他智能体环境里运行,不过它主要是为 Antigravity 构建和测试的。
Creator
nroadley
Size
<0.1 MB
Stars
134
Updated
CommitAug 14
Age
2mo
Commits · 90 Days