精選 · 開放 · 免費

Superhi

一個提供創意科技技能的線上學習平台，採用大膽、多彩且友好的視覺語言。

EducationCreativeBold TypographyPlayfulConsumer
Superhi 網站截圖
↓ 下載設計系統包 (12 MB)在 OpenDesign 中開啟

原站: https://superhi.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

創意職涯學習活潑社群實務技能

一個色彩繽紛、親切的學習工作室，宛如創意遊樂場。

02

色彩

#2727E6Accent
#111118Ink
#F0F6FFBG
rgba(17, 17, 24, 0.1)Line

以鮮明的黃色與藍色作為主色調，搭配柔和的藍色背景，為大膽的幾何圖形提供簡潔的基底。

03

字型

grotesque-sans · monospace

所有文字層級使用乾淨、中性的 grotesque-sans 字體 · 大型展示文字保持緊湊的負追蹤值 · 技術或次要強調部分使用 monospace 字體

04

間距

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

採用一致的 4px 網格系統，搭配充足內邊距與間距，營造開闊感。

05

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

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

rgba(18, 18, 151, 0.133) 0px 3.2px 4px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的垂直堆疊結構，包含大型、輕盈的區塊與重疊的幾何背景元素。

07

動效與互動

200msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0, 0.63, 1)easing

互動狀態採用平滑過渡效果 · 基於變換的動畫使用彈簧式緩動

連結與按鈕產生細微的顏色或透明度變化。 · 提供即時視覺回饋，可能為輕微的縮放或顏色改變。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Superhi 是一個提供創意科技技能的線上學習平台。其設計 DNA 特點為活潑、友好且大膽的視覺語言。核心配色方案採用柔和的藍色背景（#F0F6FF），搭配深藍色（#2727E6）與亮黃色（#FFE600）的鮮明強調色。字體為乾淨、中性的 grotesque-sans，大型展示文字具備緊湊追蹤值。關鍵禁忌：切勿使用深色模式背景，完全避免襯線字體，且按鈕不可為矩形。版面設計輕盈、居中，並使用大膽的幾何圖形作為活潑的背景元素。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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