gumroad-ui-skills

Gumroad UI 技能

为使用 AI Agent 构建 Gumroad 风格界面制定的约束。

适用场景

在以下情况下参考这些指南：

• 构建暗色模式界面
• 创建 Gumroad 风格的设计系统
• 使用 Inter 字体和 4px 网格实现 UI

颜色

• 必须将深色背景（亮度 < 20）用作主要表面——检测到的亮度：0
• 必须将 #000000 用作页面背景（surface-base）
• 应缩减调色板（当前检测到 16 种颜色）
• 必须确保文本对比度至少为 4.5:1，以满足无障碍要求

语义令牌

令牌	HEX	RGB	用途
surface-base	#000000	rgb(0,0,0)	页面背景
surface-raised	#FDFEFE	rgb(253,254,254)	卡片、模态框、凸起表面
surface-overlay	#F0F1EB	rgb(240,241,235)	覆盖层、工具提示、下拉菜单
text-primary	#353535	rgb(53,53,53)	标题、正文文本
text-secondary	#626262	rgb(98,98,98)	次要、弱化文本
text-tertiary	#1D1D1D	rgb(29,29,29)	补充文本
border-default	#2C2C2C	rgb(44,44,44)	细微边框、分隔线

排版

• 必须使用 Inter 作为主要字体
• 为保持一致性，应使用单一字体
• 主要标题必须使用 92px / 700
• 正文文本必须使用 18px / 400
• 应减少字体粗细种类（当前检测到 5 种）
• 标题必须使用 text-balance，正文文本必须使用 text-pretty
• 数字数据应使用 tabular-nums
• 除非明确要求，否则绝不可修改字间距

文本样式

样式	字体	大小	粗细	颜色	数量
heading-1	Inter	92px	700	#181817	1
text-33px	Inter	33px	semi_bold	#1D1D1D	1
text-30px	Inter	30px	700	#151515	1
text-25px	Inter	25px	500	#1E1E1E	1
text-22px	Inter	22px	500	#353632	1
text-20px	Inter	20px	400	#353535	1
text-19px	Inter	19px	400	#C7C7C7	1
body	Inter	18px	400	#8A8B85	1
body-secondary	Inter	16px	400	#4B4B4B	2
body-secondary	Inter	16px	400	#B2B2B2	1

排版参考

字体系列：

• Inter（使用 22 次）

字体大小： 8px、10px、11px、12px、13px、14px、15px、16px、18px、19px、20px、22px、25px、30px、33px、92px

间距

• 间距必须使用 4px 网格
• 应使用以下比例的间距：1px、2px、5px、6px
• 元素间的默认间距应为 6px
• 绝不可使用任意间距值（使用设计比例）
• 应在容器内保持内边距一致

边框

• 边框圆角必须使用以下比例：16px、19px、21px、22px、23px
• 胶囊形元素的圆角应使用 21px 或更大
• 边框宽度应限制为：1px、2px
• 默认边框圆角应为 19px
• 绝不可使用任意边框圆角值（使用设计比例）
• 元素分隔应使用细微边框（1px）

边框圆角参考

比例： 16px、19px、21px、22px、23px

布局

• 必须以 1920px 作为基础视口宽度进行设计
• 元素宽度应保持一致：16px、730px、246px、31px、196px
• 文本密集型布局应保持清晰的层级
• 绝不可使用 h-screen，全视口高度应使用 h-dvh
• 固定元素必须遵循 safe-area-inset
• 对于正方形元素，应使用 size-*，而不是 w-* + h-*

检测到的布局模式

• 页眉：高度：81px
• 主要内容：宽度：1920px，高度：997px
• 主要内容：宽度：1920px，高度：1001px
• 页眉：高度：78px

组件

• 输入字段的高度必须为 0px

按钮

变体	背景	文本	边框	高度	圆角
Ghost	透明	#C7C7C7	无	-	-

输入框

• 高度：0px

交互状态

焦点

• 必须使用带强调色（#5E6AD2）的 2px 轮廓
• 必须使用 2px 的轮廓偏移
• 绝不能移除焦点指示器

悬停

• 按钮（主要）：背景色亮度提高 10%
• 按钮（次要）：使用 #FDFEFE 背景
• 列表项：使用 #FDFEFE 背景

禁用

• 必须使用 opacity: 0.5
• 必须使用 cursor: not-allowed

交互

• 对于具有破坏性或不可逆的操作，必须使用 AlertDialog
• 加载状态应使用结构化骨架屏
• 必须在操作发生的位置附近显示错误
• 绝不能阻止用户粘贴到 input 或 textarea 元素中
• 仅含图标的按钮必须添加 aria-label

动画

• 除非明确提出要求，否则绝不添加动画
• 只能对合成器属性（transform、opacity）添加动画
• 绝不能对布局属性（width、height、top、left、margin、padding）添加动画
• 入场动画应使用 ease-out
• 交互反馈动画时长绝不能超过 200ms
• 应遵循 prefers-reduced-motion

性能

• 绝不能对大面积表面使用动画 blur() 或 backdrop-filter
• 只有在动画进行期间才能应用 will-change
• 对任何可通过渲染逻辑实现的内容，绝不能使用 useEffect