精选 · 开放 · 免费

Morgen

一款 AI 驱动的日常计划工具，将日历与任务整合到一个统一的视图中。

productivitysaas
Morgen 网站截图
↓ 下载设计系统包 (14 MB)在 OpenDesign 中打开

原站: https://www.morgen.so

📦 浏览包内文件 →

01

设计气质 DNA

AI 驱动的计划工具日程安排日历集成任务管理

一个智能的数字助手，能智能地规划你的一天

02

色彩

#F3C26AAccent
#FFFFFFInk
#CBCCCCInk soft
#191A23BG
#1E202BBG soft
#2A2E3CBG quiet
#686A74Muted
rgba(203, 204, 204, 0.2)Line

深邃的深色背景搭配高对比度的白色文字，并使用温暖的金黄色作为主要操作的强调色。

03

字体

humanist-sans · monospace

04

间距

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

基于 4px 基线网格的一致垂直间距倍数系统。

05

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

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

用于在深色背景上进行分隔的 1px 微妙边框。

0px 0px 20px 5px rgba(0, 0, 0, 0.15) · 0px 2px 32px 0px rgba(0, 0, 0, 0.16)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

标准的居中内容布局，采用分屏首屏和交替排列的功能区块。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI 元素的平滑淡入效果 · 按钮和链接的悬停状态转换

交互元素上微妙的色彩或亮度变化。 · 通过缩放或色彩变化提供即时反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

Morgen 是一款 AI 驱动的日常计划工具，将日历和任务统一到一个智能的视图中。它被定位为面向个人和团队的高端生产力工具。其设计 DNA 的特点是深邃的深色模式美学（#191A23），搭配高对比度的白色字体和标志性的温暖金黄色强调色（#F3C26A）用于主要操作。字体设计简洁现代，使用 humanist sans-serif 类别字体作为标题和正文，以确保可读性并营造友好而专业的基调。关键设计原则包括保持充足的留白、使用圆角（甚至药丸形），以及避免使用明亮、刺眼的色彩或厚重、突兀的投影。布局居中且结构化，常采用分屏或堆叠区块来清晰呈现信息。动效保持微妙和功能化，聚焦于平滑的过渡，以体现高端质感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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