已验证 · 可安装 Agent Skill
SKILL.md + .skill把这套方法装进你的 Agent。
npx skills add LearnPrompt/goodcaseai --skill web-3d-motion-hero --global --copy --yes --full-depth加载中…
Skill · 跨作者通用方法
用单一视觉主角、滚动或交互节奏和性能边界组织网页首屏动效。
已验证 · 可安装 Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcaseai --skill web-3d-motion-hero --global --copy --yes --full-depth方法骨架
作者证据
Case 证据
用一张参考图代替文字描述整套视觉风格,只留一句话要求把图片转成体素艺术风格的 Three.js 单页代码,考验的是模型的图生代码能力而不是文字理解能力,和纯文字提示词是完全不同的技术路径。
提示语
我提供了一张图片。请根据这张图片编写一个漂亮的体素艺术场景。用 Three.js 写成单页代码
@johannesasgeir 使用 Gemini AntiGravity完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
我用一条提示在周末做出了这个价值 10,000 美元的网站…… 开玩笑的。我又做了一个网页模型,只是用一条主提示和几条小提示来调整它。 它主要花了我一些时间,以及每周 Antigravity 积分的大约 1%。 我从一张看到的图片中得到灵感,画面里一只流口水的狗把食物卷起;于是我决定把它变成一个动态网页概念。 我会继续发布各种随机想法,因为我几乎每天都会做出新东西。 和往常一样,我用 Gemini、Google Flow 和 Antigravity 完成了它。 最
提示语
有几个人询问提示词,所以放在这里 👇 附言:根据你的使用场景进行调整。 创建一个现代、极简的 3D 发票生成器机器组件,采用高级 SaaS 风格美学。 视觉设计 - 设计一台宽幅横向的发票打印机,灵感来自小票打印机,但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代,而不是写实或工业化。 - 保持整体设计足够干净,使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv
提示语
提示词: 创建 4 到 5 个大型模糊色块(直径 500px 以上),让它们在屏幕上明显地漂移。 每个色块都要持续沿圆形或 8 字形路径移动,在 8 到 12 秒内完成一个完整循环(不要用 30 秒,那样太慢)。色块应从中心点至少移动 200 到 300px,让运动清晰可见。 使用明亮的蓝色渐变(#3b82f6、#60a5fa、#93c5fd),不透明度为 40% 到 60%,并使用 100px 模糊。整体效果应像慢动作熔岩灯,或像彩色聚光灯在内容后方柔和地游动。 运
@ianiketnagapure 使用 Claude Sonnet 5 · Cursor完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
在 Cursor 中尝试了 Sonnet 5(high) 提示词: 「构建一个生产级、电影感的 FIFA 世界杯网站,包含真实感视觉、比赛日程、沉浸式动画和高级 UI/UX」 结果如下 👇 第一次尝试做出了一个还不错的包含比赛、积分榜和赛程的仪表盘……但还不够华丽。 图片生成没有成功(符合预期),所以我让它尽可能抓取可用的图片。 还在测试这个新模型到底有多强。我接下来还应该用 Sonnet 5 测试什么?欢迎留言告诉我👇
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词:「设计一个机构网站,把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型,然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集,请保存这条 🛒
@aaryan_kakad 使用 Kimi K2.5 Agent完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
这是我使用的提示词: 创建一个世界级、值得获奖的网站,主题是人类迫切需要建立多行星文明。它必须成为围绕这一主题制作过的视觉上最惊艳、情感上最有感染力、技术上最复杂的网站。 核心信息 呈现这一存在性论证:每个世纪发生一次可能导致人类灭绝的灾难性天文事件(小行星撞击、伽马射线暴、太阳耀斑、超新星辐射)的概率为千分之一。人类未来一千年的存续取决于成为多行星物种。 视觉与技术要求 首屏版块 史诗感动画背景:旋转的地球视图过渡到小行星带,再到火星,最后到遥远的系外行星 粒子效果:漂
@MercyDeGreat 使用 ChatGPT · AI Website Builder完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
首先是图片 我在 ChatGPT 上生成了这张用于本项目的图片。 以下是设计提示词: 创建一个超高级、电影感的 3A 游戏落地页视觉稿,灵感来自 Grand Theft Auto VI 的视觉识别、氛围、奢华感和霓虹犯罪美学。 横向 16:9 构图。 将其设计成仿佛 Rockstar Games 官方揭晓网站。 首屏铺满整个屏幕,两位主角坐在一辆黑色美式肌肉车的引擎盖上。 男主角自信地坐在前景,身穿白色背心,手枪自然地垂在身侧。 女主角从他身后倚靠过来,身穿亮
提示语
技巧 4:电影人的网站 你可以使用这个 Prompt 为电影人生成一个艺术化网站 网站链接: Prompt: 为一位电影导演创建一个艺术化、电影感的作品集网站。首页应展示来自其影片的全屏背景视频或图像蒙太奇,配合戏剧化打光和有情绪的色调。使用粗衬线字体呈现导演姓名,并配上一句简短标语,例如:用光与静默讲故事。 添加一个精选影片版块,用海报或剧照展示;每个项目都应打开一个整页案例研究,包含预告片、剧情梗概、导演手记和幕后照片。 加入一个 About 版块,包含诗意的
@givros 使用 Codex · GPT-5.6 Ultra · Blender · Three.js完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
你是一名 Blender 建筑艺术专家、程序化 3D 建模师、Python 开发者和 Three.js 开发者。 你的任务是重建附件多视图参考图中展示的完全相同的中国传统寺庙,然后构建一个交互式网页,用于展示最终的 3D 模型,并允许用户从各个角度检查它。 附件图片是唯一的主要事实来源。它包含同一座寺庙的多个视角,包括正面、背面、侧面、俯视和三分之四透视图。 持续交叉核对所有可见视角,确保最终结果是一座从各个角度都与参考图匹配的连贯建筑。 不要只创建一座受图片启发的泛
提示语
🚨 Gemini 3.0 pro - ecpt checkpoint Holy shit,我们的 Prompt 和想象力就是唯一的限制,去看看这个网站。 Prompt:编写一个关于模拟理论的神秘网站。让它感觉像现实正在实时渲染——实体物体下方出现线框网格,纹理逐步加载,元素短暂漂浮的物理故障。加入 Matrix 风格的代码雨背景,让各个区块在“已渲染”和“源代码”视图之间闪烁切换,并加入环境计算机处理声音;最后设计一个元叙事时刻,让网站承认自己正在被观看。把它设计成一位
@sergey_moloman 使用 GPT-5.6 Pro · Three.js完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
GPT 5.6 Pro 的前端能力相当不错! 因为 GPT 5.2 曾经是 ChatGPT 的“痛点时刻”,所以我决定测试它的前端能力。 以前我为了做出漂亮的前端,曾经付费订阅 Claude Max ×5。但现在不用了! 这里有 3 个一次生成的 landing page 示例。 通过 ChatGPT 网站生成。 1. Orbital 太空旅行落地页 Prompt:"为一家名为 Orbital North 的私人太空旅行公司构建一个电影感落地页。 使用带有地球、轨道