精選 · 開放 · 免費

Superlist

一款整合任務、筆記與計畫的統一應用程式，由 AI 與語音技術驅動。

productsaasplayful

Superlist 網站截圖

↓ 下載設計系統包 (22 MB)在 OpenDesign 中開啟

原站: https://superlist.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

生產力統一工作區AI任務管理筆記

一個時髦的數位指揮中心，將您分散的清單整合至一個優雅的介面中。

02

色彩

#EE4B28Accent

#FFFFFFInk

#8E8DA0Ink soft

#181824BG

#1E1E2EBG soft

rgba(255, 255, 255, 0.08)Line

採用暗色模式優先，搭配鮮豔的橘色強調色用於主要操作與強調。

03

字型

geometric-sans · humanist-sans · monospace

display70px · 600
heading48px · 500
body16px · 400

大型展示標題使用緊湊的負字距。 · 強調部分使用粗體字重，內文則使用較輕字重。 · 所有關鍵文字確保高對比度（暗底上的白色）。

04

間距

4px

8px

10px

16px

20px

24px

30px

40px

50px

60px

一致性使用 4px 格線，首頁區塊則使用寬裕的 padding。

05

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

sm · 4px

md · 8px

lg · 20px

pill · 100px

使用 rgba(255,255,255,0.08) 的細微 1px 邊框進行區隔。

0px 10px 15px 0px rgba(0, 0, 0, 0.08) · 0px 1px 1px 0px rgba(0, 0, 0, 0.1) · inset 0px 0.5px 0px 0px rgba(255, 255, 255, 0.45)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

內容居中，擁有全寬暗色首頁區塊與堆疊的功能區塊。

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.44, 0, 0.56, 1)easing

hover 時的顏色過渡 · 平滑的淡入效果

顏色變化與細微的 opacity 調整。 · 立即的視覺回饋。

08

組件

button 膠囊狀按鈕，文字粗體，主要使用鮮豔的橘色強調色。
card 暗色卡片，帶有細微邊框與柔和陰影，採用圓角 (20px)。
chip 在截圖中並未突出顯示。
input 簡潔、極簡的輸入欄位，採用深色背景。
hero 巨大的字型排印居中於深色背景上，下方配有大型產品預覽圖。

09

文案語氣與禁用清單

語氣自信、現代且高度強調生產力。
標題風格 簡短、有力、具衝擊力的短語，強調統一整合。
按鈕文案 直接且以行動為導向，例如「免費註冊」。

勿使用淺色背景——截圖顯示的是深沉、沉浸式的介面。
勿使用圓角襯線字型——截圖顯示標題使用幾何無襯線字型。
勿整頁採用單欄版面——截圖顯示了多變化的佈局。
勿使用低調、低對比度的按鈕——截圖顯示的是鮮豔、高飽和度的強調按鈕。
勿使用過度的陰影效果——截圖顯示的是柔和、細微的浮動效果。
勿使用擁擠的間距——截圖顯示了寬裕的 padding 與 margin。
避免: 雜亂的版面
避免: 柔和或粉彩色調的配色方案
避免: 複雜、多層次的導航

10

包內真實截圖

Superlist — 桌面首屏（hero） — 桌面首屏（hero）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Superlist — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Superlist 是一款高階的生產力 SaaS 應用程式，整合任務、筆記與計畫。其設計 DNA 根植於深沉、沉浸式的配色方案 (背景色: #181824) 與高飽和度的橘色強調色 (#EE4B28)。展示文字使用粗體、幾何無襯線字型，內文則使用人文主義無襯線字型。關鍵的「不該做」包括：絕不使用淺色背景、避免標題使用襯線字型、並確保主要操作具有高對比度。介面強調統一的工作區，採用簡潔的深色卡片與寬裕的間距，營造出時髦且現代的感覺。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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