登录 开始使用
8pt

AI Feature Bento

AI 能力便当格•卡片
介绍

浅灰圆角便当格：会议记录卡带实时转写波形条，问答卡带逐字打出的提问框和循环生长的柱状图，通栏卡左侧标题、右侧任务列表与智能体对话依次浮现；悬停时箭头右移。

拆自整页模板 墨格 团队 AI 工作台官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。

纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 AI Feature Bento 加进你的项目并换成你的配色。

适用场景

功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。

安装

订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。

$ npm i -g @8pt-dev/cli && 8pt add ai-feature-bento
mcp › 使用 8pt MCP 调用 get_component("ai-feature-bento")

代码

AI Feature Bento 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。

<div class="x-afb"><section class="mg-feat" id="features"><div class="mg-wrap"><h2 class="mg-h2">为团队日常而生的 AI。</h2><div class="mg-bento">
<article class="mg-fc"><div class="mg-fc__hd"><div><small>沉淀知识</small><h3>文档、会议和讨论，收进同一个知识库。</h3></div><a class="mg-go" href="#features" aria-label="了解沉淀知识"><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="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></div>
<div class="mg-fc__vis"><div class="mg-mt"><div class="mg-mt__t"><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="9" y="3.5" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0"/><path d="M12 18v2.5"/></svg>会议记录</div><div style="margin-top:10px"><div class="mg-mt__r"><span>需求评审：新手引导</span><em style="background:#F1E3FB;color:#8A4BB8">产品</em></div><div class="mg-mt__r"><span>设计周会 · 第 12 期</span><em style="background:#FDF3E1;color:#B7791F">设计</em></div><div class="mg-mt__r"><span>工程站会</span><em style="background:#E6F3FE;color:#0B6BC2">工程</em></div><div class="mg-mt__r"><span>冲刺回顾</span><em style="background:#F1E3FB;color:#8A4BB8">产品</em></div><div class="mg-mt__r"><span>客户访谈整理</span><em style="background:#E8F5EC;color:#2F8A55">运营</em></div></div></div><div class="mg-rec"><span>设计周会 · 正在转写</span><span class="mg-wave"><i style="animation-delay:0.00s"></i><i style="animation-delay:0.09s"></i><i style="animation-delay:0.18s"></i><i style="animation-delay:0.27s"></i><i style="animation-delay:0.36s"></i><i style="animation-delay:0.45s"></i><i style="animation-delay:0.54s"></i><i style="animation-delay:0.63s"></i><i style="animation-delay:0.72s"></i><i style="animation-delay:0.81s"></i><i style="animation-delay:0.90s"></i><i style="animation-delay:0.99s"></i><i style="animation-delay:0.08s"></i><i style="animation-delay:0.17s"></i></span><b></b></div></div></article>
<article class="mg-fc"><div class="mg-fc__hd"><div><small>找到答案</small><h3>张口就问，每一句回答都标明出处。</h3></div><a class="mg-go" href="#features" aria-label="了解找到答案"><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="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></div>
<div class="mg-fc__vis"><div class="mg-ans"><div class="mg-mt__t"><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="M4 20h16"/><path d="M7 16.5v-5"/><path d="M12 16.5V7"/><path d="M17 16.5v-8"/></svg>季度目标看板</div></div><div class="mg-ring"></div><div class="mg-chart"><i style="--c:#F2C14E;--h:40%;animation-delay:0s"></i><i style="--c:#5AA9E6;--h:72%;animation-delay:0.15s"></i><i style="--c:#5BB98C;--h:28%;animation-delay:0.3s"></i><i style="--c:#E5484D;--h:88%;animation-delay:0.45s"></i><i style="--c:#9B8AF0;--h:56%;animation-delay:0.6s"></i></div><div class="mg-ask"><span data-type>下个季度最该押注哪条产品线？</span><b><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="M12 19V5"/><path d="m6 11 6-6 6 6"/></svg></b></div></div></article>
<article class="mg-fc mg-fc--wide"><div class="mg-fc__hd"><div><small>自动处理琐事</small><h3>智能体轮班接力，夜里也有人推进工作。</h3></div><a class="mg-go" href="#agents" aria-label="了解智能体"><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="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></div>
<div class="mg-fc__vis"><div class="mg-tk"><div class="mg-tk__t"><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="4" y="4" width="16" height="16" rx="3.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg>工程任务</div>
<div class="mg-tk__c">修复登录页闪烁<br><small>高优先级</small></div><div class="mg-tk__c">接口超时排查<br><small>本周</small></div><div class="mg-tk__c">整理发布说明<br><small>待分配</small></div></div>
<div class="mg-ag"><div class="mg-ag__top"></div><div class="mg-ag__in"><svg class="mg-peb mg-ag__av" viewBox="0 0 92 92" width="48" height="48" aria-hidden="true" style="transform:rotate(0deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#FFC94D"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><path d="M41 58q5 4 10 0" fill="none" stroke="#191918" stroke-width="2.6" stroke-linecap="round"/><path d="M16 62 6 70" stroke="#FFC94D" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#FFC94D" stroke-width="7" stroke-linecap="round"/></svg><h4>值班智能体</h4>
<p class="mg-msg mg-msg--me">看看工程任务里有哪些还没人认领？</p><p class="mg-msg">找到 3 项未分配任务，已按影响范围排好顺序。</p><p class="mg-msg">建议先处理<u>修复登录页闪烁</u>，要我把它指派给本周值班的同事吗？</p></div></div></div></article>
</div></div></section></div>
.x-afb{--bg:#FFFFFF;--ink:#191918;--acc:#0075DE;--accs:#E6F3FE;--soft:#F6F5F4;--card:#F9F9F8;--line:#E6E5E3;--mut:#787774;
--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-afb *,.x-afb *::before,.x-afb *::after{box-sizing:border-box;margin:0;padding:0}.x-afb{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-afb a{color:inherit;text-decoration:none}.x-afb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-afb .mg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}.x-afb .mg-h2{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.x-afb .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}.x-afb .mg-btn:active{transform:scale(.97)}.x-afb .mg-btn--pri{background:var(--acc);color:#fff}.x-afb .mg-btn--pri:hover{background:#005BAB}.x-afb .mg-btn--sec{background:var(--accs);color:#005BAB}.x-afb .mg-btn--sec:hover{background:#D5EAFC}.x-afb .mg-btn--white{background:#fff;color:#005BAB}.x-afb .mg-btn--white:hover{background:#F0F7FE}.x-afb .mg-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-afb .mg-logo__m{width:28px;height:28px}.x-afb .mg-logo--big{font-size:26px;gap:10px}.x-afb .mg-logo--big .mg-logo__m{width:40px;height:40px}.x-afb .mg-peb{display:block;overflow:visible}.x-afb .mg-peb__eyes{animation:xafbBlink 5s infinite;transform-origin:center 46px;transform-box:view-box}@keyframes xafbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}@media (prefers-reduced-motion:reduce){.x-afb *,.x-afb *::before,.x-afb *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.x-afb .mg-feat{padding:40px 0 60px}.x-afb .mg-bento{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}.x-afb .mg-fc{position:relative;display:flex;flex-direction:column;border-radius:16px;background:var(--card);overflow:hidden;transition:background .3s}.x-afb .mg-fc:hover{background:#F3F2F0}.x-afb .mg-fc__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 22px 0}.x-afb .mg-fc__hd small{display:block;font-size:13px;color:#5F5E5B}.x-afb .mg-fc__hd h3{margin-top:4px;font-size:19px;font-weight:700;letter-spacing:-.01em}.x-afb .mg-go{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .3s var(--ease)}.x-afb .mg-go svg{width:16px;height:16px}.x-afb .mg-fc:hover .mg-go{transform:translateX(4px)}.x-afb .mg-fc__vis{position:relative;flex:1;min-height:300px;margin:22px 22px 0;border-radius:12px 12px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05);overflow:hidden}.x-afb .mg-mt{padding:20px 22px}.x-afb .mg-mt__t{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700}.x-afb .mg-mt__t svg{width:22px;height:22px;color:var(--acc)}.x-afb .mg-mt__r{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #F0EFED;font-size:13px}.x-afb .mg-mt__r span{display:flex;align-items:center;gap:6px}.x-afb .mg-mt__r span::before{content:"";width:11px;height:13px;border-radius:2px;border:1.5px solid #BDBBB7}.x-afb .mg-mt__r em{font-style:normal;font-size:11.5px;padding:1px 7px;border-radius:4px}.x-afb .mg-rec{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;height:48px;padding:0 10px 0 16px;border-radius:999px;background:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);font-size:14px}.x-afb .mg-rec>span{flex:1}.x-afb .mg-wave{display:flex;align-items:center;gap:3px;height:22px}.x-afb .mg-wave i{width:2.5px;height:100%;border-radius:2px;background:#B9B8B4;animation:xafbWave 1.1s ease-in-out infinite;transform-origin:center}@keyframes xafbWave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}.x-afb .mg-rec b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#FBE4E1}.x-afb .mg-rec b::after{content:"";width:10px;height:10px;border-radius:2px;background:#E5484D}.x-afb .mg-ans{padding:20px 22px}.x-afb .mg-chart{display:flex;align-items:flex-end;gap:18px;height:170px;margin:12px 20px 0 34px;border-bottom:1px solid #EEEDEB}.x-afb .mg-chart i{flex:1;border-radius:4px 4px 0 0;background:var(--c);height:var(--h);transform-origin:bottom;animation:xafbGrow 4.8s var(--ease) infinite}@keyframes xafbGrow{0%{transform:scaleY(.05)}25%,85%{transform:scaleY(1)}100%{transform:scaleY(.05)}}.x-afb .mg-ring{position:absolute;left:-46px;top:40px;width:150px;height:150px;border-radius:50%;background:conic-gradient(#5BB98C 0 62%,#EEEDEB 0);-webkit-mask:radial-gradient(closest-side,transparent 78%,#000 80%);mask:radial-gradient(closest-side,transparent 78%,#000 80%)}.x-afb .mg-ask{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;height:48px;padding:0 8px 0 16px;border-radius:12px;background:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);font-size:14px}.x-afb .mg-ask span{flex:1;white-space:nowrap;overflow:hidden}.x-afb .mg-ask span::after{content:"";display:inline-block;width:1.5px;height:16px;margin-left:2px;vertical-align:-3px;background:var(--acc);animation:xafbCaret 1s steps(1) infinite}@keyframes xafbCaret{50%{opacity:0}}.x-afb .mg-ask b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff}.x-afb .mg-ask b svg{width:15px;height:15px}.x-afb .mg-fc--wide{grid-column:1/-1;flex-direction:row;min-height:360px}.x-afb .mg-fc--wide .mg-fc__hd{flex-direction:column;align-items:flex-start;justify-content:flex-start;width:38%;padding:24px}.x-afb .mg-fc--wide .mg-fc__vis{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:24px 0 0;border-radius:12px 0 0 0;min-height:0}.x-afb .mg-tk{padding:18px;background:#fff}.x-afb .mg-tk__t{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-afb .mg-tk__t svg{width:20px;height:20px;color:#B7791F}.x-afb .mg-tk__c{margin-top:10px;padding:9px 10px;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.07);font-size:12.5px}.x-afb .mg-tk__c small{display:inline-block;margin-top:5px;padding:1px 6px;border-radius:4px;background:#FDF3E1;color:#B7791F;font-size:11px}.x-afb .mg-ag{padding:0;background:#fff;border-left:1px solid var(--line)}.x-afb .mg-ag__top{height:54px;background:#FDF3E1}.x-afb .mg-ag__in{padding:0 18px 18px}.x-afb .mg-ag__av{margin-top:-24px;width:48px;height:48px}.x-afb .mg-ag h4{margin-top:6px;font-size:17px}.x-afb .mg-msg{margin-top:10px;font-size:12.5px;line-height:1.55;opacity:0;transform:translateY(6px);animation:xafbMsg 9s var(--ease) infinite}.x-afb .mg-msg--me{margin-left:auto;max-width:82%;padding:8px 10px;border-radius:10px;background:#F1EFEC}.x-afb .mg-msg:nth-of-type(2){animation-delay:.9s}.x-afb .mg-msg:nth-of-type(3){animation-delay:1.8s}.x-afb .mg-msg:nth-of-type(4){animation-delay:2.7s}@keyframes xafbMsg{0%{opacity:0;transform:translateY(6px)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0}}.x-afb .mg-msg u{text-decoration:none;color:var(--acc)}@media (max-width:860px){.x-afb .mg-feat{padding:20px 0 44px}.x-afb .mg-bento{grid-template-columns:1fr;gap:14px;margin-top:22px}.x-afb .mg-fc--wide{flex-direction:column}.x-afb .mg-fc--wide .mg-fc__hd{width:auto;padding:20px 20px 0;flex-direction:row;align-items:flex-end;justify-content:space-between}.x-afb .mg-fc--wide .mg-fc__vis{grid-template-columns:1fr;margin:20px 20px 0;border-radius:12px 12px 0 0}.x-afb .mg-ag{display:none}.x-afb .mg-rec>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-afb .mg-wave i:nth-child(n+7){display:none}.x-afb .mg-fc__vis{min-height:280px;margin:20px 20px 0}
}.x-afb .mg-wrap{width:100%}.x-afb .mg-feat{padding:24px 0}.x-afb .mg-bento{margin-top:20px;gap:14px}.x-afb .mg-fc__vis{min-height:220px;margin:16px 18px 0}.x-afb .mg-fc__hd{padding:18px 18px 0}.x-afb .mg-fc--wide{min-height:270px}.x-afb .mg-fc--wide .mg-fc__vis{margin:18px 0 0}.x-afb .mg-mt{padding:14px 18px}.x-afb .mg-mt__r{padding:5px 0}.x-afb .mg-chart{height:110px}.x-afb .mg-ring{top:20px;width:120px;height:120px}.x-afb .mg-h2{font-size:34px}
(root) => {
  const el = (root.matches && root.matches('.mg-feat')) ? root : root.querySelector('.mg-feat');
  if (!el) return;
  const t = el.querySelector('[data-type]');
  const qs = ['下个季度最该押注哪条产品线？', '上周客诉最多的是哪个功能？', '新人入职第一周该看哪些文档？'];
  let qi = 0, ci = qs[0].length, dir = -1, tm = 0;
  const step = () => {
    const q = qs[qi];
    ci += dir; t.textContent = q.slice(0, Math.max(0, ci));
    let wait = dir > 0 ? 90 : 35;
    if (dir > 0 && ci >= q.length) { dir = -1; wait = 2200; }
    else if (dir < 0 && ci <= 0) { qi = (qi + 1) % qs.length; dir = 1; wait = 400; }
…
订阅 Builder 查看完整源码。查看价格

同一模板的其他组件

查看全部

Agent Use Cards

Tinted Team Cards

Motto Column Footer

Kanban Window Mock

Ticker CTA Band

Pill Word Hero

更多卡片组件

查看全部

Live Deploy Bento

Trio Capability Cards

Story Stat Carousel

Collage Topic Cards

Agent Use Cards

Tagged Journal Cards

MCP Connect Steps

Masonry Review Wall

更多组件

查看全部

Tabbed Logo Testimonial

Dot Matrix Glow Hero

Dotted Globe Features

Chaos Versus Ship Split

Segmented Pricing Tiers

Floating Tile CTA Banner

Aurora Prompt Hero

Integration Tile Grid

继续探索

按钮 组件背景 组件Hero 组件卡片 组件输入 组件导航 组件反馈 组件数字 组件动效 组件定价 组件折叠 组件文字 组件数据展示 组件媒体 组件