创作者viktoroddy →@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt
提示词： 构建一个 Hero 区域，具体规格如下： 整体布局： 全宽版块，背景色 #000000（纯黑） overflow hidden 所有内容背后播放背景视频（详情见下） 背景视频： 来源： 自动播放、循环、静音、playsInline 缩放到容器的 120%（宽度和高度均为 120%） 水平居中，焦点锚定在底部 位于所有内容之下（最低层级） 模糊背景元素： 绝对定位，水平居中，顶部偏移约 215px 尺寸：宽 801px × 高 384px，完全圆角（药丸形状） 颜色：纯黑 #000000 模糊：77.5px z-index: 1（位于视频之上，内容之下） 所有文字和 UI 内容位于 z-index: 2（位于最上层） 导航栏（顶部）： 最大宽度：1440px，水平居中 水平内边距：120px，垂直内边距：16px，高度：102px Flexbox 横向排列，两端对齐 左侧：Logo 加导航链接，间距 80px Logo：「LOGOIPSUM」SVG 标志，134px × 25px，白色填充 导航链接横向排列，间距 10px 每个链接：字体 Manrope，中等字重，14px 字号，22px 行高，白色，内边距水平 10px / 垂直 4px 项目：「Home」、「Services」（右侧带一个 24×24 白色向下箭头图标，间距 3px）、「Reviews」、「Contact us」 右侧：两个按钮，间距 12px 「Sign In」按钮：白色背景，内边距水平 16px / 垂直 8px，圆角 8px，Manrope semibold 14px/22px，颜色 #171717，叠加 1px #d4d4d4 边框 「Get Started」按钮：背景 #7b39fc（紫色），内边距 16px/8px，圆角 8px，Manrope semibold 14px/22px，颜色 #fafafa，细微阴影 0px 4px 16px rgba(23,23,23,0.04) Hero 内容（导航栏下方居中）： Flex 纵向排列，居中，最大宽度 871px，顶部外边距 162px 标题区块与按钮之间间距 24px 标题区块：flex 纵向，间距 10px，文字居中 第一行：「Automate repetitive.」—— 字体 Inter，中等字重，76px，白色，字间距 -2px，行高 1.15 第二行：「Focus on growth.」—— 字体 Instrument Serif，斜体，76px，白色，字间距 -2px，行高 1.15 副标题：「The next-generation AI agent platform that handles lead generation, customer support, and data entry while you build.」—— 字体 Manrope，常规字重，18px，行高 26px，颜色 #f6f7f9，透明度 90%，最大宽度 613px CTA 按钮：flex 横向，间距 22px，垂直居中 「Get Started Free」：背景 #7b39fc，内边距水平 24px / 垂直 14px，圆角 10px，字体 Cabin medium 16px，行高 1.7，白色文字 「Watch 2min Demo」：背景 #2b2344（深紫色），相同的内边距 / 圆角 / 字体规格，颜色 #f6f7f9 仪表盘图片（Hero 内容下方）： 居中，顶部外边距 80px，底部内边距 40px 外层容器：宽 1163px（最大为视口的 90%），圆角 24px，背景模糊 backdrop-blur 10px，背景 rgba(255,255,255,0.05)（玻璃拟态），透明边框 1.5px 内边距：四周 22.5px 内部图片：全宽，高度自动，圆角 8px，object-fit cover
复用方法
关键决定
关键决定是把 Hero 区域的每个元素都写成精确的像素值和十六进制色值，包括视频缩放比例、模糊背景药丸的尺寸和模糊半径、以及导航和按钮的内外边距；这种设计稿级别的规格描述让输出更接近真实设计交付物而不是模型的自由排版。
换到你的题材
换到你的题材时可以替换背景视频、品牌名称、标题文案和主色调 #7b39fc，骨架是纯黑底加放大视频背景、居中模糊药壳制造景深、玻璃拟态仪表盘图片收尾这三层结构。换成别的 SaaS 产品时保持这套黑底加紫色强调色的层级关系，只替换具体数值。
容易翻车
容易翻车的是模糊背景药壳和放大 120% 的视频容易在不同分辨率下露出边缘或错位，仪表盘图片的玻璃拟态透明度也可能被模型忽略；复测时先在不同视口宽度检查视频和模糊药壳是否始终居中覆盖，再核对导航、按钮和标题的字号字重是否与规格一致。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。
创作者
viktoroddy 在X输出 UI 工程化实践，《应式3D角色轮播动画UI》搭 Claude Sonnet 出方案，带可复现代码。
继续探索
@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 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
提示语
有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。 创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。 视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv
@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
下面介绍如何用 AI 以极简设计风格创建你的网站。 使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美
