Alert
警示框
WebMobileDesktop上手难度: 中等
一个必须认真对待的消息：出错了、有风险、需要你处理。
Live Demo
真的可以点邮箱已被注册
换个邮箱地址，或直接登录已有账号。
你的云备份已满，清理后可以继续备份。
你刚才看到的这个：表单提交失败后输入框下方那行红字「密码错误」、支付页面顶部的黄色横幅「您的银行卡已过期」——都是 Alert。
它到底是什么
Alert 是「不处理不行」的那类提示。它可以内嵌在页面里（Inline Alert），也可以放在对话框里（Alert Dialog）。关键是它通常需要用户做出回应。
警告alert警示警告框notice提示框
Anatomy · 它由什么组成
Container容器
浅色底 + 同色左边框
Icon图标
按严重度选：i / ! / ×
Title标题
一句话说清问题
Description说明
可选，如何解决
Action操作
「重试」「去设置」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 需要用户处理才能继续（错误、风险） | 用 |
| 影响范围较大（整个账户、网络异常） | 用 |
| 信息需要持续显示，不能自动消失 | 用 |
| 操作成功的小提示 | 不用 |
| 只是想给个操作建议 | 视情况 |
红色意味着「有问题」，如果你用红色显示普通建议，用户会一直紧张。
一条页面里同时出现 3 个 Alert，用户会直接全部无视。
Similar Patterns
别搞混一句话区分：一个必须认真对待的消息：出错了、有风险、需要你处理。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在表单顶部加一个红色 Alert：「邮箱已被注册」+ 副文案「换个邮箱，或直接登录已有账号」+「去登录」按钮，用户修改后自动消失。
不要只对 AI 说
Bad → Better不要这样对 AI 说
出错了弹个提示。
改成这样说
表单顶部加 role="alert" 的 Alert：浅红底 + 3px 左边框 + ! 图标 + 标题「邮箱已被注册」+ 解决建议 + 「去登录」按钮，提交失败时聚焦它，输入修正后自动消失。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。