精選 · 開放 · 免費

LottieFiles

跨網站、應用程式、簡報、社群等平台，輕鬆建立、管理及實作輕量化動畫。

designmotion
LottieFiles 網站截圖
↓ 下載設計系統包 (13 MB)在 OpenDesign 中開啟

原站: https://lottiefiles.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

動態動畫輕量化互動開發者

一套活潑的動態設計工具，讓動畫變得對開發者與設計師都觸手可及。

02

色彩

#00b894Accent
#1a1a2eInk
#4a4a6aInk soft
#ffffffBG
#f6f7f5BG soft
#6b7280Muted
rgba(235,238,235,0.5)Line

簡潔、高對比的配色方案，以單一鮮明的 teal 強調色搭配中性的白色與深色背景，並透過活潑的多彩插圖增添個性。

03

字型

humanist-sans · ui-monospace

04

間距

4px
8px
12px
16px
24px
32px
48px
64px
96px

寬裕的留白搭配一致的 4px 基礎格線，為元素之間創造舒適的呼吸空間。

05

表面 (圓角 / 陰影 / 邊線)

sm · 6px
md · 8px
lg · 16px
pill · 9999px

1px solid rgba(235,238,235,0.5)

0 1px 2px 0 rgba(0,0,0,0.05) · 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

標準的置中容器，配有充足的水平內邊距，全寬首頁橫幅區域，內容置左對齊。

07

動效與互動

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

互動元素於 hover 狀態時的平滑過渡 · 用於 UI 回饋的變換與透明度動畫 · 按鈕與連結的色彩與背景過渡

色彩與背景色過渡時間為 150-300 毫秒，伴隨細微的透明度變化 · 變換與縮放的微互動

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

LottieFiles — 桌面首屏（hero）
桌面首屏（hero）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

LottieFiles 是一個專為開發者與設計師打造的動態設計平台。定位：用於輕量化動畫的活潑 SaaS 工具。關鍵色碼：#ffffff（背景）、#1a1a2e（文字）、#00b894（teal 強調色）、#f6f7f5（柔和背景）。字體類別：用於標題與內文的 humanist-sans，用於程式碼的 ui-monospace。重要注意事項：1) 不要使用生硬的銳利邊角 — 改用圓角/膠囊形狀。2) 不要將插圖扁平化 — 保持活潑的 3D 角色風格。3) 不要使用單色調 — 在插圖中保留鮮明的多彩強調色，同時維持簡潔的 teal 作為主色。4) 不要建立擁擠的佈局 — 保持寬裕的留白。5) 不要使用襯線字體 — 堅持使用簡潔的無襯線字體。6) 不要使用具侵略性的行動呼籲 — 保持友善、以行動為導向的文案。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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