Prompt Hub Diagram
介绍
中心发光圆形徽标向左右各四个工具胶囊伸出虚线曲线，光点沿曲线循环流动，外圈虚线环缓慢旋转；悬停胶囊时对应连线高亮为实线。窄屏改为徽标在上、胶囊两列排开。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Prompt Hub Diagram 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add prompt-hub-diagram
mcp › 使用 8pt MCP 调用 get_component("prompt-hub-diagram")
代码
Prompt Hub Diagram 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-hub"><div class="hub-box"><svg class="hub-svg" viewBox="0 0 1000 360" aria-hidden="true"><g class="hub-lines"><path d="M222 45 C 330 45 350 142 418 142"/><path d="M778 45 C 670 45 650 142 582 142"/><path d="M222 125 C 330 125 350 165 418 165"/><path d="M778 125 C 670 125 650 165 582 165"/><path d="M222 205 C 330 205 350 187 418 187"/><path d="M778 205 C 670 205 650 187 582 187"/><path d="M222 285 C 330 285 350 209 418 209"/><path d="M778 285 C 670 285 650 209 582 209"/></g><g class="hub-dots"><circle r="3.2"><animateMotion dur="2.6s" begin="0.0s" repeatCount="indefinite" path="M222 45 C 330 45 350 142 418 142"/></circle><circle r="3.2"><animateMotion dur="2.6s" begin="0.4s" repeatCount="indefinite" path="M778 45 C 670 45 650 142 582 142"/></circle><circle r="3.2"><animateMotion dur="2.9s" begin="0.4s" repeatCount="indefinite" path="M222 125 C 330 125 350 165 418 165"/></circle><circle r="3.2"><animateMotion dur="2.9s" begin="0.8s" repeatCount="indefinite" path="M778 125 C 670 125 650 165 582 165"/></circle><circle r="3.2"><animateMotion dur="3.2s" begin="0.8s" repeatCount="indefinite" path="M222 205 C 330 205 350 187 418 187"/></circle><circle r="3.2"><animateMotion dur="3.2s" begin="1.2s" repeatCount="indefinite" path="M778 205 C 670 205 650 187 582 187"/></circle><circle r="3.2"><animateMotion dur="3.5s" begin="1.2s" repeatCount="indefinite" path="M222 285 C 330 285 350 209 418 209"/></circle><circle r="3.2"><animateMotion dur="3.5s" begin="1.6s" repeatCount="indefinite" path="M778 285 C 670 285 650 209 582 209"/></circle></g></svg><span class="hub-p l" style="top:12.5%"><span class="tl-ic" style="background:#111"><svg viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6z" fill="#fff"/></svg></span><b>闪建</b></span><span class="hub-p r" style="top:12.5%"><span class="tl-ic" style="background:#10B981"><svg viewBox="0 0 24 24"><path d="M4 8l8-4 8 4-8 4zM4 12l8 4 8-4M4 16l8 4 8-4" stroke="#fff" stroke-width="1.6" fill="none"/></svg></span><b>栈工</b></span><span class="hub-p l" style="top:34.7%"><span class="tl-ic" style="background:#F97316"><svg viewBox="0 0 24 24"><path d="M4 15l8-10 8 10H4z" fill="#fff"/></svg></span><b>码舟</b></span><span class="hub-p r" style="top:34.7%"><span class="tl-ic" style="background:#6366F1"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" stroke="#fff" stroke-width="2" fill="none"/><path d="M12 8v4l3 2" stroke="#fff" stroke-width="2" fill="none"/></svg></span><b>速搭</b></span><span class="hub-p l" style="top:56.9%"><span class="tl-ic" style="background:#EC4899"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="6" height="6" fill="#fff"/><rect x="13" y="13" width="6" height="6" fill="#fff"/></svg></span><b>拼页</b></span><span class="hub-p r" style="top:56.9%"><span class="tl-ic" style="background:#D946EF"><svg viewBox="0 0 24 24"><path d="M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z" fill="#fff"/></svg></span><b>灵绘</b></span><span class="hub-p l" style="top:79.2%"><span class="tl-ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24"><path d="M7 17a4 4 0 1 1 1-7.9A5 5 0 0 1 17.5 10 3.5 3.5 0 0 1 17 17z" fill="#fff"/></svg></span><b>云匠</b></span><span class="hub-p r" style="top:79.2%"><span class="tl-ic" style="background:#0B0B0F"><svg viewBox="0 0 24 24"><path d="M5 5h14v14H5zM5 10h14" stroke="#fff" stroke-width="1.8" fill="none"/></svg></span><b>页工坊</b></span><div class="hub-orb"><span class="hub-ring"></span><span class="hub-core"><span class="lg-mark"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3l8 9-8 9-8-9z"/><path d="M12 3v18M4 12h16" opacity=".55"/></svg></span></span></div></div><p class="hub-note"><span><span class="lg-mark"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3l8 9-8 9-8-9z"/><path d="M12 3v18M4 12h16" opacity=".55"/></svg></span></span>不止这些——任何 AI 建站工具都能用。</p></div>
.x-hub{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-hub,.x-hub *{box-sizing:border-box}.x-hub a{color:inherit;text-decoration:none}.x-hub button{font:inherit;cursor:pointer}.x-hub .lg-mark{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#8B5CF6,#6D28D9);display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px -4px rgba(124,58,237,.7);flex:none}.x-hub .lg-mark svg{width:60%;height:60%}.x-hub{width:100%;max-width:1040px;margin:0 auto;color:var(--ink)}.x-hub .hub-box{position:relative;aspect-ratio:1000/360}.x-hub .hub-svg{position:absolute;inset:0;width:100%;height:100%}.x-hub .hub-lines path{fill:none;stroke:#C4B5FD;stroke-width:1.4;stroke-dasharray:3 5}.x-hub .hub-dots circle{fill:#7C3AED}.x-hub .hub-p{position:absolute;width:22.2%;height:15%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1.5px solid #C4B5FD;border-radius:12px;box-shadow:0 6px 18px -10px rgba(124,58,237,.45);font-size:clamp(13px,1.6vw,18px);transition:transform .25s,box-shadow .25s,border-color .25s}.x-hub .hub-p:hover{transform:translateY(-50%) scale(1.04);border-color:#7C3AED;box-shadow:0 10px 24px -10px rgba(124,58,237,.6)}.x-hub .hub-p.l{left:0}.x-hub .hub-p.r{right:0}.x-hub .hub-p b{font-weight:700}.x-hub .tl-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center}.x-hub .tl-ic svg{width:16px;height:16px}.x-hub .hub-orb{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 55%,#F3EEFF 56%,#F3EEFF 70%,rgba(237,233,254,.4) 71%);display:grid;place-items:center}.x-hub .hub-ring{position:absolute;inset:-14%;border-radius:50%;border:1px dashed #DDD6FE;animation:hub-spin 30s linear infinite}.x-hub .hub-core{width:52%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 40px -8px rgba(124,58,237,.55);animation:hub-pulse 3s ease-in-out infinite}.x-hub .hub-core .lg-mark{border-radius:50%;width:78%;height:78%}.x-hub .hub-note{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:48px auto 0;font-size:13px;color:#52525B;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px}.x-hub .hub-note .lg-mark{width:20px;height:20px;border-radius:6px}@keyframes hub-spin{to{transform:rotate(360deg)}}@keyframes hub-pulse{50%{box-shadow:0 10px 60px -4px rgba(124,58,237,.8)}}@media (max-width:700px){.x-hub .hub-box{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:150px}.x-hub .hub-svg{display:none}.x-hub .hub-p{position:static;width:auto;height:48px;transform:none;font-size:14px}.x-hub .hub-p:hover{transform:scale(1.03)}.x-hub .hub-orb{top:64px;width:120px}.x-hub .hub-note{font-size:12px;margin-top:28px}}@media (prefers-reduced-motion:reduce){.x-hub *{animation:none!important;transition:none!important}.x-hub .hub-dots{display:none}}.x-hub{max-width:none;padding:60px 5%;background-image:radial-gradient(rgba(16,16,24,.12) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-hub{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const svg = root.querySelector('.hub-svg');
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches && svg.pauseAnimations) svg.pauseAnimations();
const pills = [...root.querySelectorAll('.hub-p')];
const lines = [...root.querySelectorAll('.hub-lines path')];
const order = [0, 2, 4, 6, 1, 3, 5, 7];
const on = (e) => { const i = pills.indexOf(e.currentTarget); const p = lines[i]; if (p) { p.style.stroke = '#7C3AED'; p.style.strokeDasharray = 'none'; } };
const off = () => lines.forEach(p => { p.style.stroke = ''; p.style.strokeDasharray = ''; });
pills.forEach(p => { p.addEventListener('mouseenter', on); p.addEventListener('mouseleave', off); });
return () => pills.forEach(p => { p.removeEventListener('mouseenter', on); p.removeEventListener('mouseleave', off); });
}订阅 Builder 查看完整源码。查看价格