用途:为 AI 智能体提供一套带有明确约束的 Gumroad 风格界面构建指南,适用于深色模式界面、Gumroad 风格设计系统,以及采用 Inter 字体与 4px 网格的 UI。
主要能力与约束: 颜色方面,主表面须用暗色背景(明度<20,检测值为0),页面背景须用 #000000(surface-base),文本对比度须至少 4.5:1。语义令牌包括 surface-base #000000、surface-raised #FDFEFE、surface-overlay #F0F1EB、text-primary #353535、text-secondary #626262、text-tertiary #1D1D1D、border-default #2C2C2C。
排版须以 Inter 为主字体,建议单一字体族;主标题 92px/700,正文 18px/400;标题用 text-balance、正文用 text-pretty,数字建议 tabular-nums,未经要求不得改字距。
间距须用 4px 网格,默认元素间距建议 6px,不得使用任意值。边框圆角取自 16/19/21/22/23px,默认 19px,胶囊元素建议 21px 以上,边框宽度限 1px、2px。布局以 1920px 为基准视口,全高用 h-dvh 而非 h-screen,固定元素须尊重 safe-area-inset。
组件方面,输入框高度为 0px,Ghost 按钮背景透明、文字 #C7C7C7。交互状态:焦点须 2px 轮廓,颜色 #5E6AD2,偏移 2px,不得移除焦点指示;禁用态 opacity 0.5 且 cursor not-allowed;破坏性操作须用 AlertDialog;加载用结构骨架屏;图标按钮须加 aria-label;不得阻止输入框粘贴。
动画:未明确要求不得添加动画;只动画 transform、opacity 等合成属性,入场建议 ease-out,交互反馈不超过 200ms,尊重 prefers-reduced-motion。性能上不得动画大面积 blur() 或 backdrop-filter,will-change 只在动画进行时使用,不得用 useEffect 表达可渲染逻辑。
限制:以上为检测与建议性约束,部分标注为 MAY/SHOULD 的条目非强制;资料未提供安装命令、URL 用法示例、收费与平台信息,暂未提供。