minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/obsidian-optics-iteration-1/checks/static-check.txt

@@ -0,0 +1,2 @@
+ui-design artifact check: minimal-agent/skills/ui-design/tests/e2e/runs/obsidian-optics-iteration-1/outputs/index.html
+OK: no issues found.

package/skills/ui-design/tests/e2e/runs/obsidian-optics-iteration-1/outputs/index.html

@@ -0,0 +1,682 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Obsidian Optics 黑曜影像样张</title>
+  <style>
+    :root {
+      --ink: #f4f5f6;
+      --ink-soft: #d8dde3;
+      --muted: #8c939d;
+      --paper: #07080a;
+      --surface: #101216;
+      --surface-raised: #171a20;
+      --surface-metal: #20242b;
+      --line: rgba(244, 245, 246, 0.12);
+      --line-strong: rgba(244, 245, 246, 0.22);
+      --accent: #e21b2d;
+      --accent-deep: #7b0f18;
+      --optic: #b9c7d6;
+      --shadow: rgba(0, 0, 0, 0.42);
+      --mono: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
+      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 78% 18%, rgba(185, 199, 214, 0.16), transparent 28%),
+        radial-gradient(circle at 18% 6%, rgba(226, 27, 45, 0.12), transparent 22%),
+        linear-gradient(135deg, #050607 0%, #0b0d10 42%, #141820 100%);
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      background:
+        linear-gradient(rgba(244, 245, 246, 0.035) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(244, 245, 246, 0.026) 1px, transparent 1px);
+      background-size: 64px 64px;
+      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 86%);
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    .page {
+      width: min(1180px, calc(100vw - 32px));
+      margin: 0 auto;
+      padding: 28px 0 56px;
+    }
+
+    .panel {
+      border: 1px solid var(--line);
+      background:
+        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
+        linear-gradient(180deg, var(--surface-raised), var(--surface));
+      box-shadow: 0 24px 72px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      padding: 12px 14px;
+      border-radius: 16px;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+    }
+
+    .mark {
+      position: relative;
+      width: 42px;
+      height: 42px;
+      border: 1px solid var(--line-strong);
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 50% 50%, rgba(185, 199, 214, 0.45), transparent 18%),
+        conic-gradient(from 18deg, rgba(226, 27, 45, 0.9), rgba(244, 245, 246, 0.18), rgba(185, 199, 214, 0.28), rgba(226, 27, 45, 0.9));
+      box-shadow: 0 0 28px rgba(226, 27, 45, 0.12);
+    }
+
+    .mark::after {
+      content: "";
+      position: absolute;
+      inset: 12px;
+      border-radius: 50%;
+      background: var(--paper);
+      border: 1px solid var(--line);
+    }
+
+    .brand strong {
+      display: block;
+      font-size: 15px;
+    }
+
+    .brand span,
+    .tag,
+    .spec-label {
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 12px;
+      letter-spacing: 0.08em;
+    }
+
+    .nav-tags {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+
+    .tag {
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      padding: 8px 11px;
+      background: rgba(255, 255, 255, 0.035);
+      white-space: nowrap;
+    }
+
+    .tag.record {
+      color: var(--ink);
+      border-color: rgba(226, 27, 45, 0.46);
+    }
+
+    .tag.record::before {
+      content: "";
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      margin-right: 7px;
+      border-radius: 50%;
+      background: var(--accent);
+      box-shadow: 0 0 16px rgba(226, 27, 45, 0.75);
+      vertical-align: 1px;
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
+      gap: 24px;
+      margin-top: 26px;
+    }
+
+    .hero-main,
+    .camera-card,
+    .section {
+      border-radius: 18px;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .hero-main {
+      padding: clamp(30px, 5vw, 58px);
+      min-height: 590px;
+    }
+
+    .hero-main::after {
+      content: "";
+      position: absolute;
+      right: -92px;
+      bottom: -118px;
+      width: 360px;
+      height: 360px;
+      border-radius: 50%;
+      border: 1px solid rgba(185, 199, 214, 0.22);
+      background:
+        radial-gradient(circle, transparent 0 34%, rgba(185, 199, 214, 0.11) 35% 36%, transparent 37%),
+        repeating-conic-gradient(from 0deg, rgba(244, 245, 246, 0.13) 0deg 2deg, transparent 2deg 9deg);
+      opacity: 0.78;
+    }
+
+    .kicker {
+      margin: 0 0 18px;
+      color: var(--accent);
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: 0.12em;
+    }
+
+    h1,
+    h2,
+    h3,
+    p {
+      margin-top: 0;
+    }
+
+    h1 {
+      position: relative;
+      z-index: 1;
+      max-width: 760px;
+      margin-bottom: 22px;
+      font-size: clamp(42px, 6vw, 76px);
+      line-height: 0.99;
+      letter-spacing: 0;
+      text-wrap: balance;
+    }
+
+    .lead {
+      position: relative;
+      z-index: 1;
+      max-width: 620px;
+      margin-bottom: 30px;
+      color: var(--ink-soft);
+      font-size: clamp(16px, 1.7vw, 19px);
+      line-height: 1.62;
+      font-weight: 600;
+    }
+
+    .actions {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .button {
+      border: 0;
+      border-radius: 10px;
+      padding: 13px 18px;
+      cursor: pointer;
+      font-weight: 800;
+    }
+
+    .button.primary {
+      color: white;
+      background:
+        linear-gradient(135deg, var(--accent), #ff4050 58%, var(--accent-deep));
+      box-shadow: 0 16px 34px rgba(226, 27, 45, 0.24);
+    }
+
+    .button.secondary {
+      color: var(--ink);
+      border: 1px solid var(--line-strong);
+      background: rgba(255, 255, 255, 0.045);
+    }
+
+    .spec-strip {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 10px;
+      margin-top: 42px;
+    }
+
+    .spec {
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      padding: 15px;
+      background: rgba(255, 255, 255, 0.035);
+    }
+
+    .spec b {
+      display: block;
+      color: var(--ink);
+      font-family: var(--mono);
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .spec span {
+      display: block;
+      margin-top: 8px;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .camera-card {
+      padding: 24px;
+      display: grid;
+      align-content: space-between;
+      gap: 18px;
+    }
+
+    .device {
+      border: 1px solid var(--line-strong);
+      border-radius: 18px;
+      min-height: 250px;
+      background:
+        linear-gradient(145deg, rgba(244, 245, 246, 0.08), transparent 34%),
+        linear-gradient(180deg, #1b1f26, #0b0d10);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .device::before {
+      content: "";
+      position: absolute;
+      inset: 42px auto auto 50%;
+      width: 156px;
+      height: 156px;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      border: 1px solid rgba(185, 199, 214, 0.38);
+      background:
+        radial-gradient(circle, rgba(185, 199, 214, 0.48) 0 10%, #07080a 11% 34%, rgba(185, 199, 214, 0.16) 35% 36%, transparent 37%),
+        conic-gradient(from 12deg, rgba(226, 27, 45, 0.28), rgba(244, 245, 246, 0.08), rgba(185, 199, 214, 0.2), rgba(226, 27, 45, 0.28));
+      box-shadow: inset 0 0 40px rgba(185, 199, 214, 0.12), 0 0 52px rgba(185, 199, 214, 0.08);
+    }
+
+    .device::after {
+      content: "REC";
+      position: absolute;
+      left: 18px;
+      top: 18px;
+      color: var(--accent);
+      font-family: var(--mono);
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+    }
+
+    .readout {
+      display: grid;
+      gap: 10px;
+    }
+
+    .readout-row {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      border-bottom: 1px solid var(--line);
+      padding: 10px 0;
+      font-family: var(--mono);
+      font-size: 13px;
+    }
+
+    .readout-row span:first-child {
+      color: var(--muted);
+    }
+
+    .readout-row span:last-child {
+      color: var(--ink);
+    }
+
+    .record-line {
+      height: 8px;
+      border-radius: 999px;
+      background: rgba(244, 245, 246, 0.08);
+      overflow: hidden;
+    }
+
+    .record-line span {
+      display: block;
+      width: 68%;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--accent-deep), var(--accent), #ff5a66);
+    }
+
+    .section {
+      margin-top: 24px;
+      padding: clamp(22px, 3vw, 32px);
+    }
+
+    .section-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
+      gap: 24px;
+      align-items: end;
+      margin-bottom: 20px;
+    }
+
+    .section-head h2 {
+      margin-bottom: 0;
+      font-size: clamp(26px, 3.2vw, 42px);
+      line-height: 1.12;
+      text-wrap: balance;
+    }
+
+    .section-head p {
+      margin-bottom: 0;
+      color: var(--muted);
+      line-height: 1.55;
+      font-weight: 650;
+    }
+
+    .swatches,
+    .cards {
+      display: grid;
+      gap: 14px;
+    }
+
+    .swatches {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    .swatch,
+    .card {
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 16px;
+      background: rgba(255, 255, 255, 0.035);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    }
+
+    .swatch {
+      min-height: 138px;
+      display: grid;
+      align-content: end;
+    }
+
+    .swatch b,
+    .card h3 {
+      margin-bottom: 8px;
+      color: var(--ink);
+    }
+
+    .swatch span,
+    .card p {
+      color: var(--muted);
+      line-height: 1.55;
+      font-weight: 650;
+    }
+
+    .cards {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .card {
+      min-height: 220px;
+      background:
+        linear-gradient(145deg, rgba(244, 245, 246, 0.06), rgba(244, 245, 246, 0.02)),
+        #101216;
+    }
+
+    .status-grid {
+      display: grid;
+      gap: 10px;
+    }
+
+    .status-line {
+      display: grid;
+      grid-template-columns: 84px 1fr;
+      gap: 12px;
+      align-items: center;
+      font-family: var(--mono);
+      font-size: 12px;
+    }
+
+    .bar {
+      height: 8px;
+      border-radius: 999px;
+      background: rgba(244, 245, 246, 0.08);
+      overflow: hidden;
+    }
+
+    .bar span {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--optic), var(--accent));
+    }
+
+    .tweaks-panel {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 20;
+      width: min(300px, calc(100vw - 36px));
+      display: none;
+      gap: 12px;
+      padding: 16px;
+      border-radius: 14px;
+      border: 1px solid var(--line);
+      background: var(--surface-raised);
+      box-shadow: 0 18px 52px var(--shadow);
+    }
+
+    .tweaks-panel label {
+      display: grid;
+      gap: 6px;
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    @media (max-width: 900px) {
+      .page {
+        width: min(100% - 24px, 680px);
+        padding-top: 14px;
+      }
+
+      .nav,
+      .hero,
+      .section-head,
+      .cards {
+        grid-template-columns: 1fr;
+      }
+
+      .nav {
+        display: grid;
+      }
+
+      .nav-tags {
+        justify-content: flex-start;
+      }
+
+      .hero {
+        display: grid;
+      }
+
+      .spec-strip,
+      .swatches {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 520px) {
+      h1 {
+        font-size: clamp(38px, 12vw, 56px);
+        line-height: 1.04;
+      }
+
+      .hero-main {
+        min-height: auto;
+      }
+
+      .spec-strip,
+      .swatches {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page" data-screen-label="01 黑曜影像样张">
+    <nav class="nav panel" aria-label="主导航">
+      <div class="brand">
+        <div class="mark" aria-hidden="true"></div>
+        <div>
+          <strong>影澈 X1</strong>
+          <span>Obsidian Optics 黑曜影像</span>
+        </div>
+      </div>
+      <div class="nav-tags">
+        <span class="tag record">待录制</span>
+        <span class="tag">8K RAW</span>
+        <span class="tag">120 FPS</span>
+        <span class="tag">16 档动态范围</span>
+      </div>
+    </nav>
+
+    <section class="hero">
+      <div class="hero-main panel">
+        <p class="kicker">黑白红 / 精密影像硬件</p>
+        <h1>轻量机身，保留电影级画面控制。</h1>
+        <p class="lead">这张样张测试黑曜影像 VI：黑色必须有石墨层次，白字必须清楚，红色只作为录制信号和关键行动，而不是沉重的情绪涂层。</p>
+        <div class="actions">
+          <button class="button primary" type="button">查看机身规格</button>
+          <button class="button secondary" type="button">进入控制台</button>
+          <span class="tag">冷白文字 / 石墨暗面 / 信号红</span>
+        </div>
+        <div class="spec-strip" aria-label="核心规格">
+          <div class="spec"><b>8K</b><span>开放格式 RAW</span></div>
+          <div class="spec"><b>120</b><span>最高帧率 FPS</span></div>
+          <div class="spec"><b>16+</b><span>动态范围</span></div>
+          <div class="spec"><b>640</b><span>原生 ISO</span></div>
+        </div>
+      </div>
+
+      <aside class="camera-card panel" aria-label="电影机控制面板">
+        <div class="device" aria-hidden="true"></div>
+        <div class="readout">
+          <div class="readout-row"><span>时间码</span><span>01:24:18:06</span></div>
+          <div class="readout-row"><span>快门角度</span><span>180°</span></div>
+          <div class="readout-row"><span>色彩空间</span><span>影像宽容模式</span></div>
+          <div class="readout-row"><span>存储</span><span>双卡冗余写入</span></div>
+        </div>
+        <div class="record-line" aria-label="录制缓存"><span></span></div>
+      </aside>
+    </section>
+
+    <section class="section panel" aria-label="色彩识别">
+      <div class="section-head">
+        <h2>黑白红要像设备信号，而不是沉重主题色。</h2>
+        <p>红色只用于录制、选中和关键行动；主体依靠石墨渐变、冷白文字、镜头冷光和细线建立专业感。</p>
+      </div>
+      <div class="swatches">
+        <div class="swatch" style="background:#07080a"><b>深背景</b><span>#07080a</span></div>
+        <div class="swatch" style="background:#101216"><b>主面板</b><span>#101216</span></div>
+        <div class="swatch" style="background:#171a20"><b>抬升面板</b><span>#171a20</span></div>
+        <div class="swatch" style="background:#f4f5f6;color:#07080a"><b style="color:#07080a">冷白文字</b><span style="color:#30343a">#f4f5f6</span></div>
+        <div class="swatch" style="background:#e21b2d"><b>信号红</b><span>#e21b2d</span></div>
+        <div class="swatch" style="background:#b9c7d6;color:#07080a"><b style="color:#07080a">镜头冷光</b><span style="color:#30343a">#b9c7d6</span></div>
+      </div>
+    </section>
+
+    <section class="section panel" aria-label="组件识别">
+      <div class="section-head">
+        <h2>参数模块、录制状态和光学母题建立器材识别。</h2>
+        <p>模板要科技一点但不沉重：用空间、细线、模块拼接和冷光高光，而不是满屏黑红或厚重金属纹理。</p>
+      </div>
+      <div class="cards">
+        <article class="card">
+          <h3>参数清晰</h3>
+          <p>规格信息用等宽感标签和分组面板呈现，适合展示帧率、动态范围、编码、接口和电源状态。</p>
+        </article>
+        <article class="card">
+          <h3>录制纪律</h3>
+          <div class="status-grid">
+            <div class="status-line"><span>缓存</span><div class="bar"><span style="width:68%"></span></div></div>
+            <div class="status-line"><span>温度</span><div class="bar"><span style="width:42%"></span></div></div>
+            <div class="status-line"><span>电量</span><div class="bar"><span style="width:82%"></span></div></div>
+          </div>
+        </article>
+        <article class="card">
+          <h3>原创边界</h3>
+          <p>这个方向只借鉴高端影像硬件的工业科技感，不使用真实品牌名称、标识、机身造型或专有排版。</p>
+        </article>
+      </div>
+    </section>
+  </main>
+
+  <aside class="tweaks-panel" aria-label="调整">
+    <strong>调整</strong>
+    <label>信号红 <input data-tweak-primary type="color" value="#e21b2d"></label>
+    <label>暗面亮度 <input data-tweak-lift type="range" min="8" max="24" value="16"></label>
+  </aside>
+
+  <script>
+    const initialTweaks = /*EDITMODE-BEGIN*/{
+      "primaryColor": "#e21b2d",
+      "surfaceLift": 16
+    }/*EDITMODE-END*/;
+    window.UI_DESIGN_TWEAKS = initialTweaks;
+
+    const root = document.documentElement;
+    const panel = document.querySelector('.tweaks-panel');
+
+    function applyTweaks(values) {
+      if (values.primaryColor) root.style.setProperty('--accent', values.primaryColor);
+      if (values.surfaceLift) {
+        const lift = Math.max(8, Math.min(24, Number(values.surfaceLift)));
+        root.style.setProperty('--surface-raised', `rgb(${lift + 7}, ${lift + 10}, ${lift + 16})`);
+      }
+    }
+
+    window.addEventListener('message', (event) => {
+      const data = event.data || {};
+      if (data.type === '__activate_edit_mode') panel.style.display = 'grid';
+      if (data.type === '__deactivate_edit_mode') panel.style.display = 'none';
+      if (data.type === '__edit_mode_set_keys' && data.keys) applyTweaks(data.keys);
+    });
+
+    document.querySelector('[data-tweak-primary]').addEventListener('input', (event) => {
+      const keys = { primaryColor: event.target.value };
+      applyTweaks(keys);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', keys }, '*');
+    });
+
+    document.querySelector('[data-tweak-lift]').addEventListener('input', (event) => {
+      const keys = { surfaceLift: Number(event.target.value) };
+      applyTweaks(keys);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', keys }, '*');
+    });
+
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,13 @@
+# Obsidian Optics 黑曜影像测试题
+
+使用 `ui-design` skill 和 `references/vi-obsidian-optics.md`，为一款原创电影机或影像控制台创建一个中文 HTML 页面，用来测试深色摄影器材黑白红 VI 的视觉识别效果。
+
+要求：
+
+- 页面必须使用简体中文，保留必要英文名称 `Obsidian Optics`、`RAW`、`ISO`、`FPS`。
+- 整体黑白为主，少量红色作为录制信号、选中状态和关键行动。
+- 视觉要像高端影像硬件，但不能沉重、压抑或游戏化。
+- 不出现 RED、红龙或任何真实摄影品牌内容。
+- 页面需要包含首屏、参数面板、色彩识别、组件样张、录制状态和镜头/规格视觉母题。
+- 暴露至少一个 Tweaks 设计维度，用于调整红色强调色或暗面亮度。
+- 运行 `check_ui_artifact.py`、`check_language_policy.py`，并用浏览器截图检查桌面和移动端。