OpenDesign·你的设计资产库

网页参考

Spline

黑底首屏以彩色三维物体围绕居中标题，蓝色主按钮位于说明下方。

Design3DTooling
Spline 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 装饰物围绕文字留出中心安全区
  • 明亮按钮与彩色物体分开层级

适合什么项目

  • 三维创作工具
  • 视觉技术产品

如何带进你的设计

  • 先留出稳定文字区域再放置装饰
  • 为低性能或减少动态偏好提供静态版本

使用边界

  • 截图不能证明三维对象可交互，也不能推断代码依赖
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

01

设计气质 DNA

交互式3D设计平台协作

构建3D世界的数字乐园

02

色彩

#0062FFAccent
#ffffffInk
rgba(255,255,255,0.6)Ink soft
#000000BG
#1e1e23BG soft
rgba(255,255,255,0.05)BG quiet
#888888Muted
rgba(255,255,255,0.1)Line

高对比度的暗色模式，搭配鲜明的蓝色强调色和多彩的3D元素，以增强视觉冲击力。

03

字体

humanist-sans · monospace

  • display40px · 400

使用 system-ui 回退字体以确保可靠性 · 大型显示文本保持紧凑的字间距 · 使用 16px 作为标准正文字号

04

间距

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

标准的 4px 网格系统，主要区块采用充裕的垂直间距

05

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

sm · 4px
md · 12px
lg · 16px
pill · 999px

使用 rgba(255,255,255,0.1) 的 1px 微妙边框

0px 4px 12px rgba(0,0,0,0.5)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中布局，一个大型主视觉区域后接内容区块

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

悬停时的微妙色彩过渡 · 平滑的背景颜色变化

微妙的颜色变化和指针光标 · 通过标准按钮按压状态提供即时反馈

08

组件

  • button 药丸形主按钮，采用纯色蓝色背景和白色文字；次级按钮采用深色背景
  • card 深色、略微抬升的表面，带微妙边框
  • chip 带有图标的圆角小标签
  • input 极简设计，带微妙边框
  • hero 大型居中标题，叠加在交互式3D画布背景上

09

文案语气与禁用清单

  • 语气 专业且平易近人
  • 标题风格 直接且以利益为导向
  • 按钮文案 具有鼓励性且聚焦行动，提供清晰的价值主张
  • 不要使用浅色背景——截图显示深黑色背景是主要画布
  • 不要使用红色或橙色作为主强调色——截图使用特定的鲜明蓝色
  • 不要在标题中使用衬线字体——截图使用简洁的人文主义无衬线字体
  • 不要使用棱角分明的矩形按钮——截图显示的是药丸形和圆角按钮
  • 不要让主视觉区域显得杂乱——截图保持了简洁的居中布局和充裕的留白
  • 不要使用扁平、静态的元素——截图展示了交互式3D对象和网格地面
  • 避免: 充斥术语的技术性语言
  • 避免: 激进的销售话术
  • 避免: 被动或犹豫的措辞

10

包内真实截图

Spline — 桌面首屏（hero）
桌面首屏（hero）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spline — 移动首屏
移动首屏

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

11

System Prompt

这是 Spline 的设计系统，一个3D和交互式设计平台。其视觉身份建立在高对比度的暗色模式美学之上（#000000 背景），主强调色为鲜明的蓝色（#0062FF）。字体使用简洁的人文主义无衬线字体（Spline Sans），标准基础字号为16px。关键约束：切勿使用浅色或白色背景作为主要画布，避免使用红色或橙色作为主导强调色，并始终使用药丸形或圆角按钮而非棱角分明的矩形按钮。布局居中且宽敞，专注于展示3D内容。交互应平滑且微妙，大多数颜色变化使用0.2秒过渡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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