Scenario Metric Cards
介绍
四张白色圆角卡片一排：彩色圆形图标与标题、一段任务描述，底部两枚浅灰指标格分别写目标角色和触达方式，悬停时整卡上浮并加深投影。
拆自整页模板 潮引 获客智能体官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Scenario Metric Cards 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add scenario-metric-cards
mcp › 使用 8pt MCP 调用 get_component("scenario-metric-cards")
代码
Scenario Metric Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-smc"><section class="cy-cases" id="cases"><div class="cy-wrap"><h2 class="cy-h2">它会替你找哪类客户</h2><p class="cy-cases__sub">四个示例获客任务：告诉它卖什么、卖给谁，剩下的交给智能体。</p><div class="cy-cases__g"><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#E7F4EE;color:#0D9467"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r=".8"/></svg></span><b>区域教培机构</b><span class="cy-tag">示例</span></div> <p>找正在扩张新校区的机构负责人，开场先聊对方最近的招生动作。</p><div class="cy-case__t"><div><strong>校长 / 创始人</strong><small>目标角色</small></div><div><strong>邮件 + 跟进</strong><small>触达方式</small></div></div></article><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#EEF0FA;color:#4B5BB7"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 3.5 10 14"/><path d="M20.5 3.5 14 20.5l-4-6.5-6.5-4Z"/></svg></span><b>工业配件出海</b><span class="cy-tag">示例</span></div> <p>找海外经销商的采购负责人，按对方所在国家的语言撰写开发信。</p><div class="cy-case__t"><div><strong>采购经理</strong><small>目标角色</small></div><div><strong>多语言邮件</strong><small>触达方式</small></div></div></article><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#FAF1E6;color:#B9741F"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9.5" cy="8" r="3.5"/><path d="M3.5 19.5c.6-3.3 3-5 6-5s5.4 1.7 6 5"/><path d="M18.5 8v6"/><path d="M15.5 11h6"/></svg></span><b>企业软件</b><span class="cy-tag">示例</span></div> <p>找刚扩招运营团队的公司，用对方招聘信息里的痛点做开场。</p><div class="cy-case__t"><div><strong>运营负责人</strong><small>目标角色</small></div><div><strong>个性化开场</strong><small>触达方式</small></div></div></article><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#F6ECF2;color:#A54A7D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17"/><path d="M8 3v4"/><path d="M16 3v4"/><path d="m9 15 2 2 4-4"/></svg></span><b>设计工作室</b><span class="cy-tag">示例</span></div> <p>找近期计划改版官网的品牌方，附上一段相似行业的作品说明。</p><div class="cy-case__t"><div><strong>市场总监</strong><small>目标角色</small></div><div><strong>约演示会议</strong><small>最终目标</small></div></div></article></div></div></section></div>
.x-smc{--bg:#F6F5F3;--ink:#111111;--acc:#0D9467;--chip:#ECEBE9;--card:#FFFFFF;--mut:#8E8D8A;--sub:#5F5E5B;--line:#E7E5E1;--tile:#F4F4F3;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-smc *,.x-smc *::before,.x-smc *::after{box-sizing:border-box;margin:0;padding:0}.x-smc{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-smc a{color:inherit;text-decoration:none}.x-smc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-smc input{font:inherit;color:inherit}.x-smc .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-smc .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-smc .cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;background:#161616;color:#fff;font-size:15px;font-weight:500;transition:transform .2s var(--ease),background .2s}.x-smc .cy-btn:hover{background:#2b2b2b}.x-smc .cy-btn:active{transform:scale(.98)}.x-smc .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-smc .cy-btn:hover svg{transform:translateX(3px)}.x-smc .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-smc .cy-logo__m{width:26px;height:26px}.x-smc .cy-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:11px;font-weight:500}@media (prefers-reduced-motion:reduce){.x-smc *,.x-smc *::before,.x-smc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-smc .cy-m{display:none}}.x-smc .cy-cases{padding:30px 0 90px}.x-smc .cy-cases__sub{margin:12px auto 0;max-width:520px;text-align:center;color:var(--mut);font-size:15px}.x-smc .cy-cases__g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}.x-smc .cy-case{display:flex;flex-direction:column;padding:20px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(0,0,0,.12);transition:transform .35s var(--ease),box-shadow .35s}.x-smc .cy-case:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 36px -16px rgba(0,0,0,.2)}.x-smc .cy-case__hd{display:flex;align-items:center;gap:10px}.x-smc .cy-case__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%}.x-smc .cy-case__ic svg{width:18px;height:18px}.x-smc .cy-case__hd b{flex:1;font-size:14.5px;font-weight:600}.x-smc .cy-case p{flex:1;margin-top:14px;font-size:14px;line-height:1.65;color:#2b2b2b}.x-smc .cy-case__t{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.x-smc .cy-case__t div{padding:12px 6px 10px;border-radius:10px;background:var(--tile);text-align:center}.x-smc .cy-case__t strong{display:block;font-size:14px;font-weight:600;white-space:nowrap}.x-smc .cy-case__t small{display:block;margin-top:4px;font-size:11.5px;color:var(--mut)}@media (max-width:1000px){.x-smc .cy-cases__g{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.x-smc .cy-cases{padding:10px 0 64px}.x-smc .cy-cases__g{grid-template-columns:1fr;gap:12px;margin-top:28px}}.x-smc .cy-cases{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}订阅 Builder 查看完整源码。查看价格