精選 · 開放 · 免費

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

懸停時細微的色彩過渡 · 平滑的背景色變化

細微的色彩變化與游標變為 pointer · 提供即時回饋，使用標準按鈕按壓狀態

08

組件

button 藥丸形狀的主按鈕，實心藍色背景與白色文字；次按鈕使用深色背景
card 深色、略微凸起的表面，帶有細微邊框
chip 帶有圖示的圓角小標籤
input 極簡風格，帶有細微邊框
hero 大型居中標題，置於互動式 3D 畫布背景之上

09

文案語氣與禁用清單

語氣專業且平易近人
標題風格 直接且以效益為導向
按鈕文案 鼓勵性且以行動為焦點，並提出清晰的價值主張

請勿使用淺色背景——截圖顯示深黑色背景作為主要畫布
請勿使用紅色或橙色作為主要強調色——截圖使用特定的鮮活藍色
請勿在標題中使用襯線字體——截圖使用簡潔的 humanist-sans-serif
請勿使用尖角矩形按鈕——截圖顯示藥丸形狀與圓角按鈕
請勿讓主視覺區域顯得擁擠——截圖保持簡潔、居中的佈局並留有充足空白
請勿使用扁平、靜態的元素——截圖特色是互動式 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）作為主要強調色。字體使用簡潔的 humanist-sans-serif（Spline Sans），標準基礎大小為 16px。關鍵限制：絕不使用淺色或白色背景作為主要畫布，避免使用紅色或橙色作為主要強調色，並始終使用藥丸形或圓角按鈕而非尖角矩形。佈局居中且寬敞，專注於展示 3D 內容。互動效果應平滑且細微，大多數色彩變化使用 0.2s 過渡。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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