
加载中…

创作者 · MotionSites
查看原始来源 ↗复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。
System Prompt:高保真“Liquid Glass”主视觉区
核心布局:创建一个最大宽度为 1600px 的落地页主视觉区。背景应为纯白色,左上角带有细腻的分层渐变光晕(使用浅蓝色 #60B1FF 和 #319AFF 的模糊椭圆)。设计必须完全响应式,从移动端单列视图过渡到桌面端双列布局。
字体排印:
标题与品牌:使用 Fustat(Bold)。
正文与 UI:使用 Inter(Normal/Medium)。
主视觉标题:`更聪明地工作,更快速地达成目标`(75px,1.05 line-height,-2px tracking)。
“Strong Liquid Glass”Navbar:
位置:Sticky at top-[30px],居中,w-fit。
视觉效果:backdrop-blur-[50px],背景 rgba(255,255,255,0.3),rounded-[16px]。
保真细节:
外描边:1px solid rgba(0,0,0,0.1)。
内部高光阴影:inset 0px 4px 4px 0px rgba(255,255,255,0.25)。
项目:Logo `Taskly`(Fustat)、Nav 链接(首页、功能、公司、定价),以及带箭头图标的玻璃质感 `注册` 按钮。
玻璃质感 Orb(主视觉右侧):
来源 URL:https://future.co/images/homepage/glassy-orb/orb-purple.webm
混合模式:必须使用 mix-blend-screen 来滤除黑色背景。
缩放:scale-125,使其尺寸巨大,并稍微偏离中心溢出。
精确调色(CSS Filter):hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1)。这会将紫色资源转换为鲜明、高端的“Electric Brand Blue”,与主 CTA 相匹配。
主视觉内容(主视觉左侧):
社会认同:一个 `2700+ 位客户评分 4.9/5` 徽章,带五颗橙色 #FF801E 星星。
副标题:`轻松管理项目、与团队协作,并借助我们直观的任务管理工具实现目标。`(18px,Inter,-1px tracking)。
主要 CTA:`立即开始` 按钮。
颜色:rgba(0,132,255,0.8),搭配 backdrop-blur-[2px]。
细节:rounded-[16px]、白色文字、内部高光阴影 inset 0px 4px 4px 0px rgba(255,255,255,0.35),以及白色圆形箭头图标。
动画:悬停时 Scale 1.02,并带平滑过渡。
页脚 Logo:在底部加入 `深受顶级产品公司的信赖` 区域,其中包含 5 个灰度 SVG Logo(例如科技公司的占位 Logo),以 gap-[100px] 间隔排列。
面向开发者的关键技术规格:
Video Tag:autoPlay loop muted playsInline。
Container:为背景光晕使用 relative wrapper,为内容使用 z-10 main container。
平滑处理:应用 -webkit-font-smoothing: antialiased,以获得最清晰的字体呈现。适用模型与稳定度
建议模型
独立复测证据
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 与复测证据放在同一条阅读路径里。