桌面设计

ultrahand: desktop

将桌面应用和 Web 应用屏幕设计为可交互的 Claude 工件（artifact）。该工件是一个可拖拽窗口，尺寸可在您选择的最小值和最大值之间任意调整，并支持常见笔记本电脑、显示器和分屏半窗的预设尺寸，布局会随着拖拽实时重排。您应用的每一条规则都在 references/principles.md 中，每条规则都引用了 references/sources.md。尺寸、限制和尺寸类别在 references/presets.md 中。

1. 收集需求

只询问您无法推断出的信息。在绘制之前确定以下事项：

• 平台： macOS、Windows、某一 Web 应用，或多个平台。原生 macOS 应用应有菜单栏；Windows 和 Web 应用应有命令栏或工具栏（可折叠）。
• 范围： 单个屏幕或一个流程。对于流程，列出所有屏幕以及用户在各屏幕之间移动的方式：侧边栏、标签页、列表到详情、侧面板、对话框或新窗口。
• 主要任务： 每个屏幕的核心用途，以及适合该任务的最佳布局（列表-详情、辅助窗格、信息流或单文档窗格）。
• 真实内容： 名称、长度、计数、列集以及可能最长的字符串。不要使用 lorem ipsum 进行设计。
• 数据状态： 每个窗格中会加载什么、什么可以为空、什么可能失败或离线。
• 窗口限制： 最小窗口尺寸、最大窗口尺寸以及最大内容宽度。对于原生应用，默认为 640 × 480；对于 Web 应用，默认为 320 × 256（参见 presets.md）。
• 输入方式： 始终支持指针和键盘；如果应用可能运行在二合一设备或触控笔记本上，则支持触摸。哪些命令足够频繁，值得分配快捷键？
• 窗口数量： 单个窗口还是多个窗口（文档、检查器、分离面板）？
• 约束： 品牌色、字体、现有的设计系统或组件库。
• 主题： 在选择任何颜色、尺寸或间距之前，先查找项目的主题（design/THEME.md、*.tokens.json；参见 shared/theme/README.md）。如果有主题，请使用它进行设计：运行 node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html，构建时传递 --head theme.html，仅使用其自定义属性（var(--color-surface)、var(--space-gap-group)），并复用其清单中的组件。当设计需要主题中缺少的内容时，使用最近的令牌，并将补充内容列在开放问题下；不要发明一个值。如果没有主题，请遵循 shared/theme/rules.md 中的硬性规则，并提供 theme 技能。

2. 阅读参考资料

在设计之前，请阅读 references/principles.md 和 references/presets.md。使用平台自身的模式（菜单栏、工具栏、侧边栏、分屏视图、上下文菜单、面板、NavigationView），而不是发明新的模式。

3. 构图屏幕

每个组件通过各自的检查后，组合在一起仍可能显得杂乱。在构建之前，请规划它们如何形成区块以及区块如何构成屏幕，使用插件的组合规则（在 shared/composition/principles.md 中）：

• 编写区块映射。 对于每个屏幕，列出其区块（一个最多三组的工具栏、一个侧边栏、一个内容窗格和一个检查器），每个区块的唯一职责、其成员按使用频率排序、以及其一个重点。说明什么是主要内容，什么是“镀铬”（界面框架）。内容占主导地位，“镀铬”退居其次。
• 使用间距分组。 组内间隙明显小于组间间隙；只有当间距无法区分组别时才添加容器。
• 同一角色同一外观，每区块一个重点。 同一角色，同一样式；状态和标签绝不像按钮；每区块只在一个元素上使用强烈强调色，选中状态使用更柔和的样式。
• 保持精简。 大约使用三种字号，每个信息只出现一次，高频成员可见，低频成员放在菜单中。当有改动需要添加内容时，先重新组织，只添加那些值得占据位置的内容。

4. 构建画布工件

基于插件的共享可调整大小画布（shared/canvas/；其 README.md 包含完整契约）。将屏幕编写为 screen.html，将设计自身的设置编写为 config.json，然后构建：

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/desktop/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<设计名称>" --out index.html

将 index.html 发布为一个工件。

• config.json 设置 title、states（例如 default、loading、empty、error）以及设计的 limits：{ minWidth, minHeight, maxWidth, maxHeight }。画布允许您在它们之间任意拖动尺寸。对于 Web 应用，还需设置 "initialPreset": "browser"。
• 预设尺寸（来自 presets.md）：笔记本电脑（1366 × 768、1536 × 864、MacBook 1440 × 900）、显示器（1920 × 1080、2560 × 1440）、分屏半窗（960 × 1080、720 × 900）以及浏览器窗口（1280 × 720）。检查点：最小窗口、短窗口 1366 × 600 以及 320 × 256 下 400% 缩放。
• 屏幕契约： 一个 <template id="uh-screen">，包含带 [data-screen] 的区块，以及用于点击的 data-nav、data-nav-back 和 data-show-state。使用 @container screen (width >= …) 响应尺寸变化，而不是 @media。文本使用 rem；点击区域、图标和边距使用 px，这样 200% 文本只会放大文字，不会缩放控件。颜色使用 light-dark()。行为放在 window.ultrahandSetup = function (canvas) { … } 中。
• 内置开关： 浅色/深色、200% 文本、状态选择器和点击目标（桌面端最小 24 px）。在打开菜单或弹出框后调用 canvas.refresh()，以便目标覆盖层能识别到它。
• 使其像桌面应用一样工作： 悬停状态、右键上下文菜单（以及 Shift+F10）、可见的焦点指示、正常的 Tab 和箭头键导航、菜单和工具提示中的快捷键提示、可隐藏和显示的窗格、可拖拽的分割条。绝不要使用 alert、confirm 或 prompt；在屏幕内绘制对话框。

5. 设计每个尺寸类别

从宽到窄进行工作，并在问题出现的尺寸处解决它：

1. 大/超大（laptop-125、desktop-fhd）：选择窗格、导航、工具栏组和密度。限制内容宽度；额外的宽度分配给窗格，而不是更长的行。
2. 扩展（snap-half，约 960）：折叠检查器或辅助窗格，将侧边栏变为窄导轨，并根据计划顺序开始将工具栏项移入溢出菜单。
3. 中等到你的最小值（mac-half，最小窗口检查）：一到两个窗格、一个菜单按钮或窄导轨用于导航，所有命令仍可通过菜单访问。
4. 缓慢拖动从最大值到最小值再回来。所选内容、滚动位置、输入文本和打开的面板必须在每个断点处保持不变。

然后运行检查：短窗口（粘性栏固定，焦点不被遮挡）以及对于 Web 应用，320 × 256 下 400% 缩放（单列，仅垂直滚动）。

6. 呈现前自我检查

逐项检查。修复任何失败项，或明确指出并说明为何可接受。

构图（运行构图审核，node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs"，在最大和最小尺寸下，或通过目视检查）：

• 虚化时，屏幕显示出预期的区块，主要内容首先吸引视线。没有意料之外的明亮区域。
• 每个区块有一个职责，其成员按功能和频率分组，组间间隙明显大于组内间隙。
• 每个区块最多有一个强烈强调的元素；选中状态比较柔和。
• 同一角色同一样式：统计每个区块中的控件样式种类，并解释任何多余样式。没有标签或状态看起来像按钮。
• 行和区块对齐到共享边缘；屏幕上大约使用三种字号。
• 没有信息重复显示，屏幕上没有不服务于当前任务的内容。
• 在一轮修改后：列出新增内容；屏幕没有变得比必要的更杂乱。
• 仅使用主题值：没有原始颜色、不使用 8 点网格之外的间距、不超出比例的字号，并复用库存组件而非重新构建（shared/theme/rules.md NN-1、NN-2、NN-6、EV-4）。

组件和平台：

• 设计声明了其最小和最大窗口尺寸以及最大内容宽度。在最小尺寸下没有重叠或裁剪，在最大尺寸下没有拉伸。
• 布局根据窗口宽度切换（Material 600 / 840 / 1200，或 Windows 641 / 1008），而不是根据设备。所有功能在所有尺寸下都可访问。
• 调整大小实时重排，并保持所选内容、滚动位置、输入和打开的面板。
• 窗格遵循规范布局，分割条可拖动，窗格可通过按钮、菜单和快捷键隐藏，任何窗格都不会无故为空。
• 正文每行最多 80 个字符。
• 每个命令都在菜单中（macOS 上的菜单栏）或工具栏溢出中；不可用的菜单项被禁用而非隐藏；需要输入的命令以“…”结尾。
• 随着窗口变窄，工具栏项按计划顺序移入溢出，最多三组。
• 右键单击打开一个简短、相关的上下文菜单，其中的每个命令也在其他地方存在。
• 所有功能均可通过键盘操作且无陷阱；焦点始终可见且不被粘性栏遮挡；标准快捷键不被重新定义；快捷键在菜单和工具提示中显示。
• 没有功能仅可通过悬停使用。悬停和焦点内容可通过 Esc 关闭、可悬停并持久化；工具提示不包含关键信息。
• 目标尺寸至少 24 × 24 px（可能涉及触摸时约 40 × 40）。
• 滚动：仅内容滚动，同一方向无嵌套滚动区域，表格表头保持固定，关键控件不位于窗口底部边缘。
• 编辑使用最轻量的适用模式：单字段内联编辑、记录用侧面板、短阻塞任务用面板或对话框、长流程用窗口或页面。仅对破坏性、不可逆操作进行确认；其他所有操作都提供撤销。
• 每次拖放操作都有一个非拖动的替代方案。
• 布局在 200% 文本下依然有效，在浅色和深色模式下，文本对比度至少为 4.5:1，UI 对比度至少为 3:1。
• 为每个窗格（不仅仅是窗口）设计了加载、空状态和错误状态。
• Web 应用：在 320 × 256（400% 缩放）下正常工作，无双向滚动，并包含一个跳转链接。

7. 呈现

分享工件链接。用几句话说明区块映射（每个区块的职责和重点）、窗口限制和最大内容宽度、关键决策及其背后的原则（引用源键）、布局在每个宽度类别下的变化、您接受的任何自我检查项及理由、任何提议的主题补充（供 theme 技能使用），以及任何开放问题。