平板 UI 设计

ultrahand: tablet

以交互式 Claude Artifact 的形式设计平板屏幕。该 Artifact 可在 iPad 和 Android 平板尺寸之间切换，并支持横竖屏方向。它可以快速吸附到分屏宽度（1/3、1/2、2/3），并且当您将窗口从全宽拖拽到 320px 时，布局会实时重新排列。您应用的每一个规则都在 references/principles.md 中，并且每个规则都引用了 references/sources.md 中的来源。尺寸、分屏方式和尺寸类别信息位于 references/presets.md 中。

1. 收集需求

仅询问您无法推断的内容。在开始绘图前确定以下事项：

• 平台： iPadOS、Android，或两者兼顾。如果两者兼顾，请使用 48 单位目标和平台中立的模式。
• 范围： 单个屏幕还是一个流程。如果是流程，请列出所有屏幕以及用户在屏幕之间的移动方式：侧边栏或边栏、列表到详情、弹出表单、弹出窗口或新窗口。
• 主要任务： 每个屏幕的唯一用途，以及它最适合的规范布局（列表-详情、辅助面板、信息流或单面板）。
• 真实内容： 名称、长度、数量以及可能最长的字符串。不要使用 Lorem Ipsum 进行设计。
• 数据状态： 加载哪些内容、哪些内容可能为空、哪些内容可能失败或离线。
• 输入方式： 仅触控，还是也包括键盘、触控板、鼠标或 Apple Pencil。除非另有说明，否则默认支持以上所有输入方式。
• 多任务处理： 用户在此应用之外还会做什么（例如并排参考、拖入或拖出内容）。期望窗口宽度从 320 到全屏。
• 约束： 品牌颜色、字体、现有设计系统，以及它是原生应用还是 Web 应用。
• 主题： 在选择任何颜色、大小或间距之前，先查找项目的主题（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。使用平台自身的模式（侧边栏或边栏、分屏视图、弹出窗口、菜单栏命令），而不是发明新的模式。

3. 组成屏幕

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

• 编写区段映射。 为每个屏幕列出其区块（如侧边栏、列表面板、带有工具栏的详情面板、检查器），以及每个区块的唯一职责、其成员（按使用频率排序）和它的一个重点内容。说明哪些是主要内容，哪些是界面装饰：主要内容应占主导地位，界面装饰应弱化。
• 使用间距进行分组。 组内间隙应明显小于组间间隙；只有当间距无法体现分组时，才添加容器。
• 每个角色一种样式，每个区块一个重点。 相同角色，相同样式；状态和标签绝不应看起来像按钮；每个区块中，强烈的强调色应仅用于一个元素，选中状态应使用更安静的样式。
• 保持精简。 大约三种字体大小，一个事实只在一个地方展示，常用成员可见，不常用的成员放在菜单中。当需要添加新内容时，先重新组织，然后只添加真正有必要的元素。

4. 构建 Canvas Artifact

在插件的共享可调整 Canvas (shared/canvas/；其 README.md 包含完整约定) 上构建。将屏幕编写为 screen.html，并将设计自身的设置编写为工作目录中的 config.json，然后构建：

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

将 index.html 发布为 Artifact。从 references/presets.md 中，Canvas 获取以下内容：

• 全屏： ipad-mini 744， ipad 820， ipad-13 1032 和 android-tablet 800。旋转后提供各自的横屏尺寸。
• 分屏视图： ipad-split、ipad-13-split 和 android-split，即横屏设备上，您的应用位于分隔线一侧。分隔线可吸附到 1/3、1/2 和 2/3 的位置（拖拽它，或聚焦后按方向键）；“Full”是横屏下的全屏预设。
• 自由调整大小： 从预设大小向下拖拽至 320 × 450 的尺寸。
• 检查： 320 宽度的回流，以及开启键盘的横屏状态（1180 × 420）。

拖拽过程中，布局必须实时回流。从全宽到半宽必须持续重新渲染，跨越 840 和 600 断点，无需重新加载且不丢失任何状态。读数显示当前宽度及其尺寸类别（紧凑、中等、扩展、大）。

• config.json 设置 title 和 states（例如默认、加载、空、错误）。对于仅 Android 的设计，设置 "initialPreset": "android-tablet"；对于同时支持 iPadOS 和 Android 的设计，设置 "minTarget": 48。
• 屏幕约定： 一个 <template id="uh-screen">，内部包含带有 [data-screen] 属性的区块，并使用 data-nav、data-nav-replace、data-nav-back 和 data-show-state 处理点击。通过尺寸类别进行布局：使用 @container screen (width >= 600px) 和 (width >= 840px)，或视口的 data-width-class，切勿使用预设或 @media。边缘内边距使用 var(--uh-safe-*)，声明在 [data-screen] 上（:host 无法访问它们）。文本使用 rem；点击区域、图标和间距使用 px，这样 200% 的文本缩放只会放大文字，而不会放大控件。颜色使用 light-dark()。行为写在 window.ultrahandSetup = function (canvas) { … } 中。
• 内置切换： 亮/暗模式、200% 文本缩放、状态选择器和显示点击目标。不要自行构建这些功能。打开弹出表单、弹出窗口或菜单后，调用 canvas.refresh()。
• 指针和键盘始终处于活动状态： 观众使用鼠标和键盘操控 Artifact，因此为每个控件提供悬停状态、右键上下文菜单（如果平台支持）、可见的 :focus-visible 焦点和快捷键提示。使用点击目标叠加层检查触控。不要将这些功能隐藏在您自己的切换开关后面。
• 在 iPad 分屏状态下，确保顶部的工具栏按钮与窗口的顶部控件保持清晰的距离。
• 使主流程可点击：导航切换、行选择或推入、面板隐藏和显示、弹出表单和弹出窗口的打开和关闭。切勿使用 alert、confirm 或 prompt。

5. 设计每种尺寸类别

从宽屏到窄屏工作，并在问题出现的尺寸处修复它：

1. 扩展/大尺寸、横屏全屏（例如 ipad 1180）：选择面板、导航（侧边栏或边栏）和密度。限制行长度和控件宽度。
2. 中等尺寸、竖屏全屏和 2/3 分屏（例如 820、787）：折叠为更少的面板，使用边栏或顶部标签栏。
3. 紧凑尺寸、1/2 和 1/3 分屏（例如 590、393）：手机布局，使用底部栏或标签栏，一次只显示一个面板，使用“返回”按钮返回到列表。
4. 拖拽：从全宽缓慢拖拽到 320 再返回。检查选择、滚动位置和输入的文本是否保留。检查列表-详情布局在缩窄时是否保持打开的详情，并在变宽时选择该项目。

然后检查额外情况：320 宽度的回流、带键盘的横屏，以及（如果 Android 在范围内）android-tablet 预设的两种方向。

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）。

组件和平台：

• 布局按宽度类别（600 / 840）切换，而非按设备切换。从 320 到全屏，每个功能在每种宽度下都可访问。
• 调整大小会实时回流并保持选择、滚动、输入和播放。在断点处没有内容重置。
• 导航适应宽度：紧凑宽度下使用底部栏，其他宽度下使用边栏、顶部标签栏或侧边栏。最多有五个顶级标签，没有标签被隐藏或禁用。
• 多面板布局遵循规范模式。每个面板中的选择项都被高亮显示，隐藏的面板有多个返回方式，并且没有详情面板是空的。
• 没有内容被拉伸：按钮、输入框、弹出表单、对话框和图像具有最大宽度，文本具有可读的行长度。
• 点击目标至少为 44 × 44 pt（iOS）或 48 × 48 dp（Android），并且即使使用指针，也绝不低于 24 × 24。主要内容居中，常用控件位于可触摸的边缘附近。
• 在两种方向下，没有交互式元素位于状态栏、Home Indicator、任务栏或 iPad 窗口控件下方。
• 指针：每个控件都有悬停状态，右键点击和长按打开上下文菜单，并且没有功能仅在悬停时可用。
• 切换项目、关闭面板或关闭弹出表单绝不会丢失输入的文本；“撤销”操作在连续两次删除后仍然有效，并将项目返回到其面板。
• 键盘：主要流程可使用 Tab 键和方向键操作，焦点始终可见，标准快捷键正常工作，Esc 键关闭、取消或清除。
• 每次拖放操作都有非拖动的替代方案，显示有效目标，并且可以撤销。
• 两种方向都有效，并且聚焦的字段在带键盘的横屏中保持可见。
• 布局能承受 200% 的文本缩放，并且在亮和暗两种模式下，文本对比度至少为 4.5:1，UI 对比度至少为 3:1。
• 为每个面板（而不仅仅是屏幕）设计了加载、空和错误状态。
• 设计在 320 宽度下无需水平滚动即可正常工作。

7. 展示

分享 Artifact 链接。用几行文字说明：区段映射（每个区块的职责和重点）、关键决策及其背后的原则（引用来源键）、布局在每种尺寸类别下如何变化、您接受了哪些自查项目并说明理由、任何提议的主题添加项（供 theme 技能使用），以及任何未决问题。