精选 · 开放 · 免费

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