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
Securify 数据安全

Securify 数据安全

创作者 · MotionSites

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

Prompt

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

使用 React + TypeScript + Tailwind CSS,为名为 "securify" 的数据安全 SaaS 落地页构建一个全屏首屏区域,包含循环播放的全屏背景视频、悬浮的胶囊形导航栏和错落排布的大号文字。

字体与全局样式

加载 Google 字体 "Readex Pro",字重为 300、400、500、600、700。
设置 body font-family: 'Readex Pro', system-ui, -apple-system, sans-serif;、background #000、color #fff、antialiased。
将 html、body、#root 的高度设为 100%。
添加 .hero-title 类,设置 letter-spacing: -0.04em; line-height: 0.95;。
区域容器

一个 <section>,使用以下类:relative h-screen w-full overflow-hidden bg-black。
背景视频

<video> 使用 className="absolute inset-0 w-full h-full object-cover"、autoPlay loop muted playsInline,以及 src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_063509_7d167302-4fd4-480b-8260-18ab572333d4.mp4"。
导航栏(absolute, z-20, px-6 md:px-10 pt-6, top-0 left-0 right-0)

一个 <nav>,使用 flex items-center justify-between gap-4。
左侧胶囊:flex items-center gap-2 bg-neutral-900/90 backdrop-blur rounded-full pl-4 pr-6 py-3,包含:
一个自定义白色 SVG 标志(viewBox 0 0 256 256,class h-5 w-5),path 为:M 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 128 L 64 128 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z M 128 64 L 128 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 Z M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 128 0 L 192 0 Z,填充色为 #ffffff。
品牌文字 "securify"(text-white text-sm font-normal tracking-tight)。
中间胶囊(在移动端隐藏):hidden md:flex items-center gap-1 bg-neutral-900/90 backdrop-blur rounded-full px-3 py-2,包含四个锚点链接:"平台"、"解决方案"、"公司"、"支持"——每个都使用 text-neutral-300 hover:text-white transition-colors text-sm px-5 py-2 rounded-full。
右侧按钮:"立即开始"——bg-white text-black text-sm font-normal rounded-full px-6 py-3 hover:bg-neutral-200 transition-colors。
前景内容容器:relative h-full w-full(在导航栏之后渲染,位于视频上方)。

三个错落排布的巨型标题词(每个都是一个 <h1>,使用 class hero-title absolute text-white font-medium text-[14vw] md:text-[13vw]):

"保护"——left-4 md:left-10 top-[18%]
"你的"——right-4 md:right-10 top-[38%]
"数据"——left-[18%] md:left-[28%] top-[58%]
全部使用小写形式。

描述段落(absolute, left-6 md:left-10 top-[46%], max-w-[240px] text-[15px] leading-snug text-white/90):

"我们以最谨慎的方式守护你的数据,让你随处都能拥有隐私保障"

数据块——右上角(absolute right-6 md:right-24 top-[14%]):

行:flex items-center gap-3 justify-end——一个斜向分隔线(hidden md:block h-px w-24 bg-white/40 rotate-[20deg]),然后是数字 "+65k"(text-4xl md:text-5xl font-medium tracking-tight)。
副标签:"初创企业使用"(text-xs md:text-sm text-white/70 mt-1 text-right)。
底部渐变叠层:pointer-events-none absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-b from-transparent to-black。

数据块——左下角(absolute left-6 md:left-20 bottom-20 md:bottom-24):

行:数字 "+1.5b",然后是分隔线 hidden md:block h-px w-24 bg-white/40 rotate-[-20deg]。
副标签:"gb 数据受到保护"(text-xs md:text-sm text-white/70 mt-1)。
数据块——右下角(absolute right-6 md:right-20 bottom-16 md:bottom-20):

行:斜向分隔线 rotate-[-20deg],然后是 "+300k"。
副标签:"下载量"(右对齐,text-white/70)。
备注

所有文字均为小写形式。
导航栏胶囊使用 bg-neutral-900/90 backdrop-blur。
仅使用以下过渡效果:导航链接的 hover:text-white,以及按钮的 hover:bg-neutral-200。
任何位置都不要使用紫色/靛蓝色;配色仅使用纯黑、纯白、neutral-900 和带不同透明度的白色(white/40、white/70、white/90)。
响应式:移动端隐藏导航链接和斜向分隔线;文字大小通过 vw 单位缩放。
≡溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致;平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

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

多人复现

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 与复测证据放在同一条阅读路径里。