这一篇讲两类:用户操作后页面的"反应"(反馈组件)和营销页面的"套路积木"(官网区块)。前者让你跟 AI 说清楚"弹窗"到底要哪种,后者让你一句话搭一个官网。
分清"弹窗"四兄弟
"弹窗"是 Vibe Coding 里最容易翻车的词。因为它不是某一个组件,而是四个组件的统称。
轻提示(Toast)
页面角落弹一个小条,几秒后自动消失。不打断用户正在做的事。
什么场景用:操作成功后的提示——"保存成功"、"已复制链接"、"已发送"。
VibeHub 里的原话:"轻提示是在页面角落短暂显示、反馈刚完成操作的提示组件。保存成功,3 秒自动消失。"
喂给 AI 的话:"用户点击保存后,右下角显示绿色 Toast:'保存成功',3 秒后自动消失。不需要用户手动关闭。"
弹窗(Modal)
遮住在整个页面上方的大框,用户必须处理完才能继续。
什么场景用:删除确认、重要表单填写、必须用户做决定的场景。
VibeHub 里的原话:"弹窗是覆盖在当前页面上方、暂时集中用户处理一项任务的对话框组件。确认删除这个项目?取消 / 确认删除。"
喂给 AI 的话:"点击删除按钮时弹出 Modal。标题'确认删除',正文'删除后不可恢复,确定要删除吗?'。底部按钮'取消'(次按钮)和'确认删除'(红色危险按钮)。点击遮罩不关闭。"
抽屉(Drawer)
从屏幕边缘滑出一个面板,保留当前页面的上下文。不像 Modal 那样遮住全部。
什么场景用:查看详情、编辑设置、任务面板——想看详情但不想离开当前页面。
VibeHub 里的原话:"抽屉是从屏幕边缘展开、在保留当前页面上下文时显示内容的面板组件。任务详情,可关闭。"
喂给 AI 的话:"点击'查看详情',从右侧滑出 Drawer,宽度 480px。Drawer 顶部显示标题和关闭按钮,内容区展示订单完整信息,底部有'编辑'和'关闭'按钮。"
文字提示(Tooltip)
鼠标悬停或聚焦时,贴着元素出现的一小段说明文字。
什么场景用:图标说明、缩写解释、按钮功能提示。
VibeHub 里的原话:"文字提示是在悬停、聚焦或点击后显示简短说明的浮层组件。"
喂给 AI 的话:"所有图标按钮加 Tooltip。悬停 0.3 秒后显示,鼠标移开 0.1 秒隐藏。文字白色背景深色,圆角 4px。"
一句话记住
另外三个容易搞混的
气泡卡片(Popover)vs 气泡确认框(Popconfirm)vs 文字提示(Tooltip)
这三样都是"点一下或悬停在某个元素上弹出一个小浮层"。
- Tooltip:只有文字,不能操作。悬停触发。最轻。
- Popover:可以放图片、链接、按钮。点击触发。中等重量。
- Popconfirm:专门用来"你确定吗?"确认的。点击触发。有确认/取消按钮。
区分方法:只想看文字说明用 Tooltip,想看更多信息加操作按钮用 Popover,需要用户再确认一次用 Popconfirm。
VibeHub 原话 - Popover:"气泡卡片是贴近触发元素展开、可承载补充信息和少量操作的浮层组件。"
VibeHub 原话 - Popconfirm:"气泡确认框是贴近触发操作、要求用户再次确认的轻量对话组件。确认删除这条记录?取消 / 确定。"
通知(Notification)
从屏幕右上角弹出一条较完整的消息卡片,含标题、内容、操作链接。比 Toast 重,比 Modal 轻。
VibeHub 里的原话:"通知是提醒用户关注或稍后处理事件的较完整消息组件。审核未通过,封面临摹比例过高,请调整后重新提交。查看原因 →。"
喂给 AI 的话:"文件处理完成后,右上角弹出 Notification。标题'导出完成',内容'你的报告已生成',底部'下载文件'链接。5 秒后自动消失。"
警告提示(Alert)
嵌在页面内容里的彩色横条,持续显示。不像 Toast 会消失,一直停在页面上。
VibeHub 里的原话:"警告提示是嵌在页面内容中、持续说明状态、风险或异常的提示组件。体验环境 · 数据每日 0 点重置。"
喂给 AI 的话:"页面顶部显示黄色 Alert:'当前为预览模式,数据不会保存。' Alert 右侧有关闭按钮。如果不需要提示了,用户可手动关闭。"
状态类反馈组件
进度条(Progress)
显示任务完成的百分比。上传文件、批量处理。
VibeHub 里的原话:"进度条是用长度、百分比或阶段表示任务完成程度的状态组件。"
喂给 AI 的话:"文件上传时显示 Progress 进度条。实时百分比,进度从 0% 到 100%。进度 < 30% 红色、30-80% 橙色、> 80% 绿色。"
骨架屏(Skeleton)
页面加载时用灰色块占位,显示内容的大致形状。让用户知道"这里要加载东西"。
VibeHub 里的原话:"骨架屏是用内容轮廓占位、在加载时保持页面布局稳定的状态组件。"
喂给 AI 的话:"数据加载时用 Skeleton 骨架屏。3 行卡片形状占位:上面一个矩形(图片位)、下面两条短横线(文字位)。加载完成后平滑替换为真实内容。"
旋转加载指示器(Spinner)
一个转圈的小图标,表示"正在处理,不知道还要多久"。
喂给 AI 的话:"提交按钮点击后,按钮内显示 Spinner + '提交中...',同时禁用按钮防止重复提交。处理完成后恢复为正常状态。"
结果页(Result)
一个流程走完后,集中展示结果。成功 ✓、失败 ✕、等待中 ⏳。
VibeHub 里的原话:"结果页是在一个完整流程结束后集中说明结果和下一步操作的页面状态。提交成功。审核结果将在 1-3 个工作日内通知你。"
喂给 AI 的话:"支付完成后跳转到 Result 结果页。支付成功:显示 ✓ 绿色图标 + '支付成功' + 金额¥xxx + '查看订单'按钮。支付失败:显示 ✕ 红色图标 + '支付失败' + 失败原因 + '重新支付'按钮。"
官网区块:9 个积木搭一个官网
如果你做营销页面,这 9 个区块是你需要认识的"套路积木"。一套标准 SaaS 官网的配方就是:Hero → 功能 Card → UserVoice → Pricing → CTA → Footer。
首屏(Hero)
打开网站第一眼看到的大区域。大标题 + 副标题 + 一个按钮。
VibeHub 里的原话:"网页开头用来说明页面重点并引导下一步的主要区域。把想法变成网页,只需一句话。免费开始 / 观看演示 →。"
喂给 AI 的话:"Hero 区块:大标题'把想法变成网页'(48px 加粗)、副标题'描述你的需求,AI 帮你生成'(18px 灰色)、CTA 按钮'免费开始'(渐变背景)。背景用浅色渐变,左右两侧有装饰性几何图形。"
行动号召(CTA)
整个页面最核心的"点这里"按钮区域。通常出现在 Hero 和页面底部。
VibeHub 里的原话:"行动号召是引导用户完成注册、试用、购买等下一步的按钮或链接。免费试用 14 天 · 无需信用卡 · 随时取消。立即免费试用 / 先看看定价 →。"
喂给 AI 的话:"CTA 区块:顶部'准备好开始了吗?'(32px)、中间'免费试用 14 天,无需信用卡'(16px 灰色)、底部大按钮'立即免费试用'(渐变背景,白色文字,圆角 8px,padding 16px 32px)。"
用户原声(UserVoice)
引用真实用户的评价,建立信任。
VibeHub 里的原话:"用户原声是引用真实使用者经历和评价,用来说明产品实际使用结果的内容区块。"
喂给 AI 的话:"UserVoice 区块:3 个用户评价卡片横排。每张 Card 包含:5 星评分(黄色星星) 、评价正文(斜体引用)、用户姓名和职位(灰色小字)。Card 之间间距 24px。"
页头(Header)和导航栏(Navbar)
页面最上面的区域,包含 Logo、导航链接和登录/注册按钮。
VibeHub 原话 - Header:"网站页头是网页顶部承载品牌、导航和常用入口的完整页面区域。"
VibeHub 原话 - Navbar:"顶部导航栏是网页页头中提供主要页面入口和当前位置提示的导航区域。"
喂给 AI 的话:"Header:Logo 居左、导航链接居中(产品/功能/定价/关于)、登录和免费开始按钮居右。Navbar 吸顶固定,滚动后背景加 backdrop-blur 毛玻璃效果。"
页脚(Footer)
页面最底部,放补充链接和版权信息。
VibeHub 里的原话:"页脚是网页底部集中放置补充链接、版权和联系方式的页面区域。产品 / 功能 / 定价 / 更新日志。© 2026 VibeUI。"
喂给 AI 的话:"Footer 四列布局:产品(功能/定价/更新日志)、资源(文档/博客/模板)、公司(关于/加入我们/联系)、法律(隐私/条款)。底部灰色分割线,下面居中显示版权 © 2026。"
常见问题(FAQ)
提前回答用户可能会问的问题。
喂给 AI 的话:"FAQ 区块用 Collapse 折叠面板。标题'常见问题'。6 个问题:免费版有什么限制?/ 可以随时取消吗?/ 支持自定义域名吗?等。默认全部收起,点击一个问题展开对应答案,展开时其他问题收起。"
定价区(Pricing)
并列比较不同套餐的价格和权益。
VibeHub 里的原话:"定价区是把多个套餐的价格、权益和适用对象并列比较的页面区块。免费版 ¥0 / 专业版 ¥49 / 团队版 ¥199。"
喂给 AI 的话:"Pricing 三栏:免费版 ¥0/月(10 项目/100 次生成)、专业版 ¥49/月(不限项目/自定义域名/优先支持)、团队版 ¥199/月(多人协作/权限管理/专属客服)。中间栏加'最受欢迎'标签,边框高亮。每栏底部有对应 CTA 按钮。"
社会证明(SocialProof)
展示用户数量、评价分数、合作品牌,用来告诉"别人都在用"。
VibeHub 里的原话:"社会证明是展示真实客户、使用数据、评价或媒体报道,以提供外部信任依据的内容。TRUSTED BY PRODUCT TEAMS。4.9 / 5。来自 2,300+ 条真实评价。"
喂给 AI 的话:"SocialProof:横排展示 4 个合作品牌 Logo(灰色,悬停变彩色)。下方'★★★★★ 4.9/5 来自 2,300+ 条真实评价'。最下方'12,000+ 活跃用户'。"
实战:一句话搭一个官网
"用 Single Page 布局。从上到下依次:
- Navbar 吸顶:Logo + 导航 + 登录/免费开始
- Hero:大标题'AI 构建你的下一个产品' + CTA 按钮
- 功能展示:Card Grid 3 列,每张含图标+标题+描述