BUTTON
按钮层级体系Button Hierarchy
一屏之内按钮的视觉权重必须分层：实心主按钮每屏只出现一次，其余一律降级。
效果预览
Primary → Secondary → Ghost → Link
适合用在哪
任何页面。按钮层级混乱是新手站最常见的病灶。
容易踩的坑
- 一屏出现两个以上实心主按钮，用户视线被分散，主转化点击率明显下降。
- Ghost 按钮在浅灰背景上对比度低于 3:1，用户根本认不出它是可点击的。
- 禁用态只降透明度却不加 aria-disabled 说明，读屏用户不知道为什么点不动。
设计提示词 · Prompt
按钮层级体系（Button Hierarchy）：严格四级——Primary（实心深色或品牌色、白字、唯一、每屏只出现一次）、Secondary（白底 + 1px 中性描边、深色字）、Ghost（无底无框、悬停才出现浅灰底，用于次要操作）、Link（纯文字 + 下划线，用于行内动作）。四级的尺寸、圆角、内边距必须完全一致，只允许颜色与描边不同。同级按钮在一行中最多出现 2 个，间距 12px。禁用态统一 45% 透明度 + not-allowed 光标。
Button Hierarchy: strictly four levels — Primary (solid dark or brand color, white text, unique, appears only once per screen), Secondary (white background + 1px neutral border, dark text), Ghost (no background, no border, a light gray background appears only on hover, for secondary actions), Link (plain text + underline, for inline actions). All four levels must share exactly the same size, border radius and padding; only color and border may differ. At most 2 buttons of the same level in one row, with 12px spacing. Disabled state is uniformly 45% opacity + not-allowed cursor.
常见搭配
同一页面里经常和「按钮层级体系」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-btnsys"> <div class="d-btnsys__row"><button class="d-btn d-btn--p">主要操作</button><button class="d-btn d-btn--g">次要操作</button></div> <div class="d-btnsys__row"><button class="d-btn d-btn--ghost">幽灵按钮</button><button class="d-btn d-btn--link">文字链接</button></div> <span class="d-btnsys__cap">Primary → Secondary → Ghost → Link</span> </div>