OpenDesign·你的设计资产库

网页参考

Super

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

NocodeTooling
Super 网站截图

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

  • display56px · 600
  • h238px · 600
  • body18px · 400
  • small14px · 400
  • tiny12px · 400

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

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

组件

  • button 实心点缀色（黄色），搭配深色文字和圆角药丸形边角。
  • card 深色主题卡片，带有圆角和微妙的投影。
  • chip 简洁、略带圆角的标签，带有微妙的边框或背景。
  • input 干净、圆角的输入框，使用标准内边距。
  • hero 大号、加粗的居中文本，配以单一突出的行动号召按钮。

09

文案语气与禁用清单

  • 语气 自信、直接、乐于助人。
  • 标题风格 加粗、陈述性、面向行动的语句。
  • 按钮文案 直接、强调益处的短语，例如“免费开始”。
  • 不要为主落地页使用深色模式 — 截图显示以白色背景为主。
  • 不要使用多个相互竞争的点缀色 — 截图仅显示黄色作为主要点缀色。
  • 不要使用装饰性衬线字体作为标题 — 截图显示的是干净、几何感强的无衬线字体。
  • 不要为主元素使用厚重的投影 — 截图显示的是非常微妙、大半径的 box-shadow。
  • 不要用密集的网格使布局拥挤 — 截图显示的是干净的单栏居中布局。
  • 不要使用激进、明亮的背景色 — 截图使用了克制的白色、米白和深灰色调。
  • 避免: 过于技术性的行话
  • 避免: 激进或推销式的语言
  • 避免: 模糊的承诺

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。