健康伴侣

Prompt

在一个逼真的手机边框模型中构建移动端健康测验界面，并将其居中放置在白色页面上。使用 React、Tailwind CSS 和 Lucide React icons。

**手机边框：**
- 尺寸：宽 375px x 高 780px
- 圆角半径：52px
- 背景颜色：`#8a9aaa`
- 使用盒阴影模拟真实手机边框：`inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)`
- 顶部中央放置一个黑色药丸形 Dynamic Island：宽 120px，高 32px，完全圆角，z-index 50

**背景：**
- 使用以下精确 URL 设置全出血背景图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85`
- 对背景图应用 `blur(12px)` 和 `scale(1.1)`
- 在上方添加半透明叠层：`#8a9aaa`，透明度 30%

**字体：**
- 从以下地址加载 "Helvetica Now Var"：`https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var`
- 后备字体栈：'Helvetica Neue', Helvetica, Arial, sans-serif
- 全局应用于所有元素

**内容布局（flex column，内边距：顶部 56px、两侧 24px、底部 24px）：**

1. **页眉徽章**（顶部，下方外边距 40px）：
   - 液态玻璃药丸，包含 Timer icon（12px，white/80）+ 文本 "Vitaforge Daily"（12px，white/90，中等字重）
   - 内边距：垂直 10px，水平 12px

2. **标题区域**（下方外边距 32px）：
   - 副标题："选择所有适用项" - white/60，14px
   - 标题："你希望改善健康的哪些方面？" - white，28px，正常字重，紧凑行高和字距

3. **选择网格**（2 列，间距 12px，扩展以填满可用空间）：
   - 4 张卡片："睡眠质量"、"压力"、"体重"、"皮肤"
   - 每张卡片：rounded-[32px]，高 100px，内边距 16px
   - 显示编号标签（01、02 等），white/50，11px，中等字重
   - 选项文本为 white，16px，中等字重
   - "压力"（id:2）和 "皮肤"（id:4）默认选中
   - 点击卡片可切换选择状态

4. **语音按钮**（居中，垂直外边距 24px）：
   - 背后使用黄色/金色径向辉光：`radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)`
   - 64px 圆形液态玻璃按钮，带波形 SVG icon（白色描边，strokeWidth 2，strokeLinecap round），显示 5 根高度不一的竖条
   - 下方显示 "语音" 标签，white/70，12px

5. **滑动确认按钮**（底部，位于 24px 水平内边距内）：
   - 全宽 rounded-full 轨道，高 56px，液态玻璃样式
   - 左侧白色圆形滑块（44px），带 ArrowRight icon（gray-800）
   - 居中显示 "完成" 文本，white/60，14px，中等字重
   - 右侧放置 3 个 ChevronRight icons（14px），透明度依次为 white/40、white/50、white/60
   - 可通过 pointer events 拖动滑块：未拖过 85% 时弹回，拖过 85% 时吸附到末端

**液态玻璃效果（CSS classes）：**

`.liquid-glass`：
- 背景：`rgba(255,255,255,0.01)`，使用 luminosity blend mode
- Backdrop filter：`blur(4px)`
- 盒阴影：`inset 0 1px 1px rgba(255,255,255,0.1)`
- 使用 `::before` 伪元素创建渐变边框：`linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`，配合 1.4px 内边距和 mask-composite exclude 技术

`.liquid-glass-selected`：
- 与上方相同，但背景为 `rgba(255,255,255,0.12)`，模糊 8px，盒阴影更强（`inset 0 1px 2px rgba(255,255,255,0.2)`），渐变边框更亮（边缘 alpha 为 0.6，20%/80% 处为 0.25）

**动画：**
- 所有元素使用交错的向上淡入动画
- Keyframes：从 `opacity:0, translateY(16px)` 到 `opacity:1, translateY(0)`
- 时长：0.5s，easing：`cubic-bezier(0.22, 1, 0.36, 1)`，fill：forwards
- 延迟：页眉 0.1s、标题 0.25s、网格卡片 0.4s/0.48s/0.56s/0.64s、语音 0.7s、滑块 0.85s

**依赖项：**
- React 18、Tailwind CSS 3、Lucide React、Vite、TypeScript

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度
成本: 中

AI 编程(UI)X收录 2026/07/28

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

查看 Case →

AI 编程(UI)Aceternity UI收录 2026/08/13

3D 动画图钉

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)X收录 2026/09/12

高密度 3D 浏览器森林生成器

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。在浏览器中创建一个细节极其丰富的实时 {argument nam

来源热度 · X

稳定度

查看 Case →

Prompt

在一个逼真的手机边框模型中构建移动端健康测验界面，并将其居中放置在白色页面上。使用 React、Tailwind CSS 和 Lucide React icons。

**手机边框：**
- 尺寸：宽 375px x 高 780px
- 圆角半径：52px
- 背景颜色：`#8a9aaa`
- 使用盒阴影模拟真实手机边框：`inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)`
- 顶部中央放置一个黑色药丸形 Dynamic Island：宽 120px，高 32px，完全圆角，z-index 50

**背景：**
- 使用以下精确 URL 设置全出血背景图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85`
- 对背景图应用 `blur(12px)` 和 `scale(1.1)`
- 在上方添加半透明叠层：`#8a9aaa`，透明度 30%

**字体：**
- 从以下地址加载 "Helvetica Now Var"：`https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var`
- 后备字体栈：'Helvetica Neue', Helvetica, Arial, sans-serif
- 全局应用于所有元素

**内容布局（flex column，内边距：顶部 56px、两侧 24px、底部 24px）：**

1. **页眉徽章**（顶部，下方外边距 40px）：
   - 液态玻璃药丸，包含 Timer icon（12px，white/80）+ 文本 "Vitaforge Daily"（12px，white/90，中等字重）
   - 内边距：垂直 10px，水平 12px

2. **标题区域**（下方外边距 32px）：
   - 副标题："选择所有适用项" - white/60，14px
   - 标题："你希望改善健康的哪些方面？" - white，28px，正常字重，紧凑行高和字距

3. **选择网格**（2 列，间距 12px，扩展以填满可用空间）：
   - 4 张卡片："睡眠质量"、"压力"、"体重"、"皮肤"
   - 每张卡片：rounded-[32px]，高 100px，内边距 16px
   - 显示编号标签（01、02 等），white/50，11px，中等字重
   - 选项文本为 white，16px，中等字重
   - "压力"（id:2）和 "皮肤"（id:4）默认选中
   - 点击卡片可切换选择状态

4. **语音按钮**（居中，垂直外边距 24px）：
   - 背后使用黄色/金色径向辉光：`radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)`
   - 64px 圆形液态玻璃按钮，带波形 SVG icon（白色描边，strokeWidth 2，strokeLinecap round），显示 5 根高度不一的竖条
   - 下方显示 "语音" 标签，white/70，12px

5. **滑动确认按钮**（底部，位于 24px 水平内边距内）：
   - 全宽 rounded-full 轨道，高 56px，液态玻璃样式
   - 左侧白色圆形滑块（44px），带 ArrowRight icon（gray-800）
   - 居中显示 "完成" 文本，white/60，14px，中等字重
   - 右侧放置 3 个 ChevronRight icons（14px），透明度依次为 white/40、white/50、white/60
   - 可通过 pointer events 拖动滑块：未拖过 85% 时弹回，拖过 85% 时吸附到末端

**液态玻璃效果（CSS classes）：**

`.liquid-glass`：
- 背景：`rgba(255,255,255,0.01)`，使用 luminosity blend mode
- Backdrop filter：`blur(4px)`
- 盒阴影：`inset 0 1px 1px rgba(255,255,255,0.1)`
- 使用 `::before` 伪元素创建渐变边框：`linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`，配合 1.4px 内边距和 mask-composite exclude 技术

`.liquid-glass-selected`：
- 与上方相同，但背景为 `rgba(255,255,255,0.12)`，模糊 8px，盒阴影更强（`inset 0 1px 2px rgba(255,255,255,0.2)`），渐变边框更亮（边缘 alpha 为 0.6，20%/80% 处为 0.25）

**动画：**
- 所有元素使用交错的向上淡入动画
- Keyframes：从 `opacity:0, translateY(16px)` 到 `opacity:1, translateY(0)`
- 时长：0.5s，easing：`cubic-bezier(0.22, 1, 0.36, 1)`，fill：forwards
- 延迟：页眉 0.1s、标题 0.25s、网格卡片 0.4s/0.48s/0.56s/0.64s、语音 0.7s、滑块 0.85s

**依赖项：**
- React 18、Tailwind CSS 3、Lucide React、Vite、TypeScript

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型