顶部公告条（Announcement Bar）是什么：效果预览与 AI 设计提示词

效果预览

NEW AI 助手功能已上线，前 1000 名用户免费了解详情 → ✕

今天开始自动化你的工作流

适合用在哪

新品发布通知、促销活动、招聘信息；活动期临时启用。

容易踩的坑

公告条与 Cookie 条、吸顶导航叠在一起，移动端首屏被占掉 150px 以上。
关闭按钮只有 16px 图标没有扩大热区，触摸目标小于 44×44px 很难点中。
白字压在浅色渐变端，对比度低于 4.5:1，促销关键信息反而看不清。

设计提示词 · Prompt

顶部公告条（Announcement Bar）：位于页面最顶部、全宽、高 40-48px 的横向条，背景用品牌渐变（如 #4F46E5 → #C026D3）。内容居中排列——可选的胶囊状小标签（白字 11px、22% 白底、大写字距）、正文 13-14px 白色、以及一个带下划线的白色链接或箭头。右端 16px 处放一个关闭 ✕（不透明度 75%，悬停变 100%）。关闭后把偏好存进 localStorage，7 天内不再展示。移动端字号降到 12px 并允许折行。

Announcement Bar: a full-width horizontal bar 40-48px tall at the very top of the page, with a brand-gradient background (e.g. #4F46E5 → #C026D3). Content is centered — an optional pill-shaped tag (white 11px text, 22% white background, uppercase with letter-spacing), 13-14px white body text, and an underlined white link or arrow. A close ✕ sits 16px from the right end (75% opacity, 100% on hover). After closing, store the preference in localStorage and don't show it again for 7 days. On mobile, drop the font size to 12px and allow wrapping.

常见搭配

同一页面里经常和「顶部公告条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

吸顶模糊导航Sticky Blur Header 稀缺性徽章Scarcity Badge 居中英雄区Centered Hero Cookie 同意条Cookie Consent Banner

演示 HTML 结构

<div class="s s--abs d-announce">
  <div class="d-announce__bar">
    <b>NEW</b>
    <span>AI 助手功能已上线，前 1000 名用户免费</span>
    <span style="text-decoration:underline;text-underline-offset:2px">了解详情 →</span>
    <span class="d-announce__x">✕</span>
  </div>
  <div class="d-announce__page">
    <h4 class="d-h3">今天开始自动化你的工作流</h4>
    <span class="d-announce__ln" style="width:88%"></span>
    <span class="d-announce__ln" style="width:70%"></span>
    <div class="d-img d-img--cool" style="height:36px"></div>
  </div>
</div>