精選 · 開放 · 免費

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）用於主要操作。字體排印簡潔現代，標題與內文均採用人文無襯線字體類別，以確保可讀性並兼具友善與專業的語調。關鍵設計原則包括維持充足的留白、使用圓角（最大可至膠囊形狀），並避免使用鮮豔、俗豔的色彩或厚重、突兀的陰影。佈局採用置中且結構化的設計，通常使用分割畫面或堆疊式區塊來清晰呈現資訊。動畫保持細微且具功能性，著重於流暢的過渡效果以營造高階質感。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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