Clip Library Window
介绍
深色毛玻璃应用窗口形式的剪贴板资料库：顶部搜索框与工具按钮，分类标签可筛选文字、颜色、素材等卡片，输入关键字实时过滤，点击任一卡片弹出「已复制」提示，卡片依次浮入。
拆自整页模板 随贴 Mac 剪贴板历史官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Clip Library Window 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add clip-library-window
mcp › 使用 8pt MCP 调用 get_component("clip-library-window")
代码
Clip Library Window 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-clw"><div class="x-clw__top"><span class="x-clw__dots"><i></i><i></i><i></i></span><label class="x-clw__search"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></svg><input type="text" placeholder="搜索剪贴板…" aria-label="搜索剪贴板"></label><span class="x-clw__tools"><button type="button" aria-label="文字识别"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V6a2 2 0 0 1 2-2h2"/><path d="M16 4h2a2 2 0 0 1 2 2v2"/><path d="M20 16v2a2 2 0 0 1-2 2h-2"/><path d="M8 20H6a2 2 0 0 1-2-2v-2"/><path d="M8 9.5h8"/><path d="M8 12.5h8"/><path d="M8 15.5h5"/></svg></button><button type="button" aria-label="提醒"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 1.5H5l1.5-1.5z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg></button></span></div><div class="x-clw__tabs" role="tablist"><button type="button" role="tab" class="x-clw__tab" aria-selected="true" data-tab="全部">全部</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="提示词">提示词</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="颜色">颜色</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="素材">素材</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="灵感">灵感</button><button type="button" class="x-clw__add" aria-label="新建分类"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></button></div><div class="x-clw__grid"><button type="button" class="x-clw__card x-clw__card--text" data-cat="提示词"><p class="x-clw__txt">把这段需求改写成三条简洁的产品卖点，语气轻松一点</p><span class="x-clw__meta"><i class="x-clw__app x-clw__app--text"></i>备忘录<em>刚刚</em></span></button><button type="button" class="x-clw__card x-clw__card--image" data-cat="素材"><img class="x-clw__img" src="https://8pt.dev/api/media/8e6f25d539248382e1d6566f.webp" alt="雕塑参考图" draggable="false"><span class="x-clw__meta"><i class="x-clw__app x-clw__app--image"></i>浏览器<em>刚才</em></span></button><button type="button" class="x-clw__card x-clw__card--color" data-cat="颜色"><span class="x-clw__sw" style="--c:#3D7BFF"><b>#3D7BFF</b></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--color"></i>取色器<em>稍早</em></span></button><button type="button" class="x-clw__card x-clw__card--link" data-cat="灵感"><span class="x-clw__lnk"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/></svg><b>极简排版的作品集网站</b><i>example.com</i></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--link"></i>浏览器<em>今天上午</em></span></button><button type="button" class="x-clw__card x-clw__card--image" data-cat="素材"><img class="x-clw__img" src="https://8pt.dev/api/media/be43d5925404789ab004491c.webp" alt="耳机主图" draggable="false"><span class="x-clw__meta"><i class="x-clw__app x-clw__app--image"></i>设计工具<em>今天上午</em></span></button><button type="button" class="x-clw__card x-clw__card--text" data-cat="提示词"><p class="x-clw__txt">给这张海报写一句不超过十个字的标题</p><span class="x-clw__meta"><i class="x-clw__app x-clw__app--text"></i>聊天<em>今天</em></span></button><button type="button" class="x-clw__card x-clw__card--color" data-cat="颜色"><span class="x-clw__sw" style="--c:#FF7A45"><b>#FF7A45</b></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--color"></i>设计工具<em>今天</em></span></button><button type="button" class="x-clw__card x-clw__card--image" data-cat="灵感"><img class="x-clw__img" src="https://8pt.dev/api/media/d831459c499979c8a5e4d570.webp" alt="绿植桌面" draggable="false"><span class="x-clw__meta"><i class="x-clw__app x-clw__app--image"></i>相册<em>昨天</em></span></button><button type="button" class="x-clw__card x-clw__card--code" data-cat="提示词"><code class="x-clw__code">git commit -m "修复分类排序"</code><span class="x-clw__meta"><i class="x-clw__app x-clw__app--code"></i>终端<em>昨天</em></span></button><button type="button" class="x-clw__card x-clw__card--link" data-cat="灵感"><span class="x-clw__lnk"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/></svg><b>暖色调界面配色合集</b><i>example.com</i></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--link"></i>浏览器<em>昨天</em></span></button></div><div class="x-clw__toast" role="status"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>已复制，随处可贴</div></div>
.x-clw{box-sizing:border-box;position:relative;width:100%;max-width:1080px;margin:0 auto;padding:14px 16px 18px;border-radius:22px;background:rgba(22,22,26,.94);color:#f3f3f5;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -30px rgba(10,20,60,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.x-clw *,.x-clw *::before,.x-clw *::after{box-sizing:border-box}.x-clw svg{width:1em;height:1em;flex:none}.x-clw__top{display:flex;align-items:center;gap:14px}.x-clw__dots{display:flex;gap:7px}.x-clw__dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.x-clw__dots i:nth-child(2){background:#febc2e}.x-clw__dots i:nth-child(3){background:#28c840}.x-clw__search{flex:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.07);color:#9a9aa3;font-size:15px}.x-clw__search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:#fff;font:inherit;font-size:13px}.x-clw__search input::placeholder{color:#8a8a93}.x-clw__tools{display:flex;gap:6px}.x-clw__tools button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#d6d6dc;font-size:16px;cursor:pointer}.x-clw__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 14px}.x-clw__tab{height:32px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.07);color:#cfcfd6;font:inherit;font-size:13px;cursor:pointer;transition:background .2s,color .2s}.x-clw__tab:hover{background:rgba(255,255,255,.12)}.x-clw__tab[aria-selected="true"]{background:#fff;color:#0b0b0f;font-weight:600}.x-clw__add{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#cfcfd6;font-size:15px;cursor:pointer}.x-clw__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.x-clw__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;height:168px;padding:10px;border:0;border-radius:16px;background:#2a2a30;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,box-shadow .2s;animation:x-clw-in .6s cubic-bezier(.2,.8,.2,1) both}.x-clw__card:nth-child(2){animation-delay:.05s}.x-clw__card:nth-child(3){animation-delay:.1s}.x-clw__card:nth-child(4){animation-delay:.15s}.x-clw__card:nth-child(5){animation-delay:.2s}.x-clw__card:nth-child(6){animation-delay:.25s}.x-clw__card:nth-child(7){animation-delay:.3s}.x-clw__card:nth-child(8){animation-delay:.35s}.x-clw__card:nth-child(9){animation-delay:.4s}.x-clw__card:nth-child(10){animation-delay:.45s}@keyframes x-clw-in{from{opacity:0;transform:translateY(12px) scale(.97)}}.x-clw__card:hover{transform:translateY(-3px);box-shadow:0 0 0 2px rgba(61,123,255,.8)}.x-clw__card.is-hide{display:none}.x-clw__card.is-copied{box-shadow:0 0 0 2px #28c840}.x-clw__txt{margin:0;font-size:13px;line-height:1.55;color:#e9e9ee;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.x-clw__img{flex:1;min-height:0;width:100%;object-fit:cover;border-radius:10px}.x-clw__sw{flex:1;display:flex;align-items:flex-end;padding:10px;border-radius:10px;background:var(--c)}.x-clw__sw b{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.x-clw__lnk{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:linear-gradient(160deg,#3b3b44,#2f2f36)}.x-clw__lnk svg{font-size:18px;color:#8fb6ff}.x-clw__lnk b{font-size:13px;font-weight:600;line-height:1.4}.x-clw__lnk i{font-style:normal;font-size:11px;color:#8a8a93}.x-clw__code{flex:1;padding:10px;border-radius:10px;background:#141418;color:#9fe6a8;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}.x-clw__meta{display:flex;align-items:center;gap:6px;font-size:11px;color:#a1a1aa}.x-clw__meta em{margin-left:auto;font-style:normal;color:#77777f}.x-clw__app{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#ffd36b,#ff9f43)}.x-clw__app--image{background:linear-gradient(135deg,#7bd3ff,#3d7bff)}.x-clw__app--color{background:conic-gradient(#ff6b6b,#ffd36b,#6bff95,#6bc7ff,#b36bff,#ff6b6b)}.x-clw__app--link{background:linear-gradient(135deg,#6be3ff,#2fa7ff)}.x-clw__app--code{background:#0d0d10;box-shadow:inset 0 0 0 1px #3a3a40}.x-clw__toast{position:absolute;left:50%;bottom:16px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:#fff;color:#0b0b0f;font-size:13px;font-weight:600;box-shadow:0 14px 40px -10px rgba(0,0,0,.5);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}.x-clw__toast svg{color:#28c840}.x-clw__toast.is-show{opacity:1;transform:translate(-50%,0)}@media (max-width:900px){.x-clw__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.x-clw__card:nth-child(n+7){display:none}}@media (max-width:560px){.x-clw__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-clw__card{height:150px}.x-clw__card:nth-child(n+5){display:none}.x-clw__tools{display:none}}@media (prefers-reduced-motion:reduce){.x-clw__card{animation:none;transition:none}.x-clw__toast{transition:none}}(root) => {
const tabs = [...root.querySelectorAll('.x-clw__tab')];
const cards = [...root.querySelectorAll('.x-clw__card')];
const toast = root.querySelector('.x-clw__toast');
const input = root.querySelector('.x-clw__search input');
let cur = '全部', t = 0;
const apply = () => {
const q = input.value.trim().toLowerCase();
cards.forEach(c => {
const okTab = cur === '全部' || c.dataset.cat === cur;
const okQ = !q || c.textContent.toLowerCase().includes(q);
c.classList.toggle('is-hide', !(okTab && okQ));
…订阅 Builder 查看完整源码。查看价格