Tri Plan Pricing
介绍
季度、年度、终身三档定价，衬线大号价格配划线原价；顶部滑块开关在“资源库 / 建站器”之间切换，价格淡出淡入更新；推荐档为黑底卡片配紫色按钮与“限量名额”角标。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Tri Plan Pricing 加进你的项目并换成你的配色。
适用场景
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add tri-plan-pricing-toggle
mcp › 使用 8pt MCP 调用 get_component("tri-plan-pricing-toggle")
代码
Tri Plan Pricing 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tpp"><div class="tpp-seg"><i class="tpp-th"></i><button class="on" data-k="a">资源库</button><button data-k="b">建站器</button></div><div class="tpp-grid"><div class="tpp-c"><b class="tpp-n">季度</b><small class="tpp-s">合理使用 · 三个月</small><div class="tpp-p"><strong data-a="¥299" data-b="¥399">¥299</strong></div><small class="tpp-note">每三个月计费，随时取消</small><a href="#" class="tpp-btn">开通季度会员</a><ul><li><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>每日可复制组件提示词</li><li><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>每日可复制模板提示词</li><li><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>全部会员区块</li><li><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>全部会员模板</li><li><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>动态背景</li><li><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>每周新模板</li><li><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>后续会员资源</li><li><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>浏览器插件</li><li><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>个人与客户项目</li></ul></div><div class="tpp-c"><b class="tpp-n">年度</b><small class="tpp-s">提示词不限量 · 一年</small><div class="tpp-p"><strong data-a="¥599" data-b="¥899">¥599</strong></div><small class="tpp-note">整年使用，随时取消</small><a href="#" class="tpp-btn">开通年度会员</a><ul><li><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>组件提示词不限量</li><li><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>模板提示词不限量</li><li><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>模板与区块源码</li><li><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>全部会员区块与模板</li><li><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>动态背景</li><li><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>棱页 MCP<em>新</em></li><li><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>每周新模板</li><li><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>会员社群</li><li><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>浏览器插件</li></ul></div><div class="tpp-c hot"><span class="tpp-badge">★ 限量名额</span><b class="tpp-n">终身</b><small class="tpp-s">提示词不限量 · 长期使用</small><div class="tpp-p"><s>¥2499</s><strong data-a="¥1199" data-b="¥1699">¥1199</strong></div><small class="tpp-note">一次付费，长期使用</small><a href="#" class="tpp-btn">一次付费，长期使用</a><ul><li><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>组件提示词不限量</li><li><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>模板提示词不限量</li><li><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>模板与区块源码</li><li><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>全部会员区块与模板</li><li><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>动态背景</li><li><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>棱页 MCP<em>新</em></li><li><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>每周新模板</li><li><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>会员社群</li><li><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>优先支持</li></ul></div></div></div>
.x-tpp{--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-tpp,.x-tpp *{box-sizing:border-box}.x-tpp a{color:inherit;text-decoration:none}.x-tpp button{font:inherit;cursor:pointer}.x-tpp{width:100%;max-width:1120px;margin:0 auto;color:var(--ink)}.x-tpp .tpp-seg{position:relative;display:flex;width:max-content;margin:0 auto 32px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line)}.x-tpp .tpp-seg button{position:relative;z-index:1;width:80px;height:32px;border:0;background:none;border-radius:999px;font-size:13px;color:#52525B;transition:color .25s}.x-tpp .tpp-seg button.on{color:#fff}.x-tpp .tpp-th{position:absolute;left:4px;top:4px;width:80px;height:32px;border-radius:999px;background:var(--pur);transition:transform .3s cubic-bezier(.3,.8,.3,1)}.x-tpp .tpp-seg.b .tpp-th{transform:translateX(80px)}.x-tpp .tpp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}.x-tpp .tpp-c{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px;transition:transform .3s,box-shadow .3s}.x-tpp .tpp-c:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(16,16,24,.35)}.x-tpp .tpp-c.hot{background:#0B0B0F;color:#fff;border-color:#0B0B0F;box-shadow:0 30px 60px -30px rgba(124,58,237,.7)}.x-tpp .tpp-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:#0B0B0F;background:#fff;border:1.5px solid var(--pur);padding:4px 10px;border-radius:999px;white-space:nowrap}.x-tpp .tpp-n{display:block;font-size:17px;font-weight:700}.x-tpp .tpp-s{display:block;font-size:12px;color:var(--mut);margin-top:4px}.x-tpp .hot .tpp-s,.x-tpp .hot .tpp-note{color:#A1A1AA}.x-tpp .tpp-p{display:flex;align-items:baseline;gap:8px;margin:26px 0 4px;font-family:"Noto Serif SC","Songti SC",serif}.x-tpp .tpp-p strong{font-size:48px;font-weight:400;letter-spacing:-.03em;transition:opacity .2s}.x-tpp .tpp-p strong.fade{opacity:0}.x-tpp .tpp-p s{font-size:30px;color:#71717A}.x-tpp .tpp-note{display:block;font-size:12px;color:var(--mut)}.x-tpp .tpp-btn{display:flex;justify-content:center;align-items:center;height:42px;margin:18px 0 20px;border-radius:9px;background:#0B0B0F;color:#fff;font-size:13px;font-weight:600;transition:background .2s}.x-tpp .tpp-btn:hover{background:#27272A}.x-tpp .hot .tpp-btn{background:var(--pur)}.x-tpp .hot .tpp-btn:hover{background:#6D28D9}.x-tpp ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.x-tpp li{display:flex;align-items:center;gap:9px;font-size:13px;color:#3F3F46}.x-tpp .hot li{color:#E4E4E7}.x-tpp li svg{flex:none;color:#0B0B0F}.x-tpp .hot li svg{color:var(--pur2)}.x-tpp li em{font-style:normal;font-size:10px;font-weight:600;color:#fff;background:#EF4444;padding:1px 6px;border-radius:4px}@media (max-width:900px){.x-tpp .tpp-grid{grid-template-columns:1fr;gap:26px}}@media (prefers-reduced-motion:reduce){.x-tpp *{transition:none!important}}.x-tpp{max-width:none;padding:56px 5%;background-image:radial-gradient(rgba(16,16,24,.1) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-tpp{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const seg = root.querySelector('.tpp-seg'), btns = [...seg.querySelectorAll('button')], prices = [...root.querySelectorAll('.tpp-p strong')];
let t;
const onClick = (e) => {
const k = e.currentTarget.dataset.k;
btns.forEach(b => b.classList.toggle('on', b === e.currentTarget)); seg.classList.toggle('b', k === 'b');
prices.forEach(p => p.classList.add('fade')); clearTimeout(t);
t = setTimeout(() => prices.forEach(p => { p.textContent = p.dataset[k]; p.classList.remove('fade'); }), 200);
};
btns.forEach(b => b.addEventListener('click', onClick));
return () => { clearTimeout(t); btns.forEach(b => b.removeEventListener('click', onClick)); };
}订阅 Builder 查看完整源码。查看价格