Library Browser Mock
介绍
浅灰圆角外框里的产品浏览窗口：顶栏带分段切换与搜索框，四列分类导航，下方「最新 / 最热」标签切换三张网站缩略卡片，卡片悬停轻微上浮。
拆自整页模板 版拾 设计参考库官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Library Browser Mock 加进你的项目并换成你的配色。
适用场景
图片对比、视频展示、画廊、轮播和媒体卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add library-browser-mock
mcp › 使用 8pt MCP 调用 get_component("library-browser-mock")
代码
Library Browser Mock 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-blb"><section class="bs-bm"><div class="bs-bm__frame"><div class="bs-bm__win"> <div class="bs-bm__top"><span class="bs-bm__logo"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span class="bs-bm__seg"><button type="button" class="bs-bm__k" data-k="app">App</button><button type="button" class="bs-bm__k is-on" data-k="web">网站</button></span> <span class="bs-bm__search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg>搜索网站…</span> <span class="bs-bm__icons"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 4h10v16l-5-3.5L7 20z"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M4 12h16M12 4c2.2 2.3 3.2 5 3.2 8s-1 5.7-3.2 8c-2.2-2.3-3.2-5-3.2-8s1-5.7 3.2-8z"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5L19 18H5z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg><b></b></span></div> <div class="bs-bm__cols"><div class="bs-bm__col"><small>分类</small><a href="#">科技</a><a href="#">购物</a><a href="#">作品集</a><a href="#">商业</a><a href="#">生活方式</a></div><div class="bs-bm__col"><small>区块</small><a href="#">首屏</a><a href="#">定价</a><a href="#">展示</a><a href="#">博客</a><a href="#">404</a></div><div class="bs-bm__col"><small> </small><a href="#">关于</a><a href="#">流程说明</a><a href="#">信任背书</a><a href="#">页脚</a><a href="#">数据</a></div><div class="bs-bm__col"><small>风格</small><a href="#">极简</a><a href="#">动效</a><a href="#">摄影</a><a href="#">插画</a><a href="#">深色</a></div></div> <div class="bs-bm__bar"><span class="bs-bm__tabs"><button type="button" class="is-on" data-t="new">最新</button><button type="button" data-t="hot">最热</button></span><span class="bs-bm__filter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg>筛选</span></div> <div class="bs-bm__grid" data-grid><a class="bs-bm__card" href="#"><span class="bs-bm__shot"><div class="bs-site bs-site--wave" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><svg viewBox="0 0 160 100" preserveAspectRatio="none"><path d="M10 80C40 20 70 90 100 30S150 10 160 40" fill="none" stroke="#8b5cf6" stroke-width="6" opacity=".7"/><path d="M0 60C30 40 60 100 95 50S140 20 160 70" fill="none" stroke="#c4b5fd" stroke-width="2" opacity=".6"/></svg><div class="bs-site__t">我们只做界面</div></div></span><span class="bs-bm__meta"><span class="bs-ic " style="width:26px;height:26px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><span><b>栖光工作室</b><small>把产品打磨成界面</small></span></span></a><a class="bs-bm__card" href="#"><span class="bs-bm__shot"><div class="bs-site bs-site--float" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:8%;top:20%;background:#fbbf24;transform:rotate(-8deg)"></b><b style="left:80%;top:14%;background:#60a5fa;transform:rotate(6deg)"></b><b style="left:16%;top:66%;background:#f472b6;transform:rotate(5deg)"></b><b style="left:74%;top:62%;background:#34d399;transform:rotate(-6deg)"></b><b style="left:44%;top:12%;background:#a78bfa;transform:rotate(3deg)"></b><b style="left:88%;top:40%;background:#fb923c;transform:rotate(-4deg)"></b><b style="left:4%;top:44%;background:#22d3ee;transform:rotate(8deg)"></b><b style="left:56%;top:74%;background:#f87171;transform:rotate(-3deg)"></b><div class="bs-site__t">每场好活动<br><em>从这里开场</em></div></div></span><span class="bs-bm__meta"><span class="bs-ic " style="width:26px;height:26px;background:linear-gradient(145deg,#18181b,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></span><span><b>聚场</b><small>好活动从这里开场</small></span></span></a><a class="bs-bm__card" href="#"><span class="bs-bm__shot"><div class="bs-site bs-site--gal" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:6%;top:16%;background:#d6d3d1"></b><b style="left:20%;top:58%;background:#78716c"></b><b style="left:30%;top:12%;background:#a8a29e"></b><b style="left:68%;top:18%;background:#e7e5e4"></b><b style="left:82%;top:54%;background:#57534e"></b><b style="left:12%;top:74%;background:#c2410c"></b><b style="left:74%;top:76%;background:#1d4ed8"></b><b style="left:88%;top:22%;background:#b91c1c"></b><b style="left:40%;top:70%;background:#e5e5e5"></b><b style="left:56%;top:8%;background:#44403c"></b><div class="bs-site__t">灵感的落脚处</div><span class="bs-site__pill"></span></div></span><span class="bs-bm__meta"><span class="bs-ic " style="width:26px;height:26px;background:linear-gradient(145deg,#2dd4bf,#0f766e)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="3.5"/></svg></span><span><b>拾景</b><small>创作者的灵感索引</small></span></span></a></div> </div></div></section></div>
.x-blb{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}.x-blb *{box-sizing:border-box;margin:0;padding:0}.x-blb{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-blb a{color:inherit;text-decoration:none}.x-blb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-blb .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-blb .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-blb .bs-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}.x-blb .bs-btn:active{transform:translateY(1px) scale(.98)}.x-blb .bs-btn--dark{background:var(--ink);color:#fff}.x-blb .bs-btn--dark:hover{background:#2a2a2e}.x-blb .bs-btn--gray{background:#ececee;color:var(--ink)}.x-blb .bs-btn--gray:hover{background:#e2e2e5}.x-blb .bs-btn svg{width:16px;height:16px}.x-blb .bs-ic{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:24%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.35);overflow:hidden}.x-blb .bs-ic svg{width:56%;height:56%}.x-blb .bs-ph{position:relative;width:100%;aspect-ratio:9/19.5;background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 18px 40px -24px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;padding:10px 12px;gap:8px;font-size:9px;color:#111}.x-blb .bs-ph__sb{display:flex;justify-content:space-between;font-weight:600;font-size:8px}.x-blb .bs-ph__sb i{display:inline-block;width:18px;height:6px;border-radius:2px;background:#111;margin-left:3px}.x-blb .bs-ph__bar{height:6px;border-radius:3px;background:#ececef}.x-blb .bs-ph__bar.s{width:45%}.x-blb .bs-ph__bar.m{width:70%}.x-blb .bs-ph__bar.d{background:#1a1a1e}.x-blb .bs-ph__hero{flex:1;border-radius:14px;display:grid;place-items:center}.x-blb .bs-ph__btn{height:22px;border-radius:999px;background:#111;margin-top:auto}.x-blb .bs-ph__row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f0f0f2}.x-blb .bs-ph__row b{width:20px;height:20px;border-radius:6px;flex:none}.x-blb .bs-ph__row span{flex:1;display:flex;flex-direction:column;gap:4px}.x-blb .bs-ph__plan{border:1.5px solid #ececef;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px}.x-blb .bs-ph__plan.on{border-color:#111}.x-blb .bs-ph__bub{max-width:78%;padding:6px 8px;border-radius:10px;background:#f1f1f3;font-size:8.5px;line-height:1.4}.x-blb .bs-ph__bub.me{align-self:flex-end;background:#2563eb;color:#fff}.x-blb .bs-ph__bars{flex:1;display:flex;align-items:flex-end;gap:5px;padding:8px 0}.x-blb .bs-ph__bars i{flex:1;border-radius:4px 4px 0 0;background:#111}.x-blb .bs-site{position:relative;width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}.x-blb .bs-site__nav{position:absolute;left:5%;right:5%;top:5%;display:flex;justify-content:space-between}.x-blb .bs-site__nav i{display:block;height:3px;width:14%;border-radius:2px;background:currentColor;opacity:.5}.x-blb .bs-site__t{position:absolute;left:0;right:0;text-align:center;font-weight:700;letter-spacing:-.02em;line-height:1.15}.x-blb .bs-site--wave{background:radial-gradient(120% 90% at 70% 30%,#3b1d8f,#0b0618 70%);color:#fff}.x-blb .bs-site--wave svg{position:absolute;inset:0;width:100%;height:100%}.x-blb .bs-site--wave .bs-site__t{bottom:16%;font-family:Georgia,"Noto Serif CJK SC",serif;font-weight:400;font-size:clamp(11px,1.5vw,17px)}.x-blb .bs-site--float{background:#fff;color:#111}.x-blb .bs-site--float .bs-site__t{top:38%;font-size:clamp(11px,1.5vw,17px)}.x-blb .bs-site--float .bs-site__t em{font-style:normal;color:#ec4899}.x-blb .bs-site--float b{position:absolute;width:11%;aspect-ratio:1;border-radius:4px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}.x-blb .bs-site--gal{background:#0e0e10;color:#fff}.x-blb .bs-site--gal b{position:absolute;width:9%;aspect-ratio:3/4;border-radius:2px}.x-blb .bs-site--gal .bs-site__t{top:40%;font-size:clamp(11px,1.5vw,17px)}.x-blb .bs-site--gal .bs-site__pill{position:absolute;left:50%;top:62%;width:16%;height:7%;margin-left:-8%;border-radius:99px;background:#fff}.x-blb .bs-bm{padding:0 24px}.x-blb .bs-bm__frame{max-width:1120px;margin:0 auto;background:var(--soft);border-radius:32px;padding:28px 28px 0}.x-blb .bs-bm__win{background:#fff;border-radius:16px 16px 0 0;padding:16px 22px 26px;box-shadow:0 0 0 1px rgba(0,0,0,.04)}.x-blb .bs-bm__top{display:flex;align-items:center;gap:18px;font-size:12px}.x-blb .bs-bm__logo svg{width:26px;height:15px;display:block}.x-blb .bs-bm__seg{display:flex;gap:12px}.x-blb .bs-bm__seg button{font-size:12px;color:#8a8a90}.x-blb .bs-bm__seg button.is-on{color:#111;font-weight:600}.x-blb .bs-bm__search{flex:0 1 300px;margin:0 auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:#f1f1f3;color:#9a9aa0;font-size:12px}.x-blb .bs-bm__search svg{width:14px;height:14px;color:#555}.x-blb .bs-bm__icons{display:flex;align-items:center;gap:12px}.x-blb .bs-bm__icons svg{width:16px;height:16px;display:block}.x-blb .bs-bm__icons b{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#fcd34d,#f97316);display:block}.x-blb .bs-bm__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0 32px}.x-blb .bs-bm__col{display:flex;flex-direction:column;gap:3px}.x-blb .bs-bm__col small{font-size:11px;color:#8a8a90;margin-bottom:6px}.x-blb .bs-bm__col a{font-size:15px;font-weight:500;width:max-content;transition:opacity .2s}.x-blb .bs-bm__col a:hover{opacity:.55}.x-blb .bs-bm__bar{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:14px}.x-blb .bs-bm__tabs{display:flex;gap:16px}.x-blb .bs-bm__tabs button{font-size:12px;color:#8a8a90;padding-bottom:4px;border-bottom:1.5px solid transparent}.x-blb .bs-bm__tabs button.is-on{color:#111;border-color:#111}.x-blb .bs-bm__filter{display:flex;align-items:center;gap:6px;font-weight:500}.x-blb .bs-bm__filter svg{width:14px;height:14px}.x-blb .bs-bm__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transition:opacity .25s}.x-blb .bs-bm__grid.is-swap{opacity:0}.x-blb .bs-bm__card{display:flex;flex-direction:column;gap:10px}.x-blb .bs-bm__shot{display:grid;place-items:center;background:var(--soft);border-radius:16px;padding:12% 9%;transition:transform .35s var(--ease)}.x-blb .bs-bm__card:hover .bs-bm__shot{transform:translateY(-3px)}.x-blb .bs-bm__meta{display:flex;align-items:center;gap:8px}.x-blb .bs-bm__meta>span{display:flex;flex-direction:column;min-width:0}.x-blb .bs-bm__meta b{font-size:12px;font-weight:600}.x-blb .bs-bm__meta small{font-size:11px;color:#8a8a90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:900px){.x-blb .bs-bm__cols{grid-template-columns:repeat(2,1fr)}.x-blb .bs-bm__col:nth-child(3){display:none}}@media (max-width:720px){.x-blb .bs-bm{padding:0 12px}.x-blb .bs-bm__frame{padding:12px 12px 0;border-radius:22px}.x-blb .bs-bm__win{padding:12px 14px 18px}.x-blb .bs-bm__search{display:none}.x-blb .bs-bm__icons{margin-left:auto}.x-blb .bs-bm__grid{grid-template-columns:1fr}.x-blb .bs-bm__card:nth-child(n+2){display:none}.x-blb .bs-bm__col a{font-size:14px}}@media (prefers-reduced-motion:reduce){.x-blb .bs-bm__grid,.x-blb .bs-bm__shot{transition:none}}.x-blb .bs-bm{padding:40px 24px}(root) => {
const el = (root.classList && root.classList.contains('x-blb')) ? root : (root.querySelector('.x-blb') || root);
const grid = el.querySelector('[data-grid]');
const sets = { new: grid.innerHTML, hot: null };
const cards = [...grid.children];
sets.hot = [cards[2], cards[0], cards[1]].map((c) => c.outerHTML).join('');
const tabs = [...el.querySelectorAll('[data-t]')], segs = [...el.querySelectorAll('[data-k]')];
let tm = 0;
const offs = [];
tabs.forEach((b) => { const on = () => {
…订阅 Builder 查看完整源码。查看价格