加载中…
创作者 · aaryan_kakad
查看原始来源 ↗复刻提示词保留原文，另附运行环境、素材与验收要求；附加说明不是原作者原话。
这是我使用的提示词：
创建一个世界级、值得获奖的网站，主题是人类迫切需要建立多行星文明。它必须成为围绕这一主题制作过的视觉上最惊艳、情感上最有感染力、技术上最复杂的网站。
核心信息
呈现这一存在性论证：每个世纪发生一次可能导致人类灭绝的灾难性天文事件（小行星撞击、伽马射线暴、太阳耀斑、超新星辐射）的概率为千分之一。人类未来一千年的存续取决于成为多行星物种。
视觉与技术要求
首屏版块
史诗感动画背景：旋转的地球视图过渡到小行星带，再到火星，最后到遥远的系外行星
粒子效果：漂浮的太空尘埃、多层视差滚动的星星
动态倒计时：实时概率计算器，展示灭绝风险的累积
电影感标题揭示：文字从星尘粒子中生成，边缘带有发光效果
环境声音选项：带切换按钮的低沉宇宙嗡鸣（太空氛围）
动画与效果库
动画触发滚动：每个版块都使用 GSAP ScrollTrigger
3D 元素：旋转的 Three.js 行星、轨道力学可视化
WebGL 着色器：大气效果、星云背景、光线折射
Lottie 动画：用于信息图的流畅矢量动画
鼠标响应粒子：响应光标的交互式粒子系统
平滑页面转场：使用 Barba.js 或类似方案实现无缝导航
揭示动画：使用 Intersection Observer 实现淡入、滑入、缩放效果
数字计数器：进入可视区域时递增统计数字
变形 SVG：在不同状态之间变换的图标和图形
玻璃拟态 UI：用于卡片和容器的磨砂玻璃效果
需要包含的版块
THE THREAT（黑暗、不祥的基调）
过去灭绝事件的动画时间线（恐龙等）
交互式概率计算器
地球历史上擦肩而过的小行星可视化
关于潜在危险天体的真实 NASA 数据
实时展示风险累积的倒计时
THE SOLUTION（希望、惊奇、启发）
展示殖民目标的交互式太阳系地图
火星地球化可视化（带动画的进程）
带 3D 模型的轨道栖息地概念
带里程碑动画的技术路线图
THE SCIENCE
对每种灭绝威胁进行动画解释
撞击概率数据可视化
采用优雅排版的专家引语
太空现象的视频背景
THE VISION
火星 / 月球上的未来城市概念（3D 渲染）
多代际飞船设计
通往 3025 年的时间线：遍布星际的人类
展示扩张潜力的交互式星系地图
TAKE ACTION
个人可以如何贡献
值得支持的组织
教育资源
可分享内容生成器
技术栈规格
前端框架：
React 或 Next.js，用于组件架构
TypeScript，用于类型安全
动画库：
GSAP（GreenSock），用于高级动画
Three.js，用于 3D 图形
Framer Motion，用于 React 动画
Lottie，用于矢量动画
Anime.js，用于额外动效
视觉效果：
WebGL 着色器（自定义或 Shadertoy 导入）
Canvas API，用于粒子系统
CSS3 高级动画（关键帧、变换）
SVG 变形和路径动画
UI/UX 功能：
平滑滚动（Locomotive Scroll 或 Lenis）
延迟加载
带模糊渐入效果的渐进式图片加载
响应式设计（移动端优先）
带宇宙色彩调色板的暗色主题
自定义光标效果
带百分比计数器的预加载器
彩蛋（点击时触发隐藏动画）
设计原则
色彩调色板：
深空黑（#0a0a0f）
宇宙蓝（#1a2a6c、#2e3192）
火星红（#c1440e、#8b0000）
星光白和金色作为强调色
到处使用渐变叠加
字体：
标题使用未来感无衬线字体（Orbitron、Exo 2、Space Grotesk）
正文使用易读衬线或简洁无衬线字体（Inter、Work Sans）
关键短语使用发光文字效果
动态排版动画
图像：
NASA 高清图像
ESA 太空摄影
SpaceX 渲染图
定制插画
太空现象和火箭发射的视频背景
景深模糊效果
微交互：
按钮悬停效果（发光、粒子爆发）
卡片翻转效果
点击时的涟漪效果
漂浮 / 悬停元素
磁吸悬停效果（元素被光标吸引）
交互音效（可选）
高级功能
交互式数据可视化
使用 D3.js 展示灭绝概率的图表
关于资源分配的动画信息图
用于未来预测的时间线滑块
3D 模型查看器
可旋转的航天器模型
火星基地漫游
小行星尺寸对比
视差叙事
多层视差滚动
横向滚动版块
缩放转场
动态内容
实时小行星追踪数据（NASA API）
实时太空任务更新
社交媒体集成
沉浸式元素
VR / 360° 视图（可选）
增强现实预览（WebXR）
全屏视频背景
氛围音轨
性能优化
代码分割以加快加载
图片优化（WebP、AVIF 格式）
重型动画的延迟加载
高效 WebGL 渲染
缓存策略
CDN 交付
情感旅程
将叙事组织成以下路径：
震撼 → 看见真实威胁
恐惧 → 理解我们可能失去什么
惊奇 → 发现各种可能性
希望 → 看见解决方案
决心 → 产生采取行动的冲动
行动号召
「加入这场运动」（带粒子爆发效果的新闻通讯注册）
「支持太空探索」（捐赠 / 倡议链接）
「分享我们的未来」（带自定义预览卡片的社交分享）
「了解更多」（资源库）
独特差异化
不要通用模板——100% 定制设计
获奖级动画——全程流畅保持 60fps
科学准确——所有数据均已核验
情感共鸣——以故事驱动体验
技术无瑕——没有 bug，完美响应
无障碍——在保持视觉冲击力的同时符合 WCAG
最终指令
把它当作 NASA、SpaceX 和联合国的结合体来构建。每个像素都应该让人产生敬畏。每个动画都应该有意图且有意义。每次交互都应该令人愉悦。这不只是一个网站——它是一份关于人类生存的宣言，是为我们这个物种发出的集结号，也是让人感受到人类星际未来之紧迫性与可能性的数字艺术作品。
让它如此有感染力，以至于每个访问者都会成为太空殖民的倡导者。
全力以赴。不要保留任何创意。这是人类的故事。适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
多人复现
继续探索
@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
提示词： 构建一个 Hero 区域，具体规格如下： 整体布局： 全宽版块，背景色 #000000（纯黑） overflow hidden 所有内容背后播放背景视频（详情见下） 背景视频： 来源： 自动播放、循环、静音、playsInline 缩放到容器的 120%（宽度和高度均为 120%） 水平居中，焦点锚定在底部 位于所有内容之下（最低层级） 模糊背景元素： 绝对定位，水平居中，顶部偏移约 215px 尺寸：宽 801px × 高 384px，完全圆角（药丸
@Oluwaphilemon1 使用 Claude · Three.js · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
我如何用 Claude 构建它 👇 1. Prompt：“构建一个叙事网站，每个滚动区块都通过流畅的色彩过渡揭示一个新的章节” 2. 使用 Three.js 制作会响应光标的绘画质感背景 3. Prompt：“加入 GSAP ScrollTrigger，让每个区块像电影场景一样进入动画” 4. 使用 Lenis.js 实现高级网站那种丝滑的平滑滚动
提示语
提示词： 构建一个高级电动车落地页，具有深色电影感美学。整个网站使用黑色背景（hsl(0,0%,0%)），配浅色文字（主色 hsl(0,0%,95%)）和橙色强调色（hsl(25,100%,50%)）。不使用默认字体——保持极简和编辑感。使用 shadcn/ui 设计令牌。以下是按顺序排列的各版块： 设计系统（index.css） --background: 0 0% 0% --foreground: 0 0% 12%（用于 CTA 按钮内圆等深色元素） --primar
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。
