OpenDesign·你的设计资产库

网页参考

Reclaim

一款AI优先的日历应用，旨在自动化日程安排并重获工作与生活的平衡。

ProductivitySaaS
Reclaim 网站截图

01

设计气质 DNA

智能自动化生产力日程安排

您的AI驱动的时间管理者，自动整理您的工作日历。

02

色彩

#5562EBAccent
#181D25Ink
#4A4A4AInk soft
#FFFFFFBG
#EBEFFFBG soft
#F5F7FABG quiet
#6B7280Muted
rgba(24, 29, 37, 0.1)Line

以干净、高对比度为基础，搭配充满活力的主蓝色强调色和用于突出重点的辅助绿色调。

03

字体

geometric-sans · humanist-sans · monospace

  • display72px · 700
  • headline40px · 600
  • subhead24px · 500
  • body18px · 400
  • caption14px · 400

使用几何无衬线体作为醒目、现代的标题字体。 · 使用人文无衬线体作为易读的正文字体。

04

间距

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

基于4px网格，主视觉区域留有大量空白，UI组件的间距则更为紧凑。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(24, 29, 37, 0.1)

0px 5px 40px 0px rgba(9, 14, 21, 0.16) · 0px 20px 32px -8px rgba(9, 20, 66, 0.25)

06

布局

1280container
12columns
24pxgutter
768 / 1024 / 1440breakpoints

响应式网格，包含一个醒目的居中主视觉区域，其后是交替排列的内容块。

07

动效与交互

150msmicro
250mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

元素进入视口时，采用微妙的淡入和变换过渡。 · 交互元素在hover状态下，进行颜色和描边过渡。

主要按钮上的颜色或亮度发生微妙变化；卡片略微放大或提升阴影。 · 通过缩放或透明度变化提供即时视觉反馈。

08

组件

  • button 圆润的药丸形状（999px圆角），高对比度；主要操作使用纯蓝色背景，次要操作使用描边样式。
  • card 微妙的圆角（12px），采用浅色背景（蓝色、绿色、深色）并整合图像。
  • chip 小型的圆角标签或徽章，用于状态或功能亮点。
  • input 标准圆角输入框，带有微妙的边框，常用于表单或搜索界面。
  • hero 宏大的排版搭配产品模型或生活场景图像，大量运用留白。

09

文案语气与禁用清单

  • 语气 专业、自信且乐于助人。
  • 标题风格 直接、以收益为导向，并强调产品的“AI”和“自动化”特性。
  • 按钮文案 以行动为导向且具有鼓励性，常使用“立即开始”或“预约演示”。
  • 不要使用深色模式作为主要界面——截图显示的是一个以浅色、白色为主的主题。
  • 不要为标题使用单色渐变——截图显示“calendar”一词使用了多色渐变（蓝色到绿色）。
  • 不要为主要元素使用尖锐的方形边角——截图显示按钮广泛使用了药丸形状（999px圆角）。
  • 不要使用拥挤或密集的布局——截图显示有大量留白和大号字体以保证清晰度。
  • 不要为UI文本使用装饰性或衬线字体——截图显示整体使用了干净、现代的无衬线字体。
  • 不要为主要操作使用柔和或低对比度的颜色——截图为主按钮使用了高饱和度的蓝色。
  • 避免: 模糊的营销术语
  • 避免: 激进或推销式的语言
  • 避免: 过度使用最高级形容词

10

包内真实截图

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

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

11

System Prompt

Reclaim.ai 是一款专注于自动化日历管理的AI驱动生产力SaaS工具。其视觉系统采用干净、浅色为主的美学，主强调色为 #5562EB（充满活力的蓝色），辅助绿色为 #7AC17B。排版融合了几何和人文无衬线字体，营造出现代且高度可读的界面。关键元素包括以收益为导向的宏大标题和大量留白。关键设计规则：不要为按钮使用尖锐的方形边角（使用药丸形状）；不要将深色模式作为主要UI；不要在非标题文本上使用复杂渐变；确保所有主要CTA具有高对比度；保持充足的留白以避免杂乱感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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