FEEDBACK & OVERLAY
警告提示Alert / Callout
常驻在页面或表单上方的提示条，用于承载需要用户了解但不消失的说明、警告、错误。
效果预览
⚠
当前账号余额不足请及时充值，避免服务中断。
✕
适合用在哪
表单顶部错误汇总、页面级通知、功能不可用说明、需要用户行动前必读的提示。
不适合：需要自动消失的临时反馈（那是 Toast 的领地）；需要用户做复杂决策时（改用 Modal）。
和相近模式的区别
轻提示Toast Notification
Toast 是临时浮层，几秒后自动消失；Alert 常驻在页面中，直到用户关闭或条件解除。
撤销提示条Snackbar with Undo
Snackbar 常出现在页面底部，通常含一个操作按钮，自动消失；Alert 可以出现在表单顶部或内容区，更正式、更持久。
容易踩的坑
- 把 Alert 当 Toast 用，每条提示都几秒后消失，用户来不及读完。
- 四种语义色只换图标不换边框/底色，色弱用户分不清严重程度。
- 关闭按钮没有热区扩展，移动端很难点中。
设计提示词 · Prompt
警告提示（Alert / Callout）：一条横向提示条，圆角 10-12px、1px 描边、内边距 12-16px。左侧图标 + 标题 + 说明 + 右侧可选关闭按钮。四种语义色：info（品牌蓝）、success（绿）、warning（琥珀）、error（红）。边框 + 浅色底色。与 Snackbar/Toast 的区别：Alert 常驻，Toast 自动消失。
Alert / Callout: a horizontal banner with 10-12px radius, 1px stroke, 12-16px padding. Left: a 20-22px semantic icon inside a 32px rounded light-background square. Center: 14px bold title + 13px gray description. Right: optional close button or action link. Semantic colors: info (#eff6ff / #bfdbfe), success (#f0fdf4 / #bbf7d0), warning (#fffbeb / #fcd34d), error (#fef2f2 / #fca5a5). Alert stays visible until dismissed or condition is resolved, unlike Snackbar/Toast.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="alert alert--warn" role="alert"><em>⚠</em><div><b>余额不足</b><span>请及时充值。</span></div><button aria-label="关闭">✕</button></div> */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid; border-radius: 10px; max-width: 560px; }
.alert--warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert--error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.alert em { flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.5); display: inline-grid; place-items: center; font-style: normal; }
.alert b { display: block; font-size: 14px; }
.alert span { display: block; font-size: 13px; opacity: .85; margin-top: 2px; }
.alert button { flex: none; margin-left: auto; border: 0; background: transparent; cursor: pointer; }
演示 HTML 结构
<div class="s d-center">
<div class="fb-alert fb-alert--warn">
<em>⚠</em>
<div><b>当前账号余额不足</b><span>请及时充值，避免服务中断。</span></div>
<i>✕</i>
</div>
</div>
常见问题
Alert 和 Toast 怎么选？
需要用户读完再操作、或解除条件才会消失，用 Alert；只需要告诉用户「刚才的操作完成了」且不期待回应，用 Toast。
四种语义色是否只靠颜色区分？
不要只靠颜色：图标形状、标题文案都要表达语义，例如 error 用 ⚠ / success 用 ✓ / info 用 ℹ。
常见搭配
同一页面里经常和「警告提示」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。