精選 · 開放 · 免費

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

使用 opacity 漸變實現 UI 過渡 · 互動元素使用快速的 transform 縮放

主要按鈕在 hover 時，背景顏色會細微變化或略微放大。 · 點擊時立即改變狀態，轉換延遲極小。

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 基礎網格和寬裕的垂直間距來穩固整個 UI。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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