INTERACTION
快捷键提示Keyboard Hints
<kbd> 键帽样式的快捷键提示：描边 + 底部厚边，一眼"可按"。
效果预览
打开命令面板⌘K
快速新建⌘N
保存并关闭⌘S
全局搜索/
适合用在哪
命令面板、工具栏 tooltip、文档站、效率产品全站。
容易踩的坑
- 不区分平台统一显示 ⌘，Windows 用户照着按却毫无反应。
- 快捷键覆盖浏览器或读屏器的默认按键（如 Ctrl+F），破坏辅助技术。
- kbd 徽章字号小于 11px 又是浅灰底，键位符号几乎无法辨认。
设计提示词 · Prompt
快捷键提示（Keyboard Hints / <kbd>）：kbd 元素样式——等宽字体、1px 描边、border-bottom 2-3px（键帽的立体感）、圆角 4-6px、浅底深字、内边距 2-6px。组合键并列（⌘ + K，中间用 + 或紧排）。快捷键清单表格：左操作说明右键位。全站规范：macOS 显示 ⌘、Windows 显示 Ctrl（按 UA 切换）；hover 任何带快捷键的按钮时 tooltip 显示键位。进阶：用户按下对应键时，页面上对应的 kbd 徽章闪一下高亮。
Keyboard Hints (<kbd>): kbd element styling — monospace font, 1px border, border-bottom 2-3px (the 3D keycap feel), 4-6px corner radius, light background with dark text, 2-6px padding. Combo keys sit side by side (⌘ + K, joined by + or set tightly). Shortcut reference table: action description on the left, keys on the right. Site-wide convention: show ⌘ on macOS and Ctrl on Windows (switch by UA); hovering any button that has a shortcut shows the keys in a tooltip. Advanced: when the user presses the corresponding key, the matching kbd badge on the page flashes a highlight.
常见搭配
同一页面里经常和「快捷键提示」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-kbdhints"> <div class="d-kbdrow"><span>打开命令面板</span><span class="keys"><kbd>⌘</kbd><kbd>K</kbd></span></div> <div class="d-kbdrow"><span>快速新建</span><span class="keys"><kbd>⌘</kbd><kbd>N</kbd></span></div> <div class="d-kbdrow"><span>保存并关闭</span><span class="keys"><kbd>⌘</kbd><kbd>S</kbd></span></div> <div class="d-kbdrow"><span>全局搜索</span><span class="keys"><kbd>/</kbd></span></div> </div>