精選 · 開放 · 免費

Ghost

Ghost 是一個讓獨立出版者能建立內容並向其受眾變現的專業平台。

cmspublishing

Ghost 網站截圖

↓ 下載設計系統包 (27 MB)在 OpenDesign 中開啟

原站: https://ghost.org

📦 瀏覽包內檔案 →

01

設計氣質 DNA

出版變現會員制創作者經濟

一款現代、專業的獨立寫作者工具組。

02

色彩

#FACC15Accent

#0F172AInk

#334155Ink soft

#FFFFFFBG

#F8FAFCBG soft

#F1F5F9BG quiet

#94A3B8Muted

rgba(229, 231, 235, 1)Line

以黑白為主的高對比字型，搭配單一鮮明黃色強調色與深色模式面板元素。

03

字型

geometric-sans · humanist-sans · ui-monospace

display80px · 500
heading48px · 600
body18px · 400
caption12px · 500

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

垂直間距依 4px 的倍數設定，常見間距為 24px、32px 與 48px。

05

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

sm · 4px

md · 8px

lg · 16px

pill · 9999px

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.03) 0px 2px 6px 0px · rgba(0, 0, 0, 0.1) 0px 4px 6px -1px · rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px · rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

標準響應式格線，搭配最大寬度容器。

07

動效與互動

150msmicro

300mssmall

0msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

狀態變換時帶有細微的淡入轉場效果。

互動元素在游標懸停時帶有細微的色彩偏移或浮起變化。 · 標準指標游標與即時的狀態回饋。

08

組件

button 深色實心背景配白色文字，或淺色背景配深色文字與細微陰影。
card 帶有細微陰影與圓角的簡潔容器。
chip 小型、全大寫的標籤，並增加字母間距。
input 帶有簡潔邊框的標準文字輸入框。
hero 大型、粗體的置中字型，背景簡約，常搭配產品截圖。

09

文案語氣與禁用清單

語氣專業、賦權且清晰。
標題風格 直接、強調效益的陳述，搭配大型、粗體字型。
按鈕文案 以行動為導向的短語，通常包裹於膠囊狀容器中。

不要使用複雜的漸層 — 截圖顯示的是平面色塊與實心背景。
不要使用襯線字體作為標題 — 截圖顯示的是簡潔、幾何風格的無襯線體。
不要使用小而擁擠的字型 — 截圖顯示的是寬敞的間距與大型字體。
不要為主要行動使用圓潤、泡泡狀的按鈕 — 截圖顯示的是俐落、專業的按鈕。
不要使用混亂的色調 — 截圖顯示的是克制的黑、白、黃配色。
不要使用纖細、低對比的文字 — 截圖顯示的是在淺色背景上的高對比墨色文字。
避免: 過於隨意的用語
避免: 擁擠的版面配置
避免: 令人分心的動畫

10

包內真實截圖

Ghost — 桌面首屏（hero） — 桌面首屏（hero）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Ghost — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Ghost 是一個專業的出版平台。其設計 DNA 簡潔且高對比，以黑色 (#0F172A) 與白色 (#FFFFFF) 為主，並搭配標誌性的黃色 (#FACC15) 強調。字型使用幾何無襯線展示字體與人文無襯線內文字體，大型標題的字母間距緊湊。版面配置寬敞，採用 12 欄格線與大量留白。關鍵禁忌：不要使用襯線字體、不要使用複雜漸層、不要使用低對比文字。整體介面感覺高級、具權威感，且專注於內容。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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