minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/outputs/light.html

@@ -0,0 +1,476 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>曜本 Air 浅色产品展示</title>
+  <style>
+    :root {
+      --ink: #1d1d1f;
+      --muted: #6e6e73;
+      --paper: #f5f5f7;
+      --surface: #ffffff;
+      --soft: #fbfbfd;
+      --line: rgba(29, 29, 31, 0.12);
+      --accent: #0071e3;
+      --violet: #8b5cf6;
+      --pink: #f45bb3;
+      --green: #9bd95f;
+      --orange: #ff9f2f;
+      --shadow: rgba(29, 29, 31, 0.14);
+      --glow: 1;
+    }
+
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, sans-serif;
+      color: var(--ink);
+      background: var(--paper);
+      letter-spacing: 0;
+    }
+
+    a { color: inherit; text-decoration: none; }
+
+    .page { overflow: hidden; }
+
+    .nav {
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: clamp(18px, 3vw, 44px);
+      background: rgba(251, 251, 253, 0.92);
+      border-bottom: 1px solid rgba(0,0,0,0.05);
+      color: #424245;
+      font-size: 14px;
+      position: sticky;
+      top: 0;
+      z-index: 20;
+    }
+
+    .mark {
+      width: 20px;
+      height: 20px;
+      border-radius: 7px;
+      background: linear-gradient(145deg, #1d1d1f, #7b7b84);
+      box-shadow: inset 0 1px 0 rgba(245,245,247,0.72);
+    }
+
+    .notice {
+      height: 52px;
+      display: grid;
+      place-items: center;
+      color: #424245;
+      background: #f9f9fb;
+      font-size: 15px;
+    }
+
+    .hero {
+      padding: 92px clamp(22px, 8vw, 190px) 64px;
+      background: #fff;
+    }
+
+    .hero h1 {
+      margin: 0;
+      font-size: clamp(56px, 8vw, 82px);
+      line-height: 0.95;
+      letter-spacing: 0;
+      font-weight: 850;
+    }
+
+    .hero-top {
+      display: flex;
+      align-items: end;
+      justify-content: space-between;
+      gap: 28px;
+    }
+
+    .hero-copy {
+      max-width: 390px;
+      font-size: clamp(20px, 2.1vw, 30px);
+      line-height: 1.22;
+      font-weight: 760;
+      color: #2d2d31;
+    }
+
+    .product-strip {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(92px, 1fr));
+      gap: 26px;
+      margin-top: 82px;
+      align-items: end;
+    }
+
+    .product-item {
+      min-width: 0;
+      text-align: center;
+      color: #424245;
+      font-weight: 720;
+      font-size: 15px;
+    }
+
+    .thumb {
+      height: 78px;
+      margin: 0 auto 12px;
+      display: grid;
+      place-items: end center;
+    }
+
+    .laptop {
+      width: 88px;
+      height: 54px;
+      border-radius: 8px 8px 4px 4px;
+      border: 3px solid #24262b;
+      background:
+        linear-gradient(135deg, var(--green), #f9dc4a 36%, #46b2ff 62%, #e756bd);
+      box-shadow: 0 8px 16px rgba(0,0,0,0.18);
+      position: relative;
+    }
+
+    .laptop::after {
+      content: "";
+      position: absolute;
+      left: -9px;
+      right: -9px;
+      bottom: -8px;
+      height: 8px;
+      border-radius: 0 0 10px 10px;
+      background: linear-gradient(90deg, #d4d8df, #f9fafb, #aab1bc);
+    }
+
+    .tower, .display, .pods {
+      width: 74px;
+      height: 54px;
+      border-radius: 12px;
+      background: linear-gradient(145deg, #f4f4f6, #bcc2cc);
+      box-shadow: 0 8px 16px rgba(0,0,0,0.12);
+    }
+
+    .display {
+      width: 76px;
+      height: 58px;
+      background: linear-gradient(135deg, #c9e7ff, #79b8ff 55%, #f6f7fb);
+    }
+
+    .pods {
+      width: 54px;
+      border-radius: 999px 999px 20px 20px;
+      background: linear-gradient(145deg, #fff, #eadfcf);
+    }
+
+    .new { display: block; margin-top: 4px; color: #bf5b16; font-size: 12px; }
+
+    .lineup {
+      padding: 92px clamp(22px, 8vw, 190px);
+    }
+
+    .section-title {
+      margin: 0 0 34px;
+      font-size: clamp(42px, 5.2vw, 72px);
+      line-height: 1.03;
+      letter-spacing: 0;
+      font-weight: 850;
+    }
+
+    .gradient-word {
+      background: linear-gradient(100deg, #1d1d1f, #0071e3 42%, #8b5cf6 74%, #f45bb3);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .tabs {
+      display: inline-flex;
+      padding: 8px;
+      gap: 4px;
+      border-radius: 999px;
+      background: #e8e8ed;
+      margin-bottom: 44px;
+    }
+
+    .tab {
+      min-height: 44px;
+      padding: 0 24px;
+      display: inline-flex;
+      align-items: center;
+      border-radius: 999px;
+      color: #424245;
+      font-weight: 680;
+    }
+
+    .tab.active { background: #1d1d1f; color: #fff; }
+
+    .showcase {
+      display: grid;
+      grid-template-columns: 1.08fr 0.92fr;
+      gap: 24px;
+      align-items: stretch;
+    }
+
+    .hero-card {
+      min-height: 520px;
+      border-radius: 34px;
+      background:
+        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.95), transparent 28%),
+        linear-gradient(180deg, #eef1f5 0%, #fbfbfd 46%, #dfe4ec 100%);
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 30px 80px rgba(29,29,31,0.10);
+      border: 1px solid rgba(0,0,0,0.06);
+      padding: 36px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .hero-card h2 {
+      margin: 0;
+      max-width: 600px;
+      font-size: clamp(30px, 3.5vw, 46px);
+      line-height: 1.12;
+      letter-spacing: 0;
+      position: relative;
+      z-index: 2;
+    }
+
+    .device {
+      position: relative;
+      width: min(560px, 88%);
+      margin: 42px auto 0;
+      transform: rotateX(2deg);
+      z-index: 1;
+    }
+
+    .screen {
+      height: 310px;
+      border: 10px solid #1d1d1f;
+      border-radius: 24px 24px 14px 14px;
+      background:
+        radial-gradient(circle at 22% 26%, #f8eb5b 0 8%, transparent 9%),
+        radial-gradient(circle at 72% 34%, #f45bb3 0 12%, transparent 13%),
+        linear-gradient(135deg, #7be37a, #58c4ff 42%, #8b5cf6 72%, #ff8d4d);
+      box-shadow: inset 0 0 0 1px rgba(245,245,247,0.72), 0 38px 54px rgba(0,0,0,0.22);
+    }
+
+    .keyboard {
+      height: 28px;
+      border-radius: 0 0 18px 18px;
+      background: linear-gradient(90deg, #bfc5ce, #f9fafb 48%, #a6aeba);
+      box-shadow: 0 22px 36px rgba(0,0,0,0.16);
+    }
+
+    .info-card {
+      min-height: 248px;
+      border-radius: 34px;
+      padding: 34px;
+      background: #fff;
+      border: 1px solid rgba(0,0,0,0.06);
+      box-shadow: 0 24px 60px rgba(29,29,31,0.08);
+    }
+
+    .info-card.dark {
+      color: #f5f5f7;
+      background:
+        radial-gradient(circle at 58% 56%, rgba(0,113,227,0.55), transparent 28%),
+        linear-gradient(145deg, #050506, #111217);
+    }
+
+    .info-card h3 { margin: 0; font-size: 30px; line-height: 1.12; }
+    .info-card p { color: color-mix(in srgb, currentColor 68%, transparent); line-height: 1.6; }
+
+    .stack { display: grid; gap: 24px; }
+
+    .specs {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 18px;
+      margin-top: 26px;
+    }
+
+    .spec {
+      padding: 28px;
+      min-height: 170px;
+      border-radius: 28px;
+      background: #fff;
+      border: 1px solid rgba(0,0,0,0.06);
+    }
+
+    .spec b {
+      display: block;
+      font-size: clamp(34px, 4.4vw, 62px);
+      line-height: 1;
+      letter-spacing: 0;
+    }
+
+    .spec span { display: block; margin-top: 12px; color: var(--muted); line-height: 1.48; }
+
+    .final {
+      padding: 96px clamp(22px, 8vw, 190px) 120px;
+      text-align: center;
+      background: #fff;
+    }
+
+    .final h2 {
+      margin: 0 auto;
+      max-width: 860px;
+      font-size: clamp(38px, 5vw, 68px);
+      line-height: 1.12;
+      letter-spacing: 0;
+    }
+
+    .button {
+      min-height: 46px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 999px;
+      padding: 0 24px;
+      background: var(--accent);
+      color: #fff;
+      font-weight: 760;
+      margin-top: 28px;
+      box-shadow: 0 18px 36px rgba(0,113,227,0.24);
+    }
+
+    .tweak-panel {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 30;
+      display: none;
+      gap: 8px;
+      padding: 10px;
+      border-radius: 18px;
+      background: #fff;
+      box-shadow: 0 20px 44px rgba(0,0,0,0.16);
+    }
+    .tweak-panel[data-active="true"] { display: flex; }
+    .tweak-panel button { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
+
+    @media (max-width: 980px) {
+      .nav a:nth-child(n+5) { display: none; }
+      .hero { padding-top: 64px; }
+      .hero-top { display: block; }
+      .hero-copy { margin-top: 22px; }
+      .product-strip { grid-template-columns: repeat(4, 1fr); gap: 20px; }
+      .showcase, .specs { grid-template-columns: 1fr; }
+      .hero-card { min-height: 520px; }
+      .screen { height: 240px; }
+    }
+
+    @media (max-width: 540px) {
+      .notice { font-size: 13px; padding: 0 16px; text-align: center; }
+      .hero, .lineup, .final { padding-left: 18px; padding-right: 18px; }
+      .hero h1 { font-size: 64px; }
+      .product-strip { grid-template-columns: repeat(2, 1fr); }
+      .hero-card, .info-card, .spec { border-radius: 24px; }
+      .device { width: 96%; margin-top: 30px; }
+      .screen { height: 200px; border-width: 7px; }
+      .tab { padding: 0 16px; }
+      .tabs { max-width: 100%; overflow: auto; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page" data-screen-label="01 浅色产品首页">
+    <nav class="nav" aria-label="主导航">
+      <span class="mark" aria-hidden="true"></span>
+      <a href="#">产品</a><a href="#">创作</a><a href="#">性能</a><a href="#">对比</a><a href="#">支持</a>
+    </nav>
+    <div class="notice">教育优惠与团队采购通道已开放。</div>
+
+    <header class="hero">
+      <div class="hero-top">
+        <h1>曜本 Air</h1>
+        <p class="hero-copy">轻得可以随身走，快得可以直接创作。现在由新一代 AI 芯片驱动。</p>
+      </div>
+      <div class="product-strip" aria-label="产品线">
+        <div class="product-item"><div class="thumb"><div class="laptop"></div></div>曜本 Air<span class="new">新款</span></div>
+        <div class="product-item"><div class="thumb"><div class="laptop" style="background:linear-gradient(135deg,#111217,#333944)"></div></div>曜本 Pro<span class="new">新款</span></div>
+        <div class="product-item"><div class="thumb"><div class="display"></div></div>影屏工作站</div>
+        <div class="product-item"><div class="thumb"><div class="tower"></div></div>云盒轻量版</div>
+        <div class="product-item"><div class="thumb"><div class="tower" style="width:92px;background:linear-gradient(145deg,#3b3d42,#111217)"></div></div>对比机型</div>
+        <div class="product-item"><div class="thumb"><div class="display" style="background:linear-gradient(135deg,#fff0b8,#7ccfff,#e96bd4)"></div></div>帮我选择</div>
+        <div class="product-item"><div class="thumb"><div class="pods"></div></div>配件</div>
+      </div>
+    </header>
+
+    <main>
+      <section class="lineup">
+        <h2 class="section-title">探索这一代。<br><span class="gradient-word">轻、快、会创作。</span></h2>
+        <div class="tabs" aria-label="产品筛选">
+          <span class="tab active">全部产品</span>
+          <span class="tab">轻薄本</span>
+          <span class="tab">工作站</span>
+          <span class="tab">显示器</span>
+        </div>
+        <div class="showcase">
+          <article class="hero-card">
+            <h2>更薄机身，装下完整创作流程。</h2>
+            <div class="device" aria-hidden="true">
+              <div class="screen"></div>
+              <div class="keyboard"></div>
+            </div>
+          </article>
+          <div class="stack">
+            <article class="info-card dark">
+              <h3>本地 AI 创作，响应更快。</h3>
+              <p>图像扩展、字幕整理和素材检索都在设备侧完成，减少等待，也减少上传。</p>
+            </article>
+            <article class="info-card">
+              <h3>屏幕色彩更活跃。</h3>
+              <p>高亮度显示、细腻渐变和低反射玻璃，让浅色界面不再单调。</p>
+            </article>
+          </div>
+        </div>
+
+        <div class="specs">
+          <div class="spec"><b>18 小时</b><span>从课堂到旅途，电量覆盖完整创作日。</span></div>
+          <div class="spec"><b>1.18 kg</b><span>轻到可以天天带走，不需要专门计划。</span></div>
+          <div class="spec"><b>3.5x</b><span>AI 图像处理速度，相比上一代明显提升。</span></div>
+          <div class="spec"><b>500 尼特</b><span>户外和明亮办公室里也能看清内容。</span></div>
+        </div>
+      </section>
+
+      <section class="final">
+        <h2>选一台适合你的<br>创作电脑。</h2>
+        <a class="button" href="#">开始选择</a>
+      </section>
+    </main>
+  </div>
+
+  <div class="tweak-panel" id="tweakPanel" aria-label="调整">
+    <button type="button" data-accent="#0071e3">蓝</button>
+    <button type="button" data-accent="#8b5cf6">紫</button>
+    <button type="button" data-accent="#f45bb3">粉</button>
+  </div>
+  <!--
+  /*EDITMODE-BEGIN*/
+  {"name":"Precision Horizon 浅色二轮样张","edits":{"accent":"#0071e3","glow":1}}
+  /*EDITMODE-END*/
+  -->
+  <script>
+    const root = document.documentElement;
+    const panel = document.getElementById('tweakPanel');
+    function applyEdits(edits) {
+      if (!edits) return;
+      if (edits.accent) root.style.setProperty('--accent', edits.accent);
+      if (typeof edits.glow === 'number') root.style.setProperty('--glow', edits.glow);
+    }
+    window.addEventListener('message', (event) => {
+      const data = event.data || {};
+      if (data.type === '__activate_edit_mode') panel.dataset.active = 'true';
+      if (data.type === '__deactivate_edit_mode') panel.dataset.active = 'false';
+      if (data.type === '__edit_mode_apply') applyEdits(data.edits || data.keys);
+    });
+    panel.addEventListener('click', (event) => {
+      const button = event.target.closest('button');
+      if (!button) return;
+      const patch = { accent: button.dataset.accent };
+      applyEdits(patch);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
+    });
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+  </script>
+</body>
+</html>

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/prompt.md

@@ -0,0 +1,23 @@
+# Precision Horizon 二轮测试题
+
+基于上一轮反馈，重测 `Precision Horizon / 精密地平线` 产品展示 VI。
+
+## 浅色版
+
+为原创中文产品“曜本 Air”设计浅色产品官网首页。它是一款轻薄 AI 创作电脑。要求：
+
+- 使用灰白、纯白和祖传浅灰作为页面底色，不要整体发青。
+- 用产品线横排、活跃屏幕色、少量渐变标题和大卡片展示能力。
+- 产品图必须比上一轮更有体积和屏幕内容，不要像扁平图标。
+- 用户可见文案必须使用简体中文。
+
+## 深色版
+
+为原创中文产品“玄曜 Pro”设计深色产品官网首页。它是一款高性能影像工作站。要求：
+
+- 使用黑石墨层级、暖橙边缘光、深蓝屏幕光和大参数。
+- 不能像游戏 HUD，也不能复制任何真实品牌。
+- 首屏必须有产品边缘光和性能发布感。
+- 用户可见文案必须使用简体中文。
+
+两个样张都需要包含 `data-screen-label`、唯一合法 `EDITMODE` 区块、`edits` Tweaks 载荷，并通过静态检查、语言检查和浏览器截图检查。

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/review.md

@@ -0,0 +1,41 @@
+# Precision Horizon 二轮样张评审
+
+## 验证结论
+
+二轮样张通过静态检查、语言检查和浏览器检查。浅色版与深色版桌面、移动端均无控制台错误、无横向溢出、无小于 44px 的可点击目标，并且都包含 `data-screen-label`、唯一 `EDITMODE` 区块和 `edits` Tweaks 载荷。
+
+## 浅色版评审
+
+- 配色明显优于上一轮。页面从偏青冷雾改为灰白、纯白和温和浅灰，接近高端产品官网的基础空间。
+- 活力来源更正确：产品线缩略图、屏幕渐变、渐变标题和黑色能力卡共同提气，而不是靠背景发蓝。
+- 字体节奏更接近产品展示页：大标题、短句、分段清楚，中文可读。
+- 产品图比上一轮更有真实对象感，屏幕、键盘和阴影让产品有体积。
+- 不足：桌面主展示卡里标题和产品图距离略近，正式样张可以把产品图再下移或让标题更短；产品缩略图仍偏抽象，可以继续增加材质和屏幕细节。
+
+## 深色版评审
+
+- 深色方向成立。黑、石墨、暖黑形成了层级，橙色边缘光和蓝色屏幕光比上一轮浅色方案更有发布感。
+- 产品边缘光、屏幕亮面和底座让设备从黑底中分离出来，没有变成一片死黑。
+- 大参数区域有冲击，但没有做成游戏界面或电影道具。
+- 移动端可读性较好，产品图和标题顺序自然。
+- 不足：深色卡片下半部分还可以加入更多具体产品细节，例如接口、散热纹理或屏幕界面，进一步提高硬件可信度。
+
+## 对 VI 的反推
+
+这次验证说明 `Precision Horizon` 应拆成两个清楚执行路径：
+
+1. 浅色版：灰白基础、活跃产品图、少量渐变字、产品线横排和大卡片。
+2. 深色版：黑石墨剧场、产品边缘光、暖橙/深蓝材质色、大参数和专业场景。
+
+这一轮已经把“不要发青、不要单调、要有产品官网活力和深色发布感”的问题写入 VI 文档和深色版 reference。下一轮如果继续优化，优先提升产品渲染细节，而不是再调整色盘。
+
+## 字体与构图补充修复
+
+根据用户对截图的反馈，二轮样张又补了一次版式修正：
+
+- 修复结尾行动标题的中文断行，避免“脑”这类单字孤行。
+- 修复浅色大卡片中文字与产品图挤压的问题，改为文字区和产品图区明确分区。
+- 在 `vi-precision-horizon.md` 中新增“中文断行与图文安全区”规则，要求检查孤字行、手动控制换行、给图文保留安全距离。
+- 在 `vi-precision-horizon-dark.md` 中同步新增深色版中文断行和图文安全区规则，避免深色大标题因为字重和光效显得拥挤。
+
+修正后的浅色桌面和移动端截图均已重新生成，浏览器检查继续通过。

package/skills/ui-design/tests/e2e/runs/solar-relay-iteration-1/checks/browser-check.json

@@ -0,0 +1,54 @@
+{
+  "pass": true,
+  "console": [],
+  "desktop": {
+    "title": "光径加速器 - 日冕中继样张",
+    "labels": [
+      "01 日冕中继首页"
+    ],
+    "viewport": {
+      "width": 1440,
+      "height": 980
+    },
+    "scrollWidth": 1440,
+    "hasHorizontalOverflow": false,
+    "buttons": [
+      {
+        "text": "开启安全加速",
+        "width": 134,
+        "height": 46
+      },
+      {
+        "text": "查看路径状态",
+        "width": 134,
+        "height": 46
+      }
+    ],
+    "errors": []
+  },
+  "mobile": {
+    "title": "光径加速器 - 日冕中继样张",
+    "labels": [
+      "01 日冕中继首页"
+    ],
+    "viewport": {
+      "width": 390,
+      "height": 844
+    },
+    "scrollWidth": 390,
+    "hasHorizontalOverflow": false,
+    "buttons": [
+      {
+        "text": "开启安全加速",
+        "width": 362,
+        "height": 46
+      },
+      {
+        "text": "查看路径状态",
+        "width": 362,
+        "height": 46
+      }
+    ],
+    "errors": []
+  }
+}

package/skills/ui-design/tests/e2e/runs/solar-relay-iteration-1/checks/language-check.txt

@@ -0,0 +1,5 @@
+通过: minimal-agent/skills/ui-design/SKILL.md
+通过: minimal-agent/skills/ui-design/references/vi-solar-relay.md
+通过: minimal-agent/skills/ui-design/tests/e2e/runs/solar-relay-iteration-1/prompt.md
+通过: minimal-agent/skills/ui-design/tests/e2e/runs/solar-relay-iteration-1/review.md
+通过: minimal-agent/skills/ui-design/tests/e2e/runs/solar-relay-iteration-1/outputs/index.html

package/skills/ui-design/tests/e2e/runs/solar-relay-iteration-1/checks/quick-validate.txt

@@ -0,0 +1 @@
+Skill is valid!

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

@@ -0,0 +1,2 @@
+ui-design artifact check: minimal-agent/skills/ui-design/tests/e2e/runs/solar-relay-iteration-1/outputs/index.html
+WARNING: Low-opacity white glass surface found. Ensure text remains readable over gradients.