Shortcut Keycaps
介绍
把快捷键做成立体键帽卡片。空闲时逐张演示按下；指针移进来后，在真键盘上按 ⌘、⌥、⇧ 或字母，对应的键帽会同步按下，整组按全时卡片点亮。
拆自整页模板 Nook Mac 应用官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Shortcut Keycaps 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add shortcut-keycaps
mcp › 使用 8pt MCP 调用 get_component("shortcut-keycaps")
代码
Shortcut Keycaps 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-kcap">
<div class="x-kcap__in" style="width:660px;height:252px">
<div class="x-kcap__k"><p><kbd>⌘</kbd><kbd>D</kbd></p><span>分成两栏</span></div>
<div class="x-kcap__k"><p><kbd>⌘</kbd><kbd>L</kbd></p><span>输入路径，Tab 补全</span></div>
<div class="x-kcap__k"><p><kbd>⌥</kbd><kbd>⌘</kbd><kbd>T</kbd></p><span>整理当前文件夹</span></div>
<div class="x-kcap__k"><p><kbd>⌘</kbd><kbd>Z</kbd></p><span>撤销上一步文件操作</span></div>
<div class="x-kcap__k"><p><kbd>Space</kbd></p><span>速览文件</span></div>
<div class="x-kcap__k"><p><kbd>⌥</kbd><kbd>⇧</kbd><kbd>⌘</kbd><kbd>T</kbd></p><span>在终端中打开</span></div>
<div class="x-kcap__k"><p><kbd>⌘</kbd><kbd>K</kbd></p><span>跳到任意文件夹</span></div>
<div class="x-kcap__k"><p><kbd>⌃</kbd><kbd>1</kbd></p><span>打开第一个工作区</span></div>
</div>
</div>.x-kcap{position:relative;flex:none}
.x-kcap__in{position:absolute;left:0;top:0;transform-origin:0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;color:var(--d-fg,#fff);font-family:var(--d-font,system-ui,sans-serif)}
.x-kcap__k{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:16px 14px;border-radius:16px;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.1));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),0 10px 26px rgba(0,0,0,.08);transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.x-kcap__k:hover{transform:translateY(-2px)}
.x-kcap__k.hit{border-color:var(--d-accent,#4D74FF);box-shadow:0 0 0 1px var(--d-accent,#4D74FF),0 12px 30px color-mix(in srgb,var(--d-accent,#4D74FF) 28%,transparent)}
.x-kcap__k p{display:flex;flex-wrap:nowrap;gap:4px;margin:0}
.x-kcap__k span{font-size:13px;line-height:1.35;color:var(--d-muted,#9b9ba8)}
.x-kcap kbd{display:inline-grid;place-items:center;min-width:28px;height:30px;padding:0 7px;box-sizing:border-box;border-radius:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--d-fg,#fff) 4%,var(--d-bg,#09090d)),var(--d-bg,#09090d));box-shadow:0 0 0 1px var(--d-line,rgba(255,255,255,.14)),0 2px 0 color-mix(in srgb,var(--d-fg,#fff) 22%,transparent);font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--d-fg,#fff);transition:transform .12s,box-shadow .12s,background .12s,color .12s}
.x-kcap kbd.down{transform:translateY(2px);background:var(--d-accent,#4D74FF);color:#fff;box-shadow:0 0 0 1px var(--d-accent,#4D74FF),0 0 0 transparent}
@media (prefers-reduced-motion:reduce){.x-kcap__k,.x-kcap kbd{transition:none}}const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…订阅 Builder 查看完整源码。查看价格