精選 · 開放 · 免費

Ujjo

採用霓虹綠與深灰色分割背景及強烈排版強調的高對比編輯風格介面。

EditorialBold TypographyCleanConsumerRestraint
Ujjo 網站截圖
↓ 下載設計系統包 (3 MB)在 OpenDesign 中開啟

原站: https://ujjo.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

大膽編輯風格極簡高對比

一個風格前衛的數位雜誌或編輯平台，具有醒目的雙色調分割佈局。

02

色彩

#3FD300Accent
#000000Ink
#212121BG
#303030BG soft
#1A1A1AMuted
rgba(0,0,0,1.0)Line

鮮豔霓虹綠與深灰色之間形成極端對比，主要文字使用黑色。

03

字型

transitional-serif · monospace

展示文字與內文均以襯線字體為主。 · 常使用粗體字重（700-900）來強調與標題。

04

間距

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

以 4px 為基礎格線，標題元素周圍留有充足的內距。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 0px

無可見的圓角；所有表面元素均為銳利的矩形邊緣。

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

一個分割背景佈局（左側霓虹綠，右側深灰色），上面疊加內容區塊。

07

動效與互動

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

標準 CSS 過渡效果套用於互動元素。

透過 CSS 過渡效果實現標準的文字連結懸停效果。 · 互動元素使用預設指標游標。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

這個網站以一個大膽、高對比的編輯風格佈局為特色，其特徵是霓虹綠（#3FD300）與深灰色（#212121）的醒目分割背景。排版嚴格基於襯線字體（Times New Roman），並使用粗體字重（700-900）來強調。設計完全平面化，無圓角、陰影或柔和漸層。關鍵十六進位色碼包括 #3FD300、#000000 和 #212121。關鍵禁止事項包括：絕不使用圓角、絕不使用無襯線字體，以及絕不套用陰影或柔和的粉彩色盤。佈局依賴銳利的幾何區塊與左對齊文字。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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