npm - @openprd/cli - Versions diffs - 0.1.9 → 0.1.11 - Mend

@openprd/cli 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/.openprd/benchmarks/index.md +16 -0
package/.openprd/benchmarks/sources.yaml +53 -1
package/.openprd/config.yaml +10 -0
package/.openprd/design/README.md +47 -0
package/.openprd/design/README_EN.md +25 -0
package/.openprd/design/active/asset-spec.md +15 -0
package/.openprd/design/active/direction-plan.md +7 -0
package/.openprd/design/active/facts-sheet.md +13 -0
package/.openprd/design/active/image-preflight.md +9 -0
package/.openprd/design/active/selected-direction.md +11 -0
package/.openprd/design/anti-slop.md +16 -0
package/.openprd/design/assets/dark-mesh.svg +14 -0
package/.openprd/design/assets/paper-grid.svg +14 -0
package/.openprd/design/assets/surface-presets.md +21 -0
package/.openprd/design/assets/workbench-grid.svg +16 -0
package/.openprd/design/checklists/ui-quality-gate.md +22 -0
package/.openprd/design/components/component-catalog.md +42 -0
package/.openprd/design/layouts/layout-catalog.json +45 -0
package/.openprd/design/lenses/frontend-lenses.md +31 -0
package/.openprd/design/recipes/content-experience.md +26 -0
package/.openprd/design/recipes/operational-tool.md +25 -0
package/.openprd/design/recipes/product-launch.md +26 -0
package/.openprd/design/templates/README.md +36 -0
package/.openprd/design/templates/README_EN.md +31 -0
package/.openprd/design/templates/content-home.html +415 -0
package/.openprd/design/templates/ops-dashboard.html +340 -0
package/.openprd/design/templates/product-launch.html +360 -0
package/.openprd/design/themes/theme-catalog.json +77 -0
package/.openprd/engagements/active/prd.md +111 -100
package/.openprd/schema/prd.schema.yaml +25 -0
package/.openprd/templates/base/intake.md +17 -0
package/.openprd/templates/base/prd.md +31 -6
package/AGENTS.md +10 -7
package/README.md +26 -28
package/README_EN.md +3 -3
package/package.json +41 -2
package/scripts/openprd-codex-isolated-worker.mjs +799 -0
package/skills/openprd-benchmark-router/SKILL.md +5 -0
package/skills/openprd-frontend-design/SKILL.md +161 -0
package/skills/openprd-frontend-design/references/design-asset-contract.md +34 -0
package/skills/openprd-frontend-design/references/direction-engine.md +46 -0
package/skills/openprd-harness/SKILL.md +37 -20
package/skills/openprd-learning-review/SKILL.md +2 -1
package/skills/openprd-learning-review/references/style-packs/xianxia-cultivation.prompt.md +1 -1
package/skills/openprd-quality/SKILL.md +5 -3
package/skills/openprd-requirement-intake/SKILL.md +27 -5
package/skills/openprd-requirement-intake/references/prd-template-lenses.md +6 -3
package/skills/openprd-requirement-intake/references/routing-rubric.md +9 -5
package/skills/openprd-requirement-intake/references/startup-validation-lens.md +108 -0
package/skills/openprd-router/SKILL.md +13 -5
package/skills/openprd-shared/SKILL.md +38 -25
package/src/agent-integration.js +120 -69
package/src/brainstorm-artifacts.js +1805 -0
package/src/brainstorm-presentation.js +233 -0
package/src/brainstorm.js +766 -0
package/src/cli/args.js +51 -3
package/src/cli/doctor-print.js +34 -8
package/src/cli/print.js +6 -0
package/src/cli/quality-print.js +79 -3
package/src/cli/run-print.js +43 -1
package/src/cli/shared-print.js +33 -2
package/src/cli/workflow-print.js +21 -0
package/src/codex-hook-runner-template.mjs +838 -58
package/src/design-starter-support.js +462 -0
package/src/design-starter.js +1207 -0
package/src/diagram-core.js +384 -151
package/src/html-artifacts.js +403 -50
package/src/knowledge.js +291 -32
package/src/learning-review.js +3 -3
package/src/loop.js +839 -101
package/src/openprd.js +86 -1
package/src/openspec/change-validate.js +1 -0
package/src/prd-core.js +119 -2
package/src/quality-html-artifact.js +30 -5
package/src/quality-learning.js +50 -6
package/src/quality.js +22 -12
package/src/run-harness.js +191 -29
package/src/self-update.js +301 -4
package/src/standards.js +46 -5
package/src/visual-prepare.js +940 -0
package/src/workspace-core.js +175 -0
package/src/workspace-workflow.js +307 -7
package/.openprd/benchmarks/evidence/milvus-io-ai-code-review-gets-better-when-models-debate-claude-vs-gemini-vs-code.md +0 -14
package/.openprd/benchmarks/evidence/nolanlawson-com-using-ai-to-write-better-code-more-slowly.md +0 -14
package/.openprd/discovery/config.json +0 -35
package/.openprd/engagements/active/flows.md +0 -35
package/.openprd/engagements/active/handoff.md +0 -16
package/.openprd/engagements/active/review.html +0 -61
package/.openprd/engagements/active/roles.md +0 -22
package/.openprd/engagements/work-units/wu-20260524015648-6d33ded7.json +0 -23
package/.openprd/engagements/work-units/wu-20260602113956-a99b5b88.json +0 -18
package/.openprd/engagements/work-units/wu-20260602122244-78656aaf.json +0 -18
package/.openprd/engagements/work-units/wu-20260602122442-e96489e2.json +0 -18
package/.openprd/engagements/work-units/wu-20260602132835-695429e8.json +0 -18
package/.openprd/exports/.gitkeep +0 -0
package/.openprd/knowledge/candidates/candidate-turn-1780116203372-5f266a79e968c758/candidate.json +0 -78
package/.openprd/knowledge/candidates/candidate-turn-1780116203372-5f266a79e968c758/diagnostic-report.json +0 -129
package/.openprd/knowledge/candidates/candidate-turn-1780116203372-5f266a79e968c758/root-cause-candidates.json +0 -41
package/.openprd/knowledge/candidates/candidate-turn-1780116203372-5f266a79e968c758/timeline.json +0 -14
package/.openprd/knowledge/drafts/openprd-experience-diagnostic-candidate-turn-1780116203372-5f266a79e968c758/SKILL.md +0 -49
package/.openprd/knowledge/index.json +0 -47
package/.openprd/reviews/v0001.html +0 -1322
package/.openprd/reviews/v0002.html +0 -1150
package/.openprd/reviews/v0003.html +0 -1150
package/.openprd/reviews/v0004.html +0 -1150
package/.openprd/reviews/v0005.html +0 -1150
package/.openprd/sessions/.gitkeep +0 -0
package/.openprd/state/changes.json +0 -27
package/.openprd/state/current.json +0 -505
package/.openprd/state/release-ledger.json +0 -387
package/.openprd/state/version-index.json +0 -67
package/.openprd/state/versions/.gitkeep +0 -0
package/.openprd/state/versions/v0001.json +0 -121
package/.openprd/state/versions/v0001.md +0 -161
package/.openprd/state/versions/v0002.json +0 -264
package/.openprd/state/versions/v0002.md +0 -183
package/.openprd/state/versions/v0003.json +0 -269
package/.openprd/state/versions/v0003.md +0 -188
package/.openprd/state/versions/v0004.json +0 -274
package/.openprd/state/versions/v0004.md +0 -193
package/.openprd/state/versions/v0005.json +0 -299
package/.openprd/state/versions/v0005.md +0 -189
package/docs/assets/openprd-capability-overview-en.png +0 -0
package/docs/assets/openprd-capability-overview-zh.png +0 -0
package/docs/assets/openprd-learning-html.png +0 -0
package/docs/assets/openprd-quality-html.png +0 -0
package/docs/assets/openprd-requirement-routing-en.png +0 -0
package/docs/assets/openprd-requirement-routing-en.svg +0 -102
package/docs/assets/openprd-requirement-routing-zh-refined.png +0 -0
package/docs/assets/openprd-requirement-routing-zh.png +0 -0
package/docs/assets/openprd-requirement-routing-zh.svg +0 -102
package/docs/assets/openprd-review-html.png +0 -0
package/docs/assets/openprd-scenario-overview.png +0 -0
package/docs/assets/openprd-scenario-overview.svg +0 -114
package/docs/assets/openprd-self-evolving-mechanisms-en.png +0 -0
package/docs/assets/openprd-self-evolving-mechanisms-zh.png +0 -0
package/docs/assets/openprd-visual-compare-case-study-en.png +0 -0
package/docs/assets/openprd-visual-compare-case-study-zh.png +0 -0

package/.openprd/design/templates/ops-dashboard.html ADDED Viewed

@@ -0,0 +1,340 @@
+<!-- starter-defaults: lens=operational-density theme=tool-neutral layout=ops-density-grid -->
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>运营工作台模板</title>
+    <style>
+      :root {
+        --bg: #eef2f7;
+        --panel: #ffffff;
+        --panel-soft: #f8fafc;
+        --line: #d7e0ea;
+        --ink: #102131;
+        --muted: #566779;
+        --accent: #1967d2;
+        --accent-soft: rgba(25, 103, 210, 0.12);
+        --radius: 18px;
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font-family: "Inter", "PingFang SC", sans-serif;
+        background: linear-gradient(180deg, #f6f8fb 0%, var(--bg) 100%);
+        color: var(--ink);
+      }
+      .page {
+        width: min(1280px, calc(100vw - 28px));
+        margin: 0 auto;
+        padding: 20px 0 32px;
+      }
+      .shell {
+        display: grid;
+        grid-template-columns: 260px minmax(0, 1fr);
+        gap: 16px;
+      }
+      .sidebar,
+      .topbar,
+      .panel {
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        background: var(--panel);
+      }
+      .sidebar {
+        padding: 18px;
+        min-height: calc(100vh - 40px);
+      }
+      .brand {
+        font-size: 18px;
+        font-weight: 700;
+      }
+      .nav,
+      .stats,
+      .grid,
+      .subgrid {
+        display: grid;
+        gap: 12px;
+      }
+      .nav {
+        margin-top: 18px;
+      }
+      .nav-item,
+      .chip {
+        border-radius: 12px;
+        padding: 10px 12px;
+      }
+      .nav-item.active,
+      .chip {
+        background: var(--accent-soft);
+        color: var(--accent);
+      }
+      .main {
+        display: grid;
+        gap: 16px;
+      }
+      .topbar {
+        padding: 18px 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 14px;
+      }
+      h1, h2, h3, p { margin: 0; }
+      .topbar p,
+      .panel p {
+        color: var(--muted);
+        line-height: 1.65;
+      }
+      .stats {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      .panel {
+        padding: 18px;
+      }
+      .stat strong {
+        display: block;
+        margin-top: 10px;
+        font-size: 28px;
+      }
+      .grid {
+        grid-template-columns: 1.25fr 0.75fr;
+      }
+      .subgrid {
+        grid-template-columns: 0.9fr 1.1fr;
+      }
+      .list {
+        display: grid;
+        gap: 10px;
+        margin-top: 14px;
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 1.2fr 0.7fr 0.6fr;
+        gap: 12px;
+        padding: 12px 14px;
+        border-radius: 14px;
+        background: var(--panel-soft);
+      }
+      .row strong,
+      .action strong,
+      .delta-row strong,
+      .topic-card strong {
+        display: block;
+      }
+      .row span,
+      .delta-row span {
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .action-list {
+        margin-top: 14px;
+        display: grid;
+        gap: 10px;
+      }
+      .action {
+        padding: 12px 14px;
+        border-radius: 14px;
+        border: 1px solid var(--line);
+      }
+      .action p {
+        margin-top: 6px;
+        color: var(--muted);
+        line-height: 1.6;
+      }
+      .delta-list,
+      .topic-list {
+        display: grid;
+        gap: 10px;
+        margin-top: 14px;
+      }
+      .delta-row,
+      .topic-card {
+        padding: 14px;
+        border-radius: 14px;
+        background: var(--panel-soft);
+      }
+      .delta-row p,
+      .topic-card p {
+        margin-top: 6px;
+      }
+      @media (max-width: 980px) {
+        .shell,
+        .stats,
+        .grid,
+        .subgrid {
+          grid-template-columns: 1fr;
+        }
+        .sidebar {
+          min-height: auto;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <div class="shell">
+        <aside class="sidebar">
+          <div class="brand">[工作台 / 系统名]</div>
+          <div class="nav">
+            <div class="nav-item active">[当前模块]</div>
+            <div class="nav-item">[模块二]</div>
+            <div class="nav-item">[模块三]</div>
+            <div class="nav-item">[模块四]</div>
+          </div>
+        </aside>
+        <section class="main">
+          <header class="topbar">
+            <div>
+              <span class="chip">运营工作台模板</span>
+              <h1 style="margin-top: 10px; font-size: 30px;">[本页标题]</h1>
+              <p style="margin-top: 8px;">[一句说明这页帮助用户每天更快做什么。]</p>
+            </div>
+            <div class="chip">[筛选 / 时间范围 / 当前状态]</div>
+          </header>
+          <section class="stats">
+            <article class="panel stat">
+              <span class="chip">[总览标签一]</span>
+              <strong>[指标一]</strong>
+              <p>[指标说明一]</p>
+            </article>
+            <article class="panel stat">
+              <span class="chip">[总览标签二]</span>
+              <strong>[指标二]</strong>
+              <p>[指标说明二]</p>
+            </article>
+            <article class="panel stat">
+              <span class="chip">[总览标签三]</span>
+              <strong>[指标三]</strong>
+              <p>[指标说明三]</p>
+            </article>
+            <article class="panel stat">
+              <span class="chip">[总览标签四]</span>
+              <strong>[指标四]</strong>
+              <p>[指标说明四]</p>
+            </article>
+          </section>
+          <section class="grid">
+            <article class="panel">
+              <h2>[主要列表 / 队列]</h2>
+              <p style="margin-top: 8px;">[把用户最常扫的对象放在左边。]</p>
+              <div class="list">
+                <div class="row">
+                  <strong>[对象一]</strong>
+                  <span>[状态一]</span>
+                  <span>[动作一标签]</span>
+                </div>
+                <div class="row">
+                  <strong>[对象二]</strong>
+                  <span>[状态二]</span>
+                  <span>[动作二标签]</span>
+                </div>
+                <div class="row">
+                  <strong>[对象三]</strong>
+                  <span>[状态三]</span>
+                  <span>[动作三标签]</span>
+                </div>
+              </div>
+            </article>
+            <article class="panel">
+              <h2>[待处理动作]</h2>
+              <p style="margin-top: 8px;">[把判断和下一步放在同一视图里。]</p>
+              <div class="action-list">
+                <div class="action">
+                  <strong>[动作一]</strong>
+                  <p>[动作一说明]</p>
+                </div>
+                <div class="action">
+                  <strong>[动作二]</strong>
+                  <p>[动作二说明]</p>
+                </div>
+                <div class="action">
+                  <strong>[动作三]</strong>
+                  <p>[动作三说明]</p>
+                </div>
+              </div>
+            </article>
+          </section>
+          <section class="subgrid">
+            <article class="panel">
+              <h2>[最近订阅变化]</h2>
+              <p style="margin-top: 8px;">[用近 7 天的订阅变化帮用户判断哪类内容值得继续发。]</p>
+              <div class="delta-list">
+                <div class="delta-row">
+                  <strong>[变化项一]</strong>
+                  <span>[变化说明一]</span>
+                  <p>[变化备注一]</p>
+                </div>
+                <div class="delta-row">
+                  <strong>[变化项二]</strong>
+                  <span>[变化说明二]</span>
+                  <p>[变化备注二]</p>
+                </div>
+                <div class="delta-row">
+                  <strong>[变化项三]</strong>
+                  <span>[变化说明三]</span>
+                  <p>[变化备注三]</p>
+                </div>
+              </div>
+            </article>
+            <article class="panel">
+              <h2>[选题状态]</h2>
+              <p style="margin-top: 8px;">[把待写、待发和待放弃的题目放到同一块，避免开新坑太轻松。]</p>
+              <div class="topic-list">
+                <div class="topic-card">
+                  <strong>[选题一]</strong>
+                  <p>[选题一说明]</p>
+                </div>
+                <div class="topic-card">
+                  <strong>[选题二]</strong>
+                  <p>[选题二说明]</p>
+                </div>
+                <div class="topic-card">
+                  <strong>[选题三]</strong>
+                  <p>[选题三说明]</p>
+                </div>
+              </div>
+            </article>
+          </section>
+        </section>
+      </div>
+    </main>
+  </body>
+</html>

package/.openprd/design/templates/product-launch.html ADDED Viewed

@@ -0,0 +1,360 @@
+<!-- starter-defaults: lens=product-launch theme=deep-launch layout=product-spec-runway -->
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>产品发布页模板</title>
+    <style>
+      :root {
+        --bg: #0d1116;
+        --panel: rgba(16, 22, 30, 0.88);
+        --panel-soft: rgba(24, 30, 38, 0.74);
+        --line: rgba(255, 255, 255, 0.1);
+        --text: #f4f7fb;
+        --muted: rgba(244, 247, 251, 0.72);
+        --accent: #7ce0c3;
+        --accent-soft: rgba(124, 224, 195, 0.14);
+        --radius: 24px;
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font-family: "Inter", "PingFang SC", sans-serif;
+        background:
+          radial-gradient(circle at top center, rgba(124, 224, 195, 0.16), transparent 28%),
+          linear-gradient(180deg, #091018 0%, var(--bg) 100%);
+        color: var(--text);
+      }
+      .page {
+        width: min(1180px, calc(100vw - 32px));
+        margin: 0 auto;
+        padding: 28px 0 56px;
+      }
+      .hero,
+      .section,
+      .cta {
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        background: var(--panel);
+      }
+      .hero {
+        padding: 32px;
+        display: grid;
+        grid-template-columns: 1.15fr 0.85fr;
+        gap: 22px;
+      }
+      .eyebrow,
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 6px 12px;
+        border-radius: 999px;
+        background: var(--accent-soft);
+        color: var(--accent);
+        font-size: 13px;
+      }
+      h1, h2, h3, p { margin: 0; }
+      h1 {
+        margin-top: 18px;
+        font-size: clamp(40px, 6vw, 70px);
+        line-height: 0.96;
+        letter-spacing: 0;
+      }
+      .lede {
+        margin-top: 18px;
+        max-width: 50ch;
+        color: var(--muted);
+        line-height: 1.7;
+      }
+      .actions,
+      .metrics,
+      .feature-grid,
+      .proof-grid {
+        display: grid;
+        gap: 14px;
+      }
+      .actions {
+        margin-top: 24px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .button,
+      .ghost {
+        min-height: 48px;
+        border-radius: 999px;
+        border: 1px solid var(--line);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        padding: 0 18px;
+      }
+      .button {
+        background: var(--text);
+        color: #081019;
+      }
+      .ghost {
+        color: var(--text);
+      }
+      .showcase {
+        padding: 22px;
+        border-radius: 22px;
+        min-height: 100%;
+        background:
+          linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
+          linear-gradient(135deg, rgba(124, 224, 195, 0.14), transparent 55%);
+        display: grid;
+        gap: 14px;
+      }
+      .showcase-box,
+      .metric,
+      .feature,
+      .proof {
+        border: 1px solid var(--line);
+        border-radius: 18px;
+        background: var(--panel-soft);
+      }
+      .showcase-box {
+        min-height: 280px;
+        color: var(--muted);
+      }
+      .showcase-copy,
+      .proof-copy {
+        color: var(--muted);
+        line-height: 1.7;
+      }
+      .showcase-media,
+      .proof-media {
+        overflow: hidden;
+        border-radius: 18px;
+        border: 1px solid var(--line);
+        background: rgba(255, 255, 255, 0.03);
+      }
+      .showcase-media {
+        min-height: 280px;
+      }
+      .proof-media {
+        aspect-ratio: 16 / 9;
+        margin-bottom: 14px;
+      }
+      .media-frame,
+      .media-fallback {
+        min-height: inherit;
+        height: 100%;
+      }
+      .media-frame {
+        display: grid;
+      }
+      .media-frame img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+      }
+      .media-frame figcaption,
+      .media-fallback span {
+        padding: 12px 14px;
+        font-size: 13px;
+        color: var(--muted);
+      }
+      .media-frame figcaption {
+        border-top: 1px solid var(--line);
+        background: rgba(9, 16, 24, 0.72);
+      }
+      .media-fallback {
+        display: grid;
+        place-items: center;
+        background:
+          linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
+          linear-gradient(135deg, rgba(124, 224, 195, 0.14), transparent 55%);
+      }
+      .metrics {
+        margin-top: 18px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .metric,
+      .feature,
+      .proof {
+        padding: 18px;
+      }
+      .metric strong {
+        display: block;
+        font-size: 28px;
+        margin-bottom: 6px;
+      }
+      .section {
+        margin-top: 20px;
+        padding: 24px;
+      }
+      .section-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+        gap: 18px;
+        margin-bottom: 18px;
+      }
+      .section-head p,
+      .feature p,
+      .proof p {
+        color: var(--muted);
+        line-height: 1.7;
+      }
+      .feature-grid,
+      .proof-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .cta {
+        margin-top: 20px;
+        padding: 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 18px;
+      }
+      @media (max-width: 920px) {
+        .hero,
+        .metrics,
+        .feature-grid,
+        .proof-grid,
+        .cta {
+          display: grid;
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <section class="hero">
+        <div>
+          <span class="eyebrow">发布型首页模板</span>
+          <h1>[产品名 / 发布主题]</h1>
+          <p class="lede">[用一句直接的话讲清楚这次发布带来的变化、面向的人群，以及为什么现在值得点进去。]</p>
+          <div class="actions">
+            <a class="button" href="#">[主动作]</a>
+            <a class="ghost" href="#">[次动作]</a>
+          </div>
+          <div class="metrics">
+            <article class="metric">
+              <span class="chip">事实</span>
+              <strong>[版本 / 日期]</strong>
+              <p>[把核实过的事实放这里]</p>
+            </article>
+            <article class="metric">
+              <span class="chip">价值</span>
+              <strong>[核心收益]</strong>
+              <p>[一句可感知的提升]</p>
+            </article>
+            <article class="metric">
+              <span class="chip">范围</span>
+              <strong>[适用对象]</strong>
+              <p>[谁最该看这一页]</p>
+            </article>
+          </div>
+        </div>
+        <aside class="showcase">
+          <div>
+            <span class="chip">主视觉 / 产品图 / 关键界面</span>
+            <p class="showcase-copy" style="margin-top: 12px;">[用真实产品图、关键界面，或至少清楚的产品结构示意，不要只放情绪渐变]</p>
+          </div>
+          <div class="showcase-box showcase-media">[主视觉媒体]</div>
+        </aside>
+      </section>
+      <section class="section">
+        <div class="section-head">
+          <div>
+            <span class="chip">What changed</span>
+            <h2 style="margin-top: 10px;">[这次发布的 3 个重点]</h2>
+          </div>
+          <p>[适合把功能、能力、权益或体验升级拆成三个可扫描模块。]</p>
+        </div>
+        <div class="feature-grid">
+          <article class="feature">
+            <h3>[重点一]</h3>
+            <p>[一句说明它带来的变化]</p>
+          </article>
+          <article class="feature">
+            <h3>[重点二]</h3>
+            <p>[一句说明它带来的变化]</p>
+          </article>
+          <article class="feature">
+            <h3>[重点三]</h3>
+            <p>[一句说明它带来的变化]</p>
+          </article>
+        </div>
+      </section>
+      <section class="section">
+        <div class="section-head">
+          <div>
+            <span class="chip">Proof</span>
+            <h2 style="margin-top: 10px;">[用证据讲，不只用形容词讲]</h2>
+          </div>
+          <p>[这里放规格、案例、截图、兼容范围、交付方式或上线信息。]</p>
+        </div>
+        <div class="proof-grid">
+          <article class="proof">
+            <div class="proof-media">[证据媒体一]</div>
+            <h3>[证据块一]</h3>
+            <p>[数据 / 截图 / 规格 / 范围]</p>
+          </article>
+          <article class="proof">
+            <div class="proof-media">[证据媒体二]</div>
+            <h3>[证据块二]</h3>
+            <p>[数据 / 截图 / 规格 / 范围]</p>
+          </article>
+          <article class="proof">
+            <div class="proof-media">[证据媒体三]</div>
+            <h3>[证据块三]</h3>
+            <p>[数据 / 截图 / 规格 / 范围]</p>
+          </article>
+        </div>
+      </section>
+      <section class="cta">
+        <div>
+          <span class="chip">Next</span>
+          <h2 style="margin-top: 10px;">[收尾 CTA 标题]</h2>
+          <p style="margin-top: 8px; color: var(--muted);">[把发布信息、受众和动作收成一句清楚的人话。]</p>
+        </div>
+        <a class="button" href="#">[最终动作]</a>
+      </section>
+    </main>
+  </body>
+</html>