Live Deploy Bento
介绍
四格便当布局：部署列表不断有新构建从顶部推入，状态在排队、构建、已部署间流转；整块橙色卡讲一张网络；默认安全格里盾牌描边循环描画；AI 格右侧终端逐行打出后台智能体的工作日志。
拆自整页模板 燧云 全球网络平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Live Deploy Bento 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add suiyun-deploy-bento
mcp › 使用 8pt MCP 调用 get_component("suiyun-deploy-bento")
代码
Live Deploy Bento 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-dbn"><h2>为你的团队量身定制</h2><p class="x-dbn__sub">从初创团队到大型企业，都能轻松上手。</p><div class="x-dbn__grid"><div class="x-dbn__c x-dbn__c--wide"><div class="x-dbn__deploy"><span class="x-dbn__app"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="5.5" r="2"/><circle cx="7" cy="18.5" r="2"/><circle cx="17" cy="8.5" r="2"/><path d="M7 7.5v9"/><path d="M17 10.5c0 3.5-4 3.5-8.6 6.5"/></svg></span><ul class="x-dbn__list"></ul></div><h3>融入现有工作流</h3><p>代码托管、持续集成、常用编辑器与任意框架。没有私有工具，也不会被锁定。</p></div><div class="x-dbn__c x-dbn__c--or"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg><h3>一张网络承载用户、应用与数据</h3><p>无论是发布代码、保护成员还是连通分支机构，全部跑在同一张全球网络上——一个控制台管理，一份账单结算。</p></div><div class="x-dbn__c x-dbn__c--sec"><div class="x-dbn__shield" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/></svg></div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg><h3>默认安全</h3><p>攻击防护、防火墙、机器人管理与零信任控制都内建于网络，从第一天起作用于每一个请求。</p></div><div class="x-dbn__c x-dbn__c--ai"><div><h3>通往 AI 的快车道</h3><p>在同一张网络上构建、部署并治理智能体。安全的工具入口、身份感知访问与内建推理，让生产级 AI 一步上线。</p></div><div class="x-dbn__term"><p class="x-dbn__tl">正在启动智能体分析代码仓库……</p><div class="x-dbn__lines"></div></div></div></div></div>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap");.x-dbn{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-dbn h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-dbn__sub{margin:14px 0 34px;font-size:16px;color:#666}.x-dbn__grid{display:grid;grid-template-columns:1fr 1fr 1fr;width:82%;margin:0 auto;text-align:left}.x-dbn__c{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;padding:28px 26px;box-sizing:border-box;border:1px solid #EBEBEB;margin:-1px 0 0 -1px;background:#fff;overflow:hidden}.x-dbn__c h3{margin:0 0 8px;font-size:16px;font-weight:500}.x-dbn__c p{margin:0;font-size:14px;line-height:1.55;color:#666;max-width:440px}.x-dbn__c>svg{width:22px;height:22px;margin-bottom:12px}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:span 2}.x-dbn__c--or{justify-content:flex-start;background:#FF5D1D;color:#fff;border-color:#FF5D1D}.x-dbn__c--or p{color:rgba(255,255,255,.92)}.x-dbn__deploy{position:absolute;left:24px;right:24px;top:22px;display:flex;gap:14px}.x-dbn__app{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:8px;background:#FF5D1D;color:#fff}.x-dbn__app svg{width:24px;height:24px}.x-dbn__list{flex:1;margin:0;padding:0;list-style:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}.x-dbn__list li{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;height:36px;margin-bottom:6px;padding:0 14px;border-radius:4px;background:#FFF1E8;font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12.5px;color:#FF5D1D;animation:x-dbn-push .5s ease}.x-dbn__list li em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-dbn__list li em i{width:12px;height:12px;border-radius:50%;border:1.6px solid currentColor;box-sizing:border-box}.x-dbn__list li[data-s="build"] em i{border-right-color:transparent;animation:x-dbn-spin .8s linear infinite}.x-dbn__list li[data-s="queue"]{opacity:.55}.x-dbn__list li[data-s="done"] em i{background:#FF5D1D;border-color:#FF5D1D}.x-dbn__c--sec{justify-content:flex-end}.x-dbn__shield{position:absolute;right:-20px;top:-10px;width:200px;height:200px;color:rgba(255,93,29,.22)}.x-dbn__shield svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.5;stroke-dasharray:60;animation:x-dbn-draw 4s ease-in-out infinite}.x-dbn__c--ai{flex-direction:row;align-items:flex-end;gap:26px}.x-dbn__c--ai>div:first-child{flex:1}.x-dbn__term{flex:1.1;align-self:stretch;padding:14px 16px;border:1px solid #EFEFEF;border-radius:6px;background:linear-gradient(#fff,#FFFAF5);box-shadow:0 14px 40px -26px rgba(120,50,10,.4);font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;color:#444}.x-dbn__tl{margin:0 0 10px!important;font-size:12.5px!important;color:#262626!important}.x-dbn__lines div{display:flex;align-items:center;gap:8px;height:24px;opacity:0;animation:x-dbn-type .4s ease forwards}.x-dbn__lines code{padding:1px 6px;border-radius:4px;background:#FFE9DC;color:#C64A12;font:inherit}.x-dbn__lines .x-dbn__ok{color:#FF5D1D}@keyframes x-dbn-push{from{opacity:0;transform:translateY(-10px)}}@keyframes x-dbn-spin{to{transform:rotate(360deg)}}@keyframes x-dbn-draw{0%{stroke-dashoffset:60}60%,100%{stroke-dashoffset:0}}@keyframes x-dbn-type{to{opacity:1}}@media (max-width:900px){.x-dbn__grid{grid-template-columns:1fr;width:100%}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:auto}.x-dbn__c--wide{min-height:330px}.x-dbn__c--ai{flex-direction:column;align-items:stretch}.x-dbn__list li{grid-template-columns:1fr auto}.x-dbn__list li span:nth-child(2){display:none}}@media (prefers-reduced-motion:reduce){.x-dbn__list li,.x-dbn__list li em i,.x-dbn__shield svg{animation:none}.x-dbn__lines div{animation:none;opacity:1}}(root) => {
const box = root.classList && root.classList.contains("x-dbn") ? root : root.querySelector(".x-dbn");
if (!box) return;
const list = box.querySelector(".x-dbn__list"), lines = box.querySelector(".x-dbn__lines");
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const hex = () => Math.random().toString(16).slice(2, 8);
const label = { done: "已部署", build: "构建中", queue: "排队中" };
const row = (s, when) => { const li = document.createElement("li"); li.dataset.s = s; li.innerHTML = "<span>构建 #" + hex() + "</span><span>" + when + "</span><em>" + label[s] + "<i></i></em>"; return li; };
const setS = (li, s) => { li.dataset.s = s; li.querySelector("em").firstChild.textContent = label[s]; };
list.append(row("build", "刚刚"), row("done", "稍早"), row("done", "更早"));
const step = () => { const first = list.firstElementChild; setS(first, "done"); first.children[1].textContent = "稍早"; list.prepend(row("build", "刚刚")); while (list.children.length > 3) list.lastElementChild.remove(); };
const log = [["review-agent", "扫描合并请求"], ["test-agent", "运行检查"], ["docs-agent", "修订文档"], ["perf-agent", "分析首屏性能"]];
…订阅 Builder 查看完整源码。查看价格