MCP Connect Steps
介绍
三张步骤卡讲清接入流程：复制链接时弹出“已复制”提示，中间是迷你工具连线示意，第三张的授权弹窗由动画光标点下“允许”并变成已允许；底部一排适配工具胶囊。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 MCP Connect Steps 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add mcp-connect-steps
mcp › 使用 8pt MCP 调用 get_component("mcp-connect-steps")
代码
MCP Connect Steps 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-mcp"><div class="mcp-grid"> <div class="mcp-c"><div class="mcp-v"><div class="mcp-url"><i></i><code>mcp.example.com</code><button type="button" class="mcp-copy">复制</button><span class="mcp-toast"><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><em>01</em><h4>复制一条链接</h4><p>一条链接，就能把你的棱页资源库接入任何支持 MCP 的 AI 工具。</p></div> <div class="mcp-c"><div class="mcp-v"><div class="mh"><div class="mh-col"><span class="mh-p"><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>闪建</span><span class="mh-p"><span class="tl-ic" style="background:#F97316"><svg viewBox="0 0 24 24"><path d="M4 15l8-10 8 10H4z" fill="#fff"/></svg></span>码舟</span><span class="mh-p"><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>拼页</span></div><span class="mh-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 class="mh-col"><span class="mh-p"><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>云匠</span><span class="mh-p"><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>栈工</span><span class="mh-p"><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>速搭</span></div></div></div><em>02</em><h4>添加到你的 AI 工具</h4><p>常见的 AI 编程与建站工具都支持，点几下就好，不需要密钥。</p></div> <div class="mcp-c"><div class="mcp-v"><div class="mcp-dlg"><div class="md-h"><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><b>允许访问棱页？</b><small>码舟 想使用你的资源库</small></span></div><div class="md-b"><span class="md-no">取消</span><span class="md-ok"><i class="t1">允许</i><i class="t2">已允许 <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></div><svg class="md-cur" viewBox="0 0 24 24" width="20" height="20"><path d="M5 3l14 8-6 2-3 6z" fill="#0B0B0F" stroke="#fff" stroke-width="1.4" stroke-linejoin="round"/></svg></div></div><em>03</em><h4>登录后直接提问</h4><p>用棱页账号确认授权，然后按名字向 AI 要任意区块。</p></div> </div><div class="mcp-works"><small>已适配你常用的 AI 工具</small><div class="mcp-row"><span class="mcp-t"><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="mcp-t"><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="mcp-t"><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="mcp-t"><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="mcp-t"><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="mcp-more">还有更多</span></div></div></div>
.x-mcp{--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-mcp,.x-mcp *{box-sizing:border-box}.x-mcp a{color:inherit;text-decoration:none}.x-mcp button{font:inherit;cursor:pointer}.x-mcp .lg-mark{width:22px;height:22px;border-radius:5px;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-mcp .lg-mark svg{width:60%;height:60%}.x-mcp{width:100%;max-width:1080px;margin:0 auto;color:var(--ink)}.x-mcp .mcp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.x-mcp .mcp-c{background:#F6F6F8;border:1px solid #EDEDF0;border-radius:18px;padding:8px 8px 20px;transition:transform .3s,box-shadow .3s}.x-mcp .mcp-c:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(124,58,237,.45)}.x-mcp .mcp-v{position:relative;height:200px;border-radius:12px;background:linear-gradient(135deg,#F3E8FF,#FCE7F3 60%,#EDE9FE);display:grid;place-items:center;overflow:hidden;margin-bottom:16px}.x-mcp em{display:block;padding:0 12px;font-style:normal;font-family:ui-monospace,monospace;font-size:12px;color:var(--pur)}.x-mcp h4{margin:6px 12px 8px;font-size:18px;font-weight:700}.x-mcp p{margin:0 12px;font-size:13px;line-height:1.7;color:var(--mut)}.x-mcp .mcp-url{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:8px 8px 8px 14px;box-shadow:0 10px 30px -14px rgba(76,29,149,.4)}.x-mcp .mcp-url i{width:8px;height:8px;border-radius:50%;background:#22C55E}.x-mcp .mcp-url code{font-size:13px;color:#18181B}.x-mcp .mcp-copy{border:0;background:var(--pur);color:#fff;font-size:12px;padding:6px 12px;border-radius:8px;transition:transform .15s}.x-mcp .mcp-copy:active{transform:scale(.94)}.x-mcp .mcp-toast{position:absolute;left:50%;top:-36px;transform:translate(-50%,6px);display:flex;align-items:center;gap:5px;font-size:12px;color:#fff;background:#0B0B0F;padding:5px 10px;border-radius:999px;opacity:0;transition:all .3s;white-space:nowrap}.x-mcp .mcp-url.done .mcp-toast{opacity:1;transform:translate(-50%,0)}.x-mcp .mh{display:flex;align-items:center;gap:14px}.x-mcp .mh-col{display:grid;gap:8px}.x-mcp .mh-p{display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600;box-shadow:0 4px 10px -6px rgba(76,29,149,.35)}.x-mcp .tl-ic{width:16px;height:16px;border-radius:4px;display:grid;place-items:center}.x-mcp .tl-ic svg{width:11px;height:11px}.x-mcp .mh-orb{width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(167,139,250,.25),0 8px 24px -8px rgba(124,58,237,.7);animation:mcp-pulse 2.4s ease-in-out infinite}.x-mcp .mh-orb .lg-mark{width:30px;height:30px}.x-mcp .mcp-dlg{position:relative;width:78%;background:#fff;border-radius:14px;padding:14px;box-shadow:0 14px 34px -14px rgba(76,29,149,.45)}.x-mcp .md-h{display:flex;gap:10px;align-items:flex-start}.x-mcp .md-h span{display:flex;flex-direction:column;gap:2px}.x-mcp .md-h b{font-size:13px}.x-mcp .md-h small{font-size:11px;color:var(--mut)}.x-mcp .md-b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.x-mcp .md-b span{text-align:center;font-size:12px;padding:7px 0;border-radius:8px}.x-mcp .md-no{background:#F4F4F5}.x-mcp .md-ok{border:1.5px solid var(--pur);color:var(--pur);font-weight:600;transition:background .2s,color .2s}.x-mcp .md-ok i{font-style:normal;display:inline-flex;align-items:center;gap:4px}.x-mcp .md-ok .t2{display:none}.x-mcp .mcp-dlg.ok .md-ok{background:var(--pur);color:#fff}.x-mcp .mcp-dlg.ok .t1{display:none}.x-mcp .mcp-dlg.ok .t2{display:inline-flex}.x-mcp .md-cur{position:absolute;right:6%;bottom:-18px;transition:transform .9s cubic-bezier(.4,.1,.2,1)}.x-mcp .mcp-dlg.go .md-cur{transform:translate(-30px,-34px)}.x-mcp .mcp-works{margin-top:40px;text-align:center}.x-mcp .mcp-works small{font-size:13px;color:var(--mut)}.x-mcp .mcp-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:14px}.x-mcp .mcp-t{display:flex;align-items:center;gap:8px;min-width:120px;justify-content:center;height:40px;padding:0 16px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14px}.x-mcp .mcp-t .tl-ic{width:20px;height:20px}.x-mcp .mcp-t .tl-ic svg{width:13px;height:13px}.x-mcp .mcp-more{font-size:13px;color:#3F3F46;padding:0 8px}@keyframes mcp-pulse{50%{box-shadow:0 0 0 10px rgba(167,139,250,.15),0 8px 24px -8px rgba(124,58,237,.7)}}@media (max-width:820px){.x-mcp .mcp-grid{grid-template-columns:1fr}.x-mcp .mcp-t{min-width:0}}@media (prefers-reduced-motion:reduce){.x-mcp *{animation:none!important;transition:none!important}}.x-mcp{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-mcp{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const url = root.querySelector('.mcp-url'), btn = root.querySelector('.mcp-copy'), dlg = root.querySelector('.mcp-dlg');
const timers = [];
const copied = () => { url.classList.add('done'); btn.textContent = '已复制'; timers.push(setTimeout(() => { url.classList.remove('done'); btn.textContent = '复制'; }, 1600)); };
const onCopy = () => copied();
btn.addEventListener('click', onCopy);
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const loop = () => {
dlg.classList.remove('ok', 'go');
timers.push(setTimeout(() => dlg.classList.add('go'), 600));
timers.push(setTimeout(() => dlg.classList.add('ok'), 1600));
timers.push(setTimeout(copied, 2400));
…订阅 Builder 查看完整源码。查看价格