精选 · 开放 · 免费
Motion
AI 驱动的生产力平台，通过自动化排程与任务管理，将您的产出提升一倍。
productivitysaas
01
设计气质 DNA
生产力AI效率自动化工作流
一个简洁高效的数字工作空间，将日历、笔记与任务整合进一个 AI 驱动的中枢。
02
色彩
#2c77e7Accent
#101828Ink
#475467Ink soft
#ffffffBG
#f0f4f8BG soft
#f7f8fbBG quiet
#787f86Muted
rgba(71, 84, 103, 0.1)Line
洁净的白色背景搭配柔和的灰色点缀和鲜明的蓝色主操作色。
03
字体
humanist-sans · monospace
- display
64px · 700 - headline
40px · 700 - body
16px · 400 - small
14px · 400 - label
12px · 600
使用 Inter 作为正文与界面元素字体 · 使用 Albert Sans 作为较大的展示标题字体 · 保持展示文字的紧凑字间距 · 使用半粗字重进行强调和标签标注
04
间距
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
基于 4px 网格的一致性间距系统，配合充裕留白以提升可读性
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(71, 84, 103, 0.1)
0 4px 6px -1px rgba(0, 0, 0, 0.05) · 0 2px 4px -2px rgba(0, 0, 0, 0.05) · 0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1) · 0 8px 10px -6px rgba(0, 0, 0, 0.1)
06
布局
1200container
12columns
24pxgutter
768 / 1024 / 1280breakpoints
英雄区采用居中单栏布局，过渡到多栏功能区段
07
动效与交互
150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
所有交互元素的平滑过渡 (150ms) · hover 状态的颜色过渡 · 用于缩放与移动的变换过渡 · 用于深度效果的 box shadow 过渡
细微的颜色加深与阴影增强 · 按钮轻微缩放至 (0.98)
08
组件
- button 纯色蓝色 (44, 119, 231) 搭配白色文字，圆角 (8px)，带细微阴影和 hover 状态过渡
- card 白色背景搭配细微边框，圆角 (8-12px)，带柔和阴影
- chip 带浅色背景和细微边框的小型圆角标签
- input 带细微边框的白色输入框，圆角 (8px)，配有占位符文字
- hero 大型居中标题，采用渐变文字强调，搭配辅助说明文字和醒目的 CTA 按钮
09
文案语气与禁用清单
- 语气 自信、专业且结果导向
- 标题风格 大胆、直接的陈述，强调效益与优势
- 按钮文案 行动导向，明确价值主张（例如：“免费试用 Motion”）
- 避免在所有地方使用鲜艳的渐变 — 截图显示仅在特定文字高亮处使用细微渐变
- 避免堆砌多个 CTA — 截图显示每个区段仅设一个主要的“免费试用 Motion”按钮
- 避免使用厚重边框 — 截图显示非常细微的 1px 低透明度边框
- 避免色彩过载 — 截图显示以蓝色强调色和中性灰为主
- 避免使用装饰性字体 — 截图显示简洁易读的无衬线字体
- 避免文字过小 — 截图保持正文最小 14px 以确保可读性
- 避免: 过于技术化的术语
- 避免: 被动语态
- 避免: 缺乏具体细节的模糊承诺
- 避免: 过度使用感叹号
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一款名为 Motion 的高级 SaaS 生产力平台，定位为能将产出倍增的 AI 驱动工作空间。核心设计元素包括洁净的白色背景 (#ffffff)、细微的灰色点缀 (#f0f4f8, #787f86) 和鲜明的蓝色主色 (#2c77e7)。字体采用人文主义无衬线字体 (Inter 和 Albert Sans)，搭配大而粗的标题 (64px, 700字重) 与简洁的正文 (16px, 400字重)。关键设计约束：避免使用厚重阴影或边框，保持充裕留白，确保 CTA 醒目但不压倒一切，并保证所有文字具有强对比度。设计在强调清晰度和专业性的同时，仅在关键效益陈述处谨慎使用渐变文字效果以作强调。
en · zh-CN · zh-TW · ja · ko