Versus Compare Panel
Overview
A gray The usual way list with crosses sits next to a purple Our way list with checks; a floating badge in the middle connects to the right with curves. On entering the viewport the curves draw and the right-hand items slide in one by one, with a key-advantage bar along the bottom.
Taken from the page template Lingye Design Prompt Library Home. 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 Versus Compare Panel to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
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 versus-compare-panel
mcp › Use 8pt MCP to call get_component("versus-compare-panel")
Code
Source for Versus Compare Panel. Motion uses only transform and opacity and respects the Reduce motion setting.
<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(); };
}Subscribe to Builder to see the full source.See pricing