OpenDesign·你的设计资产库

网页参考

Morgen

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

ProductivitySaaS
Morgen 网站截图

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

  • display56px · 700
  • heading48px · 700
  • subheading32px · 600
  • body16px · 400
  • caption14px · 400

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

组件

  • button 高对比度的药丸形行动号召按钮，采用金黄色背景。
  • card 深色、带有微妙提升效果的圆角容器，用于展示应用模型和功能。
  • chip 用于显示计数或标签的小型圆角徽章。
  • input 深色主题、带有微妙边框的输入框。
  • hero 居中的标题，配有醒目的行动号召按钮和下方的大型产品模型展示。

09

文案语气与禁用清单

  • 语气 赋能、有益且现代。
  • 标题风格 以行动为导向、强调收益，突出 AI 与用户控制力。
  • 按钮文案 直接且具有鼓励性，聚焦于引导用户开始使用。
  • 不要使用亮白色背景——截图显示主要界面为深邃的深色模式。
  • 不要使用霓虹色或高饱和度色彩作为强调色——截图显示的是温暖、柔和的金黄色。
  • 不要使用尖锐、方正的圆角——截图显示按钮和卡片均采用一致的圆角设计。
  • 不要在标题中使用衬线字体——截图显示所有标题均使用简洁的无衬线字体。
  • 不要使用复杂、多彩的渐变作为背景——截图显示为纯深色调和微妙的渐变。
  • 不要使用厚重的投影——截图显示为非常微妙、柔和的投影以体现提升效果。
  • 避免: 使用过于技术化的行话
  • 避免: 依赖冷淡或非个人化的语言
  • 避免: 制造视觉杂乱或不必要的干扰

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

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

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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