AI Feature Bento
Overview
A light gray rounded bento: a meeting notes card with a live transcription waveform, a Q&A card with a typed question and a looping growing bar chart, and a full-width card where a task list and an agent conversation appear in turn beside the title. Arrows move right on hover.
Taken from the page template Moge Team AI Workspace Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds AI Feature Bento to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add ai-feature-bento
mcp › Use 8pt MCP to call get_component("ai-feature-bento")
Code
Source for AI Feature Bento. Motion uses only transform and opacity and respects the Reduce motion setting.
<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; }
…Subscribe to Builder to see the full source.See pricing