minimal-agent 0.9.0 → 0.10.0

package/skills/ui-design/tests/e2e/runs/iteration-1/deck/outputs/deck.html

@@ -0,0 +1,451 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>舒适视觉 第三季度港口韧性简报</title>
+  <style>
+    :root {
+      --ink: #102022;
+      --paper: #101819;
+      --surface: #f4f1e7;
+      --fog: #dfe7df;
+      --muted: #687675;
+      --line: rgba(16, 32, 34, 0.18);
+      --accent: #c85f3d;
+      --signal: #1f9eaa;
+      --amber: #c89c35;
+      --danger: #9f3d36;
+      --radius: 8px;
+      font-family: "Aptos", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--paper);
+      color: var(--ink);
+      overflow: hidden;
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    .stage-shell {
+      width: 100vw;
+      height: 100vh;
+      display: grid;
+      place-items: center;
+      overflow: hidden;
+      background:
+        radial-gradient(circle at 20% 12%, rgba(31, 158, 170, 0.2), transparent 28%),
+        #101819;
+    }
+
+    .stage-frame {
+      width: min(100vw, calc(100vh * 16 / 9));
+      aspect-ratio: 16 / 9;
+      position: relative;
+    }
+
+    .scaled-stage {
+      width: 1920px;
+      height: 1080px;
+      transform-origin: top left;
+      background: var(--surface);
+      overflow: hidden;
+      position: absolute;
+      left: 0;
+      top: 0;
+      box-shadow: 0 24px 90px rgba(0, 0, 0, 0.38);
+    }
+
+    .slide {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      padding: 86px 104px;
+      background:
+        linear-gradient(90deg, rgba(16, 32, 34, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
+        var(--surface);
+    }
+
+    .slide[hidden] {
+      display: none;
+    }
+
+    .kicker {
+      margin: 0 0 20px;
+      color: var(--accent);
+      font-size: 24px;
+      font-weight: 800;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+
+    h1,
+    h2 {
+      margin: 0;
+      letter-spacing: 0;
+    }
+
+    h1 {
+      max-width: 1180px;
+      font-size: 124px;
+      line-height: 0.9;
+    }
+
+    h2 {
+      font-size: 84px;
+      line-height: 0.96;
+    }
+
+    p {
+      margin: 0;
+      color: var(--muted);
+      font-size: 32px;
+      line-height: 1.28;
+    }
+
+    .title-slide {
+      grid-template-columns: 1.2fr 0.8fr;
+      align-items: end;
+      gap: 80px;
+    }
+
+    .seal {
+      align-self: center;
+      justify-self: center;
+      width: 520px;
+      height: 520px;
+      border: 2px solid var(--ink);
+      border-radius: 50%;
+      background:
+        radial-gradient(circle, var(--signal) 0 16px, transparent 17px),
+        repeating-linear-gradient(135deg, transparent 0 17px, rgba(16, 32, 34, 0.24) 18px 20px),
+        var(--fog);
+      box-shadow: inset 0 0 0 48px var(--surface), inset 0 0 0 50px var(--ink);
+    }
+
+    .footer-line {
+      position: absolute;
+      left: 104px;
+      right: 104px;
+      bottom: 58px;
+      display: flex;
+      justify-content: space-between;
+      color: var(--muted);
+      font-size: 22px;
+      border-top: 1px solid var(--line);
+      padding-top: 18px;
+    }
+
+    .two-col {
+      grid-template-columns: 0.8fr 1.2fr;
+      gap: 72px;
+      align-items: center;
+    }
+
+    .metric-stack {
+      display: grid;
+      gap: 18px;
+    }
+
+    .metric {
+      border-left: 8px solid var(--accent);
+      padding: 22px 28px;
+      background: rgba(223, 231, 223, 0.58);
+    }
+
+    .metric strong {
+      display: block;
+      font-size: 70px;
+      line-height: 0.95;
+    }
+
+    .metric span {
+      display: block;
+      margin-top: 10px;
+      color: var(--muted);
+      font-size: 24px;
+    }
+
+    .risk-map {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      min-height: 620px;
+      border: 1px solid var(--line);
+    }
+
+    .risk-map div {
+      padding: 24px;
+      border: 1px solid var(--line);
+      display: grid;
+      align-content: space-between;
+      background: rgba(251, 250, 243, 0.8);
+    }
+
+    .risk-map strong {
+      font-size: 24px;
+    }
+
+    .risk-map span {
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      background: var(--signal);
+    }
+
+    .risk-map .hot span { background: var(--danger); }
+    .risk-map .warm span { background: var(--amber); }
+    .timeline {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 18px;
+      align-self: end;
+    }
+
+    .step {
+      min-height: 430px;
+      padding: 28px;
+      border: 1px solid var(--line);
+      background: rgba(251, 250, 243, 0.75);
+      display: grid;
+      align-content: space-between;
+    }
+
+    .step b {
+      font-size: 30px;
+    }
+
+    .step p {
+      font-size: 26px;
+    }
+
+    .decision {
+      grid-template-columns: 1fr 1fr;
+      gap: 34px;
+      align-items: stretch;
+    }
+
+    .decision-card {
+      padding: 42px;
+      background: var(--ink);
+      color: var(--surface);
+      border-radius: var(--radius);
+      display: grid;
+      align-content: space-between;
+    }
+
+    .decision-card p {
+      color: rgba(244, 241, 231, 0.76);
+    }
+
+    .controls {
+      position: fixed;
+      left: 40px;
+      bottom: 10px;
+      z-index: 30;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .controls button {
+      border: 1px solid rgba(244, 241, 231, 0.32);
+      border-radius: 999px;
+      background: rgba(16, 24, 25, 0.86);
+      color: var(--surface);
+      padding: 10px 14px;
+      cursor: pointer;
+    }
+
+    .counter {
+      color: var(--surface);
+      min-width: 58px;
+      text-align: center;
+      font-size: 14px;
+    }
+
+    .tweaks-panel {
+      position: fixed;
+      right: 20px;
+      bottom: 20px;
+      z-index: 40;
+      width: min(320px, calc(100vw - 40px));
+      display: none;
+      gap: 12px;
+      padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--surface);
+      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
+    }
+
+    .tweaks-panel[data-open="true"] {
+      display: grid;
+    }
+  </style>
+</head>
+<body>
+  <div class="stage-shell">
+    <div class="stage-frame">
+    <main class="scaled-stage" id="scaled-stage">
+      <section class="slide title-slide" data-screen-label="01 标题">
+        <div>
+          <p class="kicker">第三季度港口韧性简报</p>
+          <h1>港口容量已经变成一套天气系统。</h1>
+          <p style="margin-top: 34px; max-width: 860px;">面向管理层的泊位压力、排放暴露和两项关键运营决策简报，用于保护九月计划。</p>
+        </div>
+        <div class="seal" aria-hidden="true"></div>
+        <div class="footer-line"><span>舒适视觉</span><span>管理层材料</span></div>
+      </section>
+
+      <section class="slide two-col" data-screen-label="02 运营态势">
+        <div>
+          <p class="kicker">运营态势</p>
+          <h2>三项约束正在压缩同一个 36 小时窗口。</h2>
+        </div>
+        <div class="metric-stack">
+          <div class="metric"><strong>18</strong><span>周五重新开放前的到港船舶</span></div>
+          <div class="metric"><strong>11h</strong><span>横风观察前的稳定吊装天气</span></div>
+          <div class="metric"><strong>4.8t</strong><span>岸电顺序错失后的 CO2e 暴露</span></div>
+        </div>
+        <div class="footer-line"><span>02 / 05</span><span>队列、天气、排放</span></div>
+      </section>
+
+      <section class="slide two-col" data-screen-label="03 风险网格">
+        <div>
+          <p class="kicker">风险网格</p>
+          <h2>3 号泊位是承重决策。</h2>
+          <p style="margin-top: 28px;">最高风险单元同时承受冷链队列压力和最窄的安全吊装天气窗口。</p>
+        </div>
+        <div class="risk-map" aria-label="风险网格">
+          <div><strong>B1 散货</strong><span></span></div>
+          <div class="warm"><strong>B2 谷物</strong><span></span></div>
+          <div class="hot"><strong>B3 冷链</strong><span></span></div>
+          <div><strong>B4 混合</strong><span></span></div>
+          <div class="warm"><strong>B5 维修</strong><span></span></div>
+          <div><strong>B6 燃油</strong><span></span></div>
+          <div><strong>B7 预留</strong><span></span></div>
+          <div class="warm"><strong>航道</strong><span></span></div>
+          <div><strong>堆场闸口</strong><span></span></div>
+        </div>
+        <div class="footer-line"><span>03 / 05</span><span>风险集中</span></div>
+      </section>
+
+      <section class="slide" data-screen-label="04 行动窗口">
+        <div>
+          <p class="kicker">行动窗口</p>
+          <h2>用四个动作保护计划。</h2>
+        </div>
+        <div class="timeline">
+          <article class="step"><b>现在</b><p>在阵风阈值前提前 Nereid Star 与冷链货流。</p></article>
+          <article class="step"><b>+3h</b><p>暂缓疏浚通行，直到内航道水流转向。</p></article>
+          <article class="step"><b>+8h</b><p>为岸电例外保留 7 号泊位。</p></article>
+          <article class="step"><b>周五</b><p>吊装天气恢复后重新开放散货序列。</p></article>
+        </div>
+        <div class="footer-line"><span>04 / 05</span><span>执行序列</span></div>
+      </section>
+
+      <section class="slide decision" data-screen-label="05 决策">
+        <div>
+          <p class="kicker">管理层决策</p>
+          <h2>两项批准可以解锁韧性计划。</h2>
+        </div>
+        <div class="decision-card">
+          <h2 style="font-size: 70px;">批准泊位互换</h2>
+          <p>在风带关闭安全吊装窗口前，将冷链船序提前到低优先级散货之前。</p>
+        </div>
+        <div class="decision-card">
+          <h2 style="font-size: 70px;">预留岸电例外</h2>
+          <p>保留 7 号泊位，作为避免船舶使用辅机时间的排放缓冲阀。</p>
+        </div>
+        <div class="footer-line"><span>05 / 05</span><span>决策记录</span></div>
+      </section>
+    </main>
+    </div>
+  </div>
+
+  <nav class="controls" aria-label="幻灯片控制">
+    <button type="button" id="prev-slide">上一页</button>
+    <span class="counter" id="slide-counter">1 / 5</span>
+    <button type="button" id="next-slide">下一页</button>
+  </nav>
+
+  <aside class="tweaks-panel" aria-label="调整">
+    <strong>调整</strong>
+    <label>强调色 <input data-tweak-primary type="color" value="#c85f3d"></label>
+  </aside>
+
+  <script>
+    const UI_DESIGN_TWEAKS = /*EDITMODE-BEGIN*/{
+      "primaryColor": "#c85f3d",
+      "variant": "executive"
+    }/*EDITMODE-END*/;
+
+    const stage = document.getElementById('scaled-stage');
+    const slides = Array.from(document.querySelectorAll('.slide'));
+    const counter = document.getElementById('slide-counter');
+    const tweaksPanel = document.querySelector('.tweaks-panel');
+    let activeSlide = Number(localStorage.getItem('comfort-vision-active-slide') || 0);
+
+    function fitStage() {
+      const frame = document.querySelector('.stage-frame');
+      const scale = frame.getBoundingClientRect().width / 1920;
+      stage.style.transform = `scale(${scale})`;
+    }
+
+    function setActiveSlide(index) {
+      activeSlide = Math.max(0, Math.min(index, slides.length - 1));
+      slides.forEach((slide, slideIndex) => {
+        slide.hidden = slideIndex !== activeSlide;
+      });
+      localStorage.setItem('comfort-vision-active-slide', String(activeSlide));
+      counter.textContent = `${activeSlide + 1} / ${slides.length}`;
+      window.parent.postMessage({ slideIndexChanged: activeSlide }, '*');
+    }
+
+    function applyTweaks(nextTweaks) {
+      document.documentElement.style.setProperty('--accent', nextTweaks.primaryColor || '#c85f3d');
+    }
+
+    function persistTweakPatch(patch) {
+      Object.assign(UI_DESIGN_TWEAKS, patch);
+      applyTweaks(UI_DESIGN_TWEAKS);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
+    }
+
+    window.addEventListener('resize', fitStage);
+    document.getElementById('prev-slide')?.addEventListener('click', () => setActiveSlide(activeSlide - 1));
+    document.getElementById('next-slide')?.addEventListener('click', () => setActiveSlide(activeSlide + 1));
+    window.addEventListener('keydown', (event) => {
+      if (event.key === 'ArrowLeft') setActiveSlide(activeSlide - 1);
+      if (event.key === 'ArrowRight') setActiveSlide(activeSlide + 1);
+    });
+    window.addEventListener('message', (event) => {
+      if (event.data?.type === '__activate_edit_mode') {
+        tweaksPanel?.setAttribute('data-open', 'true');
+      }
+      if (event.data?.type === '__deactivate_edit_mode') {
+        tweaksPanel?.setAttribute('data-open', 'false');
+      }
+    });
+    document.querySelector('[data-tweak-primary]')?.addEventListener('input', (event) => {
+      persistTweakPatch({ primaryColor: event.target.value });
+    });
+
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+    applyTweaks(UI_DESIGN_TWEAKS);
+    fitStage();
+    setActiveSlide(activeSlide);
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,79 @@
+# UI 设计技能端到端评审 — 第 1 轮
+
+## 测试摘要
+
+本轮测试 `ui-design` 技能是否能支撑完整设计流程：
+
+1. 创建带足领域语境的真实测试题。
+2. 按 `SKILL.md` 生成一个 Web 页面和一个 PPT 风格 HTML deck。
+3. 运行配套静态检查。
+4. 用 Chromium 渲染产物。
+5. 保存截图并检查 console/runtime 状态。
+6. 使用 `tests/e2e/rubric.json` 评分。
+7. 检查用户可见文案是否默认使用简体中文。
+
+in-app Browser 无法打开 `file://`，临时本地 HTTP 服务也无法被该浏览器会话访问。为保证可复现，本轮使用 `playwright-core` 直接打开生成的 HTML，收集 console 状态并保存截图。
+
+## 自动检查
+
+| 产物 | 静态检查 | 浏览器 console | 运行时检查 | 结果 |
+|---|---:|---:|---:|---|
+| Web 页面 | 通过 | 无错误 | 桌面 + 移动截图、一个 edit-mode block、移动端无横向溢出 | 通过 |
+| HTML deck | 通过 | 无错误 | 第 1/2 页截图、`localStorage` slide 状态、可见标签 `02 运营态势` | 通过 |
+
+证据：
+- `webpage/checks/static-check.txt`
+- `webpage/checks/browser-check.json`
+- `deck/checks/static-check.txt`
+- `deck/checks/browser-check.json`
+- `webpage/screenshots/desktop.png`
+- `webpage/screenshots/mobile.png`
+- `deck/screenshots/slide-01.png`
+- `deck/screenshots/slide-02.png`
+
+## Rubric 评分
+
+| 维度 | 权重 | Web 页面 | Deck |
+|---|---:|---:|---:|
+| 指令对齐 | 0.16 | 9.0 | 9.0 |
+| 信息架构 | 0.14 | 8.5 | 8.0 |
+| 配色系统 | 0.12 | 8.0 | 8.0 |
+| 字体排版 | 0.12 | 7.5 | 8.0 |
+| 空间结构 | 0.12 | 8.0 | 8.2 |
+| 视觉完成度 | 0.14 | 8.0 | 8.0 |
+| 交互与 Tweaks | 0.10 | 8.0 | 8.5 |
+| 机械质量 | 0.10 | 9.0 | 9.0 |
+
+加权分：
+- Web 页面：**8.28 / 10**
+- Deck：**8.35 / 10**
+
+质量档位：**良好**，接近优秀，但还没有稳定达到优秀。
+
+## 设计评估
+
+### Web 页面
+
+Web 页面更像真实产品运营台，而不是泛泛落地页。它有连贯的海事运营色盘、明确首屏信号、领域化内容、清晰的泊位压力层级，以及可记忆的潮汐/信号母题。桌面端结构密集但可读，移动端没有横向溢出。
+
+主要不足在细节打磨。移动端 hero 区域的斜纹装饰会和正文争抢注意力。字体整体可靠，但仍偏常见系统字体，作者感不够强。它是好的前端设计，但第二轮可以让排版更有独特性。
+
+### HTML Deck
+
+Deck 满足 PPT 风格要求：固定 16:9 舞台、1 起始 slide 标签、上一页/下一页控件、键盘导航、`localStorage` 状态和 viewport scaling。视觉语言与 Web artifact 连接，同时转化为更适合演示的节奏：稀疏标题页、管理层指标、风险矩阵、行动时间线和决策页。
+
+第一轮渲染发现过一个重要问题：页面有 `transform: scale()`，但舞台仍被裁切，因为布局盒没有跟随缩放。e2e 截图捕捉到了这个静态检查没发现的问题。之后通过 scale frame 修复。这个结果说明测试方法是有效的：静态检查不能替代真实渲染。
+
+## 是否属于优质前端设计
+
+是。作为第一轮 skill 驱动测试，两个产物都明显高于通用输出。它们有具体产品语境、连贯配色、可用布局、实时控制和机械正确性，不像默认紫色渐变 SaaS 页面或模板幻灯片。
+
+但还不是严格意义上的优秀。Web 页面需要更细的移动端层级处理和更有辨识度的字体策略；Deck 需要更强的页间变化和控制区打磨。skill 的方向有效，但测试流程应该继续要求截图评审，因为代码和静态检查会漏掉真实视觉缺陷。
+
+## 改进建议
+
+1. 在 `SKILL.md` 中强化说明：固定舞台 deck 必须截图验证，因为静态 `transform: scale()` 检查不够。
+2. 后续如果允许依赖，可给 `check_ui_artifact.py` 增加可选浏览器模式，验证 viewport fit 和 slide 可见性。
+3. 在 `SKILL.md` 中增加设计质量二次检查：移动端视觉层级、字体辨识度、控制区位置。
+4. 保留当前轻量静态检查，但把它视为协议门禁，而不是设计质量裁判。
+5. 所有后续评审和示例产物默认使用简体中文，必要英文名称除外。

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

@@ -0,0 +1,26 @@
+{
+  "console": [],
+  "desktop": {
+    "title": "舒适视觉 运营界面",
+    "screenLabels": [
+      "01 运营界面"
+    ],
+    "editModeBlocks": 1,
+    "hasEditModeAvailable": true,
+    "bodyOverflowX": "visible",
+    "documentWidth": 1440,
+    "viewportWidth": 1440
+  },
+  "mobile": {
+    "title": "舒适视觉 运营界面",
+    "screenLabels": [
+      "01 运营界面"
+    ],
+    "editModeBlocks": 1,
+    "hasEditModeAvailable": true,
+    "bodyOverflowX": "visible",
+    "documentWidth": 390,
+    "viewportWidth": 390
+  },
+  "pass": true
+}

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

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

package/skills/ui-design/tests/e2e/runs/iteration-1/webpage/execution_notes.md

@@ -0,0 +1,20 @@
+# Web 页面执行记录
+
+技能路径：`minimal-agent/skills/ui-design`
+
+测试题：`tests/e2e/prompts/webpage.md`
+
+已应用的 `ui-design` 约束：
+- 将任务路由为 Web/产品运营页面，而不是通用 landing page。
+- 使用具体产品语境和领域内容，让设计可以从信息结构和视觉完成度两方面被评估。
+- 构建单文件 HTML artifact，包含 `data-screen-label`、合法 edit-mode JSON block 和实时 tweak 控件。
+- 使用原生 HTML/CSS/JS，避免引入未固定版本的 React/Babel。
+- 避免 `scrollIntoView`、填充文案和模板残留。
+- 所有用户可见文案使用简体中文，保留 舒适视觉 作为品牌名。
+- 通过 `scripts/check_ui_artifact.py`、浏览器渲染、截图和 rubric 评审进行验证。
+
+采用的设计系统：
+- 海事运营色盘：深港墨绿、雾灰纸色、信号青、警示琥珀、铁锈橙 accent。
+- 高密度管理界面结构：潮汐带、泊位行、行动队列和风险台账。
+- 紧凑排版和 8px 以下圆角，让界面保持运营工具感，而不是装饰卡片页。
+