Release Spec Cards
介绍
三张米灰圆角公告卡：顶部胶囊标记、栏目与时间，粗体标题和简述，底部用细线分隔的模型详情与系统说明两行链接，最下方整宽「阅读公告」按钮，悬停卡片轻抬、箭头右移。
拆自整页模板 知衡 AI 研究公司首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Release Spec Cards 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add release-spec-cards
mcp › 使用 8pt MCP 调用 get_component("release-spec-cards")
代码
Release Spec Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rsc"><article class="x-rsc__card"><div class="x-rsc__meta"><span class="x-rsc__chip" aria-hidden="true"><i></i><i></i><i></i></span><span>发布</span><span class="x-rsc__when">本周</span></div><h3 class="x-rsc__t">推出青岚与远岫</h3><p class="x-rsc__d">我们迄今最强的两款模型，面向艰深的技术工作。青岚在编程、金融与科学研究上树立了新的标准。</p><dl class="x-rsc__rows"><div><dt>模型详情</dt><dd><a href="#">青岚<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a><a href="#">远岫<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></dd></div><div><dt>系统说明</dt><dd><a href="#">查看<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v10"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5.5 19.5h13"/></svg></a></dd></div></dl><a class="x-rsc__btn" href="#">阅读公告<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></article><article class="x-rsc__card"><div class="x-rsc__meta"><span class="x-rsc__chip" aria-hidden="true"><i></i><i></i><i></i></span><span>发布</span><span class="x-rsc__when">上月</span></div><h3 class="x-rsc__t">推出云栖</h3><p class="x-rsc__d">云栖在智能体编程与知识工作上更进一步，适合需要长时间自主推进、反复校验的复杂任务。</p><dl class="x-rsc__rows"><div><dt>模型详情</dt><dd><a href="#">云栖<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></dd></div><div><dt>系统说明</dt><dd><a href="#">查看<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v10"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5.5 19.5h13"/></svg></a></dd></div></dl><a class="x-rsc__btn" href="#">阅读公告<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></article><article class="x-rsc__card"><div class="x-rsc__meta"><span class="x-rsc__chip" aria-hidden="true"><i></i><i></i><i></i></span><span>发布</span><span class="x-rsc__when">上月</span></div><h3 class="x-rsc__t">推出晴川</h3><p class="x-rsc__d">晴川是日常任务的稳健之选：响应更快、运行更省，适合在团队与产品中大规模部署。</p><dl class="x-rsc__rows"><div><dt>模型详情</dt><dd><a href="#">晴川<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></dd></div><div><dt>系统说明</dt><dd><a href="#">查看<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4.5v10"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5.5 19.5h13"/></svg></a></dd></div></dl><a class="x-rsc__btn" href="#">阅读公告<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13.5 6.5L19 12l-5.5 5.5"/></svg></a></article></div>
.x-rsc{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;padding:0 clamp(20px,5.5vw,80px);color:#141413;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-rsc *,.x-rsc *::before,.x-rsc *::after{box-sizing:border-box}.x-rsc svg{width:1em;height:1em;flex:none}.x-rsc__card{display:flex;flex-direction:column;min-height:380px;padding:22px 22px 18px;border-radius:14px;background:#f0eee6;transition:background .25s,transform .35s cubic-bezier(.2,.8,.2,1)}.x-rsc__card:hover{background:#ebe8de;transform:translateY(-3px)}.x-rsc__meta{display:flex;align-items:center;gap:10px;color:#6f6b61;font-size:12px}.x-rsc__chip{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 8px;border-radius:99px;background:#e3e0d6}.x-rsc__chip i{width:3px;height:3px;border-radius:50%;background:#8a8579}.x-rsc__t{margin:14px 0 10px;font-size:21px;font-weight:650;line-height:1.3;letter-spacing:-.005em}.x-rsc__d{margin:0;color:#3d3a34;font-size:13.5px;line-height:1.65}.x-rsc__rows{margin:auto 0 0;padding-top:28px}.x-rsc__rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #e3e0d6}.x-rsc__rows dt{font-size:13px;font-weight:550}.x-rsc__rows dd{display:flex;flex-wrap:wrap;gap:14px;margin:0}.x-rsc__rows a{display:inline-flex;align-items:center;gap:4px;color:#3d3a34;font-size:13px;text-decoration:none}.x-rsc__rows a:hover{color:#141413;text-decoration:underline;text-underline-offset:3px}.x-rsc__btn{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;margin-top:8px;border-radius:9px;background:#e3e0d6;color:#141413;font-size:13.5px;font-weight:550;text-decoration:none;transition:background .2s}.x-rsc__btn svg{transition:transform .25s}.x-rsc__btn:hover{background:#d8d4c8}.x-rsc__btn:hover svg{transform:translateX(3px)}@media (max-width:980px){.x-rsc{grid-template-columns:minmax(0,1fr)}.x-rsc__card{min-height:0}}@media (max-width:600px){.x-rsc{padding:0 20px}}@media (prefers-reduced-motion:reduce){.x-rsc__card,.x-rsc__btn svg{transition:none}}订阅 Builder 查看完整源码。查看价格