minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/aqua-glass-iteration-1/outputs/index.html

@@ -0,0 +1,656 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Aqua Glass 浅色 VI 识别样张</title>
+  <style>
+    :root {
+      --ink: #0a1222;
+      --ink-soft: #1d2b42;
+      --muted: #506176;
+      --paper: #f6fbff;
+      --paper-blue: #eaf6ff;
+      --surface: rgba(255, 255, 255, 0.68);
+      --surface-strong: rgba(255, 255, 255, 0.88);
+      --line: rgba(10, 18, 34, 0.1);
+      --highlight: rgba(255, 255, 255, 0.8);
+      --accent: #2f80ed;
+      --signal: #20b6aa;
+      --amber: #d89a24;
+      --danger: #d94a4a;
+      --shadow: rgba(31, 85, 139, 0.16);
+      --radius-lg: 22px;
+      --radius-md: 16px;
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background:
+        linear-gradient(115deg, rgba(255, 255, 255, 0.92), rgba(234, 246, 255, 0.78) 44%, rgba(246, 251, 255, 0.95)),
+        radial-gradient(circle at 18% 8%, rgba(47, 128, 237, 0.18), transparent 28%),
+        radial-gradient(circle at 88% 18%, rgba(32, 182, 170, 0.16), transparent 26%),
+        var(--paper);
+      color: var(--ink);
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      background-image:
+        linear-gradient(rgba(10, 18, 34, 0.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(10, 18, 34, 0.045) 1px, transparent 1px);
+      background-size: 52px 52px;
+      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 82%);
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    .page {
+      width: min(1180px, calc(100vw - 32px));
+      margin: 0 auto;
+      padding: 28px 0 52px;
+    }
+
+    .glass {
+      border: 1px solid var(--line);
+      background: var(--surface);
+      backdrop-filter: blur(22px) saturate(1.16);
+      box-shadow: 0 22px 70px var(--shadow);
+    }
+
+    .nav {
+      position: sticky;
+      top: 16px;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 20px;
+      padding: 12px 14px;
+      border-radius: 999px;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 11px;
+      min-width: 0;
+    }
+
+    .mark {
+      width: 38px;
+      height: 38px;
+      border-radius: 14px;
+      border: 1px solid rgba(10, 18, 34, 0.12);
+      background:
+        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(206, 235, 255, 0.66)),
+        radial-gradient(circle at 65% 35%, var(--signal), transparent 22%);
+      box-shadow: inset 0 1px 0 var(--highlight), 0 12px 26px rgba(47, 128, 237, 0.16);
+    }
+
+    .brand strong {
+      display: block;
+      font-size: 15px;
+      letter-spacing: 0;
+    }
+
+    .brand span {
+      display: block;
+      margin-top: 2px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .nav-links {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .nav-links span,
+    .pill {
+      border: 1px solid rgba(10, 18, 34, 0.08);
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.48);
+      padding: 8px 12px;
+      white-space: nowrap;
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
+      gap: 24px;
+      align-items: stretch;
+      margin-top: 26px;
+    }
+
+    .hero-main {
+      border-radius: 30px;
+      padding: clamp(28px, 5vw, 60px);
+      background: var(--surface-strong);
+      overflow: hidden;
+      position: relative;
+    }
+
+    .hero-main::after {
+      content: "";
+      position: absolute;
+      right: -90px;
+      bottom: -110px;
+      width: 320px;
+      height: 320px;
+      border: 1px solid rgba(47, 128, 237, 0.16);
+      border-radius: 50%;
+      background:
+        repeating-linear-gradient(135deg, rgba(47, 128, 237, 0.12) 0 8px, transparent 8px 18px);
+      opacity: 0.56;
+    }
+
+    .eyebrow {
+      margin: 0 0 18px;
+      color: var(--accent);
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+    }
+
+    h1,
+    h2,
+    h3,
+    p {
+      margin-top: 0;
+    }
+
+    h1 {
+      max-width: 760px;
+      margin-bottom: 22px;
+      color: var(--ink);
+      font-size: clamp(44px, 7vw, 92px);
+      line-height: 0.98;
+      letter-spacing: 0;
+    }
+
+    .lead {
+      max-width: 660px;
+      margin-bottom: 30px;
+      color: var(--muted);
+      font-size: clamp(16px, 1.8vw, 20px);
+      line-height: 1.62;
+      font-weight: 600;
+    }
+
+    .actions {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .button {
+      border: 0;
+      border-radius: 999px;
+      padding: 13px 18px;
+      cursor: pointer;
+      font-weight: 800;
+    }
+
+    .button.primary {
+      background: linear-gradient(135deg, var(--accent), #5ca7ff);
+      color: white;
+      box-shadow: 0 18px 32px rgba(47, 128, 237, 0.24);
+    }
+
+    .button.secondary {
+      border: 1px solid rgba(10, 18, 34, 0.11);
+      background: rgba(255, 255, 255, 0.62);
+      color: var(--ink);
+    }
+
+    .assistant-card {
+      border-radius: 30px;
+      padding: 24px;
+      display: grid;
+      align-content: space-between;
+      min-height: 100%;
+    }
+
+    .search-box {
+      border: 1px solid rgba(10, 18, 34, 0.1);
+      border-radius: 22px;
+      padding: 16px;
+      background: rgba(255, 255, 255, 0.72);
+    }
+
+    .search-box small {
+      color: var(--muted);
+      font-weight: 700;
+    }
+
+    .query {
+      margin: 12px 0 0;
+      color: var(--ink);
+      font-size: 18px;
+      font-weight: 850;
+      line-height: 1.4;
+    }
+
+    .answer {
+      margin-top: 18px;
+      display: grid;
+      gap: 10px;
+    }
+
+    .answer div {
+      border-radius: 16px;
+      background: rgba(255, 255, 255, 0.58);
+      padding: 13px 14px;
+      color: var(--ink-soft);
+      line-height: 1.45;
+      font-weight: 650;
+    }
+
+    .status-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      margin-top: 22px;
+    }
+
+    .status {
+      border-radius: 18px;
+      background: rgba(255, 255, 255, 0.5);
+      padding: 14px;
+      min-width: 0;
+    }
+
+    .status b {
+      display: block;
+      color: var(--ink);
+      font-size: 24px;
+      line-height: 1;
+    }
+
+    .status span {
+      display: block;
+      margin-top: 8px;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1.35;
+    }
+
+    .section {
+      margin-top: 24px;
+      border-radius: 28px;
+      padding: clamp(22px, 3vw, 32px);
+    }
+
+    .section-head {
+      display: flex;
+      justify-content: space-between;
+      gap: 18px;
+      align-items: end;
+      margin-bottom: 20px;
+    }
+
+    .section-head h2 {
+      margin-bottom: 0;
+      font-size: clamp(26px, 3vw, 40px);
+      line-height: 1.08;
+      letter-spacing: 0;
+    }
+
+    .section-head p {
+      max-width: 420px;
+      margin-bottom: 0;
+      color: var(--muted);
+      line-height: 1.55;
+      font-weight: 600;
+    }
+
+    .palette {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 12px;
+    }
+
+    .swatch {
+      min-height: 150px;
+      border-radius: 20px;
+      border: 1px solid rgba(10, 18, 34, 0.1);
+      padding: 14px;
+      display: grid;
+      align-content: end;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    }
+
+    .swatch b {
+      font-size: 14px;
+    }
+
+    .swatch span {
+      margin-top: 4px;
+      color: rgba(10, 18, 34, 0.66);
+      font-size: 12px;
+      font-weight: 700;
+    }
+
+    .system-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 14px;
+    }
+
+    .system-card {
+      border-radius: 22px;
+      padding: 20px;
+      background: rgba(255, 255, 255, 0.56);
+      border: 1px solid rgba(10, 18, 34, 0.08);
+      min-height: 210px;
+    }
+
+    .system-card h3 {
+      margin-bottom: 12px;
+      font-size: 19px;
+    }
+
+    .system-card p {
+      color: var(--muted);
+      line-height: 1.55;
+      font-weight: 600;
+    }
+
+    .type-sample {
+      font-size: clamp(30px, 4vw, 54px);
+      line-height: 1.05;
+      font-weight: 850;
+      letter-spacing: 0;
+      color: var(--ink);
+    }
+
+    .component-stack {
+      display: grid;
+      gap: 12px;
+    }
+
+    .notice {
+      border-radius: 16px;
+      border: 1px solid rgba(47, 128, 237, 0.18);
+      background: rgba(234, 246, 255, 0.68);
+      padding: 14px;
+      color: var(--ink-soft);
+      font-weight: 650;
+      line-height: 1.45;
+    }
+
+    .progress {
+      height: 10px;
+      border-radius: 999px;
+      background: rgba(10, 18, 34, 0.08);
+      overflow: hidden;
+    }
+
+    .progress span {
+      display: block;
+      width: 72%;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--accent), var(--signal));
+    }
+
+    .footer-note {
+      margin: 22px 0 0;
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 650;
+      line-height: 1.55;
+    }
+
+    .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: 18px;
+      border: 1px solid var(--line);
+      background: rgba(255, 255, 255, 0.86);
+      box-shadow: 0 18px 52px var(--shadow);
+      backdrop-filter: blur(18px);
+    }
+
+    .tweaks-panel label {
+      display: grid;
+      gap: 6px;
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    @media (max-width: 860px) {
+      .page {
+        width: min(100% - 24px, 680px);
+        padding-top: 14px;
+      }
+
+      .nav {
+        position: static;
+        align-items: flex-start;
+        border-radius: 24px;
+      }
+
+      .nav-links {
+        flex-wrap: wrap;
+        justify-content: flex-end;
+      }
+
+      .hero,
+      .system-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .hero-main,
+      .assistant-card,
+      .section {
+        border-radius: 24px;
+      }
+
+      .hero-main::after {
+        opacity: 0.28;
+        right: -160px;
+      }
+
+      .palette {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .section-head {
+        display: block;
+      }
+
+      .section-head p {
+        margin-top: 10px;
+      }
+    }
+
+    @media (max-width: 520px) {
+      .nav {
+        display: grid;
+      }
+
+      .nav-links {
+        justify-content: flex-start;
+      }
+
+      h1 {
+        font-size: clamp(38px, 13vw, 58px);
+      }
+
+      .status-row {
+        grid-template-columns: 1fr;
+      }
+
+      .palette {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="page" data-screen-label="01 Aqua Glass 识别样张">
+    <nav class="nav glass" aria-label="主导航">
+      <div class="brand">
+        <div class="mark" aria-hidden="true"></div>
+        <div>
+          <strong>澄知云</strong>
+          <span>Aqua Glass 视觉识别</span>
+        </div>
+      </div>
+      <div class="nav-links" aria-label="状态">
+        <span>知识库同步 96%</span>
+        <span>团队空间 18 个</span>
+        <span>AI 摘要已开启</span>
+      </div>
+    </nav>
+
+    <section class="hero">
+      <div class="hero-main glass">
+        <p class="eyebrow">浅蓝白玻璃风测试</p>
+        <h1>把团队知识整理成一张清澈、可搜索、可行动的工作界面。</h1>
+        <p class="lead">这张样张用于检验 Aqua Glass 的核心质量：浅色背景不能发灰，半透明面板不能糊，近黑文字必须在长标题、长正文和移动端都保持清楚。</p>
+        <div class="actions">
+          <button class="button primary" type="button">创建知识空间</button>
+          <button class="button secondary" type="button">查看视觉规范</button>
+          <span class="pill">近黑文字 / 浅蓝白背景 / 半透明层级</span>
+        </div>
+      </div>
+
+      <aside class="assistant-card glass" aria-label="AI 知识助手示例">
+        <div class="search-box">
+          <small>知识搜索</small>
+          <p class="query">“帮我找到上季度客户反馈里关于权限协作的三条主要问题。”</p>
+        </div>
+        <div class="answer">
+          <div>已归纳 42 条反馈，优先展示权限继承、外部成员邀请和审批链路。</div>
+          <div>建议新增一个“共享前检查”浮层，减少误分享和重复沟通。</div>
+        </div>
+        <div class="status-row">
+          <div class="status"><b>42</b><span>相关反馈</span></div>
+          <div class="status"><b>8.6</b><span>摘要置信度</span></div>
+          <div class="status"><b>3</b><span>建议动作</span></div>
+        </div>
+      </aside>
+    </section>
+
+    <section class="section glass" aria-label="色彩识别">
+      <div class="section-head">
+        <h2>色彩要像空气一样轻，但文字要像墨一样稳。</h2>
+        <p>这个版本把主文字略微压黑、玻璃面板提高到 68% 白色，避免浅蓝背景穿透后影响阅读。</p>
+      </div>
+      <div class="palette">
+        <div class="swatch" style="background:#0a1222;color:white"><b>主文字</b><span style="color:rgba(255,255,255,.72)">#0a1222</span></div>
+        <div class="swatch" style="background:#f6fbff"><b>冰雾白</b><span>#f6fbff</span></div>
+        <div class="swatch" style="background:#eaf6ff"><b>背景冷蓝</b><span>#eaf6ff</span></div>
+        <div class="swatch" style="background:#2f80ed;color:white"><b>清透蓝</b><span style="color:rgba(255,255,255,.74)">#2f80ed</span></div>
+        <div class="swatch" style="background:#20b6aa;color:white"><b>薄荷青</b><span style="color:rgba(255,255,255,.74)">#20b6aa</span></div>
+        <div class="swatch" style="background:rgba(255,255,255,.68)"><b>玻璃面板</b><span>白色 68%</span></div>
+      </div>
+    </section>
+
+    <section class="section glass" aria-label="组件识别">
+      <div class="section-head">
+        <h2>组件不靠装饰取胜，靠层级、间距和状态说明建立信任。</h2>
+        <p>这里故意把字体、提醒、进度和卡片放在一起，测试浅色系统能否承载真实产品信息。</p>
+      </div>
+      <div class="system-grid">
+        <article class="system-card">
+          <h3>标题样张</h3>
+          <div class="type-sample">清晰、通透、可操作。</div>
+          <p class="footer-note">中文标题字距为 0，使用近黑蓝，不用纯灰标题制造“高级但虚”的感觉。</p>
+        </article>
+        <article class="system-card component-stack">
+          <h3>状态组件</h3>
+          <div class="notice">AI 已完成 12 篇文档摘要，发现 3 个重复流程和 1 个权限风险。</div>
+          <div class="progress" aria-label="同步进度"><span></span></div>
+          <button class="button primary" type="button">生成整理建议</button>
+        </article>
+        <article class="system-card">
+          <h3>玻璃层级</h3>
+          <p>主内容使用更强白底，辅助浮层使用半透明白。只在需要表达上下文时叠层，不把每个盒子都做成同一种毛玻璃。</p>
+          <p class="footer-note">功能判断：如果用户眯眼才能读，玻璃透明度就太低；如果层级看不出前后，边框和阴影就太弱。</p>
+        </article>
+      </div>
+    </section>
+  </main>
+
+  <aside class="tweaks-panel" aria-label="调整">
+    <strong>调整</strong>
+    <label>强调色 <input data-tweak-primary type="color" value="#2f80ed"></label>
+    <label>玻璃透明度 <input data-tweak-surface type="range" min="58" max="90" value="68"></label>
+  </aside>
+
+  <script>
+    const UI_DESIGN_TWEAKS = /*EDITMODE-BEGIN*/{
+      "primaryColor": "#2f80ed",
+      "surfaceOpacity": 68
+    }/*EDITMODE-END*/;
+
+    const root = document.documentElement;
+    const panel = document.querySelector('.tweaks-panel');
+
+    function applyTweaks(values) {
+      if (values.primaryColor) root.style.setProperty('--accent', values.primaryColor);
+      if (values.surfaceOpacity) {
+        const alpha = Number(values.surfaceOpacity) / 100;
+        root.style.setProperty('--surface', `rgba(255, 255, 255, ${alpha})`);
+      }
+    }
+
+    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-surface]').addEventListener('input', (event) => {
+      const keys = { surfaceOpacity: 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/aqua-glass-iteration-1/prompt.md

@@ -0,0 +1,12 @@
+# Aqua Glass 浅色 VI 测试题
+
+使用 `ui-design` skill 和 `references/vi-aqua-glass.md`，为一个 AI 知识库产品创建一个简单的中文 HTML 页面，用来测试浅蓝白玻璃风 VI 的视觉识别效果。
+
+要求：
+
+- 页面必须使用简体中文，保留必要英文名称 `Aqua Glass` 和 `AI`。
+- 风格要浅色、通透、现代、玻璃半透明、黑字高可读。
+- 页面需要包含首屏、色彩识别、字体样张、组件样张和状态信息。
+- 特意放入较长中文标题和正文，检查移动端是否可读、是否溢出。
+- 暴露至少一个 Tweaks 设计维度，用于调整强调色或玻璃透明度。
+- 运行 `check_ui_artifact.py`、`check_language_policy.py`，并用浏览器截图检查桌面和移动端。