精選 · 開放 · 免費
Rive
為設計、動畫與全平台部署而生的互動體驗引擎。
designmotiontool
01
設計氣質 DNA
互動引擎動畫設計程式碼
打造跨平台互動動畫的專業精工坊。
02
色彩
#f1f1f1Ink
#999999Ink soft
#000000BG
#121212BG soft
#1d1d1dBG quiet
#666666Muted
rgba(255,255,255,0.1)Line
深色基底搭配高對比白色文字與細微灰色點綴。
03
字型
grotesque-sans · humanist-sans · monospace
- display
56px · 500 - h2
32px · 500 - body
16px · 400 - caption
12px · 400
展示標題採用全大寫與緊湊字距。 · 內文使用稍增行高以提升可讀性。 · 按鈕文字採用全大寫與寬鬆字距。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 為基準，統一應用 8px 與 16px 增量。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用低透明度白色打造 1px 實線細微邊框。
rgba(0, 0, 0, 0) 0px 0px 0px 1px inset
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬深色背景，搭配居中區塊與 12 欄網格系統。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
互動元素的 hover 過渡效果。 · 區塊間流暢滾動。
按鈕與連結的細微色彩或透明度變化。 · 點擊時提供即時視覺回饋。
08
組件
- button 高對比主按鈕採金色描邊，次要按鈕配細微邊框。
- card 深色卡片配細微邊框與圓角，展示視覺範例。
- chip 未明顯使用。
- input 未明顯使用。
- hero 大型居中排版搭配兩個醒目行動按鈕。
09
文案語氣與禁用清單
- 語氣 專業、自信且具前瞻性。
- 標題風格 大膽、全大寫且具權威感。
- 按鈕文案 清晰、導向行動且醒目。
- 避免使用淺色背景 — 截圖顯示純黑基底。
- 避免使用圓潤 playful 字體 — 截圖顯示幾何感強烈的 grotesque-sans。
- 避免將多彩漸層作為主要元素 — 截圖採用黑底高對比白色。
- 避免使用細小按鈕 — 截圖顯示大型醒目行動按鈕。
- 避免主視覺區塊使用複雜多欄佈局 — 截圖採用居中單欄聚焦。
- 避免依賴陰影營造深度感 — 截圖依靠邊框與對比度。
- 避免: 過於隨意或 playful 的語言。
- 避免: 擁擠的佈局。
- 避免: 低對比度文字。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此網站是打造互動動畫的高端開發者工具，定位為主要品牌的「互動體驗引擎」。採用純黑背景 (#000000)、柔和深色介面 (#121212) 與高對比白色文字 (#f1f1f1) 的深色模式美學。排版使用幾何感 grotesque-sans 作為展示字體，humanist-sans 作為內文字體，營造專業權威感。佈局居中寬敞，強調大型標題與帶金色描邊的醒目行動按鈕。核心設計原則包含克制、清晰度及透過對比營造視覺衝擊。關鍵禁忌包括避免淺色背景、playful 字體、擁擠佈局、細微按鈕、複雜多欄主視覺區塊，以及依賴陰影營造深度。
en · zh-CN · zh-TW · ja · ko