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
SkyElite 私人飞机

SkyElite 私人飞机

创作者 · MotionSites

AI 编程(UI)MotionSites收录 2026/08/19已有人复测#not-rerun#web-ui
查看原始来源 ↗

Prompt

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

创建一个高端私人飞机落地页首屏区域,规格如下:

视频背景:
使用此确切的 CloudFront 视频 URL:https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_091828_e240eb17-6edc-4129-ad9d-98678e3fd238.mp4
视频应自动播放、静音、连续循环,并包含 playsInline 属性
视频使用 object-cover 覆盖整个视口(100vh)

导航栏:
左侧显示品牌名称“SkyElite”(text-2xl、font-semibold、text-gray-900)
桌面端菜单项(移动端隐藏,md:flex 时显示):开始、品牌故事、价格、优势、常见问题
导航链接使用 gray-900,并带有 hover:text-gray-700 transition
使用 Lucide React 图标(Menu/X)的移动端汉堡菜单按钮
移动端菜单以白色/95 不透明度背景、背景模糊、圆角和阴影的下拉菜单形式出现
最大宽度为 7xl,居中并使用 px-8 py-6

首屏内容(居中,使用 -mt-80 向上拉):
小号大写标签:“私人飞机”(text-sm、font-semibold、gray-600、tracking-wider、mb-4)
带重叠效果的两行大标题:
第 1 行:“高端。”(text-6xl md:text-7xl lg:text-8xl、font-normal、text-gray-500、leading-none、tracking-tighter)
第 2 行:“触手可及。”(相同字号,颜色:#202A36,使用负上边距 -12px 实现重叠)
副标题:“你的付出值得被认可。”(text-lg md:text-xl、gray-600、mb-6、max-w-2xl)
两个行动号召按钮(gap-4,居中):
“探索”按钮:px-4 py-2、rounded-full、bg-gray-300、text-gray-800、font-medium、hover:bg-gray-400
“立即预订”按钮:px-4 py-2、rounded-full、白色文字、背景色 #202A36、悬停颜色 #1a2229,并带平滑过渡

字体排印:
使用 Inter 字体(从 Google Fonts 导入 400、500、600、700 字重)
通过 CSS 应用于整个 body

技术设置:
React + TypeScript
使用 Tailwind CSS 设置样式
使用 Lucide React 提供图标
使用 useState hook 切换移动端菜单
全屏高度容器(h-screen)
响应式断点:移动优先、md、lg
所有过渡均使用 transition-colors 类

布局结构:
外层容器:min-h-screen、bg-gray-50
首屏区域:relative、h-screen、overflow-hidden
内容包装器:relative、h-full、flex flex-col
主内容区域:flex-1、flex items-center justify-center

整体应简洁、现代且高端,并具有流畅的交互效果。
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型
稳定度
90 / 100
成本
中
对应 Skill网页区块像素复刻 ↗

独立复测证据

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

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

gpt-6.1-sol

2026年10月22日

复测分90.7
桌面截图模型生成 UI 的桌面截图手机截图模型生成 UI 的手机截图
下载生成 HTML ↓
claude-sonnet-5-5 · 86.7gpt-5.6-terra · 94.6分歧 · 7.9
  • 复测分是两个 AI 裁判对这一次生成各自打分(0–100)后的均分;没有经过人工判定,也不能当成功率看。
UI生成证据AI 自动评分

gpt-5.6-sol

2026年10月11日

复测分89
桌面截图模型生成 UI 的桌面截图手机截图模型生成 UI 的手机截图
下载生成 HTML ↓
claude-sonnet-5-5 · 84.7gpt-5.6-terra · 93.3分歧 · 8.6
  • 复测分是两个 AI 裁判对这一次生成各自打分(0–100)后的均分;没有经过人工判定,也不能当成功率看。

多人复现

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

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

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

复现出处 ↗

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
3D Jack 作品集
AI 编程(UI)MotionSites收录 2026/08/13

3D Jack 作品集

3D 创作者 Jack 的作品集落地页,React + TypeScript + Framer Motion,#0C0C0C 暗底。

Skill · 3D / 动效 HeroSkill · 个人作品集叙事

提示语

使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React,为「Jack」构建一个 3D 创作者作品集落地页。页面采用深色主题(背景为 #0C0C0C),字体使用 Kanit(Google Fonts,字重 300-900)。页面标题为「Jack -- 3D Creator」。 全局样式 html、body、#root 和主容器的背景:#0C0C0C 字体族:'Kanit', sans-serif 全局重置:b

来源热度 · MotionSites
—
稳定度
65
查看 Case →
404 星球
AI 编程(UI)MotionSites收录 2026/08/13

404 星球

主机商 NEXOVA 的 404 页,循环视频背景加导航,错误页做出了落地页的完成度。

Skill · 网页区块像素复刻

提示语

为一家名为“NEXOVA”的托管公司构建一个全屏 404 错误页面。整个页面采用单视口高度布局,包含循环播放的背景视频、导航栏、居中的 hero/404 区域和多栏页脚。使用 React + Tailwind CSS + Lucide React icons。不要使用其他 UI 库。 --- **字体** 在 `index.html` 中通过以下样式表加载“Helvetica Now Var”: ``` <link href="https://db.onlinewebf

来源热度 · MotionSites
—
稳定度
94
查看 Case →
ADHD 规划器
AI 编程(UI)MotionSites收录 2026/08/13

ADHD 规划器

ADHD 友好的日程应用 Drift 落地站,React + Vite + TypeScript + Tailwind,安静低刺激的视觉方向本身就是产品卖点。

Skill · 网页区块像素复刻

提示语

为 "Drift" 构建一个单页落地网站——这是一款平静、对 ADHD 友好的规划应用。使用 React + Vite + TypeScript + Tailwind CSS + lucide-react 提供图标。不要使用其他 UI 库。 ### 字体 通过 Google Fonts 在 `index.css` 中导入: - **Inter**(字重 400、500、600)——用作基础正文字体 - **Instrument Serif**(仅斜体)——用于首屏标题中的

来源热度 · MotionSites
—
稳定度
91
查看 Case →

同作者

同作者更多 · MotionSites →

  • Quantum LucidAI 编程(UI) · 2026-09-18
  • 珍稀画廊AI 编程(UI) · 2026-08-30
  • Palomar LabsAI 编程(UI) · 2026-08-30
  • Quantum CoreAI 编程(UI) · 2026-08-30
  • Agent WaveAI 编程(UI) · 2026-08-19
  • Aurex FinanceAI 编程(UI) · 2026-08-19

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