精选 · 开放 · 免费

Jitter

为每个团队带来超快速的动效

designmotion

Jitter 网站截图

↓ 下载设计系统包 (9 MB)在 OpenDesign 中打开

原站: https://jitter.video

📦 浏览包内文件 →

01

设计气质 DNA

动效动画速度协作团队

面向浏览器的数字动画工作室

02

色彩

#A481FFAccent

#19171CInk

#6E6E73Ink soft

#FFFFFFBG

#F2F1F3BG soft

#E5E4E7BG quiet

#97979BMuted

rgba(215, 215, 219, 1)Line

单色比例，搭配单一柔和的紫色点缀

03

字体

grotesque-sans · humanist-sans · monospace

display72px · 800
body18px · 400

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

一致的 4px 基线网格，搭配 40px 的区域间距

05

表面 (圆角 / 阴影 / 边线)

sm · 4px

md · 8px

lg · 12px

pill · 999px

无边框或使用微弱的 1px solid 边框

0px 9px 21px 0px rgba(25, 23, 28, 0.1) · 0px 38px 38px 0px rgba(25, 23, 28, 0.09) · 0px 85px 51px 0px rgba(25, 23, 28, 0.05)

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

居中的单栏主视觉区域，全宽 Logo 展示带

07

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

滚动触发的淡入效果 · 基于弹簧的复杂线性变换 · 透明度过渡

鼠标指针样式为指针，并伴有平滑过渡 · 微弱的缩放或透明度反馈

08

组件

button 药丸形按钮，采用柔和的紫色背景与深色文字，或深色背景与白色文字
card 白色背景，带有微弱阴影和圆角
chip 药丸形标签，浅灰色背景
input 标准表单输入框，带有圆角
hero 居中的大字体排版，配有醒目的 CTA 按钮

09

文案语气与禁用清单

语气自信、直接、赋能
标题风格 简短、有力、以行动为导向
按钮文案 清晰、低摩擦、富有鼓励性

不要使用繁杂的背景——截图显示为干净的白色或柔和灰色背景
不要使用装饰性衬线字体——截图仅显示干净的无衬线字体排版
不要使用多种多样的点缀色——截图显示为单一主导的紫色点缀
不要为主要按钮使用尖锐的直角——截图显示为完全圆润的药丸形按钮
不要使用密集的多栏布局——截图显示为清晰的单栏主视觉区域
不要使用小而拥挤的标题——截图显示为大号、粗体、高冲击力的展示字体
避免: 行话术语
避免: 复杂长句
避免: 正式企业语言
避免: 模糊的承诺

10

包内真实截图

Jitter — 桌面首屏（hero） — 桌面首屏（hero）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Jitter 是一款快速、协作的动效设计工具。该设计采用简洁的白色背景，并以单一柔和的紫色作为行动号召的点缀色。字体排版粗犷而干净，展示字体使用 grotesque-sans，正文使用 humanist-sans。关键设计元素包括大号、富有冲击力的标题、药丸形按钮以及充裕的间距。避免使用深色模式、复杂的调色板或衬线字体。关键禁忌：避免繁杂的背景，不要使用多种颜色，避免按钮上的尖锐直角。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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