精选 · 开放 · 免费

Spline

一个用于创建和协作交互式3D及设计体验的一体化平台。

design3dtool

Spline 网站截图

↓ 下载设计系统包 (17 MB)在 OpenDesign 中打开

原站: https://spline.design

📦 浏览包内文件 →

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 — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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