minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/ember-prism-red-preview-1/outputs/index.html

@@ -0,0 +1,467 @@
+<!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: #101014;
+      --ink-soft: #2b2b33;
+      --muted: #636574;
+      --paper: #fffdfb;
+      --surface: #ffffff;
+      --surface-warm: #fff0ed;
+      --line: rgba(16, 16, 20, 0.10);
+      --line-warm: rgba(255, 63, 58, 0.22);
+      --accent: #ff3f3a;
+      --accent-deep: #e21d2f;
+      --accent-soft: #ff6b5f;
+      --accent-orange: #ff8a00;
+      --accent-pink: #ffe2de;
+      --blue: #2563eb;
+      --violet: #7c3aed;
+      --cyan: #14b8c8;
+      --shadow: rgba(255, 63, 58, 0.18);
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, sans-serif;
+      color: var(--ink);
+      background: var(--paper);
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      overflow-x: hidden;
+      background:
+        radial-gradient(circle at 48% 35%, rgba(255, 63, 58, 0.12), transparent 26%),
+        radial-gradient(circle at 72% 18%, rgba(255, 226, 222, 0.88), transparent 24%),
+        linear-gradient(180deg, #fffdfb 0%, #fff8f6 58%, #f7f9ff 100%);
+    }
+
+    .page {
+      position: relative;
+      width: min(1440px, 100%);
+      min-height: 100vh;
+      margin: 0 auto;
+      padding: 22px clamp(18px, 4vw, 64px) 64px;
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      min-height: 60px;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-weight: 850;
+    }
+
+    .mark {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      background:
+        radial-gradient(circle at 72% 28%, rgba(255,255,255,0.88), transparent 15%),
+        conic-gradient(from 210deg, var(--accent), var(--accent-deep), var(--accent-soft), var(--blue), var(--violet), var(--accent));
+      box-shadow: 0 14px 30px rgba(255, 63, 58, 0.18);
+    }
+
+    .links {
+      display: flex;
+      align-items: center;
+      gap: 26px;
+      color: var(--ink-soft);
+      font-size: 15px;
+      font-weight: 650;
+    }
+
+    .login {
+      min-height: 46px;
+      padding: 0 20px;
+      border: 0;
+      border-radius: 999px;
+      background: #f4f4f5;
+      color: var(--ink);
+      font: inherit;
+      font-weight: 760;
+    }
+
+    .hero {
+      display: grid;
+      justify-items: center;
+      padding: 56px 0 0;
+      text-align: center;
+    }
+
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      min-height: 34px;
+      padding: 0 13px;
+      border: 1px solid var(--line-warm);
+      border-radius: 999px;
+      color: var(--accent-deep);
+      background: rgba(255, 226, 222, 0.72);
+      font-size: 13px;
+      font-weight: 780;
+    }
+
+    h1 {
+      margin: 24px 0 14px;
+      max-width: 880px;
+      font-size: clamp(54px, 7vw, 92px);
+      line-height: 0.98;
+      letter-spacing: 0;
+    }
+
+    .inline-icon {
+      display: inline-grid;
+      place-items: center;
+      width: 0.9em;
+      height: 0.9em;
+      margin: 0 0.08em;
+      border-radius: 0.24em;
+      color: #fff;
+      background: linear-gradient(135deg, var(--accent), var(--accent-soft));
+      font-size: 0.62em;
+      vertical-align: 0.1em;
+      box-shadow: 0 12px 24px var(--shadow);
+    }
+
+    .lead {
+      max-width: 760px;
+      margin: 0;
+      color: var(--muted);
+      font-size: clamp(16px, 1.6vw, 20px);
+      line-height: 1.65;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 14px;
+      margin-top: 28px;
+    }
+
+    button {
+      min-height: 48px;
+      border-radius: 999px;
+      padding: 0 28px;
+      font: inherit;
+      font-weight: 780;
+    }
+
+    .primary {
+      border: 0;
+      color: #fff;
+      background: #171c24;
+      box-shadow: 0 18px 38px rgba(16, 16, 20, 0.15);
+    }
+
+    .secondary {
+      border: 1px solid rgba(16,16,20,0.24);
+      color: var(--ink);
+      background: #fff;
+    }
+
+    .stage {
+      position: relative;
+      width: min(1080px, 100%);
+      min-height: 390px;
+      margin: 66px auto 0;
+    }
+
+    .red-band {
+      position: absolute;
+      left: 50%;
+      top: 86px;
+      width: min(900px, 86vw);
+      height: 210px;
+      transform: translateX(-50%);
+      overflow: hidden;
+      border-radius: 68px 68px 34px 34px;
+      background:
+        linear-gradient(118deg, transparent 0 21%, rgba(226, 29, 47, 0.78) 21% 32%, transparent 32%),
+        linear-gradient(132deg, transparent 0 44%, rgba(255, 138, 0, 0.92) 44% 53%, transparent 53%),
+        linear-gradient(150deg, transparent 0 64%, rgba(255,255,255,0.26) 64% 72%, transparent 72%),
+        linear-gradient(90deg, var(--accent-soft), var(--accent) 48%, var(--accent-soft));
+      box-shadow: 0 34px 80px rgba(255, 63, 58, 0.18);
+    }
+
+    .red-band::before,
+    .red-band::after {
+      content: "";
+      position: absolute;
+      border-radius: 999px;
+      pointer-events: none;
+    }
+
+    .red-band::before {
+      width: 190px;
+      height: 190px;
+      right: 120px;
+      bottom: -80px;
+      border: 2px solid rgba(226, 29, 47, 0.40);
+      box-shadow: inset 0 0 0 38px rgba(255, 138, 0, 0.78);
+    }
+
+    .red-band::after {
+      width: 110px;
+      height: 110px;
+      left: 70px;
+      top: -34px;
+      border: 14px solid rgba(255, 226, 222, 0.42);
+    }
+
+    .soft-block {
+      position: absolute;
+      border-radius: 28px;
+      background: rgba(255, 226, 222, 0.82);
+      pointer-events: none;
+    }
+
+    .soft-left {
+      left: 4%;
+      bottom: 20px;
+      width: 250px;
+      height: 130px;
+    }
+
+    .soft-right {
+      right: 2%;
+      top: 58px;
+      width: 300px;
+      height: 142px;
+    }
+
+    .float-card {
+      position: absolute;
+      display: grid;
+      grid-template-columns: 54px 1fr;
+      align-items: center;
+      gap: 16px;
+      width: min(340px, 31vw);
+      min-height: 106px;
+      padding: 18px 22px;
+      border: 1px solid rgba(16,16,20,0.08);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.94);
+      box-shadow: 0 28px 70px rgba(16,16,20,0.12);
+      backdrop-filter: blur(14px);
+      text-align: left;
+    }
+
+    .float-card:nth-of-type(1) { left: 9%; top: 112px; }
+    .float-card:nth-of-type(2) { left: 50%; top: 112px; transform: translateX(-50%); }
+    .float-card:nth-of-type(3) { right: 7%; top: 112px; }
+
+    .card-icon {
+      display: grid;
+      place-items: center;
+      width: 48px;
+      height: 48px;
+      border-radius: 14px;
+      color: #fff;
+      background: var(--accent);
+      font-size: 24px;
+      font-weight: 850;
+    }
+
+    .float-card h2 {
+      margin: 0 0 6px;
+      font-size: 21px;
+      line-height: 1.18;
+    }
+
+    .float-card p {
+      margin: 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.38;
+    }
+
+    .spark {
+      position: absolute;
+      width: 54px;
+      height: 54px;
+      border-radius: 50%;
+      background:
+        conic-gradient(from 0deg, transparent 0 12%, var(--accent-orange) 12% 18%, transparent 18% 32%, var(--accent-orange) 32% 38%, transparent 38% 100%);
+      opacity: 0.8;
+    }
+
+    .spark.one { left: 43%; top: 104px; }
+    .spark.two { right: 25%; bottom: 68px; transform: scale(0.75); }
+
+    .dots {
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 40px;
+    }
+
+    .dots i {
+      width: 9px;
+      height: 9px;
+      border-radius: 999px;
+      background: rgba(16,16,20,0.18);
+    }
+
+    .dots i:first-child {
+      width: 28px;
+      background: var(--ink);
+    }
+
+    .strip {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 14px;
+      margin-top: 54px;
+    }
+
+    .mini {
+      min-height: 112px;
+      padding: 18px;
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background: rgba(255,255,255,0.86);
+      box-shadow: 0 20px 44px rgba(16,16,20,0.05);
+      text-align: left;
+    }
+
+    .mini b {
+      display: block;
+      margin-bottom: 8px;
+      font-size: 18px;
+    }
+
+    .mini span {
+      display: block;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    .mini::before {
+      content: "";
+      display: block;
+      width: 38px;
+      height: 6px;
+      margin-bottom: 16px;
+      border-radius: 999px;
+      background: var(--accent);
+    }
+
+    .mini:nth-child(2)::before { background: var(--blue); }
+    .mini:nth-child(3)::before { background: var(--violet); }
+    .mini:nth-child(4)::before { background: var(--cyan); }
+
+    @media (max-width: 900px) {
+      .links { display: none; }
+      .hero { padding-top: 42px; }
+      .stage { min-height: 560px; margin-top: 38px; }
+      .red-band { top: 170px; height: 250px; border-radius: 38px; }
+      .float-card {
+        left: 50% !important;
+        right: auto !important;
+        width: min(340px, calc(100% - 24px));
+        transform: translateX(-50%) !important;
+      }
+      .float-card:nth-of-type(1) { top: 20px; }
+      .float-card:nth-of-type(2) { top: 150px; }
+      .float-card:nth-of-type(3) { top: 280px; }
+      .strip { grid-template-columns: 1fr 1fr; }
+    }
+
+    @media (max-width: 560px) {
+      .page { padding: 18px 14px 44px; }
+      .nav { align-items: flex-start; }
+      .login { min-width: 128px; }
+      h1 { font-size: clamp(42px, 13vw, 52px); line-height: 1.06; }
+      .lead { font-size: 15px; }
+      .actions { flex-direction: column; width: 100%; }
+      button { width: 100%; }
+      .stage { min-height: 620px; }
+      .red-band { width: 100%; top: 205px; height: 300px; }
+      .float-card { border-radius: 24px; grid-template-columns: 48px 1fr; }
+      .float-card:nth-of-type(1) { top: 18px; }
+      .float-card:nth-of-type(2) { top: 158px; }
+      .float-card:nth-of-type(3) { top: 298px; }
+      .soft-left, .soft-right { display: none; }
+      .strip { grid-template-columns: 1fr; margin-top: 34px; }
+    }
+  </style>
+</head>
+<body>
+  <main class="page" data-screen-label="01 红色发布首页">
+    <nav class="nav" aria-label="主导航">
+      <div class="brand"><span class="mark" aria-hidden="true"></span><span>棱焰智能</span></div>
+      <div class="links"><span>模型</span><span>产品</span><span>API</span><span>研究</span><span>价格</span></div>
+      <button class="login">登录</button>
+    </nav>
+
+    <section class="hero">
+      <span class="eyebrow">红色发布型模型平台</span>
+      <h1>棱焰<span class="inline-icon">&lt;/&gt;</span>计划</h1>
+      <p class="lead">为产品团队和开发者提供模型、用量、评测与部署入口。红色负责发布能量，黑色负责可信信息，蓝紫只提示能力分类。</p>
+      <div class="actions">
+        <button class="primary">立即开通</button>
+        <button class="secondary">接入文档</button>
+      </div>
+
+      <section class="stage" aria-label="红色产品矩阵">
+        <div class="soft-block soft-left"></div>
+        <div class="soft-block soft-right"></div>
+        <div class="red-band"></div>
+        <i class="spark one"></i>
+        <i class="spark two"></i>
+        <article class="float-card">
+          <span class="card-icon">%</span>
+          <div><h2>前沿模型</h2><p>长上下文、代码协作、多轮任务编排。</p></div>
+        </article>
+        <article class="float-card">
+          <span class="card-icon">¥</span>
+          <div><h2>用量翻倍</h2><p>团队额度、调用统计、成本预测同屏。</p></div>
+        </article>
+        <article class="float-card">
+          <span class="card-icon">&lt;/&gt;</span>
+          <div><h2>接口接入</h2><p>统一鉴权、日志追踪、质量评测闭环。</p></div>
+        </article>
+      </section>
+
+      <div class="dots" aria-hidden="true"><i></i><i></i><i></i></div>
+
+      <section class="strip" aria-label="能力模块">
+        <article class="mini"><b>模型广场</b><span>统一展示文本、代码、语音和图像模型。</span></article>
+        <article class="mini"><b>开发者 API</b><span>调用统计、错误追踪和延迟分析一处完成。</span></article>
+        <article class="mini"><b>多模态创作</b><span>紫色只标记扩展能力，不抢红色主视觉。</span></article>
+        <article class="mini"><b>上线评测</b><span>质量报告、灰度对比和风险提示内置。</span></article>
+      </section>
+    </section>
+  </main>
+  <script>
+    window.addEventListener("message", (event) => {
+      if (event.data && event.data.type === "__edit_mode_set_keys") {
+        const edits = event.data.edits || {};
+        if (edits.accent) document.documentElement.style.setProperty("--accent", edits.accent);
+        if (edits.deep) document.documentElement.style.setProperty("--accent-deep", edits.deep);
+        if (edits.blue) document.documentElement.style.setProperty("--blue", edits.blue);
+      }
+    });
+    const UI_DESIGN_TWEAKS = /*EDITMODE-BEGIN*/{
+      "accent": "#ff3f3a",
+      "deep": "#e21d2f",
+      "blue": "#2563eb"
+    }/*EDITMODE-END*/;
+    window.parent.postMessage({ type: "__edit_mode_available", edits: UI_DESIGN_TWEAKS }, "*");
+  </script>
+</body>
+</html>

package/skills/ui-design/tests/e2e/runs/ember-prism-red-preview-1/screenshots/browser-check.json

@@ -0,0 +1,49 @@
+{
+  "html": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/ember-prism-red-preview-1/outputs/index.html",
+  "desktop": {
+    "viewport": {
+      "width": 1440,
+      "height": 980
+    },
+    "screenshot": "/Volumes/D 1/code/kakadeai/minimal-agent/skills/ui-design/tests/e2e/runs/ember-prism-red-preview-1/screenshots/desktop.png",
+    "console": [],
+    "inspection": {
+      "title": "棱焰智能红色预览",
+      "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/ember-prism-red-preview-1/screenshots/mobile.png",
+    "console": [],
+    "inspection": {
+      "title": "棱焰智能红色预览",
+      "screenLabels": [
+        "01 红色发布首页"
+      ],
+      "editModeBlocks": 1,
+      "hasEditModeAvailable": true,
+      "hasEditModeSetKeys": true,
+      "hasEditsPayload": true,
+      "documentWidth": 390,
+      "viewportWidth": 390,
+      "horizontalOverflow": false,
+      "smallTargets": []
+    }
+  },
+  "issues": [],
+  "pass": true
+}