精选 · 开放 · 免费

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 时的颜色过渡 · 平滑的淡入效果

颜色变化和细微的透明度调整。 · 即时的视觉反馈。

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 应用，用于管理任务、笔记和计划。其设计基因植根于深邃、沉浸式的配色（背景色：#181824），并搭配高饱和度的橙色强调色（#EE4B28）。它使用粗体、几何无衬线字体作为展示文本，使用人文主义无衬线字体作为正文内容。关键禁忌包括：绝不使用浅色背景，避免使用衬线字体作为标题，并确保主要操作具有高对比度。界面强调统一的工作区，采用干净的深色卡片和充足的间距，营造出流畅现代的感觉。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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