OpenDesign·你的设计资产库

网页参考

Gumroad

浅底页面以粉色硬币状图形围绕居中标题,下方并列创建与搜索入口。

SaaSProductivityConsumerCalmRefined
Gumroad 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 创建行动和市场搜索面向不同目的
  • 黑色边线与浅背景建立直接的视觉语言

适合什么项目

  • 创作者平台
  • 数字商品市场

如何带进你的设计

  • 先区分卖家和买家的任务,再安排对应入口
  • 让装饰图形避开表单可点击区域

使用边界

  • 装饰硬币与品牌字形不作为可复用资产提供
  • 仅依据已检查的历史预览;未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写,尚未经过人工终审;不代表原作者规范或使用授权。

01

设计气质 DNA

创作者市场变现赋能简洁

一个面向独立创作者的、富有吸引力的数字市场。

02

色彩

#000000Ink
#F4F4F0BG
#999999Muted
rgba(0,0,0,0.1)Line

高对比度,以温暖的中性色为基底,搭配活泼的点缀色。

03

字体

geometric-sans

  • display48px · 500

04

间距

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

围绕核心元素提供充裕的留白。

05

表面 (圆角 / 阴影 / 边线)

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

输入框与部分卡片采用 1px 细实线边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的首屏区域,搭配悬浮的 3D 元素。

07

动效与交互

150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

按钮与链接上细腻的 hover 过渡效果。

背景色变化或透明度改变。 · 细微的缩放或颜色变化。

08

组件

  • button 纯黑背景、白色文字、圆角矩形。
  • card 圆角矩形,白色背景,细边框。
  • input 圆角矩形,细边框,白色背景。
  • hero 居中文本,采用大号展示字体,并包含行动号召按钮。

09

文案语气与禁用清单

  • 语气 鼓舞人心、直接且友好。
  • 标题风格 粗体且清晰,使用“从0到1”的叙事模式。
  • 按钮文案 使用行动导向的动词,例如“开始销售”。
  • 不要使用纯白背景——截图显示为温暖的米白色(#F4F4F0)。
  • 不要使用蓝色作为点缀色——截图显示为粉色/洋红色装饰元素。
  • 不要使用装饰性衬线字体——截图显示为几何无衬线字体。
  • 不要使用厚重的投影——截图显示为带细边框的扁平化设计。
  • 不要使用复杂的渐变——截图显示为纯色与干净的过渡。
  • 不要使用过于密集的布局——截图显示为充裕的留白与居中内容。
  • 避免: 行话
  • 避免: 复杂性
  • 避免: 过于正式

10

包内真实截图

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

11

System Prompt

此网站是一个供创作者销售数字产品的 SaaS 平台。配色采用温暖的米白色背景(#F4F4F0)、高对比度的黑色文字(#000000)以及活泼的粉色点缀。字体为几何无衬线体(ABC Favorit),字间距紧凑(-0.4px),并采用粗体的展示字重。关键禁忌:切勿使用纯白背景;避免蓝色点缀;切勿使用衬线字体;避免厚重投影;避免复杂渐变;避免密集布局。整体布局干净、居中,聚焦于清晰的行动号召。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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