
加载中…

创作者 · MotionSites
查看原始来源 ↗复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。
创建一个高端私人飞机落地页首屏区域,规格如下:
视频背景:
使用此确切的 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
整体应简洁、现代且高端,并具有流畅的交互效果。适用模型与稳定度
建议模型
独立复测证据
2026年10月22日
2026年10月11日
多人复现
继续探索

3D 创作者 Jack 的作品集落地页,React + TypeScript + Framer Motion,#0C0C0C 暗底。
提示语
使用 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

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

ADHD 友好的日程应用 Drift 落地站,React + Vite + TypeScript + Tailwind,安静低刺激的视觉方向本身就是产品卖点。
提示语
为 "Drift" 构建一个单页落地网站——这是一款平静、对 ADHD 友好的规划应用。使用 React + Vite + TypeScript + Tailwind CSS + lucide-react 提供图标。不要使用其他 UI 库。 ### 字体 通过 Google Fonts 在 `index.css` 中导入: - **Inter**(字重 400、500、600)——用作基础正文字体 - **Instrument Serif**(仅斜体)——用于首屏标题中的
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。