Branch Tool Grid
介绍
中心节点用贝塞尔曲线分叉到五列工具卡片，每张卡片带彩色图标块与等宽小字，悬停轻微上浮，最后一格用主色收尾。适合集成目录、插件市场。
拆自整页模板 器枢 智能体工具接入平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Branch Tool Grid 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add branch-tool-grid
mcp › 使用 8pt MCP 调用 get_component("branch-tool-grid")
代码
Branch Tool Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-qtg"><section class="qs-hero qs-hero--grid"><div class="qs-hero__in"><div class="qs-hub"><svg class="qs-bot" viewBox="0 0 13 9" shape-rendering="crispEdges" aria-hidden="true"><g fill="currentColor"> <rect x="2" y="0" width="1" height="1"/><rect x="10" y="0" width="1" height="1"/> <rect x="2" y="1" width="9" height="1"/><rect x="1" y="2" width="11" height="1"/> <rect x="0" y="3" width="3" height="1"/><rect x="4" y="3" width="5" height="1"/><rect x="10" y="3" width="3" height="1"/> <rect x="0" y="4" width="13" height="1"/><rect x="1" y="5" width="11" height="1"/> <rect x="2" y="6" width="2" height="2"/><rect x="9" y="6" width="2" height="2"/><rect x="5" y="6" width="3" height="1"/> </g></svg><span class="qs-stem"></span><span class="qs-pill">器枢<span class="qs-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span></span></div><svg class="qs-branch" viewBox="0 0 1000 90" preserveAspectRatio="none" aria-hidden="true"><path d="M500 0 C500 55 100 30 100 90"/><path d="M500 0 C500 55 300 30 300 90"/><path d="M500 0 C500 55 500 30 500 90"/><path d="M500 0 C500 55 700 30 700 90"/><path d="M500 0 C500 55 900 30 900 90"/></svg><div class="qs-grid"><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#111114"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.5"/><path d="M12 12l5.5-5.5"/></svg></span><span class="qs-tool__t"><b>线索雷达</b><small>销售线索</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#2a3cff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17l4-10 4 10 4-10 4 10"/></svg></span><span class="qs-tool__t"><b>帧流</b><small>视频生成</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff7a1a"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12c3-5 9-6 13-2l4-3v10l-4-3c-4 4-10 3-13-2z"/><circle cx="8" cy="11" r=".8"/></svg></span><span class="qs-tool__t"><b>游鱼</b><small>检索 + 抓页</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#1f6bff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19V11M12 19V5M19 19v-6"/></svg></span><span class="qs-tool__t"><b>词脉</b><small>SEO 数据</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#3d4bff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg></span><span class="qs-tool__t"><b>远望</b><small>网页搜索</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff4d1f"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16v10H9l-5 4z"/></svg></span><span class="qs-tool__t"><b>论坛采集</b><small>社区抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#111114"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5l11 7-11 7z"/></svg></span><span class="qs-tool__t"><b>短片采集</b><small>短视频抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#e0337a"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="4"/><circle cx="12" cy="12" r="3.5"/></svg></span><span class="qs-tool__t"><b>图墙采集</b><small>图片社交抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff2d2d"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="3"/><path d="M10.5 9.5l4 2.5-4 2.5z"/></svg></span><span class="qs-tool__t"><b>长片采集</b><small>视频平台抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#1c1c1e"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h3l2 10h10l2-7H7"/><circle cx="10" cy="19" r="1"/><circle cx="17" cy="19" r="1"/></svg></span><span class="qs-tool__t"><b>货架采集</b><small>电商抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#2aa3e6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 4L3 11l7 2 2 7z"/></svg></span><span class="qs-tool__t"><b>群聊采集</b><small>即时通讯抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#2fa84f"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4l2.4 5 5.6.6-4.2 3.8 1.2 5.6L12 16.2 7 19l1.2-5.6L4 9.6 9.6 9z"/></svg></span><span class="qs-tool__t"><b>口碑采集</b><small>地图评论抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff4f14"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3 9h18"/></svg></span><span class="qs-tool__t"><b>浏览舱</b><small>网页自动化</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#f2365f"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h2M8 8v8M12 5v14M16 8v8M20 12h-2"/></svg></span><span class="qs-tool__t"><b>声画</b><small>多媒体生成</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#0f1b3d"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/></svg></span><span class="qs-tool__t"><b>链上账本</b><small>协议数据</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff6a00"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c1 4 6 6 6 11a6 6 0 0 1-12 0c0-3 2-4 2-7 2 1 3 2 4 4 0-3-1-5 0-8z"/></svg></span><span class="qs-tool__t"><b>火线</b><small>网页爬取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#1c1c1e"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M4 7l8 6 8-6"/></svg></span><span class="qs-tool__t"><b>信使</b><small>智能体邮箱</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#7a4dff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="3"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5"/><path d="M16 6a3 3 0 0 1 0 6M21 19c0-2-1-4-3-4.6"/></svg></span><span class="qs-tool__t"><b>人脉库</b><small>人员检索</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#14b8a6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></svg></span><span class="qs-tool__t"><b>拨号员</b><small>智能体电话</small></span></a><a class="qs-tool qs-tool--all" href="#">查看全部工具 <span aria-hidden="true">→</span></a></div></div></section></div>
.x-qtg{--acc:#0016D7;--ink:#1c1c1e;--mut:#6e6e73;--line:#ececee;--soft:#fafafa;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;width:100%;box-sizing:border-box;text-align:left}.x-qtg *,.x-qtg *::before,.x-qtg *::after{box-sizing:border-box;margin:0;padding:0}.x-qtg a{color:inherit;text-decoration:none}.x-qtg button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-qtg .qs-wrap{max-width:1100px;margin:0 auto;padding:0 24px}.x-qtg .qs-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-align:center}.x-qtg .qs-mark{display:inline-grid;grid-template-columns:repeat(2,6px);gap:2px;transform:rotate(45deg);margin:0 2px}.x-qtg .qs-mark i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}.x-qtg .qs-mark i:nth-child(4){opacity:.35}.x-qtg .qs-hero{position:relative;overflow:hidden;padding:72px 0 96px;background:#fff}.x-qtg .qs-bin{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(38% 46% at 8% 34%,#000 30%,transparent 72%),radial-gradient(36% 48% at 94% 30%,#000 28%,transparent 72%);mask-image:radial-gradient(38% 46% at 8% 34%,#000 30%,transparent 72%),radial-gradient(36% 48% at 94% 30%,#000 28%,transparent 72%)}.x-qtg .qs-bin pre{position:absolute;inset:0;font:10px/12px var(--mono);color:#cfcfd6;letter-spacing:1px;white-space:pre;overflow:hidden}.x-qtg .qs-bin__b{color:#b9bccc!important;animation:xqtgFlick 4.8s ease-in-out infinite alternate}@keyframes xqtgFlick{0%{opacity:0}100%{opacity:1}}.x-qtg .qs-hero__in{position:relative;max-width:1100px;margin:0 auto;padding:0 24px;text-align:center}.x-qtg .qs-live{display:inline-flex;align-items:center;gap:8px;font:12px var(--mono);letter-spacing:.12em;color:#55555a;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}.x-qtg .qs-live i{width:6px;height:6px;border-radius:50%;background:#12a150;animation:xqtgPulse 2s ease-in-out infinite}@keyframes xqtgPulse{50%{opacity:.25;transform:scale(.8)}}.x-qtg .qs-h1{margin:26px 0 30px;font-size:clamp(40px,7.2vw,88px);font-weight:800;letter-spacing:-.045em;line-height:1.04}.x-qtg .qs-h1 em{font-style:normal;color:var(--acc)}.x-qtg .qs-give{display:flex;align-items:center;justify-content:center;gap:12px;font-size:19px;color:#3a3a3e;margin-bottom:18px}.x-qtg .qs-agents{display:inline-flex;gap:7px}.x-qtg .qs-agents i{width:18px;height:18px;border-radius:50%;background:#2b2b30;display:block}.x-qtg .qs-agents .a1{border-radius:4px;transform:rotate(45deg) scale(.82)}.x-qtg .qs-agents .a2{background:transparent;border:2.5px solid #2b2b30}.x-qtg .qs-agents .a3{border-radius:50% 50% 4px 4px}.x-qtg .qs-agents .a4{border-radius:3px;background:radial-gradient(circle at 35% 40%,#fff 0 2px,transparent 2.5px),radial-gradient(circle at 65% 40%,#fff 0 2px,transparent 2.5px),#2b2b30}.x-qtg .qs-hub{display:flex;flex-direction:column;align-items:center;margin-top:44px}.x-qtg .qs-bot{width:68px;height:auto;color:var(--acc);animation:xqtgBob 3.2s ease-in-out infinite}@keyframes xqtgBob{50%{transform:translateY(-6px)}}.x-qtg .qs-stem{width:1px;height:26px;background:#d4d4da;margin:8px 0}.x-qtg .qs-pill{display:inline-flex;align-items:center;gap:6px;background:#1c1c1e;color:#fff;font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}.x-qtg .qs-branch{display:block;width:84%;height:70px;margin:0 auto;fill:none;stroke:var(--acc);stroke-width:1.3;vector-effect:non-scaling-stroke;opacity:.75}.x-qtg .qs-branch path{vector-effect:non-scaling-stroke}.x-qtg .qs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:-2px;text-align:left}.x-qtg .qs-tool{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .25s,box-shadow .25s,border-color .25s}.x-qtg .qs-tool:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,40,.25);border-color:#dcdce2}.x-qtg .qs-tool__ic{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center}.x-qtg .qs-tool__ic svg{width:16px;height:16px}.x-qtg .qs-tool__t{min-width:0;display:flex;flex-direction:column}.x-qtg .qs-tool__t b{font-size:14px;font-weight:600}.x-qtg .qs-tool__t small{font:11px var(--mono);color:#7a7a80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-qtg .qs-tool--all{background:var(--acc);border-color:var(--acc);color:#fff;font-size:14px;font-weight:600;justify-content:center}.x-qtg .qs-tool--all:hover{border-color:var(--acc)}@media (max-width:900px){.x-qtg .qs-grid{grid-template-columns:repeat(3,1fr)}.x-qtg .qs-branch{display:none}.x-qtg .qs-hub{margin-bottom:24px}}@media (max-width:560px){.x-qtg .qs-bin{opacity:.32;-webkit-mask-image:radial-gradient(42% 16% at 0% 3%,#000 10%,transparent 80%),radial-gradient(42% 16% at 100% 3%,#000 10%,transparent 80%),radial-gradient(50% 12% at 0% 62%,#000 10%,transparent 80%),radial-gradient(50% 12% at 100% 62%,#000 10%,transparent 80%);mask-image:radial-gradient(42% 16% at 0% 3%,#000 10%,transparent 80%),radial-gradient(42% 16% at 100% 3%,#000 10%,transparent 80%),radial-gradient(50% 12% at 0% 62%,#000 10%,transparent 80%),radial-gradient(50% 12% at 100% 62%,#000 10%,transparent 80%)}.x-qtg .qs-bin__b{animation:none!important;opacity:0}.x-qtg .qs-grid{grid-template-columns:repeat(2,1fr)}.x-qtg .qs-hero{padding:48px 0 64px}.x-qtg .qs-give{font-size:16px}.x-qtg .qs-tool{padding:12px 10px}}@media (prefers-reduced-motion:reduce){.x-qtg .qs-bin__b,.x-qtg .qs-live i,.x-qtg .qs-bot{animation:none}.x-qtg .qs-tool{transition:none}}.x-qtg .qs-hero--grid{padding:64px 0;min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;background:#fff radial-gradient(#ececf1 1px,transparent 1.3px) 0 0/18px 18px}.x-qtg .qs-hero--grid .qs-hub{margin-top:0}
订阅 Builder 查看完整源码。查看价格