GoodCase.aiAI 动态 · Radar↗图谱 · AI Map↗课程 · LearnPrompt↗
出品GoodCase.aiAI News Radar ↗AI Map ↗LearnPrompt ↗
GoodCase.aiGoodCase.aiAI提示语案例合集
GoodCase.ai
排行榜案例Skills收藏投稿早报加入我们
中文EN
Agent 接入 →

出品

AI 动态 · Radar ↗图谱 · AI Map ↗课程 · LearnPrompt ↗
GoodCase.aiGoodCase.aiAI提示语案例合集
排行榜案例Skills收藏投稿早报加入我们
中文EN
Agent 接入 →

加载中…

GoodCase.ai · AI提示语案例合集
DSH 插件榜更新日志反馈
模型创作者Seedance 2.5Seedance 2.0GPT Image 2GeminiNano Banana ProClaudeClaude Opus 5.5Grok ImagineVeoKling 可灵Qwen ImageGPT Image 1.5MiniMax H3

AntiGravity + Gemini 3.1 落地页

创作者 · viktoroddy

AI 编程(UI)X收录 2026/07/28已有人复测#web#human-reviewed
更多标签 (4)
#web-ui#motion-3dAntiGravity · Gemini 3.1 ProGPT-5.6 Sol
查看原始来源 ↗
原帖 ♥ 1.9k

Prompt

复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。

提示词:

构建一个 Hero 区域,具体规格如下:

整体布局:

全宽版块,背景色 #000000(纯黑)
overflow hidden
所有内容背后播放背景视频(详情见下)

背景视频:

来源:
自动播放、循环、静音、playsInline
缩放到容器的 120%(宽度和高度均为 120%)
水平居中,焦点锚定在底部
位于所有内容之下(最低层级)

模糊背景元素:

绝对定位,水平居中,顶部偏移约 215px
尺寸:宽 801px × 高 384px,完全圆角(药丸形状)
颜色:纯黑 #000000
模糊:77.5px
z-index: 1(位于视频之上,内容之下)
所有文字和 UI 内容位于 z-index: 2(位于最上层)

导航栏(顶部):

最大宽度:1440px,水平居中
水平内边距:120px,垂直内边距:16px,高度:102px
Flexbox 横向排列,两端对齐

左侧:Logo 加导航链接,间距 80px
Logo:「LOGOIPSUM」SVG 标志,134px × 25px,白色填充
导航链接横向排列,间距 10px
每个链接:字体 Manrope,中等字重,14px 字号,22px 行高,白色,内边距水平 10px / 垂直 4px
项目:「Home」、「Services」(右侧带一个 24×24 白色向下箭头图标,间距 3px)、「Reviews」、「Contact us」

右侧:两个按钮,间距 12px
「Sign In」按钮:白色背景,内边距水平 16px / 垂直 8px,圆角 8px,Manrope semibold 14px/22px,颜色 #171717,叠加 1px #d4d4d4 边框
「Get Started」按钮:背景 #7b39fc(紫色),内边距 16px/8px,圆角 8px,Manrope semibold 14px/22px,颜色 #fafafa,细微阴影 0px 4px 16px rgba(23,23,23,0.04)

Hero 内容(导航栏下方居中):

Flex 纵向排列,居中,最大宽度 871px,顶部外边距 162px
标题区块与按钮之间间距 24px

标题区块:flex 纵向,间距 10px,文字居中
第一行:「Automate repetitive.」—— 字体 Inter,中等字重,76px,白色,字间距 -2px,行高 1.15
第二行:「Focus on growth.」—— 字体 Instrument Serif,斜体,76px,白色,字间距 -2px,行高 1.15
副标题:「The next-generation AI agent platform that handles lead generation, customer support, and data entry while you build.」—— 字体 Manrope,常规字重,18px,行高 26px,颜色 #f6f7f9,透明度 90%,最大宽度 613px

CTA 按钮:flex 横向,间距 22px,垂直居中
「Get Started Free」:背景 #7b39fc,内边距水平 24px / 垂直 14px,圆角 10px,字体 Cabin medium 16px,行高 1.7,白色文字
「Watch 2min Demo」:背景 #2b2344(深紫色),相同的内边距 / 圆角 / 字体规格,颜色 #f6f7f9

仪表盘图片(Hero 内容下方):

居中,顶部外边距 80px,底部内边距 40px
外层容器:宽 1163px(最大为视口的 90%),圆角 24px,背景模糊 backdrop-blur 10px,背景 rgba(255,255,255,0.05)(玻璃拟态),透明边框 1.5px
内边距:四周 22.5px
内部图片:全宽,高度自动,圆角 8px,object-fit cover
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

AntiGravity · Gemini 3.1 ProGPT-5.6 Sol
稳定度
89 / 100
成本
中
对应 Skill3D / 动效 Hero ↗落地页信息结构 ↗

独立复测证据

同一段 Prompt,在我们的测试里实际生成了什么。

复测生成 · 非作者原作
UI生成证据AI 自动评分

gpt-5.6-sol

2026年8月9日

复测分90.8
桌面截图模型生成 UI 的桌面截图手机截图模型生成 UI 的手机截图
下载生成 HTML ↓
claude-sonnet-5 · 89.3gpt-5.6-sol · 92.4分歧 · 3.1
  • 与建议模型同族(AntiGravity · Gemini 3.1 Pro / GPT-5.6 Sol)。作者在 Prompt 之外用了哪些参数,我们不知道。
  • 复测分是两个 AI 裁判对这一次生成各自打分(0–100)后的均分;没有经过人工判定,也不能当成功率看。

多人复现

1 个人用同一段 Prompt 跑出了自己的作品。

复现作品 · 非作者原作
卡尔
复现者卡尔
2026年10月15日
卡尔 的复现作品打开复现作品 ↗
glm-5.3

GLM-5.3 单次生成;Codex 人工修复运行依赖、必要源码及移动布局,未重新生成。桌面/手机真实渲染和资源检查通过;完整功能与视觉还原尚未全部验收。源码、截图和修复记录见复现出处。

复现出处 ↗

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
Gemini 3.1 一次生成动效网站
AI 编程(UI)X收录 2026/07/28

Gemini 3.1 一次生成动效网站

@viktoroddy 使用 Gemini 3.1完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

提示词: 构建一个高级电动车落地页,具有深色电影感美学。整个网站使用黑色背景(hsl(0,0%,0%)),配浅色文字(主色 hsl(0,0%,95%))和橙色强调色(hsl(25,100%,50%))。不使用默认字体——保持极简和编辑感。使用 shadcn/ui 设计令牌。以下是按顺序排列的各版块: 设计系统(index.css) --background: 0 0% 0% --foreground: 0 0% 12%(用于 CTA 按钮内圆等深色元素) --primar

来源热度 · X
94
稳定度
66
查看 Case →
Nano Banana + Flow + AntiGravity 动效网站
AI 编程(UI)X收录 2026/07/28

Nano Banana + Flow + AntiGravity 动效网站

@viktoroddy 使用 Nano Banana · Flow · AntiGravity完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

提示词: 为一家名为「Logoisum」的视频剪辑机构构建一个高级、高端的 Hero 区域,具体规格如下: 背景:实现一个全屏循环播放的视频背景,使用这个 URL:。视频必须静音、自动播放,并设置为 object-cover 以铺满整个版块,不加任何颜色叠加层。 导航栏:一个悬浮的白色导航栏,圆角 rounded-[16px],带细微阴影。 左侧:机构 Logo。 中间:一个菜单,包含「About」「Works」「Services」和「Testimonial」链接,字

来源热度 · X
93
稳定度
80
查看 Case →
GPT Image 2 + Veo 3 + Lovable 营销站
AI 编程(UI)X收录 2026/07/28

GPT Image 2 + Veo 3 + Lovable 营销站

@viktoroddy 使用 GPT Image 2 · Veo 3 · Lovable完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

一键获取所有令人惊艳动效网站的提示词: # 提示词:精确复刻这个落地页 为一个名为「Mindloop」的用心经营的通讯平台构建一个生产级质量的营销落地页,使用 Vite + React + TypeScript 应用,配 Tailwind CSS、shadcn/ui、framer-motion 和 lucide-react。整体美学是平静、编辑感、电影感——黑色背景、白色前景、衬线斜体点缀、环境氛围的循环背景视频,以及交互表面上标志性的「液态玻璃」效果。不使用紫色 / 靛

来源热度 · X
80
稳定度
86
查看 Case →

同作者

同作者更多 · viktoroddy →

  • Nano Banana + Kling + Claude 电影感 HeroAI 编程(UI) · Nano Banana · Kling · Claude · 2026-07-28
  • Gemini vs Claude:Velorah 电动房车落地页AI 编程(UI) · Gemini · Claude · 2026-07-28
  • Nano Banana + Veo 3 + Lovable 动效站AI 编程(UI) · Lovable · Nano Banana · Veo 3 · 2026-07-28
  • Google Stitch 对比 Claude 网页生成AI 编程(UI) · Google Stitch · Claude · 2026-07-28
  • 应式3D角色轮播动画UIAI 编程(UI) · Claude Sonnet · 2026-07-13
  • Grok Imagine + Grok Build:Veldara HeroAI 编程(UI) · Grok Imagine · Grok Build · 2026-07-28

Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。