OpenDesign·你的设计资产库

网页参考

LottieFiles

在网站、应用、演示文稿、社交媒体等平台创建、管理并应用轻量化动画。

DesignMotion
LottieFiles 网站截图

01

设计气质 DNA

动效动画轻量化交互开发者

一款让动画对开发者和设计师都触手可及的趣味性动效设计工具包。

02

色彩

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

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

03

字体

humanist-sans · ui-monospace

  • display64px · 500
  • h148px · 500
  • h224px · 500
  • body16px · 400
  • small14px · 400

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

组件

  • button 圆角（胶囊形）主操作按钮，采用青绿色背景；次要按钮为描边样式。
  • card 深色区域使用16px圆角的深色背景卡片；白色区域使用带描边的浅色卡片。
  • chip 用于功能亮点展示的圆角小标签，包含图标和文字。
  • input 带搜索图标、微妙边框和圆角的搜索输入框。
  • hero 全宽区域，左侧为大号排版文字，右侧为活泼的3D角色插图。

09

文案语气与禁用清单

  • 语气 友好、自信、平易近人。
  • 标题风格 以行动为导向，使用关于动效和设计的大号、加粗陈述句。
  • 按钮文案 使用直接的动词，例如“免费开始”、“联系我们”。
  • 不要使用生硬、尖锐的容器——截图显示卡片和按钮均为圆角。
  • 不要使用灰暗、低饱和度的点缀色——截图显示使用鲜艳的青绿色（#00b894）作为主色。
  • 不要将所有插图扁平化为2D——截图显示使用具有深度的趣味性3D角色插图。
  • 不要使用单色主视觉区域——截图显示为白色背景搭配彩色角色插图。
  • 不要使用拥挤、密集的布局——截图显示留有充足的留白和呼吸空间。
  • 不要使用衬线字体——截图显示通篇使用干净的人文主义无衬线字体。
  • 不要默认使用深色模式——截图显示主视觉区域为亮色模式，下方区域为深色。
  • 避免: 企业套话
  • 避免: 缺乏语境的过度技术化语言
  • 避免: 过于激进的销售用语

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

LottieFiles 是一个面向开发者和设计师的动效设计平台。定位：用于轻量化动画的趣味性SaaS工具。关键色值：#ffffff（背景）、#1a1a2e（文本）、#00b894（青绿色点缀）、#f6f7f5（浅色背景）。字体类别：用于展示和正文的人文主义无衬线字体，用于代码的等宽字体。关键禁忌：1) 不要使用生硬的尖锐角——使用圆角/胶囊形状。2) 不要将插图扁平化——保持趣味性的3D角色风格。3) 不要使用单色——在保持干净青绿色为主色的同时，插图中保留鲜艳的多彩点缀。4) 不要创建密集的布局——保持充足的留白。5) 不要使用衬线字体——坚持使用干净的无衬线字体。6) 不要使用过于激进的CTA——保持友好、以行动为导向的文案。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。