精选 · 开放 · 免费
Spline
一个用于创建和协作交互式3D及设计体验的一体化平台。
design3dtool
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
使用 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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是 Spline 的设计系统,一个3D和交互式设计平台。其视觉身份建立在高对比度的暗色模式美学之上(#000000 背景),主强调色为鲜明的蓝色(#0062FF)。字体使用简洁的人文主义无衬线字体(Spline Sans),标准基础字号为16px。关键约束:切勿使用浅色或白色背景作为主要画布,避免使用红色或橙色作为主导强调色,并始终使用药丸形或圆角按钮而非棱角分明的矩形按钮。布局居中且宽敞,专注于展示3D内容。交互应平滑且微妙,大多数颜色变化使用0.2秒过渡。
en · zh-CN · zh-TW · ja · ko