精选 · 开放 · 免费

Super

一款简洁、高对比度的 SaaS 工具，用于将 Notion 文档转化为专业网站。

nocodetool
Super 网站截图
↓ 下载设计系统包 (18 MB)在 OpenDesign 中打开

原站: https://super.so

📦 浏览包内文件 →

01

设计气质 DNA

简洁高效Notion 驱动专业网页构建

一个干净、专业的工作空间，能立即将你的笔记转化为精美的公开网站。

02

色彩

#FFBE3CAccent
#262A2EInk
#66707AInk soft
#FFFFFFBG
#F9F9F8BG soft
#FDFDFCBG quiet
#808C99Muted
rgba(204, 209, 214, 1)Line

高对比度基底，搭配单一活力点缀色。

03

字体

geometric-sans · humanist-sans · monospace

为大号展示文本使用紧凑的字间距。 · 确保正文在白色背景上具有高对比度。

04

间距

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

一致的 4px 基础网格，各板块间保持充足的垂直间距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 16px
pill · 999px

1px solid rgba(204, 209, 214, 1)

rgba(0, 0, 0, 0.008) 2.6px 4px 2.6px 0px · rgba(0, 0, 0, 0.01) 7.3px 11px 7.1px 0px · rgba(0, 0, 0, 0.02) 58px 88px 57px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中单栏主视觉布局，搭配标准顶部导航栏。

07

动效与交互

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

UI 过渡使用 opacity 淡入淡出 · 交互元素上使用快速的 transform 缩放

主按钮的背景色微妙变化或轻微缩放。 · 即时状态改变，过渡延迟极小。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

Super 是一款简洁、高对比度的 SaaS 工具，用于将 Notion 文档转化为专业网站。其视觉识别基于白色和浅米白背景，搭配深灰色（#262A2E）文字，营造出清爽、专业的感觉。单一的活力点缀色（黄色，#FFBE3C）专用于主要行动号召。字体方面，使用粗体、几何感无衬线字体作为展示字体，搭配干净的人文主义无衬线字体作为正文字体，大号文字常采用紧凑字间距。布局居中且极简，避免视觉杂乱。关键在于：避免为主落地页使用深色模式，切勿使用相互竞争的亮色点缀色，并始终保持主视觉区布局为单栏。确保所有投影微妙且半径较大，并通过 4px 基础网格和充足的垂直间距使界面扎实稳定。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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