精选 · 开放 · 免费

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

采用干净、高对比度的调色板，在中性的白色和深色背景上使用单一鲜艳的青绿色作为点缀，并通过活泼的多彩插图增添个性。

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

交互元素在悬停状态下的平滑过渡 · 用于UI反馈的transform和opacity动画 · 按钮和链接的颜色与背景过渡

颜色与背景色在150-300毫秒内过渡，并伴有微妙的opacity变化。 · transform和scale微交互。

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（青绿色点缀）、#f6f7f5（浅色背景）。字体类别：用于展示和正文的人文主义无衬线字体，用于代码的等宽字体。关键禁忌：1) 不要使用生硬的尖锐角——使用圆角/胶囊形状。2) 不要将插图扁平化——保持趣味性的3D角色风格。3) 不要使用单色——在保持干净青绿色为主色的同时，插图中保留鲜艳的多彩点缀。4) 不要创建密集的布局——保持充足的留白。5) 不要使用衬线字体——坚持使用干净的无衬线字体。6) 不要使用过于激进的CTA——保持友好、以行动为导向的文案。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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