minimal-agent 0.8.2 → 0.10.0

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

@@ -0,0 +1,15 @@
+# Precision Horizon 样张测试题
+
+使用 `Precision Horizon / 精密地平线` VI，为一款原创中文智能硬件产品设计官网首页 HTML。
+
+产品设定：`岚镜 S1`，一款面向旅行创作者、短片团队和户外记录者的智能云台相机。
+
+设计要求：
+
+- 整体要有高端产品官网的发布感：产品主角、极简高级、材质光、参数视觉化、克制留白。
+- 不能出现 Apple、DJI 或任何真实品牌内容，也不能复刻真实品牌的页面结构、字体、摄影、图标或文案。
+- 选择一种背景策略并在执行记录中说明。本轮建议测试“冷雾科技 + 材料同色系”。
+- 页面包含首屏、核心卖点、参数模块、使用场景、型号对比和结尾行动。
+- 用户可见文案必须使用简体中文，必要英文缩写如 AI、HDR、USB-C 可以保留。
+- HTML 需要包含 `data-screen-label`、唯一合法 `EDITMODE` JSON block，并通过 Tweaks 暴露强调色、背景模式或产品光感。
+- 运行静态检查、语言检查、浏览器桌面/移动截图检查，并写出诚实评审。

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

@@ -0,0 +1,26 @@
+# Precision Horizon 首轮样张评审
+
+## 验证结论
+
+本轮样张通过静态检查、语言检查和浏览器检查。桌面与移动端均无控制台错误、无横向溢出、无小于 44px 的可点击目标，`data-screen-label`、唯一 `EDITMODE` 区块和 `edits` Tweaks 载荷都存在。
+
+## 视觉评分
+
+- 指令对齐：9/10。样张明确使用产品主角、材质光、参数视觉化和冷雾科技背景，符合 `Precision Horizon / 精密地平线` 的方向。
+- 产品展示：8/10。首屏产品足够突出，原创抽象云台相机能表达设备对象；但模型仍偏图标化，若后续用于正式模板样张，可进一步增加材质细节和真实体积感。
+- 配色与背景：9/10。冷白、雾蓝、石墨灰和少量科技蓝比较协调，整体克制，不像普通 SaaS 渐变页。
+- 中文排版：8/10。标题有发布感，正文可读。桌面 H1 断行略硬，但没有溢出；移动端标题自然。
+- 参数表达：8/10。大数字和短说明清楚，能把参数转成用户收益。后续可以增加更强的剖面/轨迹参数图，进一步区别普通指标卡。
+- 移动端：7/10。无横向溢出，按钮可点；型号对比在移动端可读但不够优雅，下一轮建议改成每个型号独立卡片。
+- 原创边界：10/10。没有使用 Apple、DJI 或其他真实品牌资产、标识、产品名、页面文案或专有 UI。
+
+## 是否达到模板验证目的
+
+达到。这个样张证明 `Precision Horizon` 不只是色盘，而能指导执行者做出产品展示结构：首屏产品镜头、核心卖点、参数模块、场景展示、型号对比和结尾行动。
+
+## 下一轮优化建议
+
+1. 强化产品渲染，让设备更像真实硬件而不是应用图标。
+2. 移动端型号对比改成三张型号卡，减少表格堆叠感。
+3. 在参数区加入更明确的剖面线、轨迹线或芯片/传感器视觉，使“参数视觉化”更强。
+4. 如果作为正式模板展示样张，可以再做一个深色剧场版本，验证同一 VI 的第二种背景策略。

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/checks/browser-dark.json

@@ -0,0 +1,49 @@
+{
+  "html": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/outputs/dark.html",
+  "desktop": {
+    "viewport": {
+      "width": 1440,
+      "height": 980
+    },
+    "screenshot": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/screenshots/dark/desktop.png",
+    "console": [],
+    "inspection": {
+      "title": "玄曜 Pro 深色产品展示",
+      "screenLabels": [
+        "01 深色产品首页"
+      ],
+      "editModeBlocks": 1,
+      "hasEditModeAvailable": true,
+      "hasEditModeSetKeys": true,
+      "hasEditsPayload": true,
+      "documentWidth": 1440,
+      "viewportWidth": 1440,
+      "horizontalOverflow": false,
+      "smallTargets": []
+    }
+  },
+  "mobile": {
+    "viewport": {
+      "width": 390,
+      "height": 844
+    },
+    "screenshot": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/screenshots/dark/mobile.png",
+    "console": [],
+    "inspection": {
+      "title": "玄曜 Pro 深色产品展示",
+      "screenLabels": [
+        "01 深色产品首页"
+      ],
+      "editModeBlocks": 1,
+      "hasEditModeAvailable": true,
+      "hasEditModeSetKeys": true,
+      "hasEditsPayload": true,
+      "documentWidth": 390,
+      "viewportWidth": 390,
+      "horizontalOverflow": false,
+      "smallTargets": []
+    }
+  },
+  "issues": [],
+  "pass": true
+}

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/checks/browser-light.json

@@ -0,0 +1,49 @@
+{
+  "html": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/outputs/light.html",
+  "desktop": {
+    "viewport": {
+      "width": 1440,
+      "height": 980
+    },
+    "screenshot": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/screenshots/light/desktop.png",
+    "console": [],
+    "inspection": {
+      "title": "曜本 Air 浅色产品展示",
+      "screenLabels": [
+        "01 浅色产品首页"
+      ],
+      "editModeBlocks": 1,
+      "hasEditModeAvailable": true,
+      "hasEditModeSetKeys": true,
+      "hasEditsPayload": true,
+      "documentWidth": 1440,
+      "viewportWidth": 1440,
+      "horizontalOverflow": false,
+      "smallTargets": []
+    }
+  },
+  "mobile": {
+    "viewport": {
+      "width": 390,
+      "height": 844
+    },
+    "screenshot": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/screenshots/light/mobile.png",
+    "console": [],
+    "inspection": {
+      "title": "曜本 Air 浅色产品展示",
+      "screenLabels": [
+        "01 浅色产品首页"
+      ],
+      "editModeBlocks": 1,
+      "hasEditModeAvailable": true,
+      "hasEditModeSetKeys": true,
+      "hasEditsPayload": true,
+      "documentWidth": 390,
+      "viewportWidth": 390,
+      "horizontalOverflow": false,
+      "smallTargets": []
+    }
+  },
+  "issues": [],
+  "pass": true
+}

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/checks/language-check.txt

@@ -0,0 +1,11 @@
+语言检查目标：
+- SKILL.md
+- references/vi-precision-horizon.md
+- references/vi-precision-horizon-dark.md
+- evals/evals.json
+- precision-horizon-iteration-2/prompt.md
+- precision-horizon-iteration-2/execution_notes.md
+- precision-horizon-iteration-2/outputs/light.html
+- precision-horizon-iteration-2/outputs/dark.html
+
+结果：全部通过。

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/checks/static-dark.txt

@@ -0,0 +1,2 @@
+静态检查目标：minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/outputs/dark.html
+结果：通过，未发现问题。

package/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/checks/static-light.txt

@@ -0,0 +1,3 @@
+静态检查目标：minimal-agent/skills/ui-design/tests/e2e/runs/precision-horizon-iteration-2/outputs/light.html
+结果：通过，未发现问题。
+补充：修复中文断行与图文安全区后已复跑，仍通过。

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

@@ -0,0 +1,23 @@
+# 设计执行声明
+
+## 使用资料
+
+读取 `references/vi-precision-horizon.md` 和 `references/vi-precision-horizon-dark.md`。结合用户截图反馈，上一轮失败点是：浅色版发青、色彩单调、产品质感不足。
+
+## 浅色版策略
+
+- 背景：灰白 `#f5f5f7`、纯白和温和浅灰，不使用大面积冷蓝。
+- 活力来源：产品屏幕渐变、产品线缩略图、场景大卡和少量渐变标题。
+- 产品展示：用笔记本形态和屏幕内容表达真实产品，不再使用简化云台图标。
+- 排版：大标题近黑，正文清楚，产品横排建立真实官网感。
+
+## 深色版策略
+
+- 背景：黑、石墨、暖黑三层。
+- 强调：暖橙边缘光作为性能和材料信号，深蓝作为屏幕和影像工作区。
+- 产品展示：工作站屏幕、底座和光线反射构成中心视觉。
+- 排版：冷白标题，大参数建立冲击，避免游戏化 HUD。
+
+## 验证计划
+
+分别运行静态检查、语言检查、浏览器检查，保存桌面和移动端截图，并写出二轮评审结论。

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

@@ -0,0 +1,392 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>玄曜 Pro 深色产品展示</title>
+  <style>
+    :root {
+      --ink: #f5f5f7;
+      --muted: #a1a1aa;
+      --paper: #050506;
+      --surface: #111217;
+      --surface-raised: #1a1d24;
+      --line: rgba(245,245,247,0.16);
+      --accent: #ff7a1a;
+      --blue: #2f8cff;
+      --red: #ff3b4f;
+      --violet: #8b5cf6;
+      --shadow: rgba(0,0,0,0.56);
+      --glow: 1;
+    }
+
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      color: var(--ink);
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, sans-serif;
+      background:
+        radial-gradient(circle at 70% 20%, rgba(255,122,26, calc(0.16 * var(--glow))), transparent 30%),
+        radial-gradient(circle at 36% 18%, rgba(47,140,255, calc(0.15 * var(--glow))), transparent 34%),
+        linear-gradient(180deg, #111217 0%, #050506 54%, #030304 100%);
+      letter-spacing: 0;
+    }
+
+    a { color: inherit; text-decoration: none; }
+    .page { overflow: hidden; }
+
+    .nav {
+      height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 clamp(20px, 6vw, 96px);
+      border-bottom: 1px solid var(--line);
+      background: rgba(5,5,6,0.78);
+      color: #d8dbe2;
+      position: sticky;
+      top: 0;
+      z-index: 20;
+    }
+
+    .brand { display: flex; align-items: center; gap: 12px; font-weight: 780; }
+    .brand-mark {
+      width: 24px; height: 24px; border-radius: 9px;
+      background: linear-gradient(135deg, var(--accent), #38170a 54%, #090909);
+      box-shadow: 0 0 28px rgba(255,122,26,0.42);
+    }
+    .links { display: flex; gap: 26px; color: var(--muted); font-size: 14px; }
+
+    .hero {
+      min-height: 820px;
+      display: grid;
+      grid-template-columns: 0.9fr 1.1fr;
+      gap: clamp(28px, 5vw, 86px);
+      align-items: center;
+      padding: clamp(70px, 9vw, 132px) clamp(20px, 6vw, 96px) 72px;
+      position: relative;
+    }
+
+    .hero::after {
+      content: "";
+      position: absolute;
+      left: 10vw;
+      right: 10vw;
+      bottom: 8%;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(245,245,247,0.26), transparent);
+    }
+
+    .eyebrow {
+      color: var(--accent);
+      font-size: 13px;
+      font-weight: 780;
+      letter-spacing: 0.08em;
+      margin-bottom: 18px;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(48px, 6vw, 82px);
+      line-height: 0.98;
+      letter-spacing: 0;
+      text-wrap: balance;
+    }
+
+    .grad {
+      background: linear-gradient(105deg, #fff, #ffb060 48%, #ff7a1a 72%, #2f8cff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .lead {
+      max-width: 560px;
+      margin: 24px 0 0;
+      color: var(--muted);
+      font-size: 18px;
+      line-height: 1.62;
+    }
+
+    .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
+    .button {
+      min-height: 46px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 999px;
+      padding: 0 22px;
+      border: 1px solid var(--line);
+      background: rgba(245,245,247,0.08);
+      color: var(--ink);
+      font-weight: 760;
+    }
+    .button.primary {
+      border-color: transparent;
+      background: linear-gradient(135deg, var(--accent), #ffb060);
+      color: #140905;
+      box-shadow: 0 20px 46px rgba(255,122,26,0.24);
+    }
+
+    .machine {
+      position: relative;
+      min-height: 560px;
+      display: grid;
+      place-items: center;
+    }
+
+    .rim {
+      position: absolute;
+      width: min(620px, 82vw);
+      height: 380px;
+      border-radius: 44px;
+      background:
+        radial-gradient(circle at 70% 18%, rgba(255,122,26,0.36), transparent 28%),
+        linear-gradient(145deg, #2a2d35, #08090b 58%, #010102);
+      box-shadow:
+        inset 0 1px 0 rgba(245,245,247,0.72),
+        inset -1px -1px 0 rgba(255,122,26,0.35),
+        0 54px 100px rgba(0,0,0,0.52);
+    }
+
+    .screen {
+      position: absolute;
+      width: min(560px, 74vw);
+      height: 318px;
+      border-radius: 30px;
+      border: 8px solid #08090b;
+      background:
+        radial-gradient(circle at 74% 40%, rgba(255,59,79,0.7) 0 8%, transparent 9%),
+        radial-gradient(circle at 46% 54%, rgba(47,140,255,0.74), transparent 32%),
+        linear-gradient(145deg, #0b1220, #050506 58%);
+      box-shadow:
+        inset 0 0 0 1px rgba(245,245,247,0.72),
+        0 0 48px rgba(47,140,255,0.22),
+        0 0 72px rgba(255,122,26,0.16);
+    }
+
+    .screen::before {
+      content: "";
+      position: absolute;
+      left: 48px;
+      top: 54px;
+      width: 64%;
+      height: 10px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--accent), var(--blue), transparent);
+      box-shadow: 0 0 22px rgba(255,122,26,0.32);
+    }
+
+    .base {
+      position: absolute;
+      top: 420px;
+      width: min(360px, 54vw);
+      height: 88px;
+      border-radius: 0 0 36px 36px;
+      background: linear-gradient(90deg, #1c1f26, #565d69 48%, #16181d);
+      box-shadow: inset 0 1px 0 rgba(245,245,247,0.72), 0 34px 80px rgba(0,0,0,0.48);
+    }
+
+    .spec-strip {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 14px;
+      margin-top: 44px;
+      max-width: 720px;
+    }
+    .spec {
+      padding: 20px;
+      border: 1px solid var(--line);
+      border-radius: 22px;
+      background: rgba(245,245,247,0.06);
+    }
+    .spec b { display: block; font-size: clamp(30px, 4vw, 52px); line-height: 1; }
+    .spec span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.5; }
+
+    section { padding: clamp(76px, 9vw, 132px) clamp(20px, 6vw, 96px); }
+    .section-head { max-width: 860px; margin-bottom: 36px; }
+    .section-head h2 {
+      margin: 0;
+      font-size: clamp(38px, 5vw, 72px);
+      line-height: 1.04;
+      letter-spacing: 0;
+    }
+    .section-head p { color: var(--muted); font-size: 17px; line-height: 1.6; }
+
+    .cards {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 22px;
+    }
+    .card {
+      min-height: 390px;
+      padding: 34px;
+      border-radius: 34px;
+      border: 1px solid var(--line);
+      background:
+        radial-gradient(circle at 74% 28%, rgba(255,122,26,0.18), transparent 32%),
+        linear-gradient(145deg, rgba(245,245,247,0.09), rgba(245,245,247,0.03));
+      box-shadow: 0 28px 90px rgba(0,0,0,0.28);
+      position: relative;
+      overflow: hidden;
+    }
+    .card.blue {
+      background:
+        radial-gradient(circle at 70% 54%, rgba(47,140,255,0.28), transparent 36%),
+        linear-gradient(145deg, rgba(245,245,247,0.09), rgba(245,245,247,0.03));
+    }
+    .card h3 { margin: 0; font-size: 32px; line-height: 1.15; }
+    .card p { color: var(--muted); line-height: 1.62; }
+    .bar {
+      position: absolute;
+      left: 34px;
+      right: 34px;
+      bottom: 48px;
+      height: 8px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--accent), #ffb060, transparent);
+    }
+    .bar.blue { background: linear-gradient(90deg, var(--blue), var(--violet), transparent); }
+
+    .final {
+      text-align: center;
+      padding-bottom: 132px;
+    }
+    .final h2 {
+      margin: 0 auto;
+      max-width: 920px;
+      font-size: clamp(40px, 5.5vw, 82px);
+      line-height: 1.05;
+    }
+
+    .tweak-panel {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 30;
+      display: none;
+      gap: 8px;
+      padding: 10px;
+      border-radius: 18px;
+      background: #15171b;
+      border: 1px solid var(--line);
+    }
+    .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: #22252c; color: #fff; }
+
+    @media (max-width: 900px) {
+      .links { display: none; }
+      .hero { grid-template-columns: 1fr; min-height: auto; }
+      .machine { order: -1; min-height: 460px; }
+      .spec-strip, .cards { grid-template-columns: 1fr; }
+      .screen { height: 260px; }
+      .base { top: 356px; }
+    }
+
+    @media (max-width: 520px) {
+      .hero, section { padding-left: 18px; padding-right: 18px; }
+      h1 { font-size: clamp(44px, 14vw, 62px); }
+      .machine { min-height: 360px; }
+      .rim { height: 270px; border-radius: 30px; }
+      .screen { height: 210px; border-width: 6px; }
+      .base { top: 276px; width: 210px; height: 66px; }
+      .card { min-height: 300px; border-radius: 26px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page" data-screen-label="01 深色产品首页">
+    <nav class="nav" aria-label="主导航">
+      <div class="brand"><span class="brand-mark" aria-hidden="true"></span>玄曜 Pro</div>
+      <div class="links"><a href="#">性能</a><a href="#">显示</a><a href="#">扩展</a><a href="#">对比</a></div>
+    </nav>
+
+    <header class="hero">
+      <div>
+        <div class="eyebrow">精密地平线深色版样张</div>
+        <h1>为高负载影像而生的<br><span class="grad">专业工作站。</span></h1>
+        <p class="lead">玄曜 Pro 面向调色、三维渲染和本地 AI 工作流。黑色剧场让产品边缘、屏幕亮面和性能参数都更有冲击，但保持清楚、克制、可商用。</p>
+        <div class="actions">
+          <a class="button primary" href="#">查看配置</a>
+          <a class="button" href="#">预约演示</a>
+        </div>
+        <div class="spec-strip">
+          <div class="spec"><b>86x</b><span>本地 AI 影像处理速度提升</span></div>
+          <div class="spec"><b>1600</b><span>尼特峰值亮度，暗场细节更稳</span></div>
+          <div class="spec"><b>24h</b><span>长项目剪辑续航更从容</span></div>
+        </div>
+      </div>
+      <div class="machine" aria-label="产品视觉">
+        <div class="rim"></div>
+        <div class="screen"></div>
+        <div class="base"></div>
+      </div>
+    </header>
+
+    <main>
+      <section>
+        <div class="section-head">
+          <h2>黑色要有层次，性能要有证据。</h2>
+          <p>深色版用暖橙表达性能热力，用深蓝表达屏幕与影像工作区。每个章节只讲一个专业能力。</p>
+        </div>
+        <div class="cards">
+          <article class="card">
+            <h3>石墨机身，边缘有光。</h3>
+            <p>产品从黑底中分离出来，不靠霓虹装饰，而靠金属边缘、屏幕亮面和暖色反射建立质感。</p>
+            <div class="bar"></div>
+          </article>
+          <article class="card blue">
+            <h3>专业显示，更适合暗场。</h3>
+            <p>从阳光露台到暗色调色间，亮度、对比和低亮度表现都服务真实创作。</p>
+            <div class="bar blue"></div>
+          </article>
+        </div>
+      </section>
+
+      <section class="final">
+        <h2>性能全开，画面仍然安静。</h2>
+        <div class="actions" style="justify-content:center">
+          <a class="button primary" href="#">选择玄曜 Pro</a>
+          <a class="button" href="#">下载技术白皮书</a>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <div class="tweak-panel" id="tweakPanel" aria-label="调整">
+    <button type="button" data-accent="#ff7a1a">橙</button>
+    <button type="button" data-accent="#2f8cff">蓝</button>
+    <button type="button" data-glow="1.4">光</button>
+  </div>
+  <!--
+  /*EDITMODE-BEGIN*/
+  {"name":"Precision Horizon 深色二轮样张","edits":{"accent":"#ff7a1a","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 (edits.glow) 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 = {};
+      if (button.dataset.accent) patch.accent = button.dataset.accent;
+      if (button.dataset.glow) patch.glow = Number(button.dataset.glow);
+      applyEdits(patch);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
+    });
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+  </script>
+</body>
+</html>