博客文章卡（Blog Post Card）是什么：效果预览与 AI 设计提示词

效果预览

方法论2026-10-12

一个人如何跑出十人团队的产出

把判断留给直觉，把执行交给系统——我的自动化工作流全拆解。

适合用在哪

博客列表、资讯站、教程中心、案例库。

容易踩的坑

::after 铺满整卡后，卡内的分类徽章等其他链接无法点击，需提高其 z-index。
封面图未统一 16:10 裁切，混入竖图后卡片高度不齐，网格错位。
标题两行截断用 -webkit-line-clamp 却没设 overflow:hidden，部分浏览器截断失效。

设计提示词 · Prompt

博客文章卡（Blog Post Card）：纵向结构——16:10 封面图（悬停 scale 1.05 缓放）→ 内边距 20px 的内容区：元信息行（11px：分类徽章 + 日期，颜色 #999）→ 17-19px 680 字重标题（两行截断）→ 14px 灰色摘要（两行截断）。整卡白底 + 1px 描边 + 14px 圆角，悬停时投影浮起 + 标题变品牌色。整卡可点（用 ::after 铺满做点击热区）。网格 3 列、gap 24-32px。

Blog Post Card: vertical structure — a 16:10 cover image (slowly scales to 1.05 on hover) → a content area with 20px padding: a meta row (11px: category badge + date, color #999) → a 17-19px heading at 680 weight (truncated to two lines) → a 14px gray excerpt (truncated to two lines). The card is a white background + 1px stroke + 14px radius; on hover the shadow rises + the heading turns brand color. The whole card is clickable (use ::after to fill it as the click target). Grid of 3 columns, gap 24-32px.

常见搭配

同一页面里经常和「博客文章卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

分页控件Pagination 筛选标签Filter Chips 模糊占位加载Blur-up Loading 内联订阅框Inline Newsletter Form

演示 HTML 结构

<div class="s d-blog">
  <div class="d-blog__img d-img d-img--green"></div>
  <div class="d-blog__bd">
    <div class="d-blog__meta"><span class="d-badge d-badge--g">方法论</span><span>2026-10-12</span></div>
    <b>一个人如何跑出十人团队的产出</b>
    <p>把判断留给直觉，把执行交给系统——我的自动化工作流全拆解。</p>
  </div>
</div>