Dsh Client Ui Ux

---
name: dsh-client-ui-ux
description: "设计、修改或审查用户界面的对齐、分组、图标、主题、几何与交互；按改动影响验证真实页面及相关状态。"
---

# dsh-client-ui-ux

本 Skill 仅用于当前项目。用户授权、项目 AGENTS.md 和实际宿主能力优先。

## 按影响选择检查范围

小型文案、图标复用、颜色或间距调整：打开实际页面，检查元素及直接邻居、相关状态即可，不默认要求完整设计审计。页面布局、共享组件或全局样式：追踪消费者，检查不同的组合布局、内容与状态；同类证据复用须有等价依据。完整审查仅覆盖用户约定的区域和状态，不把一次对比扩成全产品审计。

每次受影响 UI 的最低检查：

- 颜色/透明度：浅色和深色下受影响的前景、背景及状态组合。
- 布局/字号/间距：受限容器、长文字/换行、受影响断点两侧，以及对齐、裁剪和操作可达性。
- 交互：实际操作路径与受影响的 focus、disabled、loading、error、expanded、overlap 状态。
- 共享规则：真实消费者组成的不同页面；孤立组件样例不能代表所有页面。

场景不可用时说清没查什么、原因和验证路径；明确标记的真实组件 fixture 只证明它渲染的范围。代码审查和测试通过不能替代真实画面。纯文档或有证据证明渲染不变的重构不必新录图。

## 设计与实现

先复用现有组件、插槽、token、文字角色和完整样式处理，不为同一功能另建侧栏或组件。读取目标目录规则。对齐、间距、图标选取/绘制/规范化和图标按钮时，按需读 [视觉细节](references/visual-details.md) 的对应部分。

- 颜色、字重、字号、圆角等数值由本项目主题/组件所有者决定，不套用 DSH 的 13px、字重上限或窗口 CSS 变量。检查文本对比度以及语义颜色。
- 几何一起比较角色、尺寸、曲率、内缩和材质。内嵌圆角减内缩只是圆弧的精确关系，超椭圆须检查对角留白；相接组件由外容器拥有外角，内部接缝保持连续；独立子卡片使用自己的层级。圆形/胶囊保持形状，hover/focus 填充不裁掉弹层。
- 不重复添加已有阴影中的中性细边；保留状态边框。hover、pressed、selected、loading、disabled 的边界保持稳定。
- UI 文案、可访问名称、tooltip、placeholder 一起遵守本项目 locale 所有权；不擅自引入 DSH 的翻译 API。

## 交互与反馈

临时反馈交给在来源面板关闭后仍存活的现有宿主；不要让删除成功提示跟着被删面板消失。局部校验和查询失败就地显示，并保留已加载数据与重试入口；删除失败保留行。错误简短可行动，留好位置避免布局跳动。pending 属于加载状态，不当作成功 toast。

复用现有 skeleton/spinner 模式，避免同一区域多个竞争加载指示。菜单/popover/tooltip 核对外部点击、适用时 Escape、焦点回归、屏幕边距、祖先裁剪与覆盖；必要时用现有 portal，只有另一侧容得下才翻转，不能两边都放不下时振荡。滚动条保持容器内可用，窗口标题栏/安全区按平台检查。

## 规则维护

修改设计规则时更新本 Skill 的唯一对应章节/reference，数值和 API 更新其组件/主题 owner；其他规则页只链接，不另设同义标准。说明适用对象、决定、例外和可观察验证，保留一个能区分新旧规则的案例并移除被替代说法。明确是本次迁移还是今后修改时适用，不能暗示现有 UI 已全部符合。自动化只检查可机械判断的部分，审查工具记录所用源码/规则版本。

## 验证与交付

在真实尺寸看整体、组内/组间关系、远处同类元素和展开状态，同时保留草稿、焦点及窄屏操作。需要 before/after 时保留真实起点，包括未提交工作，用相同条件截图；不能重建一个“之前”画面冒充原证据。

交付记录所查页面、版本、主题/宽度/状态、缺陷与缺口。复用仍有效的证据，只复查新组合或失效项。图示、GIF 和人工设计批准按本项目实际规则执行；来源的固定审批名单、每 PR 必录 GIF 不自动成为这里的新要求。

来源、适配边界和许可证见 [provenance.md](provenance.md)。