SOCIAL PROOF
媒体报道条Press Bar / As Seen In
"被这些媒体报道过"——一排斜体媒体名 + 一句引言，借媒体的势。
效果预览
适合用在哪
品牌官网、创始人个人品牌页、课程/书藉销售页。
容易踩的坑
- 媒体名只在悬停时显示引言，移动端没有 hover，这部分内容完全看不到。
- 斜体衬线小于 14px 时笔画发虚，中文环境下媒体名可读性很差。
- 跳转报道链接未加 rel="noopener" 且原文已失效，点进去是 404 损害可信度。
设计提示词 · Prompt
媒体报道条（Press Bar / As Seen In）：顶部一行小字"AS SEEN IN"（11px 大写灰），下面一排斜体衬线媒体名（Times/Georgia 斜体最能传达"媒体感"），悬停显示对应报道引言或直接点击跳转。可再配一句最响的媒体原话做大字引文（20-26px 斜体 + 媒体名署名）。没有真实报道时不要编——用"行业奖项、开发者社区热度、下载量"等真实数据替代。
Press Bar / As Seen In: a one-line small heading "AS SEEN IN" at the top (11px, uppercase, gray), followed by a row of italic serif media names (Times/Georgia italic best conveys a "press" feel); on hover show the corresponding quote, or link directly to the article. You can add the single loudest media quote as a large pull quote (20-26px italic + media attribution). If you have no real press coverage, don't make it up — substitute real data such as industry awards, developer community traction, or download counts.
常见搭配
同一页面里经常和「媒体报道条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-pressbar">
<span class="d-logocloud__cap" style="display:block">媒体报道</span>
<div class="d-pressbar__logos">
<span class="d-pressbar__logo">36Kr</span><span class="d-pressbar__logo">极客公园</span><span class="d-pressbar__logo">少数派</span><span class="d-pressbar__logo">虎嗅</span>
</div>
<p class="d-pressbar__quote">"今年最值得关注的生产力工具。"<b>—— 少数派</b></p>
</div>