精选 · 开放 · 免费

Theseawebreathe

一个沉浸式的电影感网页体验，将氛围摄影与数据驱动的 UI 元素相结合。

01

设计气质 DNA

深海探险任务的控制中心仪表盘。

02

色彩

一套严格的单色蓝色调色板，依靠氛围摄影和浅青色强调色，营造沉浸式、数据丰富的环境。

03

字体

geometric-sans

• display80px · 500
• display-sm44px · 500
• body14px · 400

在所有文本元素中一致地使用大写文本转换。 · 为较小文本保持较宽的字间距（1.5px+）以确保可读性。 · 使用几何无衬线字体用于标题和正文，以保持技术感。

04

间距

采用宽松的间距以强调沉浸感，并避免数据点显得拥挤。

05

表面 (圆角 / 阴影 / 边线)

使用浅青色（#94E6FB）或近白色（#E5FAFF）的细 1px 边框，采用复杂的边框简写模式。

06

布局

全视口画布，UI 元素通过绝对定位分布在四角和中心。

07

动效与交互

径向进度指示器的平滑旋转动画。 · 连续数据点的级联淡入效果。 · 优雅的页面过渡，以保持电影感氛围。

交互元素上的微妙颜色变化或结构显现。 · 启动沉浸式旅程的下一阶段。

08

组件

• button 基于文本的操作，使用角落括号装饰器代替纯色背景。
• card 不适用 - 布局使用氛围图像而非传统的卡片组件。
• chip 不适用 - 状态指示器直接集成到文本层级中。
• input 不适用
• hero 全屏摄影背景，中央为径向数据可视化，并叠加大型排版文字。

09

文案语气与禁用清单

• 语气 兼具技术性与诗意，将数据点与环境意识相结合。
• 标题风格 粗体、大写且富有氛围感，常跨多行显示。
• 按钮文案 极简且具引导性，由技术性的角落括号构成框架。

• 不要为按钮使用纯色背景——截图显示为仅带角落括号的文本操作。
• 不要使用小型、密集的文本块——截图显示为间距宽松、版式宽松的大字体。
• 不要使用暖色或鲜艳的颜色——截图显示为严格的冷色调单色蓝色调色板。
• 不要为 UI 元素使用圆角——截图显示为尖锐的、零圆角边框。
• 不要使用厚重的投影——截图显示为完全扁平、充满氛围感的光照风格。
• 不要混合字体样式——截图显示为几何无衬线字体在标题和正文中的一致使用。
• 避免: 暖色调
• 避免: 俏皮的语言
• 避免: 密集的文本块
• 避免: 杂乱的 UI 元素
• 避免: 明亮、高饱和度的渐变

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko