minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/obsidian-optics-iteration-1/review.md

@@ -0,0 +1,59 @@
+# 黑曜影像首轮端到端评审
+
+## 测试目标
+
+本轮验证第三个 VI 模板 `Obsidian Optics`，中文名“黑曜影像”。目标是把“深色摄影器材、电影机、黑白红、精密工业、少量录制信号红”沉淀成原创模板，并用它生成一个中文 HTML 页面样张。
+
+## 执行结果
+
+- 已新增 `references/vi-obsidian-optics.md`。
+- 已更新 `SKILL.md` 的视觉模板库，加入黑曜影像模板，并明确不要复制真实影像品牌。
+- 已在 `evals/evals.json` 增加黑曜影像测试题。
+- 已生成样张：`outputs/index.html`。
+- 已保存桌面截图和移动端首屏截图。
+
+## 自动检查
+
+- `quick_validate.py`：通过。
+- `check_ui_artifact.py`：通过，无阻断问题。
+- `check_language_policy.py`：通过，用户可见说明和界面默认简体中文。
+- 浏览器渲染：无控制台错误。
+- 响应式检查：桌面和 390px 移动视口均无横向溢出。
+
+## 视觉评分
+
+| 维度 | 分数 | 说明 |
+| --- | ---: | --- |
+| 指令对齐 | 9 | 黑白红、电影机、参数模块、原创边界都明确体现。 |
+| 中文排版 | 8 | 中文标题硬朗、醒目，没有负字距；移动端仍清楚。桌面标题略大，但符合硬件官网气质。 |
+| 配色控制 | 9 | 深黑、石墨、冷白、冷蓝灰和信号红层次清楚，红色用量克制。 |
+| 工业科技感 | 9 | 镜头圆环、参数条、录制状态和细边框建立了高端影像器材感。 |
+| 轻量感 | 8 | 没有压成纯黑大块，背景网格和冷光让画面更透气。仍可在更大屏上增加一点留白。 |
+| 组件完整度 | 8 | 有导航、主行动、参数、色板、状态面板、模块卡和调整面板。 |
+| 移动端 | 8 | 首屏清楚，无溢出；色板区在长页中会比较长，后续可做更紧凑排列。 |
+
+综合评分：8.4 / 10。
+
+## 结论
+
+这版可以作为第三个可复用 VI 模板进入模板库。它不像简单的“黑底红按钮”，而是有石墨暗面、冷白文字、镜头冷光、细线边界和红色信号点，方向是成立的。
+
+需要保留的关键美学规则：
+
+- 黑色必须分层，不能用一整片纯黑。
+- 红色只做录制、选中、进度和关键行动，不做大面积主题色。
+- 中文标题要硬朗但不要过粗，不使用负字距。
+- 参数和规格可以有等宽感，但正文仍以中文可读性优先。
+
+## 已发现并修正的问题
+
+- 语言守卫最初抓到 `Logo`，已全部改为“标识”。
+- 静态检查最初提醒中文标题上限偏大，已把模板和样张中的 H1 上限从 84px 收到 76px。
+- 样张最初的 Tweaks 只满足静态结构，后来改成先定义初始配置再挂到全局对象。当前浏览器只读探测环境无法读取自定义全局属性，但静态检查确认 `EDITMODE` JSON 块唯一合法。
+- 移动端完整长截图在当前浏览器中出现拼接重复，因此最终保存移动端首屏截图作为视觉判断依据。
+
+## 下一轮建议
+
+- 给黑曜影像再做一个 deck 样张，验证它是否适合发布会或硬件规格演示。
+- 给样张增加更明显的“浅一点的暗色模式”变体，测试模板是否能避免过重。
+- 检查脚本未来可以增加“红色面积比例”启发式规则，防止黑白红模板被误用成大面积红黑游戏风。

package/skills/ui-design/tests/e2e/runs/obsidian-xui-screenshot-check-1/outputs/page-01.html

@@ -0,0 +1,466 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>黑曜界面测试 01</title>
+  <style>
+    :root {
+      --ink: #f2f7ff;
+      --ink-soft: #d5e2f2;
+      --muted: #91a3b7;
+      --paper: #03050a;
+      --paper-blue: #060d18;
+      --surface: rgba(10, 18, 30, 0.84);
+      --surface-glass: rgba(16, 32, 52, 0.62);
+      --surface-raised: rgba(24, 42, 66, 0.88);
+      --line: rgba(148, 213, 255, 0.20);
+      --line-strong: rgba(148, 213, 255, 0.42);
+      --accent: #33b8ff;
+      --signal: #2ee8d6;
+      --matrix: #8dffb4;
+      --violet: #8b5cf6;
+      --amber: #f5b84b;
+      --danger: #ff4d5e;
+      --shadow: rgba(0, 10, 28, 0.62);
+      color-scheme: dark;
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, sans-serif;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 68% 18%, rgba(51, 184, 255, 0.34), transparent 30%),
+        radial-gradient(circle at 14% 78%, rgba(139, 92, 246, 0.24), transparent 28%),
+        linear-gradient(135deg, #020308 0%, var(--paper-blue) 46%, var(--paper) 100%);
+      overflow-x: hidden;
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      opacity: 0.52;
+      background-image:
+        linear-gradient(rgba(148, 213, 255, 0.055) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(148, 213, 255, 0.055) 1px, transparent 1px);
+      background-size: 44px 44px;
+      mask-image: radial-gradient(circle at center, black, transparent 78%);
+    }
+
+    .screen {
+      position: relative;
+      width: min(1440px, 100%);
+      min-height: 100vh;
+      margin: 0 auto;
+      padding: 34px clamp(18px, 4vw, 64px) 40px;
+    }
+
+    .topbar,
+    .glass,
+    .control,
+    .map,
+    .rail,
+    .action {
+      border: 1px solid var(--line);
+      background: linear-gradient(145deg, rgba(24, 42, 66, 0.74), rgba(7, 14, 25, 0.68));
+      box-shadow: 0 24px 80px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      backdrop-filter: blur(20px);
+    }
+
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      min-height: 66px;
+      padding: 12px 16px;
+      border-radius: 16px;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+    }
+
+    .brand-mark {
+      width: 42px;
+      height: 42px;
+      border-radius: 12px;
+      background:
+        linear-gradient(135deg, rgba(51, 184, 255, 0.96), rgba(46, 232, 214, 0.52)),
+        radial-gradient(circle at 72% 24%, white, transparent 18%);
+      box-shadow: 0 0 28px rgba(51, 184, 255, 0.45);
+    }
+
+    .brand strong {
+      display: block;
+      font-size: 18px;
+      letter-spacing: 0;
+    }
+
+    .brand span {
+      display: block;
+      margin-top: 3px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .status-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      min-height: 36px;
+      padding: 0 13px;
+      border: 1px solid rgba(148, 213, 255, 0.22);
+      border-radius: 999px;
+      color: var(--ink-soft);
+      background: rgba(7, 14, 25, 0.52);
+      font-size: 13px;
+      white-space: nowrap;
+    }
+
+    .pill i {
+      width: 8px;
+      height: 8px;
+      margin-right: 8px;
+      border-radius: 50%;
+      background: var(--matrix);
+      box-shadow: 0 0 16px var(--matrix);
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
+      gap: 24px;
+      align-items: stretch;
+      margin-top: 28px;
+    }
+
+    .glass {
+      position: relative;
+      overflow: hidden;
+      border-radius: 22px;
+      padding: clamp(26px, 4vw, 46px);
+    }
+
+    .glass::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background:
+        linear-gradient(90deg, rgba(51, 184, 255, 0.16), transparent 28%),
+        radial-gradient(circle at 86% 18%, rgba(46, 232, 214, 0.18), transparent 26%);
+    }
+
+    .eyebrow {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      min-height: 34px;
+      padding: 0 12px;
+      border: 1px solid rgba(46, 232, 214, 0.28);
+      border-radius: 999px;
+      color: #bffefa;
+      background: rgba(46, 232, 214, 0.08);
+      font-size: 13px;
+    }
+
+    h1 {
+      position: relative;
+      margin: 22px 0 18px;
+      max-width: 720px;
+      font-size: clamp(42px, 6vw, 74px);
+      line-height: 1.05;
+      letter-spacing: 0;
+    }
+
+    .lead {
+      position: relative;
+      max-width: 620px;
+      color: var(--ink-soft);
+      font-size: clamp(16px, 1.6vw, 19px);
+      line-height: 1.65;
+    }
+
+    .actions {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 30px;
+    }
+
+    button,
+    .action {
+      min-height: 48px;
+      border-radius: 14px;
+      color: var(--ink);
+      font: inherit;
+      font-weight: 700;
+      cursor: default;
+    }
+
+    .primary {
+      border: 1px solid rgba(111, 217, 255, 0.7);
+      padding: 0 22px;
+      background: linear-gradient(135deg, var(--accent), #2166ff 48%, var(--signal));
+      box-shadow: 0 0 34px rgba(51, 184, 255, 0.38);
+    }
+
+    .ghost {
+      border: 1px solid rgba(148, 213, 255, 0.28);
+      padding: 0 18px;
+      background: rgba(16, 32, 52, 0.48);
+      backdrop-filter: blur(18px);
+    }
+
+    .map {
+      position: relative;
+      min-height: 590px;
+      overflow: hidden;
+      border-radius: 24px;
+      padding: 22px;
+    }
+
+    .map::before {
+      content: "";
+      position: absolute;
+      inset: 20px;
+      border: 1px solid rgba(148, 213, 255, 0.16);
+      background:
+        radial-gradient(circle at 50% 50%, rgba(51, 184, 255, 0.12), transparent 34%),
+        repeating-linear-gradient(90deg, transparent 0 42px, rgba(148, 213, 255, 0.045) 43px 44px),
+        repeating-linear-gradient(0deg, transparent 0 42px, rgba(148, 213, 255, 0.045) 43px 44px);
+      clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
+    }
+
+    .orbit {
+      position: absolute;
+      inset: 88px 80px;
+      border: 1px solid rgba(46, 232, 214, 0.20);
+      border-radius: 48%;
+      transform: rotate(-12deg);
+      box-shadow: inset 0 0 34px rgba(51, 184, 255, 0.08);
+    }
+
+    .orbit.second {
+      inset: 134px 120px;
+      transform: rotate(18deg);
+      border-color: rgba(139, 92, 246, 0.26);
+    }
+
+    .node {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--signal);
+      box-shadow: 0 0 0 7px rgba(46, 232, 214, 0.08), 0 0 24px rgba(46, 232, 214, 0.8);
+    }
+
+    .node.a { left: 20%; top: 32%; }
+    .node.b { right: 18%; top: 27%; background: var(--accent); }
+    .node.c { right: 28%; bottom: 24%; background: var(--violet); }
+    .node.d { left: 28%; bottom: 20%; background: var(--matrix); }
+
+    .window {
+      position: absolute;
+      right: 34px;
+      bottom: 34px;
+      width: min(410px, calc(100% - 68px));
+      border: 1px solid var(--line-strong);
+      border-radius: 18px;
+      background: rgba(3, 5, 10, 0.74);
+      box-shadow: 0 18px 50px rgba(0, 10, 28, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      backdrop-filter: blur(22px);
+    }
+
+    .window-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 16px;
+      border-bottom: 1px solid rgba(148, 213, 255, 0.16);
+      color: var(--ink-soft);
+      font-weight: 750;
+    }
+
+    .meter {
+      padding: 16px;
+    }
+
+    .meter-row {
+      display: grid;
+      grid-template-columns: 88px 1fr 54px;
+      gap: 12px;
+      align-items: center;
+      margin: 14px 0;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .bar {
+      height: 8px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: rgba(148, 213, 255, 0.10);
+    }
+
+    .bar span {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--accent), var(--signal));
+      box-shadow: 0 0 18px rgba(51, 184, 255, 0.42);
+    }
+
+    .metrics {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 14px;
+      margin-top: 24px;
+    }
+
+    .control {
+      min-height: 150px;
+      border-radius: 18px;
+      padding: 18px;
+    }
+
+    .control span {
+      display: block;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .control strong {
+      display: block;
+      margin-top: 18px;
+      font-size: clamp(27px, 3vw, 40px);
+      line-height: 1;
+    }
+
+    .control small {
+      display: block;
+      margin-top: 13px;
+      color: var(--matrix);
+      font-size: 13px;
+    }
+
+    @media (max-width: 980px) {
+      .topbar { align-items: flex-start; flex-direction: column; }
+      .status-row { justify-content: flex-start; }
+      .hero { grid-template-columns: 1fr; }
+      .map { min-height: 520px; }
+      .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+
+    @media (max-width: 560px) {
+      .screen { padding: 18px 14px 26px; }
+      .glass { padding: 24px 18px; border-radius: 18px; }
+      h1 { font-size: clamp(37px, 12vw, 48px); line-height: 1.08; }
+      .lead { font-size: 15px; }
+      .actions { flex-direction: column; }
+      button { width: 100%; }
+      .map { min-height: 430px; padding: 14px; }
+      .orbit { inset: 94px 34px; }
+      .orbit.second { inset: 132px 52px; }
+      .window { left: 16px; right: 16px; bottom: 18px; width: auto; }
+      .metrics { grid-template-columns: 1fr; }
+      .pill { font-size: 12px; }
+    }
+  </style>
+</head>
+<body>
+  <main class="screen" data-screen-label="01 深空指挥窗口">
+    <nav class="topbar" aria-label="主导航">
+      <div class="brand">
+        <div class="brand-mark" aria-hidden="true"></div>
+        <div>
+          <strong>玄穹控制中枢</strong>
+          <span>空间智能任务界面</span>
+        </div>
+      </div>
+      <div class="status-row">
+        <span class="pill"><i></i>主链路在线</span>
+        <span class="pill">延迟 18 毫秒</span>
+        <span class="pill">巡航模式</span>
+      </div>
+    </nav>
+
+    <section class="hero">
+      <div>
+        <article class="glass">
+          <span class="eyebrow">透明装甲界面 · 实时任务态势</span>
+          <h1>把轨道、设备和风险压进一个可读窗口。</h1>
+          <p class="lead">黑曜界面用深色阅读面承载关键文字，玻璃层负责空间深度，青蓝光路只提示系统连接与行动方向。</p>
+          <div class="actions">
+            <button class="primary">启动同步扫描</button>
+            <button class="ghost">查看节点拓扑</button>
+          </div>
+        </article>
+
+        <section class="metrics" aria-label="核心指标">
+          <div class="control"><span>节点健康</span><strong>98.7%</strong><small>12 个节点通过校验</small></div>
+          <div class="control"><span>轨道偏移</span><strong>0.03°</strong><small>处于安全阈值</small></div>
+          <div class="control"><span>数据吞吐</span><strong>4.8 TB</strong><small>过去 24 小时</small></div>
+          <div class="control"><span>风险事件</span><strong>02</strong><small style="color: var(--amber)">需要复核</small></div>
+        </section>
+      </div>
+
+      <div class="map" aria-label="轨道态势图">
+        <div class="orbit"></div>
+        <div class="orbit second"></div>
+        <i class="node a"></i>
+        <i class="node b"></i>
+        <i class="node c"></i>
+        <i class="node d"></i>
+        <section class="window">
+          <div class="window-head">
+            <span>透明状态窗口</span>
+            <span style="color: var(--signal)">同步中</span>
+          </div>
+          <div class="meter">
+            <div class="meter-row"><span>通信质量</span><div class="bar"><span style="width: 86%"></span></div><b>86%</b></div>
+            <div class="meter-row"><span>能量余量</span><div class="bar"><span style="width: 74%"></span></div><b>74%</b></div>
+            <div class="meter-row"><span>预测置信</span><div class="bar"><span style="width: 91%"></span></div><b>91%</b></div>
+            <div class="meter-row"><span>告警抑制</span><div class="bar"><span style="width: 64%; background: linear-gradient(90deg, var(--amber), var(--accent));"></span></div><b>64%</b></div>
+          </div>
+        </section>
+      </div>
+    </section>
+  </main>
+  <script>
+    window.addEventListener("message", (event) => {
+      if (event.data && event.data.type === "__edit_mode_set_keys") {
+        const edits = event.data.edits || {};
+        if (edits.accent) document.documentElement.style.setProperty("--accent", edits.accent);
+        if (edits.glass) document.documentElement.style.setProperty("--surface-glass", edits.glass);
+        if (edits.grid) document.body.style.setProperty("--grid-opacity", edits.grid);
+      }
+    });
+    const UI_DESIGN_TWEAKS = /*EDITMODE-BEGIN*/{
+      "accent": "#33b8ff",
+      "glass": "rgba(16, 32, 52, 0.62)",
+      "grid": "0.52"
+    }/*EDITMODE-END*/;
+    window.parent.postMessage({ type: "__edit_mode_available", edits: UI_DESIGN_TWEAKS }, "*");
+  </script>
+</body>
+</html>