@microi.net/cli 6.2.1 → 6.2.3

package/skills/ui-design/assets/templates/MCI-DESIGN.md

@@ -1,206 +1,221 @@
-# MCI-DESIGN
-
-> 本文件同时保存精确 token 与设计理由。实现前先读完整文件；修改视觉结构时同步更新本文件、源码和验收截图。
-
-```yaml
-contract:
-  version: 1
-  project:
-  mode: data-workspace
-  intent:
-
-tokens:
-  color:
-    canvas: var(--mci-bg-base)
-    surface: var(--mci-bg-card)
-    surfaceElevated: var(--mci-bg-elevated)
-    textPrimary: var(--mci-text-primary)
-    textSecondary: var(--mci-text-secondary)
-    primary: var(--mci-color-primary)
-    success: var(--mci-color-success)
-    warning: var(--mci-color-warning)
-    danger: var(--mci-color-danger)
-  typography:
-    display: { size: 48px, lineHeight: 1.1, weight: 800 }
-    h1: { size: 32px, lineHeight: 1.2, weight: 750 }
-    h2: { size: 24px, lineHeight: 1.3, weight: 700 }
-    body: { size: 16px, lineHeight: 1.7, weight: 400 }
-    meta: { size: 13px, lineHeight: 1.5, weight: 500 }
-  spacing:
-    micro: 4px
-    compact: 8px
-    control: 12px
-    card: 16px
-    section: 24px
-    page: 32px
-  shape:
-    input: var(--mci-shape-input)
-    panel: var(--mci-shape-panel)
-    card: var(--mci-shape-card)
-    button: var(--mci-shape-button)
-  elevation:
-    card: var(--mci-shadow-card)
-    cardHover: var(--mci-shadow-card-hover)
-    float: var(--mci-shadow-float)
-
-components:
-  primaryButton:
-    height: 44px
-    states:
-      default: { background: "{tokens.color.primary}" }
-      hover: { lift: -1px }
-      focus: { outline: "{tokens.color.primary}" }
-      pressed: { scale: 0.98 }
-      loading: { preserveWidth: true }
-      disabled: { opacity: 0.56 }
-  dataCard:
-    background: "{tokens.color.surface}"
-    radius: "{tokens.shape.card}"
-    padding: "{tokens.spacing.card}"
-    states:
-      default: { elevation: "{tokens.elevation.card}" }
-      hover: { elevation: "{tokens.elevation.cardHover}", lift: -2px }
-      focus: { outline: "{tokens.color.primary}" }
-      selected: { border: "{tokens.color.primary}" }
-
-omissions: []
-```
-
-## 1. 产品概览与目标用户
-
-- 首要用户：
-- 首要任务：
-- 用户进入后第一眼必须理解：
-- 成功结果与衡量方式：
-- 关键设备与使用环境：
-
-## 2. 视觉性格与情绪目标
-
-- 主情绪（只选一个）：
-- 具体视觉隐喻：
-- 辅助气质（最多两项）：
-- 选择理由：
-- 明确不采用的视觉语言：
-
-## 3. 颜色
-
-- 页面底色与表面关系：
-- 主色只用于：
-- 成功 / 警告 / 危险 / 信息色语义：
-- 明亮与暗黑主题的对比策略：
-- 透明表面的叠加底色：
-
-## 4. 字体
-
-| 角色 | 字号 / 行高 / 字重 | 用途 | 禁止 |
-| --- | --- | --- | --- |
-| Display |  |  |  |
-| H1 |  |  |  |
-| H2 |  |  |  |
-| Body |  |  |  |
-| Meta |  |  |  |
-
-## 5. 布局与间距
-
-- Desktop：12 列，最大宽度：
-- Tablet：8 列，重排规则：
-- Mobile：4 列，左右安全间距：
-- 内部紧凑间距：
-- 区域与页面留白：
-
-## 6. 层级、材质与形状
-
-- 深度来自：色调层 / 细边框 / 环境阴影 / 透明材质 / 实体投影
-- 圆角或切角表达的性格：
-- 页面 / 卡片 / 浮层的层级关系：
-- 低性能与不支持透明效果时的降级：
-
-## 7. 组件与状态
-
-| 组件 | Default | Hover / Focus / Pressed | Loading | Empty / Error | Disabled | Selected / Success |
-| --- | --- | --- | --- | --- | --- | --- |
-| 主按钮 |  |  |  | - |  |  |
-| 搜索 / 筛选 |  |  |  |  |  |  |
-| 列表 / 数据卡片 |  |  |  |  | - |  |
-| 表单 |  |  |  |  |  |  |
-| 弹层 | 20–24px 大圆角、居中；图标 + 英文眉题 + 标题 + 副标题；连续柔和内容底 | 关闭按钮有可见底色；标题栏可拖动且四边留在视口 | 首个可操作控件获得焦点，Esc/关闭路径明确 | 拖动边界按真实尺寸钳制，窗口缩放后重新钳制 | 提交按钮显示进度并防重复 | 错误留在关联字段或底部操作区，可恢复 |
-
-### 弹层
-
-- 页头：左侧语义图标、英文眉题、大字标题、可选小字副标题；右上关闭按钮有独立背景并垂直居中。
-- 内容：使用连续柔和背景和整齐栅格，不把普通字段拆成小卡片。
-- 页脚：右侧大号关闭与保存按钮，均带语义图标。
-- 行为：默认上下左右居中，PC 标题栏可拖动；按弹层真实宽高限制四边并在窗口缩放后重新限制。Teleport 到 `body` 时同步应用根标识与主题 token。
-
-### 数据卡片
-
-- 信息顺序：身份 → 标题/状态 → 关键字段 → 时间/辅助标签 → 操作。
-- 缺图：40—44px 紧凑标记，不渲染大面积装饰占位图。
-- 默认列数：桌面 4，平板 2—3，移动 1；显式业务配置优先。
-- 操作：一个主动作、一至两个次动作，其余进入“更多”；危险动作降权。
-
-## 8. 页面模式与信息架构
-
-1. 首屏：
-2. 核心任务：
-3. 证据或数据：
-4. 辅助内容：
-5. 最终行动：
-
-- 主模式：品牌叙事 / 真实产品流程 / 趋势构图 / 沉浸互动 / 动态首屏 / 数据工作台
-- 辅助能力（最多两项）：
-
-## 9. 动效与媒体
-
-- 0—120ms：
-- 120—360ms：
-- 360—800ms：
-- 循环动效存在理由：
-- 图片比例与 `object-fit`：
-- `prefers-reduced-motion` 与静态降级：
-
-## 10. 响应式与安全区
-
-| 宽度 | 栅格 | 导航 | 主操作 | 内容重排 |
-| --- | --- | --- | --- | --- |
-| 390 | 4 列 |  |  |  |
-| 768 | 8 列 |  |  |  |
-| 1440 | 12 列 |  |  |  |
-
-## 11. 可访问性、性能与降级
-
-- 键盘顺序与可见焦点：
-- 正文、状态与交互对比度：
-- 触控目标：移动端不小于 44px
-- 首屏资源预算：
-- 网络失败、媒体失败与离线策略：
-- 骨架屏、空态、错误态与恢复路径：
-
-## 12. 应当与禁止
-
-### 应当
-
--
-
-### 禁止
-
--
-
-## 有意省略
-
-| 规则 | 省略理由 | 替代方案 |
-| --- | --- | --- |
-|  |  |  |
-
-## 验收清单
-
-- [ ] 机器块能解析，核心章节顺序正确，无重复或近似拼写章节。
-- [ ] 所有 `{路径}` 引用存在且无循环；无未说明的孤立 token。
-- [ ] 首屏在 3 秒内说清产品、对象和主操作。
-- [ ] 默认、加载、空、错误、禁用、权限、成功状态可验证。
-- [ ] 390 / 768 / 1440 无横向滚动、遮挡和错位。
-- [ ] 明亮、暗黑主题均有足够对比度。
-- [ ] 所有可点击元素有 hover、focus、pressed 和真实结果。
-- [ ] 动效尊重 `prefers-reduced-motion`。
-- [ ] 契约差异与实现差异同时评审，没有意外删除或语义漂移。
-- [ ] 所有图片、字体、模型和代码资产来源合法且可离线构建。
+# MCI-DESIGN
+
+> 本文件同时保存精确 token 与设计理由。实现前先读完整文件；修改视觉结构时同步更新本文件、源码和验收截图。默认紧凑适度，不鼓励大标题、大圆角或大间距；只有用户明确视觉方向或实际可读/触控用途才扩大尺度并记录理由。示例为数据工作台起点，不是所有页面的固定模板。
+
+```yaml
+contract:
+  version: 1
+  project:
+  mode: data-workspace
+  intent:
+
+tokens:
+  color:
+    canvas: var(--mci-bg-base)
+    surface: var(--mci-bg-card)
+    surfaceElevated: var(--mci-bg-elevated)
+    textPrimary: var(--mci-text-primary)
+    textSecondary: var(--mci-text-secondary)
+    primary: var(--mci-color-primary)
+    success: var(--mci-color-success)
+    warning: var(--mci-color-warning)
+    danger: var(--mci-color-danger)
+  typography:
+    display: { size: 26px, lineHeight: 1.2, weight: 700 }
+    h1: { size: 20px, lineHeight: 1.3, weight: 650 }
+    h2: { size: 15px, lineHeight: 1.4, weight: 600 }
+    body: { size: 14px, lineHeight: 1.5, weight: 400 }
+    meta: { size: 12px, lineHeight: 1.5, weight: 400 }
+  spacing:
+    micro: 4px
+    compact: 8px
+    control: 12px
+    card: 16px
+    section: 12px
+    page: 12px
+  shape:
+    input: 6px
+    panel: 8px
+    card: 8px
+    button: 6px
+    dialog: 12px
+  elevation:
+    card: var(--mci-shadow-card)
+    cardHover: var(--mci-shadow-card-hover)
+    float: var(--mci-shadow-float)
+
+layout:
+  width: 100%
+  maxWidth: none
+  minHeight: var(--micro-app-available-height, 100dvh)
+  scrollOwner: page
+  breakpoints: container-width
+  density: inherit-host
+
+components:
+  primaryButton:
+    height: 32px
+    touchTarget: 44px
+    states:
+      default: { background: "{tokens.color.primary}" }
+      hover: { emphasizeBoundary: true }
+      focus: { outline: "{tokens.color.primary}" }
+      pressed: { scale: 0.98 }
+      loading: { preserveWidth: true }
+      disabled: { opacity: 0.56 }
+  dataCard:
+    background: "{tokens.color.surface}"
+    radius: "{tokens.shape.card}"
+    padding: "{tokens.spacing.card}"
+    states:
+      default: { elevation: "{tokens.elevation.card}" }
+      hover: { border: "{tokens.color.primary}" }
+      focus: { outline: "{tokens.color.primary}" }
+      selected: { border: "{tokens.color.primary}" }
+
+omissions: []
+```
+
+## 1. 产品概览与目标用户
+
+- 首要用户：
+- 首要任务：
+- 用户进入后第一眼必须理解：
+- 成功结果与衡量方式：
+- 关键设备与使用环境：
+
+## 2. 视觉性格与情绪目标
+
+- 主情绪（只选一个）：
+- 具体视觉隐喻：
+- 辅助气质（最多两项）：
+- 选择理由：
+- 明确不采用的视觉语言：
+
+## 3. 颜色
+
+- 页面底色与表面关系：
+- 主色只用于：
+- 成功 / 警告 / 危险 / 信息色语义：
+- 明亮与暗黑主题的对比策略：
+- 透明表面的叠加底色：
+
+## 4. 字体
+
+| 角色 | 字号 / 行高 / 字重 | 用途 | 禁止 |
+| --- | --- | --- | --- |
+| Display |  |  |  |
+| H1 |  |  |  |
+| H2 |  |  |  |
+| Body |  |  |  |
+| Meta |  |  |  |
+
+## 5. 布局与间距
+
+- Desktop：宿主可用内容区 100%，默认不设整页 max-width；实际列数/最小可读宽度：
+- 中等容器：按最小可读宽度调整列数（8 列栅格仅为可选组织方式），重排规则：
+- 窄容器/移动：优先单列任务流（4 列仅为可选基础栅格），左右安全间距：
+- 内部紧凑间距：
+- 区域与页面留白（默认 12–16px；扩大尺度的任务理由）：
+- 宿主内容区实际宽/高、滚动所有者：
+- 按容器宽度的断点与侧栏收起规则：
+- 标题/筛选/KPI 首屏高度预算、表格行高与图表高度：
+
+## 6. 层级、材质与形状
+
+- 深度来自：色调层 / 细边框 / 环境阴影 / 透明材质 / 实体投影
+- 圆角或切角表达的性格：
+- 页面 / 卡片 / 浮层的层级关系：
+- 低性能与不支持透明效果时的降级：
+
+## 7. 组件与状态
+
+| 组件 | Default | Hover / Focus / Pressed | Loading | Empty / Error | Disabled | Selected / Success |
+| --- | --- | --- | --- | --- | --- | --- |
+| 主按钮 |  |  |  | - |  |  |
+| 搜索 / 筛选 |  |  |  |  |  |  |
+| 列表 / 数据卡片 |  |  |  |  | - |  |
+| 表单 |  |  |  |  |  |  |
+| 弹层 | 约 10–14px 适度圆角或宿主约束、居中；清楚业务标题；图标/眉题/副标题仅按语义需要 | 关闭按钮有可见底色；标题栏可拖动且四边留在视口 | 首个可操作控件获得焦点，Esc/关闭路径明确 | 拖动边界按真实尺寸钳制，窗口缩放后重新钳制 | 提交按钮显示进度并防重复 | 错误留在关联字段或底部操作区，可恢复 |
+
+### 弹层
+
+- 页头：适度字号的清楚业务标题，图标、眉题、副标题仅在增加语义时出现；右上关闭按钮有独立背景并垂直居中。
+- 内容：使用连续柔和背景和整齐栅格，不把普通字段拆成小卡片。
+- 页脚：右侧紧凑关闭与保存按钮，按鼠标/触控输入方式确定命中尺寸；不强制图标或额外占高。
+- 行为：默认上下左右居中，PC 标题栏可拖动；按宿主与可见窗口交集限制四边，窗口/侧栏/密度变化后重算。Teleport 到 `body` 时同步应用根标识与主题 token。实际检查关闭按钮首命中，不能只检查层级或按浏览器宽度居中。
+
+### 数据卡片
+
+- 信息顺序：身份 → 标题/状态 → 关键字段 → 时间/辅助标签 → 操作。
+- 缺图：40—44px 紧凑标记，不渲染大面积装饰占位图。
+- 默认列数：以卡片最小可读宽度优先；桌面可从 4 列开始，中等容器 2—3、窄容器 1。侧树/筛选占宽后重新计算；显式业务配置和实际可读性优先。
+- 操作：一个主动作、一至两个次动作，其余进入“更多”；危险动作降权。
+
+## 8. 页面模式与信息架构
+
+1. 首屏：
+2. 核心任务：
+3. 证据或数据：
+4. 辅助内容：
+5. 最终行动：
+
+- 主模式：品牌叙事 / 真实产品流程 / 趋势构图 / 沉浸互动 / 动态首屏 / 数据工作台
+- 辅助能力（最多两项）：
+
+## 9. 动效与媒体
+
+- 0—120ms：
+- 120—360ms：
+- 360—800ms：
+- 循环动效存在理由：
+- 图片比例与 `object-fit`：
+- `prefers-reduced-motion` 与静态降级：
+
+## 10. 响应式与安全区
+
+| 实际内容容器宽度示例（按任务可替换） | 最小可读宽度与列数 | 导航 | 主操作 | 内容重排 |
+| --- | --- | --- | --- | --- |
+| 约 390 | 任务单列为起点 |  |  |  |
+| 约 768 | 依卡片/表格最小宽度选择 |  |  |  |
+| 约 1440 | 满宽工作区与有效数据列 |  |  |  |
+
+## 11. 可访问性、性能与降级
+
+- 键盘顺序与可见焦点：
+- 正文、状态与交互对比度：
+- 触控目标：移动端不小于 44px
+- 首屏资源预算：
+- 网络失败、媒体失败与离线策略：
+- 骨架屏、空态、错误态与恢复路径：
+
+## 12. 应当与禁止
+
+### 应当
+
+-
+
+### 禁止
+
+-
+
+## 有意省略
+
+| 规则 | 省略理由 | 替代方案 |
+| --- | --- | --- |
+|  |  |  |
+
+## 验收清单
+
+- [ ] 机器块能解析，核心章节顺序正确，无重复或近似拼写章节。
+- [ ] 所有 `{路径}` 引用存在且无循环；无未说明的孤立 token。
+- [ ] 首屏在 3 秒内说清产品、对象和主操作。
+- [ ] 默认、加载、空、错误、禁用、权限、成功状态可验证。
+- [ ] 记录真实 clientWidth/clientHeight，而非只记录请求 viewport；常见/宽桌面及窄宿主容器无额外居中空带、非预期横向滚动、遮挡或错位；支持移动端时另测约 390px。
+- [ ] 已记录根与宿主矩形、page padding、标题/KPI 高度、正文字号与行高；没有用整体缩放或隐藏溢出伪装紧凑。
+- [ ] 每个路由均有首屏、筛选/明细、加载/空/错误状态的验收结果，非仅首页；125%/200% 缩放可完成主要任务。
+- [ ] 明亮、暗黑主题均有足够对比度。
+- [ ] 所有可点击元素有 hover、focus、pressed 和真实结果。
+- [ ] 动效尊重 `prefers-reduced-motion`。
+- [ ] 契约差异与实现差异同时评审，没有意外删除或语义漂移。
+- [ ] 所有图片、字体、模型和代码资产来源合法且可离线构建。

package/skills/ui-design/references/data-workspace-density.md

@@ -0,0 +1,77 @@
+# 数据工作台：容器、密度与视觉验收
+
+适用于嵌入式 PC 管理、监控、分析、报表和高频操作页。官网、活动、内容阅读和移动端消费页面仍按自身模式设计；本文件不把一种布局或色调强加给所有产品。数字是起始基线，用户要求、可访问性和真实任务优先，有依据的例外写入设计契约。
+
+## 先确定任务，再画结构
+
+- 先列出用户首屏需要判断的事实、需要执行的动作和需要比较的对象。管理页先保证快速扫描、连续操作和熟悉的位置，展示页才以记忆点和叙事为主。
+- 先画出标题/筛选、指标、分析、明细的网格及高度预算，再选颜色、圆角和动效。一个页面只有一个主阅读路径，不将全部数字、图表、说明做成同等重量的卡片。
+- 删除无信息的眉题、重复面包屑、重复页面名、同义统计和说明段落。宿主已有导航时，子应用不再占一行重复导航。保留真正影响筛选口径、数据来源与风险的说明。
+- 共享 token、组件和页面模式先统一，再实现各页的任务差异。不能只改一张首页，也不能把所有页面强制成同一种四卡模板。
+
+## 100% 指宿主可用内容区
+
+- 后台画布默认 `width:100%; max-width:none; min-width:0; box-sizing:border-box`，填满宿主扣除侧栏、导航、页签后的内容区。不要给整个工作台加 1180/1400/1600px 固定内容上限和居中外边距；文章、单个表单或预览对象可以有独立可读宽度。
+- 高度使用宿主 `--micro-app-available-height` 或已下发的容器尺寸；`100vh` 仅为独立运行回退。嵌入态不使用 `100vw`、固定窗口减数或整页 `zoom/transform:scale`，也不修改宿主侧栏来换取空间。
+- 根及所有 flex/grid 中间层设置 `min-width:0`；需要内部滚动时同时设置 `min-height:0` 和确定高度。全页默认一个纵向滚动所有者；数据表长明细可以有有界滚动，标题、分页和主操作不能被裁掉。
+- 断点依据实际内容容器宽度，优先容器查询，或用 `ResizeObserver` 观测本应用根。大浏览器里的窄侧栏容器仍是窄布局；仅写 window 媒体查询不够。监听卸载时回收，图表随容器 resize。
+- “铺满”不等于拉伸短内容制造空卡，也不等于禁止必要留白。屏幕变宽时，应增加有用列/可比较图组或明细空间；不无上限放大字号和每个小图标。
+- 微服务弹窗的可点击边界是自身宿主矩形与窗口的交集；全局遮罩由宿主提供，内容和关闭按钮必须留在实际可点击区。不能只按窗口居中或提高 z-index 穿过宿主安全遮罩。
+
+## PC 操作模式起始 token
+
+以下按标准密度、CSS 像素给出。优先复用现有 `--mci-*` 及宿主密度变量，调整行高与间距时保持可读字号；不通过缩小整个页面实现紧凑。用户放大浏览器或选择舒适密度时可以自然增长和重排。
+
+| 角色 | 起始范围 | 取舍 |
+| --- | --- | --- |
+| 页面内边距 | 12–16px | 只有一个外层，不叠三层 page/section/card 留白 |
+| 同级区块间距 | 12–16px | 小组件内部 4/8/12px，真正业务章节才用 20–24px |
+| 页面标题 | 18–22px，600–700 | 常规数据页实色标题；不套 32–48px Hero |
+| 区块标题 | 14–16px，600–700 | 与右侧筛选/动作共用中心线 |
+| 正文、表格、控件 | 13–14px，行高约 1.4–1.6 | 主业务信息不降到 10–11px；辅助信息通常 12px |
+| KPI 数字 | 26–32px，600–700 | `font-variant-numeric:tabular-nums`；单位与说明弱一级 |
+| KPI 容器 | 80–104px 高 | 无图表时不留空脚；不能截断长数和比较说明 |
+| 鼠标控件 | 30–34px 高 | 图标有名称和可见焦点；触控界面使用至少 44px 目标 |
+| 表格单行/复合行 | 36–44px / 44–52px | 长内容可自然增长；不强制截断到不可读 |
+| 分析图组 | 220–280px 高起步 | 图例、坐标与 tooltip 可读后才紧凑；大屏/空间图按任务另定 |
+| 树/筛选侧栏 | 180–224px 起步 | 单一区域不固定占去主画布三分之一；窄容器收为可展开筛选 |
+| 操作卡边角 | 6–10px 起步 | 继承明确的用户形态偏好；Dialog 保留平台弹层壳规则 |
+
+独立移动应用不继承这些鼠标控件和表格尺寸。窄容器先改列数和信息顺序，再调整次要信息；不能缩小全页、把表格挤成不可读文字，或删除关键筛选/操作。
+
+## 首屏与数据表达
+
+- 标题与主要筛选尽量组成紧凑的一到两行；一个主动作靠近其作用范围。KPI、图表与明细的筛选口径一致，加载/失败不能伪装为零。
+- 在宿主可用高度约 600–800px、正文 13–14px 的常见桌面场景，标题、筛选和 KPI 通常不应超过首屏约三分之一；首屏应出现可用图表和至少一部分明细。不是为了达标压缩有价值的多条件筛选，应按任务记录例外。
+- 指标条只放高信号值，已表达同一状态的数字不再画五个大环。需要比较占比时优先一张分布图/堆叠条加文字图例；目标进度才用进度环。图表类型由比较问题决定。
+- 表格数值右对齐、使用等宽数字，单位固定于列头或数值旁；状态用文字配语义色，不能只靠颜色。长名称有省略后的完整读取方式，重要异常和操作不能只藏在 tooltip。
+- 图表的语义系列颜色、单位、图例、时间范围、tooltip、缺值和零值应一致；减少无意义网格、重阴影和装饰色。圆环中心、刻度、图例不碰撞，不用难以比较的 3D 效果。
+- 实际业务量少时呈现真实空/零态及一步可执行的恢复方式；不要复制随机数据或制造漂亮走势。查询无结果不擅自清空用户筛选。
+
+## 克制的交互与视觉层级
+
+- 数据工作台默认使用稳定表面、细边界和清晰分组，不强制多层投影、渐变字、发光背景、每卡图标或营销色板。默认不循环动画。
+- hover/focus/pressed 必须可辨认，但桌面操作卡和表格优先边界/背景反馈，不强制位移。刷新、排序与筛选保持数字和列对齐，避免不断跳动。
+- 明暗模式与品牌主色是两个维度；继承当前宿主主题，不为“高级”固定为深色，也不因浅主题换成纯白字。对比度按真实合成背景测量，包含主按钮、次要文本、状态与焦点。
+- 新页面先完成加载、空、错误、权限、禁用、成功和长内容状态，再增加与任务有关的微交互。长文本、英文和大数值使用真实边界样本验收。
+
+## 可观测的验收门槛
+
+每个路由维护一行验收矩阵，不以首页通过代表整套页面。截图同时保留宿主外壳和实际可用区域，比较时固定浏览器缩放、主题、密度、数据和容器尺寸。
+
+1. 读取宿主与应用根 `getBoundingClientRect`：根宽度应等于可用宽度（允许正常边框/滚动条差异），业务内容左右余量只来自已声明 page padding。超宽屏不能出现额外居中空带。
+2. 记录实际 `clientWidth/clientHeight`、页面内边距、标题区/KPI 高度、正文 computed font-size 和表格行高，检查可见内容是否符合契约。设置 viewport 的请求值不等于真实尺寸。
+3. 覆盖常见桌面、宽桌面与窄宿主容器；支持移动端的项目另测约 390px。检测非预期横向滚动、重叠、截断、双重滚动、图表 legend/坐标碰撞、底部操作和关闭按钮实际命中。
+4. 至少验证浅色、暗色、一个非默认主色和紧凑/标准密度；切换时不重置筛选、路由和输入。浏览器 125%/200% 放大应重排并可完成任务，不以隐藏溢出掩盖内容丢失。
+5. 实际执行筛选、排序、分页、图表图例/tooltip、穿透、关闭、错误恢复及键盘焦点。操作可用与视觉可接受分别给结果；构建、DOM 存在和 CSS 静态扫描都不能代替截图批判。
+6. 逐页截图后明确指出最大的三项缺陷并修正；没有问题时说明按哪些任务标准通过。某尺寸或主题受工具限制未完成时如实记录，不复制另一尺寸截图冒充通过。
+
+## 方法来源与改写边界
+
+2026-11-06 检查以下公开 Skill，吸收“先任务和设计系统、区分操作与展示、反思真实渲染、语义颜色与数值对齐、可访问交互”的方法，按吾码 Vue/宿主契约重新组织上述原创规则。未复制外部 Skill 原文、品牌、类名、资产或设计 token。star 是仓库总数，不能证明单个 Skill 的质量，也不能据用户参考截图判定作者使用了哪一个 Skill。
+
+- [Anthropic frontend-design](https://github.com/anthropics/skills/blob/ca45fc496a3436251f191354091d557da31c15b5/skills/frontend-design/SKILL.md)：该 Skill 相邻 `LICENSE.txt` 为 Apache-2.0；吸收明确视觉意图与反对无差别模板。
+- [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/b7d5353e0130feb8c5574ef1251f8a1db1873ccb/.claude/skills/ui-ux-pro-max/SKILL.md)：MIT；吸收可复用设计系统、可读性与图表交付检查，未搬入技术栈默认值。
+- [Impeccable](https://github.com/pbakaus/impeccable/blob/c8891a9ae865d6ee311836ae5199bfce0fe115b1/.agents/skills/impeccable/SKILL.md)：Apache-2.0；吸收操作模式与展示模式的不同优先级、真实渲染后批判和精简冗余。
+- [ibelick UI Skills](https://github.com/ibelick/ui-skills/blob/00db7d656719c399c091f3ea138c6f42a7fa4d98/skills/baseline-ui/SKILL.md)：MIT；吸收稳定数值、既有交互 primitive 和克制动效；其 React/Tailwind 假设不适用于吾码。
+- [Vercel 审查入口](https://github.com/vercel-labs/agent-skills/tree/1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62/skills/web-design-guidelines) 的根仓 API 未识别许可证且仅 README 声明 MIT；实际规则 [Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines/blob/434b7f91364665f2f733b310ec54809bf8f37937/command.md) 所属仓库识别为 MIT。吸收焦点、长内容、布局溢出与主题的审查方向，本次不分发其正文。