加载中…
创作者 · MotionSites
查看原始来源 ↗复刻提示词保留原文，另附运行环境、素材与验收要求；附加说明不是原作者原话。
首屏区域创建提示词
创建一个带循环视频背景的现代首屏区域，规格如下：
视频背景：
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4
尺寸：宽度和高度均为 115%
位置：水平居中，锚定顶部，焦点为 object-top
自定义 JavaScript 淡入淡出系统（不使用 CSS transitions）：
加载或循环开始时，使用基于 requestAnimationFrame 的 250ms 淡入
视频结束前剩余 0.55 秒时进行 250ms 淡出
fadingOutRef 布尔值可防止重复的 timeUpdate 事件再次触发淡出
On ended：将 opacity 设为 0，延迟 100ms，重置为 currentTime = 0，play，然后重新淡入
每次开始新的淡入淡出时，取消正在运行的动画帧，防止动画相互冲突
淡入淡出从当前 opacity 继续（不跳变）
所需字体：
Schibsted Grotesk（字重：400、500、600、700）
Inter（字重：400、500、600、700）
Noto Sans（字重：400、500、600、700）
Fustat（字重：400、500、600、700）
导航栏：
Logo：“Logoipsum”（Schibsted Grotesk SemiBold，24px，字距 -1.44px）
菜单项（Schibsted Grotesk Medium，16px，字距 -0.2px）：
平台
功能（带下拉 chevron icon）
项目
社区
联系
右侧按钮：
“注册”（透明背景，宽 82px）
“登录”（黑色背景、白色文字，宽 101px）
内边距：水平 120px，垂直 16px
首屏内容（使用 -mt-[50px] 上移 50px）：
徽章组件：
深色徽章，带 star icon 和“新功能”文字
浅色背景，文字为：“探索无限可能”
字体：Inter Regular，14px
圆角并带细微阴影
主标题：
文字：“快速转换数据”
字体：Fustat Bold，80px，字距 -4.8px，line-height: none
颜色：黑色，居中对齐
副标题：
文字：“上传你的信息，立即获得强大洞察。更聪明地工作，轻松实现目标。”
字体：Fustat Medium，20px，字距 -0.4px
颜色：#505050
最大宽度：736px，宽度：542px
搜索输入框：
Backdrop blur 搭配深色透明背景（rgba(0,0,0,0.24)）
尺寸：最大宽度 728px，高 200px，圆角 18px
顶行：额度信息
左侧：“60/450 额度”，带绿色“升级”按钮
右侧：AI icon + “由 GPT-4o 提供支持”
字体：Schibsted Grotesk Medium，12px，白色文字
主输入区域：
白色背景，圆角 12px，带阴影
Placeholder：“输入问题...” （16px，rgba(0,0,0,0.6)）
黑色圆形提交按钮，带 up arrow icon（尺寸 36px）
底行：
左侧：三个操作按钮（灰色背景，圆角 6px）：
“附件”，带 paperclip icon
“语音”，带 microphone icon
“提示词”，带 search icon
右侧：字符计数器“0/3,000”（12px，灰色）
图标（来自导入文件的 SVG paths）：
Chevron down arrow
Up arrow
Star icon
AI sparkle icon
Attach/paperclip icon
Voice/microphone icon
Search icon
间距：
导航与首屏之间的间距：60px
标题区域与搜索框之间的间距：44px
标题区域内部元素间距：34px（徽章到标题、标题到副标题）
首屏内容上移：50px 负外边距
水平内边距：120px
配色方案：
黑色文字：#000000
灰色文字：#505050
浅灰色背景：#f8f8f8
绿色升级按钮：rgba(90,225,76,0.89)
深色徽章：#0e1311
白色：#ffffff
透明遮罩：rgba(0,0,0,0.24)
组件结构：
带自定义淡入淡出逻辑的 VideoBackground 组件
导航栏（固定间距，水平布局）
首屏内容容器（居中，带最大宽度约束）
徽章、标题区域和搜索输入框使用嵌套组件
所有元素均置于全屏视频背景之上适用模型与稳定度
建议模型
独立复测证据
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 与复测证据放在同一条阅读路径里。
