精選 · 開放 · 免費

Mem

一個乾淨、溫暖且智能的 SaaS 落地頁，用於一款個人 AI 驅動的筆記應用程式。

productivitynotes
Mem 網站截圖
↓ 下載設計系統包 (21 MB)在 OpenDesign 中開啟

原站: https://get.mem.ai

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI優先知識管理極簡主義溫暖親切

一本優雅、溫暖的數位筆記本，能預先理解您的需求。

02

色彩

#100F31Ink
#FCF8F1BG
#707070Muted
rgba(16, 15, 49, 0.15)Line

溫暖的米白色背景搭配深海軍藍字體，營造冷靜、易讀的體驗。

03

字型

humanist-sans · monospace

04

間距

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

以 4px 為基準的垂直節奏，並搭配寬裕的 padding。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px
md · 8px
lg · 60px
pill · 100px

主要互動元素使用 1px solid #100F31 邊框。

無

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

置中的容器搭配不對稱的首頁佈局。

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

平滑的過渡效果

hover 時細微的透明度或色彩變化。 · 立即的視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Mem 是一款乾淨、溫暖且專注於 AI 的 SaaS 應用程式，用於個人知識管理。它使用溫暖的奶油色背景（#FCF8F1）搭配深海軍藍（#100F31）字體，營造冷靜、易讀的體驗。設計採用 humanist-sans 字體系列，搭配寬裕的間距和藥丸形的 UI 元素。關鍵設計規則：避免白色背景、避免使用刺眼的主藍色按鈕，並使用左對齊、著重效益的標題而非置中文字。整體美學是極簡、友善，並專注於清晰度和易用性。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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