minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/empty-agent-protocol-check/outputs/index.html

@@ -0,0 +1,587 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>云策助手 - 空白 AI 协议回归样张</title>
+  <style>
+    :root {
+      --ink: #11121a;
+      --muted: #5d6274;
+      --paper: #fbfbff;
+      --surface: #ffffff;
+      --surface-soft: rgba(255, 255, 255, 0.88);
+      --line: rgba(38, 32, 92, 0.12);
+      --accent: #7c3aed;
+      --accent-blue: #5865f2;
+      --signal: #22c7d8;
+      --glow-strength: 0.72;
+      --density-gap: 18px;
+      --shadow: rgba(86, 66, 190, 0.16);
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html {
+      background: var(--paper);
+    }
+
+    body {
+      min-height: 100vh;
+      margin: 0;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 12% 12%, rgba(124, 58, 237, calc(var(--glow-strength) * 0.18)), transparent 30%),
+        radial-gradient(circle at 86% 18%, rgba(88, 101, 242, calc(var(--glow-strength) * 0.14)), transparent 28%),
+        linear-gradient(135deg, #ffffff 0%, #fbfbff 48%, #f4f0ff 100%);
+      overflow-x: hidden;
+    }
+
+    body[data-density="compact"] {
+      --density-gap: 12px;
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    .page {
+      position: relative;
+      min-height: 100vh;
+      padding: 22px;
+      isolation: isolate;
+    }
+
+    .page::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      z-index: -2;
+      background-image:
+        linear-gradient(rgba(124, 58, 237, 0.075) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(88, 101, 242, 0.065) 1px, transparent 1px);
+      background-size: 76px 76px;
+      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 70%);
+      opacity: var(--glow-strength);
+    }
+
+    .shell {
+      width: min(1180px, 100%);
+      margin: 0 auto;
+    }
+
+    .topbar {
+      min-height: 68px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      padding: 12px 14px 12px 18px;
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      background: rgba(255, 255, 255, 0.82);
+      box-shadow: 0 18px 50px rgba(86, 66, 190, 0.10);
+      backdrop-filter: blur(18px);
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+      font-weight: 850;
+    }
+
+    .mark {
+      width: 36px;
+      height: 36px;
+      border-radius: 12px;
+      flex: none;
+      background:
+        linear-gradient(135deg, rgba(124, 58, 237, 0.96), rgba(88, 101, 242, 0.92)),
+        var(--accent);
+      box-shadow: 0 16px 36px rgba(124, 58, 237, 0.30);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .mark::before,
+    .mark::after {
+      content: "";
+      position: absolute;
+      border: 1.5px solid rgba(255, 255, 255, 0.78);
+      border-radius: 999px;
+      transform: rotate(-28deg);
+    }
+
+    .mark::before {
+      inset: 8px 6px;
+    }
+
+    .mark::after {
+      inset: 15px -3px 9px 10px;
+      opacity: 0.72;
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .nav a {
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      color: inherit;
+      text-decoration: none;
+      padding: 0 12px;
+      border-radius: 12px;
+    }
+
+    .nav a[aria-current="page"] {
+      color: var(--accent);
+      background: rgba(124, 58, 237, 0.08);
+    }
+
+    .status-pill {
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 14px;
+      border: 1px solid rgba(34, 199, 216, 0.26);
+      border-radius: 999px;
+      color: #12616b;
+      background: rgba(234, 254, 255, 0.76);
+      font-size: 13px;
+      font-weight: 720;
+      white-space: nowrap;
+    }
+
+    .status-pill::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--signal);
+      box-shadow: 0 0 0 5px rgba(34, 199, 216, 0.12);
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1fr);
+      gap: clamp(30px, 5.5vw, 68px);
+      align-items: center;
+      padding: clamp(48px, 7vw, 88px) 0 54px;
+    }
+
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 9px;
+      margin: 0 0 18px;
+      padding: 8px 12px;
+      border: 1px solid rgba(124, 58, 237, 0.22);
+      border-radius: 999px;
+      color: var(--accent);
+      background: rgba(255, 255, 255, 0.76);
+      font-size: 13px;
+      font-weight: 780;
+    }
+
+    .eyebrow::before {
+      content: "";
+      width: 26px;
+      height: 2px;
+      border-radius: 99px;
+      background: linear-gradient(90deg, var(--accent), var(--signal));
+    }
+
+    h1 {
+      max-width: 760px;
+      margin: 0;
+      font-size: clamp(42px, 6.1vw, 68px);
+      line-height: 1.08;
+      letter-spacing: 0;
+      text-wrap: balance;
+    }
+
+    .lead {
+      max-width: 670px;
+      margin: 22px 0 0;
+      color: var(--muted);
+      font-size: 18px;
+      line-height: 1.65;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 28px;
+    }
+
+    .button {
+      min-height: 48px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 14px;
+      padding: 0 18px;
+      border: 1px solid transparent;
+      color: #fff;
+      background: linear-gradient(135deg, var(--accent), var(--accent-blue));
+      box-shadow: 0 18px 34px rgba(124, 58, 237, 0.26);
+      font-weight: 780;
+      text-decoration: none;
+    }
+
+    .button.secondary {
+      color: var(--ink);
+      background: rgba(255, 255, 255, 0.78);
+      border-color: var(--line);
+      box-shadow: none;
+    }
+
+    .preview {
+      position: relative;
+      border: 1px solid rgba(124, 58, 237, 0.18);
+      border-radius: 26px;
+      background: rgba(255, 255, 255, 0.78);
+      box-shadow: 0 28px 90px var(--shadow);
+      padding: 18px;
+      overflow: hidden;
+      backdrop-filter: blur(18px);
+    }
+
+    .preview::before {
+      content: "";
+      position: absolute;
+      inset: -30% -20% auto 20%;
+      height: 220px;
+      background: linear-gradient(90deg, transparent, rgba(124, 58, 237, calc(var(--glow-strength) * 0.22)), rgba(34, 199, 216, calc(var(--glow-strength) * 0.16)), transparent);
+      filter: blur(28px);
+      transform: rotate(-8deg);
+    }
+
+    .window {
+      position: relative;
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background: var(--surface);
+      overflow: hidden;
+    }
+
+    .window-head {
+      min-height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 0 16px;
+      border-bottom: 1px solid var(--line);
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .work-grid {
+      display: grid;
+      grid-template-columns: 0.72fr 1fr;
+      gap: 14px;
+      padding: 16px;
+    }
+
+    .panel {
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      background: var(--surface-soft);
+      padding: 16px;
+    }
+
+    .panel h2,
+    .card h3 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.3;
+    }
+
+    .panel p,
+    .card p {
+      margin: 10px 0 0;
+      color: var(--muted);
+      line-height: 1.6;
+    }
+
+    .path {
+      display: grid;
+      gap: 11px;
+      margin-top: 16px;
+    }
+
+    .path-step {
+      display: grid;
+      grid-template-columns: 24px 1fr;
+      gap: 10px;
+      align-items: start;
+      padding: 12px;
+      border: 1px solid rgba(124, 58, 237, 0.12);
+      border-radius: 14px;
+      background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(255, 255, 255, 0.9));
+    }
+
+    .node {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--accent), var(--signal));
+      box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.08);
+    }
+
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--density-gap);
+      padding-bottom: 70px;
+    }
+
+    .card {
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.82);
+      padding: 20px;
+      box-shadow: 0 18px 42px rgba(86, 66, 190, 0.08);
+    }
+
+    .tag {
+      display: inline-flex;
+      min-height: 28px;
+      align-items: center;
+      padding: 0 10px;
+      border-radius: 999px;
+      color: var(--accent);
+      background: rgba(124, 58, 237, 0.08);
+      font-size: 13px;
+      font-weight: 760;
+      margin-bottom: 12px;
+    }
+
+    .tweaks-panel {
+      position: fixed;
+      right: 20px;
+      bottom: 20px;
+      z-index: 50;
+      width: min(320px, calc(100vw - 40px));
+      display: none;
+      gap: 12px;
+      padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      background: #fff;
+      box-shadow: 0 22px 60px rgba(38, 32, 92, 0.18);
+    }
+
+    .tweaks-panel[data-open="true"] {
+      display: grid;
+    }
+
+    .tweaks-panel label {
+      display: grid;
+      gap: 6px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    @media (max-width: 860px) {
+      .page {
+        padding: 14px;
+      }
+
+      .topbar {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
+      .nav {
+        width: 100%;
+        overflow-x: auto;
+        padding-bottom: 2px;
+      }
+
+      .hero {
+        grid-template-columns: 1fr;
+        padding-top: 38px;
+      }
+
+      h1 {
+        font-size: clamp(36px, 11vw, 52px);
+      }
+
+      .lead {
+        font-size: 16px;
+      }
+
+      .work-grid,
+      .cards {
+        grid-template-columns: 1fr;
+      }
+
+      .preview {
+        padding: 12px;
+        border-radius: 20px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page" data-screen-label="01 云策助手首页">
+    <div class="shell">
+      <header class="topbar">
+        <div class="brand">
+          <span class="mark" aria-hidden="true"></span>
+          <span>云策助手</span>
+        </div>
+        <nav class="nav" aria-label="主导航">
+          <a href="#" aria-current="page">首页</a>
+          <a href="#">工作流</a>
+          <a href="#">团队协作</a>
+          <a href="#">安全</a>
+        </nav>
+        <span class="status-pill">智能计划在线</span>
+      </header>
+
+      <section class="hero">
+        <div>
+          <p class="eyebrow">中文 AI 工作台</p>
+          <h1>把模糊目标整理成可执行的团队计划</h1>
+          <p class="lead">云策助手面向产品、运营和研发团队，把会议纪要、需求片段和项目约束转成清晰任务路径，让每一次协作都有下一步。</p>
+          <div class="actions">
+            <a class="button" href="#">创建计划</a>
+            <a class="button secondary" href="#">查看示例</a>
+          </div>
+        </div>
+
+        <aside class="preview" aria-label="产品界面预览">
+          <div class="window">
+            <div class="window-head">
+              <strong>本周发布准备</strong>
+              <span>协作态势良好</span>
+            </div>
+            <div class="work-grid">
+              <section class="panel">
+                <h2>输入目标</h2>
+                <p>整理发布范围、负责人、风险和时间窗口。</p>
+                <div class="path">
+                  <div class="path-step"><span class="node"></span><span>识别关键里程碑</span></div>
+                  <div class="path-step"><span class="node"></span><span>生成跨团队任务</span></div>
+                  <div class="path-step"><span class="node"></span><span>标记阻塞风险</span></div>
+                </div>
+              </section>
+              <section class="panel">
+                <h2>建议行动</h2>
+                <p>先确认灰度名单，再同步客服话术，最后冻结变更范围。</p>
+                <div class="path">
+                  <div class="path-step"><span class="node"></span><span>负责人：产品经理</span></div>
+                  <div class="path-step"><span class="node"></span><span>截止：周三晚间</span></div>
+                  <div class="path-step"><span class="node"></span><span>状态：等待确认</span></div>
+                </div>
+              </section>
+            </div>
+          </div>
+        </aside>
+      </section>
+
+      <section class="cards" aria-label="核心能力">
+        <article class="card">
+          <span class="tag">结构化</span>
+          <h3>把长文本压成决策骨架</h3>
+          <p>自动提取目标、约束、依赖和负责人，减少会议后的二次整理。</p>
+        </article>
+        <article class="card">
+          <span class="tag">可执行</span>
+          <h3>让建议直接落到任务路径</h3>
+          <p>每条建议都绑定下一步、优先级和风险提示，避免只生成漂亮摘要。</p>
+        </article>
+        <article class="card">
+          <span class="tag">可协作</span>
+          <h3>团队可以共同校准判断</h3>
+          <p>在同一工作台中修改假设、调整范围，并保留每次决策依据。</p>
+        </article>
+      </section>
+    </div>
+  </main>
+
+  <aside class="tweaks-panel" aria-label="调整">
+    <strong>调整</strong>
+    <label>
+      主紫色
+      <input data-tweak-accent type="color" value="#7c3aed">
+    </label>
+    <label>
+      光轨强度
+      <input data-tweak-glow type="range" min="0.2" max="1" step="0.05" value="0.72">
+    </label>
+    <label>
+      界面密度
+      <select data-tweak-density>
+        <option value="comfortable">舒展</option>
+        <option value="compact">紧凑</option>
+      </select>
+    </label>
+  </aside>
+
+  <script>
+    const UI_DESIGN_TWEAKS = /*EDITMODE-BEGIN*/{
+      "accent": "#7c3aed",
+      "glowStrength": 0.72,
+      "density": "comfortable"
+    }/*EDITMODE-END*/;
+
+    function applyTweaks(nextTweaks) {
+      document.documentElement.style.setProperty('--accent', nextTweaks.accent || '#7c3aed');
+      document.documentElement.style.setProperty('--glow-strength', String(nextTweaks.glowStrength ?? 0.72));
+      document.body.dataset.density = nextTweaks.density || 'comfortable';
+    }
+
+    function persistTweakPatch(patch) {
+      Object.assign(UI_DESIGN_TWEAKS, patch);
+      applyTweaks(UI_DESIGN_TWEAKS);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
+    }
+
+    const tweaksPanel = document.querySelector('.tweaks-panel');
+    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');
+      }
+      if (event.data?.type === '__edit_mode_set_keys') {
+        const patch = event.data.edits || event.data.keys || {};
+        Object.assign(UI_DESIGN_TWEAKS, patch);
+        applyTweaks(UI_DESIGN_TWEAKS);
+      }
+    });
+
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+    applyTweaks(UI_DESIGN_TWEAKS);
+
+    document.querySelector('[data-tweak-accent]')?.addEventListener('input', (event) => {
+      persistTweakPatch({ accent: event.target.value });
+    });
+    document.querySelector('[data-tweak-glow]')?.addEventListener('input', (event) => {
+      persistTweakPatch({ glowStrength: Number(event.target.value) });
+    });
+    document.querySelector('[data-tweak-density]')?.addEventListener('change', (event) => {
+      persistTweakPatch({ density: event.target.value });
+    });
+  </script>
+</body>
+</html>

package/skills/ui-design/tests/e2e/runs/empty-agent-protocol-check/prompt.md

@@ -0,0 +1,14 @@
+# 空白 AI 协议回归测试
+
+请只按 `ui-design/SKILL.md` 和必要 reference 执行：
+
+> 我没有明确品牌资料，只想做一个中文 AI 工具首页，要求看起来成熟、清爽、有设计感。请按 ui-design skill 自行选择合适 VI 或从零建立视觉系统，生成 HTML，并保存设计执行声明、检查结果、截图和评审结论。
+
+测试重点：
+
+- 执行者是否读取 `references/design-execution-playbook.md`，而不是直接写页面。
+- 是否主动选择合适 VI 或声明从零设计策略。
+- 是否写出设计执行声明。
+- 是否生成中文 HTML，包含 `data-screen-label`、唯一 `EDITMODE` JSON block 和 `edits` 载荷。
+- 是否运行静态检查、语言检查、浏览器截图检查。
+- 是否用截图做诚实评审，而不是只说“脚本通过”。

package/skills/ui-design/tests/e2e/runs/empty-agent-protocol-check/review.md

@@ -0,0 +1,13 @@
+# 空白 AI 协议回归评审
+
+## 评审结论
+
+- 指令对齐：样张按空白需求选择 `Violet Meridian / 紫曜经线` 路线，并保存了设计执行声明；界面文案为简体中文，没有复制真实品牌。
+- 视觉质量：白底、紫蓝经线、近黑文字和青蓝状态形成了清爽 AI 工具气质，层级清楚，右侧工作台预览比普通营销卡片更像产品。
+- 功能可用：HTML 包含 `data-screen-label`、唯一 `EDITMODE` JSON block，Tweaks 使用 `edits` 载荷，可调主紫色、光轨强度和密度。
+- 风险与不足：这是单屏首页样张，内容仍偏通用，缺少真实客户场景、价格或产品截图；如果用于正式测试，应加入更多真实业务约束。
+- 下一轮建议：继续增加“已有设计上下文导入”的空白 AI 测试，让执行者必须从代码或截图提取 token，而不是只选择 VI。
+
+## 对 skill 的验证
+
+这轮测试证明强执行轨道是有价值的：即使提示词很空，执行者也会先写设计执行声明，选择合适 VI，再生成、检查、截图和评审。脚本通过不代表设计自动优秀，但它能阻止明显协议缺失；最终质量仍需要截图观察和审美判断。

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

@@ -0,0 +1,24 @@
+{
+  "console": [],
+  "slideOne": {
+    "title": "舒适视觉 第三季度港口韧性简报",
+    "screenLabels": [
+      "01 标题",
+      "02 运营态势",
+      "03 风险网格",
+      "04 行动窗口",
+      "05 决策"
+    ],
+    "editModeBlocks": 1,
+    "hasEditModeAvailable": true,
+    "bodyOverflowX": "hidden",
+    "documentWidth": 1440,
+    "viewportWidth": 1440
+  },
+  "slideTwo": {
+    "activeSlide": "1",
+    "counter": "2 / 5",
+    "visibleLabel": "02 运营态势"
+  },
+  "pass": true
+}

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

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

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

@@ -0,0 +1,21 @@
+# Deck 执行记录
+
+技能路径：`minimal-agent/skills/ui-design`
+
+测试题：`tests/e2e/prompts/deck.md`
+
+已应用的 `ui-design` 约束：
+- 将任务路由为 HTML deck/PPT 风格演示。
+- 构建固定 1920x1080 舞台，并实现 viewport scaling。
+- 每个 slide 使用 1 起始 `data-screen-label`。
+- 使用 `localStorage` 持久化当前 slide。
+- 添加上一页/下一页控件和键盘导航。
+- 包含合法 edit-mode JSON block 和可调 accent 色。
+- 避免未固定版本 React/Babel、`scrollIntoView`、填充结论和通用渐变装饰。
+- 所有用户可见文案使用简体中文，保留 舒适视觉 作为品牌名。
+
+采用的设计系统：
+- 与 Web 测试相同的 舒适视觉 视觉语言，转换为管理层简报节奏。
+- slide 在稀疏标题页、结构化风险矩阵、时间线和决策摘要之间切换。
+- 演示内容保持简洁，使用大字号、清晰层级和运营型视觉标记。
+