OpenDesign·你的设计资产库

网页参考

Theseawebreathe

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

Dark ModePhotographicExperimentalCalmEditorial

封面待补录,可通过原站查看设计。

01

设计气质 DNA

海洋沉浸式数据可视化连接环境

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

02

色彩

#E5FAFFInk
#94E6FBInk soft
#083D63BG
rgba(148, 230, 251, 0.5)Line

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

03

字体

geometric-sans

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

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

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

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

06

布局

1920container
12columns
24pxgutter
768 / 1024breakpoints

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

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

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

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

08

组件

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

09

文案语气与禁用清单

  • 语气 兼具技术性与诗意,将数据点与环境意识相结合。
  • 标题风格 粗体、大写且富有氛围感,常跨多行显示。
  • 按钮文案 极简且具引导性,由技术性的角落括号构成框架。
  • 不要为按钮使用纯色背景——截图显示为仅带角落括号的文本操作。
  • 不要使用小型、密集的文本块——截图显示为间距宽松、版式宽松的大字体。
  • 不要使用暖色或鲜艳的颜色——截图显示为严格的冷色调单色蓝色调色板。
  • 不要为 UI 元素使用圆角——截图显示为尖锐的、零圆角边框。
  • 不要使用厚重的投影——截图显示为完全扁平、充满氛围感的光照风格。
  • 不要混合字体样式——截图显示为几何无衬线字体在标题和正文中的一致使用。
  • 避免: 暖色调
  • 避免: 俏皮的语言
  • 避免: 密集的文本块
  • 避免: 杂乱的 UI 元素
  • 避免: 明亮、高饱和度的渐变

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

该网站是 Blue Marine Foundation 的一个沉浸式电影感网页体验。它采用严格的单色调色板,以深海蓝(#083D63)为主色,浅青色(#94E6FB / #E5FAFF)作为强调色。字体仅使用几何无衬线字体,以大写形式展示,并采用宽松的字间距以保持技术驱动的数据美学。关键设计规则:避免使用任何暖色,使用带角落括号的纯文本操作代替实心按钮,并保持宽敞、充满氛围感的布局,将视觉沉浸感置于传统的信息密度之上。整体感觉是一个叠加在美丽海洋摄影之上的高科技任务控制界面。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。