精选 · 开放 · 免费
Gumroad
一个让创作者直接向其受众销售产品的平台。
SaaSProductivityConsumerCalmRefined
01
设计气质 DNA
创作者市场变现赋能简洁
一个面向独立创作者的、富有吸引力的数字市场。
02
色彩
#000000Ink
#F4F4F0BG
#999999Muted
rgba(0,0,0,0.1)Line
高对比度，以温暖的中性色为基底，搭配活泼的点缀色。
03
字体
geometric-sans
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
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此网站是一个供创作者销售数字产品的 SaaS 平台。配色采用温暖的米白色背景（#F4F4F0）、高对比度的黑色文字（#000000）以及活泼的粉色点缀。字体为几何无衬线体（ABC Favorit），字间距紧凑（-0.4px），并采用粗体的展示字重。关键禁忌：切勿使用纯白背景；避免蓝色点缀；切勿使用衬线字体；避免厚重投影；避免复杂渐变；避免密集布局。整体布局干净、居中，聚焦于清晰的行动号召。
en · zh-CN · zh-TW · ja · ko