厳選・オープン・無料

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

信頼性を確保するため、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

hover時の微細な色の変化 · 滑らかな背景色の変化

微細な色のシフトとカーソルポインタ · 標準的なボタンの押下状態による即時フィードバック

08

コンポーネント

09

文体と禁止事項

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

これは、3D・インタラクティブデザインプラットフォーム「Spline」のデザインシステムです。ビジュアルアイデンティティは、ハイコントラストダークモード美学（背景色 #000000）と、プライマリアクセントとしての鮮やかなブルー（#0062FF）に基づいています。タイポグラフィは、クリーンなヒューマニストサンセリフ（Spline Sans）を標準の16pxベースサイズで使用しています。重要な制約として、プライマリキャンバスに明るい色や白の背景を使用せず、主なアクセントカラーとして赤やオレンジを使用せず、常に鋭い長方形ではなくピル型または角丸のボタンを使用します。レイアウトは中心に据えられ、ゆったりとしており、3Dコンテンツのショーケースに焦点を当てます。インタラクションは滑らかで微細なものとし、ほとんどの色の変更には0.2秒のトランジションを使用します。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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