OpenDesign·你的设计资产库

网页参考

Ghost

Ghost 是一个专业的平台，供独立发布者创作内容并实现受众变现。

CMSPublishing
Ghost 网站截图

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Ghost 是一个专业的发布平台。其设计DNA干净且高对比度，以黑色（#0F172A）和白色（#FFFFFF）为主导，辅以标志性的黄色（#FACC15）点缀。排版采用几何无衬线展示字体和人文无衬线正文字体，大标题字间距紧密。布局宽敞，使用12列网格和充足的留白。关键禁止项：不要使用衬线字体，不要使用复杂渐变，不要使用低对比度文字。界面感觉高端、权威且聚焦于内容。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。