Claude + Fable：Aethera Fintech 落地页

Prompt

一键获取所有令人惊艳动效网站的提示词：

> 用 **React + TypeScript + Vite + Tailwind CSS + lucide-react** 为一个名为 **「Aethera」**（一家专注放贷业务的金融科技 / AI 公司）构建一个单页落地页。页面背景为白色（`#fff`），不使用滚动动画——只做干净、极简、编辑风格的设计。
>
> ### 字体
> - **标题 / 衬线字体：** 「P22 Mackinac W01 Book」，从 `` 加载
> - **正文 / 无衬线字体：** 「Inter」（300、400、500、600 字重），来自 Google Fonts
> - Tailwind 配置：`fontFamily.sans = ['Inter', 'sans-serif']`，`fontFamily.serif = ['P22 Mackinac W01 Book', 'Georgia', 'serif']`
>
> ### 页面标题
> `<title>Build Lasting Relationships</title>`
>
> ### 背景视频
它必须在页面上垂直居中
> 使用这个**精确**的 CloudFront 视频 URL：
> ```
>
> ```
> 视频用**绝对定位**放置在 Hero 之后，使用：top: '50%', transform: 'translateY(-50%)'
和 CSS 滤镜 `brightness(1) contrast(1.2)`。使用 `object-contain`，静音，playsInline，preload="auto"。加载后播放一次，播放结束后暂停（不循环，不做回弹反转——只正向播放一次然后停止）。
>
> ### 导航栏
> - `relative z-20`，最大宽度 `max-w-7xl`，居中，`px-8 py-6`，两端对齐布局。
> - **Logo（左侧）：** 文字「Aethera」加上标注册商标符号——`font-serif text-3xl tracking-tight text-[#000000]`，配 `<sup className="text-xs align-super">®</sup>`
> - **导航链接（中间，移动端隐藏 `hidden md:flex`）：** 「Home」（当前项，`text-[#000000]`）、「Studio」、「About」、「Journal」、「Reach Us」（非当前项，`text-[#6F6F6F]`）。每项均为 `text-sm`，悬停变黑。
> - **CTA 按钮（右侧）：** 「Begin Journey」—— `rounded-full px-6 py-2.5 text-sm bg-[#000000] text-white`，配 `hover:scale-[1.03] transition-transform duration-200`。
>
> ### Hero 区域
> - 外层容器：`relative flex flex-col items-center`
> - 内层容器：`relative w-full min-h-[60vh] sm:min-h-[65vh] md:min-h-[70vh] flex flex-col items-center`
> - 内容容器：`relative z-10 flex flex-col items-center text-center pt-16 sm:pt-20 md:pt-28 px-4 sm:px-6`，内联样式 `marginTop: '-70px'`
> - **标题：** `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal` —— 文字第一行为「Forge trust,」，第二行为「drive results.」（用 `<br />` 换行）
> - **副文本：** `mt-5 sm:mt-6 md:mt-8 max-w-sm sm:max-w-md text-sm md:text-base text-[#191919]/70 leading-relaxed px-2` —— 「Intelligent AI agents designed for today's lending companies -- software that manages every borrower touchpoint via phone, text, and email.」
> - **按钮：** 「Get Started」—— `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
>
> ### 信息框（叠加在 Hero 下方）
> - 容器：`relative z-10 w-full max-w-7xl px-4 sm:px-8 -mt-8 sm:-mt-12 md:-mt-16`
> - 框体：`bg-white/90 backdrop-blur-sm border border-gray-200 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm flex flex-col overflow-hidden`
> - **第一行（两栏网格 `grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-16`）：**
>   - 左侧：标签 `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium` —— 「How do we help?」。标题 `mt-3 text-2xl sm:text-3xl md:text-4xl font-normal leading-tight tracking-tight text-[#191919] font-serif` —— 「Dialogues that
spark progress」（换行在移动端隐藏 `hidden sm:block`）
>   - 右侧：`flex items-end`，段落 `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed` —— 「Conversational AI made for compliant financial organizations. Agents that carry a real dialogue, tie into the tools you use, and document their actions.」
> - **分隔线：** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
> - **第二行（三个功能药丸，`grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3`，`mt-6 sm:mt-8 md:mt-10`）：**
>   - 每个药丸：`group flex items-center justify-between bg-[#F4F3F3] px-4 sm:px-6 py-3.5 sm:py-4 hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`
>   - 内容：数字（`text-[#191919]/40`）加分隔符（`/`，`text-[#191919]/30 mx-2`）加标签（`font-medium`）
>   - 项目：「01 / Multichannel」「02 / Integrated」「03 / Auditable」
>   - 右侧图标：来自 lucide-react 的 `ArrowRight`，`w-4 h-4 text-gray-400`，配 `group-hover:text-gray-700 group-hover:translate-x-0.5 transition-all duration-200`
>
> ### 全局 CSS（index.css）
> ```css
> @tailwind base;
> @tailwind components;
> @tailwind utilities;
>
> * {
>   box-sizing: border-box;
> }
>
> body {
>   font-family: 'Inter', sans-serif;
>   -webkit-font-smoothing: antialiased;
>   -moz-osx-font-smoothing: grayscale;
> }
> ```
>
> ### 关键行为
> - 视频正好正向播放一次，然后暂停。不循环，不反向。
> - 页面完全响应式，断点为 sm、md、lg。
> - 极简的悬停动画：按钮缩放、箭头位移、颜色过渡。
> - 信息框下方不再有其他版块。

---

复用方法

关键决定

关键决定是把视频设为只正向播放一次然后暂停、不循环不反转，配合白底黑字的极简金融美学，让动效克制到不打扰内容阅读；信息框用两行网格加三个可点击功能药丸收束页面，把抽象的智能代理产品落到多渠道、可集成、可审计三个具体承诺上。

换到你的题材

换到你的题材时可以替换品牌名称、视频素材、标题文案和三个功能药丸的具体标签，骨架是单页无滚动动画的编辑风格布局、播放一次即停的背景视频、以及 Hero 加信息框叠层的两段式结构。换成其他金融科技或合规类产品时保留视频只播一次这一克制处理，避免过度炫技削弱信任感。

容易翻车

容易翻车的是视频只播放一次的逻辑容易被默认的 loop 属性覆盖导致重复播放，信息框与 Hero 之间的负边距叠层在小屏幕上也容易错位或重叠；复测时先确认视频播完后确实停在最后一帧而不是重新开始，再检查移动端信息框上移的负边距是否与标题内容打架。

建议模型

Claude · Fable

稳定度
成本: 中

创作者

viktoroddy

viktoroddy 在X输出 UI 工程化实践，《应式3D角色轮播动画UI》搭 Claude Sonnet 出方案，带可复现代码。

值得学习AI 编程(UI)稳定输出来源互动高

查看创作者 →

AI 编程(UI)X@Oluwaphilemon1 →

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 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度

稳定度

查看 Case →

AI 编程(UI)X@uxsweta →

3D 发票打印机 SaaS 组件

@uxsweta 使用 AI UI Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

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

提示语

有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv

来源热度

稳定度

查看 Case →

AI 编程(UI)X@shushant_l →

极简 AI 顾问个人作品集

@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 个人作品集叙事 Skill · 产品与电商转化页

提示语

下面介绍如何用 AI 以极简设计风格创建你的网站。使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美

来源热度

稳定度

查看 Case →

Prompt

一键获取所有令人惊艳动效网站的提示词：

> 用 **React + TypeScript + Vite + Tailwind CSS + lucide-react** 为一个名为 **「Aethera」**（一家专注放贷业务的金融科技 / AI 公司）构建一个单页落地页。页面背景为白色（`#fff`），不使用滚动动画——只做干净、极简、编辑风格的设计。
>
> ### 字体
> - **标题 / 衬线字体：** 「P22 Mackinac W01 Book」，从 `` 加载
> - **正文 / 无衬线字体：** 「Inter」（300、400、500、600 字重），来自 Google Fonts
> - Tailwind 配置：`fontFamily.sans = ['Inter', 'sans-serif']`，`fontFamily.serif = ['P22 Mackinac W01 Book', 'Georgia', 'serif']`
>
> ### 页面标题
> `<title>Build Lasting Relationships</title>`
>
> ### 背景视频
它必须在页面上垂直居中
> 使用这个**精确**的 CloudFront 视频 URL：
> ```
>
> ```
> 视频用**绝对定位**放置在 Hero 之后，使用：top: '50%', transform: 'translateY(-50%)'
和 CSS 滤镜 `brightness(1) contrast(1.2)`。使用 `object-contain`，静音，playsInline，preload="auto"。加载后播放一次，播放结束后暂停（不循环，不做回弹反转——只正向播放一次然后停止）。
>
> ### 导航栏
> - `relative z-20`，最大宽度 `max-w-7xl`，居中，`px-8 py-6`，两端对齐布局。
> - **Logo（左侧）：** 文字「Aethera」加上标注册商标符号——`font-serif text-3xl tracking-tight text-[#000000]`，配 `<sup className="text-xs align-super">®</sup>`
> - **导航链接（中间，移动端隐藏 `hidden md:flex`）：** 「Home」（当前项，`text-[#000000]`）、「Studio」、「About」、「Journal」、「Reach Us」（非当前项，`text-[#6F6F6F]`）。每项均为 `text-sm`，悬停变黑。
> - **CTA 按钮（右侧）：** 「Begin Journey」—— `rounded-full px-6 py-2.5 text-sm bg-[#000000] text-white`，配 `hover:scale-[1.03] transition-transform duration-200`。
>
> ### Hero 区域
> - 外层容器：`relative flex flex-col items-center`
> - 内层容器：`relative w-full min-h-[60vh] sm:min-h-[65vh] md:min-h-[70vh] flex flex-col items-center`
> - 内容容器：`relative z-10 flex flex-col items-center text-center pt-16 sm:pt-20 md:pt-28 px-4 sm:px-6`，内联样式 `marginTop: '-70px'`
> - **标题：** `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal` —— 文字第一行为「Forge trust,」，第二行为「drive results.」（用 `<br />` 换行）
> - **副文本：** `mt-5 sm:mt-6 md:mt-8 max-w-sm sm:max-w-md text-sm md:text-base text-[#191919]/70 leading-relaxed px-2` —— 「Intelligent AI agents designed for today's lending companies -- software that manages every borrower touchpoint via phone, text, and email.」
> - **按钮：** 「Get Started」—— `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
>
> ### 信息框（叠加在 Hero 下方）
> - 容器：`relative z-10 w-full max-w-7xl px-4 sm:px-8 -mt-8 sm:-mt-12 md:-mt-16`
> - 框体：`bg-white/90 backdrop-blur-sm border border-gray-200 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm flex flex-col overflow-hidden`
> - **第一行（两栏网格 `grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-16`）：**
>   - 左侧：标签 `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium` —— 「How do we help?」。标题 `mt-3 text-2xl sm:text-3xl md:text-4xl font-normal leading-tight tracking-tight text-[#191919] font-serif` —— 「Dialogues that
spark progress」（换行在移动端隐藏 `hidden sm:block`）
>   - 右侧：`flex items-end`，段落 `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed` —— 「Conversational AI made for compliant financial organizations. Agents that carry a real dialogue, tie into the tools you use, and document their actions.」
> - **分隔线：** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
> - **第二行（三个功能药丸，`grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3`，`mt-6 sm:mt-8 md:mt-10`）：**
>   - 每个药丸：`group flex items-center justify-between bg-[#F4F3F3] px-4 sm:px-6 py-3.5 sm:py-4 hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`
>   - 内容：数字（`text-[#191919]/40`）加分隔符（`/`，`text-[#191919]/30 mx-2`）加标签（`font-medium`）
>   - 项目：「01 / Multichannel」「02 / Integrated」「03 / Auditable」
>   - 右侧图标：来自 lucide-react 的 `ArrowRight`，`w-4 h-4 text-gray-400`，配 `group-hover:text-gray-700 group-hover:translate-x-0.5 transition-all duration-200`
>
> ### 全局 CSS（index.css）
> ```css
> @tailwind base;
> @tailwind components;
> @tailwind utilities;
>
> * {
>   box-sizing: border-box;
> }
>
> body {
>   font-family: 'Inter', sans-serif;
>   -webkit-font-smoothing: antialiased;
>   -moz-osx-font-smoothing: grayscale;
> }
> ```
>
> ### 关键行为
> - 视频正好正向播放一次，然后暂停。不循环，不反向。
> - 页面完全响应式，断点为 sm、md、lg。
> - 极简的悬停动画：按钮缩放、箭头位移、颜色过渡。
> - 信息框下方不再有其他版块。

---

复用方法

关键决定

换到你的题材

容易翻车

建议模型

Claude · Fable