NAVIGATION
命令面板Command Palette
按 ⌘K 弹出一个居中搜索框，输入关键词就能跳转页面或执行命令。键盘优先的效率神器。
效果预览
🔍
搜索或输入命令…
⌘K
建议操作
◈新建项目⌘N
◉邀请成员⌘I
⬒切换主题⌘T
最近打开
▤设计规范 v2.0
适合用在哪
开发者工具、效率型 SaaS、文档站；用户会用键盘的场景。
容易踩的坑
- 只支持 ⌘K 而忽略 Windows 的 Ctrl+K，且界面上没有可点击入口，鼠标用户永远发现不了。
- 选中项切换未用 aria-activedescendant 播报，读屏用户按 ↑↓ 听不到任何反馈。
- 无结果时只显示空白，应给出「没有找到」提示和可执行的兜底命令。
设计提示词 · Prompt
命令面板（Command Palette）：⌘K 触发，居中弹出宽 560-640px 的面板，距顶 15-20vh。顶部 56px 搜索行（放大镜图标 + 无边框输入 + 右侧 ⌘K 提示徽章），下方是可滚动的分组结果列表——分组标签 11px 大写灰色，条目含 32px 图标方块 + 名称 + 右侧快捷键提示。当前选中项用品牌色实心背景反白显示（含其图标与快捷键）。用 ↑↓ 移动、Enter 执行、Esc 关闭。整体：白底 97% 不透明 + 背景模糊 20px、16px 圆角、1px 描边、大范围投影，弹出时 scale .97→1 并淡入。
Command Palette: triggered by ⌘K, a 560-640px wide panel pops up centered, 15-20vh from the top. A 56px search row at the top (magnifier icon + borderless input + ⌘K hint badge on the right), and below it a scrollable grouped results list — group labels in 11px uppercase gray, items with a 32px icon square + name + shortcut hint on the right. The currently selected item is shown reversed on a solid brand-color background (including its icon and shortcut). ↑↓ to move, Enter to execute, Esc to close. Overall: white at 97% opacity + 20px background blur, 16px radius, 1px stroke, large shadow; on open it scales .97→1 while fading in.
常见搭配
同一页面里经常和「命令面板」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-cmdk">
<div class="d-cmdk__input">
<span style="color:var(--i-tx3);font-size:11px">🔍</span>
<span style="color:var(--i-tx3)">搜索或输入命令…</span>
<span class="d-tiny">⌘K</span>
</div>
<div class="d-cmdk__list">
<span class="d-cmdk__cap">建议操作</span>
<div class="d-cmdk__item is-on"><span class="d-ico">◈</span>新建项目<span class="d-cmdk__kbd">⌘N</span></div>
<div class="d-cmdk__item"><span class="d-ico">◉</span>邀请成员<span class="d-cmdk__kbd">⌘I</span></div>
<div class="d-cmdk__item"><span class="d-ico">⬒</span>切换主题<span class="d-cmdk__kbd">⌘T</span></div>
<span class="d-cmdk__cap">最近打开</span>
<div class="d-cmdk__item"><span class="d-ico">▤</span>设计规范 v2.0</div>
</div>
</div>