CONVERSION CTA
Cookie 同意条Cookie Consent Banner
底部深色横条：说明用途 + 拒绝/接受两个按钮。合规必备，也别做得太丑。
效果预览
适合用在哪
面向欧盟用户的网站（GDPR）、国内个人信息保护合规。
容易踩的坑
- 「拒绝」做成灰色文字链而「接受」是实心按钮，属于诱导设计，监管已明确处罚。
- 用户选择前就加载了统计和广告脚本，同意条形同虚设，依然违反 GDPR。
- 横条在移动端占据超过 40% 屏高，首屏内容和主 CTA 都被遮住。
设计提示词 · Prompt
Cookie 同意条（Cookie Consent Banner）：底部悬浮深色条（或左下角卡片），一行说明文案（"我们使用 Cookie 优化体验，详情见隐私政策"——政策链接内嵌）+ 两个按钮：主按钮"接受"（白底深字）+ 次级"仅必要"。必须提供与接受同等便捷的拒绝选项（这是 GDPR 硬要求，"继续浏览即同意"已不合规）。选择存 localStorage 并记录时间戳。设计上克制低调，别让它挡住主 CTA。移动端改底部全宽两层。
Cookie Consent Banner: a floating dark bar at the bottom (or a card in the bottom-left corner), with one line of explanation ("We use cookies to improve your experience; see our privacy policy" — with the policy link inline) + two buttons: primary "Accept" (white background, dark text) + secondary "Essential only". You must provide a reject option as easy as accepting (a hard GDPR requirement; "continuing to browse means consent" is no longer compliant). Store the choice in localStorage along with a timestamp. Keep the design restrained and understated; don't let it cover the main CTA. On mobile switch to a full-width two-tier layout at the bottom.
常见搭配
同一页面里经常和「Cookie 同意条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs" style="background:linear-gradient(180deg,#f4f4f7,#e9eaef)">
<div class="d-cookie">
<span class="d-cookie__ic">🍪</span>
<span class="d-cookie__txt">我们使用 Cookie 来优化浏览体验与分析流量。详见<a style="text-decoration:underline" href="#">隐私政策</a>。</span>
<div class="d-cookie__btns">
<button class="d-cookie__ok">接受全部</button>
<button class="d-cookie__no">仅必要</button>
</div>
</div>
</div>