Versus Compare Panel
介绍
左侧灰色“常规做法”叉号清单与右侧紫色“我们的方案”对勾清单并排，中间浮动徽标用曲线连向右侧，进入视口时曲线描绘、右侧条目依次滑入；底部一条核心优势横栏。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Versus Compare Panel 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add versus-compare-panel
mcp › 使用 8pt MCP 调用 get_component("versus-compare-panel")
代码
Versus Compare Panel 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-vcp"><div class="vcp-row"><div class="vcp-l"><h5>单靠 AI 的做法</h5><ul><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>千篇一律的设计</b><small>每个项目都长着同一套模板脸</small></span></li><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>白白消耗额度</b><small>每次重试都在烧建站工具的点数</small></span></li><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>没完没了地改提示词</b><small>为一个区块反复调整几个小时</small></span></li><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>区块风格不统一</b><small>每块都像从不同网站拼过来</small></span></li><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>动效时灵时不灵</b><small>动画代码一半能跑一半报错</small></span></li><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>从空白页起步</b><small>没有参考，也没有灵感</small></span></li><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>每个区块都重造</b><small>页头、问答、页脚次次从零写</small></span></li><li><i class="no"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i><span><b>完成度不够</b><small>一看就是“AI 做的”，拿不出手</small></span></li></ul></div><div class="vcp-mid"><svg viewBox="0 0 160 500" preserveAspectRatio="none" aria-hidden="true"><path d="M0 250 H40"/><path class="v" d="M100 250 C 140 250 120 70 160 70"/><path class="v" d="M100 250 C 140 250 120 430 160 430"/></svg><span class="vcp-orb"><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 class="vcp-r"><h5>棱页</h5><ul><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>可直接上线的组件</b><small>有辨识度的设计，今天就能用</small></span></li><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>为 AI 调好的提示词</b><small>适配常见的 AI 建站工具</small></span></li><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>一键复制</b><small>粘贴进建站工具就完成</small></span></li><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>海量区块与模板</b><small>浏览、挑选，几秒开工</small></span></li><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>打磨过的动效</b><small>动画第一次就能跑通</small></span></li><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>不再面对空白页</b><small>每个项目都从成熟区块开始</small></span></li><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>现成的区块库</b><small>页头、问答、定价都备好了</small></span></li><li><i class="ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span><b>上线级的质感</b><small>用户愿意信任的设计</small></span></li></ul></div></div><div class="vcp-ben"><b>核心优势 →</b><span><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>一次付费</span><span><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>持续更新</span><span><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>海量区块与模板</span><span><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每周上新</span></div></div>
.x-vcp{--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-vcp,.x-vcp *{box-sizing:border-box}.x-vcp a{color:inherit;text-decoration:none}.x-vcp button{font:inherit;cursor:pointer}.x-vcp .lg-mark{width:64px;height:64px;border-radius:16px;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-vcp .lg-mark svg{width:60%;height:60%}.x-vcp{width:100%;max-width:1120px;margin:0 auto;color:var(--ink)}.x-vcp .vcp-row{display:grid;grid-template-columns:1fr 130px 1fr;align-items:center}.x-vcp .vcp-l,.x-vcp .vcp-r{border-radius:20px;padding:0 6px 6px}.x-vcp .vcp-l{background:#EFEFF2}.x-vcp .vcp-r{background:var(--pur);box-shadow:0 0 0 4px rgba(124,58,237,.18),0 30px 60px -30px rgba(124,58,237,.8)}.x-vcp h5{margin:0;padding:16px 0 14px;text-align:center;font-size:16px;font-weight:600;color:#71717A}.x-vcp .vcp-r h5{color:#fff;font-size:18px}.x-vcp ul{list-style:none;margin:0;padding:10px 12px;background:#fff;border-radius:15px;display:grid;gap:2px}.x-vcp li{display:flex;gap:12px;align-items:flex-start;padding:9px 6px;border-radius:10px;transition:background .25s,transform .4s ease,opacity .4s ease}.x-vcp li:hover{background:#F7F5FF}.x-vcp li i{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;display:grid;place-items:center}.x-vcp li i svg{width:10px;height:10px}.x-vcp .no{background:#A1A1AA;color:#fff}.x-vcp .ok{background:#DCFCE7;color:#16A34A}.x-vcp li span{display:flex;flex-direction:column;gap:2px}.x-vcp li b{font-size:13.5px;font-weight:700}.x-vcp li small{font-size:12.5px;color:#52525B}.x-vcp .vcp-r li{opacity:.25;transform:translateX(8px)}.x-vcp.in .vcp-r li{opacity:1;transform:none}.x-vcp .vcp-mid{position:relative;align-self:stretch;display:grid;place-items:center}.x-vcp .vcp-mid svg{position:absolute;inset:0;width:100%;height:100%}.x-vcp .vcp-mid path{fill:none;stroke:#D4D4D8;stroke-width:2}.x-vcp .vcp-mid path.v{stroke:var(--pur);stroke-width:2.5;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.2s ease}.x-vcp.in .vcp-mid path.v{stroke-dashoffset:0}.x-vcp .vcp-orb{position:relative;width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:#fff;box-shadow:0 14px 40px -10px rgba(124,58,237,.7);animation:vcp-float 4s ease-in-out infinite}.x-vcp .vcp-orb .lg-mark{width:62px;height:62px;border-radius:18px}.x-vcp .vcp-ben{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:18px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13px;color:#3F3F46}.x-vcp .vcp-ben b{font-weight:700;color:var(--ink);margin-right:auto}.x-vcp .vcp-ben span{display:flex;align-items:center;gap:6px}.x-vcp .vcp-ben svg{color:var(--pur)}@keyframes vcp-float{50%{transform:translateY(-6px)}}@media (max-width:820px){.x-vcp .vcp-row{grid-template-columns:1fr}.x-vcp .vcp-mid{height:90px}.x-vcp .vcp-mid svg{display:none}.x-vcp .vcp-ben b{margin-right:0;width:100%}}@media (prefers-reduced-motion:reduce){.x-vcp *{animation:none!important;transition:none!important}.x-vcp .vcp-r li{opacity:1;transform:none}.x-vcp .vcp-mid path.v{stroke-dashoffset:0}}.x-vcp{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-vcp{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const items = [...root.querySelectorAll('.vcp-r li')]; items.forEach((li, i) => li.style.transitionDelay = (i * 80) + 'ms');
let io;
if ('IntersectionObserver' in window) { io = new IntersectionObserver(es => { if (es.some(e => e.isIntersecting)) { root.classList.add('in'); io.disconnect(); } }, { threshold: 0.15 }); io.observe(root); } else root.classList.add('in');
return () => { if (io) io.disconnect(); };
}订阅 Builder 查看完整源码。查看价格