diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b7800c4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1187 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>AI 编程提效分享 - Apple Style Slides</title>
+  <style>
+    :root {
+      --ink: #0b0f17;
+      --muted: #5b6675;
+      --soft: #f5f5f7;
+      --panel: rgba(255, 255, 255, 0.78);
+      --line: rgba(17, 24, 39, 0.1);
+      --blue: #0071e3;
+      --green: #2d8f6f;
+      --orange: #c96a1b;
+      --shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
+      --radius: 28px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html {
+      scroll-behavior: smooth;
+    }
+
+    body {
+      margin: 0;
+      background: var(--soft);
+      color: var(--ink);
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+      overflow: hidden;
+    }
+
+    button {
+      font: inherit;
+    }
+
+    .deck {
+      height: 100vh;
+      width: 100vw;
+      overflow-x: hidden;
+      overflow-y: auto;
+      scroll-snap-type: y mandatory;
+    }
+
+    .slide {
+      position: relative;
+      min-height: 100vh;
+      scroll-snap-align: start;
+      display: grid;
+      align-items: center;
+      padding: 7.5vh clamp(22px, 5vw, 72px);
+      overflow: hidden;
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,245,247,0.98)),
+        var(--soft);
+    }
+
+    .slide.dark {
+      background: linear-gradient(180deg, #090b10 0%, #161a22 100%);
+      color: #fff;
+    }
+
+    .slide.dark .eyebrow,
+    .slide.dark .muted,
+    .slide.dark .caption {
+      color: rgba(255,255,255,0.66);
+    }
+
+    .slide.dark .glass,
+    .slide.dark .mini-card,
+    .slide.dark .side-note {
+      background: rgba(255,255,255,0.08);
+      border-color: rgba(255,255,255,0.16);
+      color: #fff;
+    }
+
+    .content {
+      width: min(1180px, 100%);
+      margin: 0 auto;
+      position: relative;
+      z-index: 2;
+    }
+
+    .image-content {
+      width: min(1420px, 100%);
+    }
+
+    .center {
+      text-align: center;
+    }
+
+    .eyebrow {
+      margin: 0 0 18px;
+      color: var(--blue);
+      font-size: clamp(14px, 1.4vw, 17px);
+      font-weight: 700;
+      letter-spacing: 0;
+    }
+
+    h1,
+    h2 {
+      margin: 0;
+      font-weight: 760;
+      letter-spacing: 0;
+      line-height: 1.04;
+    }
+
+    h1 {
+      font-size: clamp(48px, 8.6vw, 108px);
+    }
+
+    h2 {
+      font-size: clamp(38px, 6.2vw, 78px);
+    }
+
+    .lead {
+      max-width: 860px;
+      margin: 26px auto 0;
+      color: var(--muted);
+      font-size: clamp(19px, 2.15vw, 30px);
+      line-height: 1.34;
+      font-weight: 520;
+      letter-spacing: 0;
+    }
+
+    .muted {
+      color: var(--muted);
+    }
+
+    .hero-actions,
+    .pill-row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 12px;
+      margin-top: 34px;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 42px;
+      padding: 0 18px;
+      border: 1px solid rgba(15, 23, 42, 0.1);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.72);
+      color: var(--ink);
+      font-size: 15px;
+      font-weight: 650;
+      backdrop-filter: blur(18px);
+    }
+
+    .slide.dark .pill {
+      background: rgba(255,255,255,0.1);
+      border-color: rgba(255,255,255,0.18);
+      color: #fff;
+    }
+
+    .grid-3 {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 18px;
+      margin-top: 46px;
+    }
+
+    .grid-2 {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 28px;
+      align-items: center;
+    }
+
+    .mini-card,
+    .glass,
+    .side-note {
+      border: 1px solid var(--line);
+      background: var(--panel);
+      backdrop-filter: blur(22px);
+      box-shadow: var(--shadow);
+    }
+
+    .mini-card {
+      min-height: 210px;
+      border-radius: 24px;
+      padding: clamp(22px, 2.8vw, 34px);
+    }
+
+    .mini-card .num {
+      display: block;
+      margin-bottom: 18px;
+      color: var(--blue);
+      font-size: 15px;
+      font-weight: 780;
+    }
+
+    .mini-card h3 {
+      margin: 0 0 12px;
+      font-size: clamp(24px, 2.8vw, 36px);
+      letter-spacing: 0;
+      line-height: 1.08;
+    }
+
+    .mini-card p {
+      margin: 0;
+      color: var(--muted);
+      font-size: clamp(16px, 1.55vw, 20px);
+      line-height: 1.48;
+    }
+
+    .big-line {
+      margin-top: 42px;
+      font-size: clamp(28px, 4.2vw, 56px);
+      line-height: 1.08;
+      font-weight: 760;
+      letter-spacing: 0;
+    }
+
+    .image-stage {
+      position: relative;
+      display: grid;
+      place-items: center;
+      min-height: 62vh;
+      border-radius: var(--radius);
+      border: 1px solid var(--line);
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)),
+        #fff;
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+
+    .image-stage img {
+      width: min(98%, 1240px);
+      max-height: 84vh;
+      object-fit: contain;
+      display: block;
+    }
+
+    .image-slide .image-stage {
+      min-height: 82vh;
+    }
+
+    .image-slide .image-stage img {
+      width: 100%;
+      height: 100%;
+      max-height: none;
+      padding: clamp(8px, 1.2vw, 18px);
+    }
+
+    .compact-image-slide .image-stage {
+      min-height: 72vh;
+    }
+
+    .compact-image-slide .image-stage img {
+      width: 92%;
+      height: 92%;
+      padding: clamp(14px, 2vw, 28px);
+    }
+
+    .image-stage.full {
+      min-height: 70vh;
+    }
+
+    .image-stage.full img {
+      width: 100%;
+      height: 100%;
+      max-height: none;
+      object-fit: contain;
+      padding: clamp(10px, 2vw, 24px);
+    }
+
+    .side-note {
+      border-radius: 24px;
+      padding: 26px;
+    }
+
+    .side-note h3 {
+      margin: 0 0 12px;
+      font-size: clamp(24px, 3vw, 36px);
+      line-height: 1.08;
+      letter-spacing: 0;
+    }
+
+    .side-note p {
+      margin: 0;
+      color: var(--muted);
+      font-size: clamp(16px, 1.5vw, 20px);
+      line-height: 1.5;
+    }
+
+    .stack {
+      display: grid;
+      gap: 16px;
+      margin-top: 32px;
+    }
+
+    .step {
+      display: grid;
+      grid-template-columns: 64px 1fr;
+      gap: 18px;
+      align-items: center;
+      padding: 22px 24px;
+      border-radius: 22px;
+      background: rgba(255,255,255,0.72);
+      border: 1px solid var(--line);
+    }
+
+    .step strong {
+      display: grid;
+      place-items: center;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      color: #fff;
+      background: var(--ink);
+      font-size: 18px;
+    }
+
+    .step span {
+      font-size: clamp(18px, 2vw, 25px);
+      font-weight: 720;
+      letter-spacing: 0;
+    }
+
+    .step small {
+      display: block;
+      margin-top: 5px;
+      color: var(--muted);
+      font-size: clamp(14px, 1.35vw, 17px);
+      line-height: 1.38;
+    }
+
+    .compare {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 24px;
+      margin-top: 46px;
+    }
+
+    .compare .mini-card {
+      min-height: 320px;
+    }
+
+    .list {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .list span {
+      display: block;
+      padding: 14px 16px;
+      border-radius: 16px;
+      background: rgba(255,255,255,0.72);
+      border: 1px solid var(--line);
+      color: var(--ink);
+      font-size: clamp(16px, 1.5vw, 19px);
+      font-weight: 650;
+    }
+
+    .slide.dark .list span {
+      color: #fff;
+      background: rgba(255,255,255,0.08);
+      border-color: rgba(255,255,255,0.16);
+    }
+
+    .nav {
+      position: fixed;
+      left: 50%;
+      bottom: 22px;
+      z-index: 20;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 9px 12px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.72);
+      border: 1px solid rgba(15,23,42,0.1);
+      box-shadow: 0 12px 38px rgba(15, 23, 42, 0.14);
+      backdrop-filter: blur(22px);
+    }
+
+    .dot {
+      width: 9px;
+      height: 9px;
+      border: 0;
+      border-radius: 50%;
+      background: #b8c0cc;
+      cursor: pointer;
+      transition: width 180ms ease-out, background-color 180ms ease-out;
+    }
+
+    .dot[aria-current="true"] {
+      width: 28px;
+      border-radius: 999px;
+      background: var(--ink);
+    }
+
+    .controls {
+      position: fixed;
+      right: 22px;
+      bottom: 22px;
+      z-index: 21;
+      display: flex;
+      gap: 10px;
+    }
+
+    .control {
+      width: 42px;
+      height: 42px;
+      border: 1px solid rgba(15,23,42,0.1);
+      border-radius: 50%;
+      color: var(--ink);
+      background: rgba(255,255,255,0.74);
+      box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
+      cursor: pointer;
+      backdrop-filter: blur(18px);
+      transition: transform 180ms ease-out, background-color 180ms ease-out;
+    }
+
+    .control:hover,
+    .dot:hover {
+      background: #fff;
+    }
+
+    .control:focus-visible,
+    .dot:focus-visible {
+      outline: 3px solid rgba(0,113,227,0.32);
+      outline-offset: 3px;
+    }
+
+    .progress {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 30;
+      height: 3px;
+      width: 100%;
+      background: rgba(15,23,42,0.08);
+    }
+
+    .progress span {
+      display: block;
+      height: 100%;
+      width: 10%;
+      background: var(--blue);
+      transition: width 180ms ease-out;
+    }
+
+    .caption {
+      margin-top: 18px;
+      color: var(--muted);
+      font-size: 14px;
+      text-align: center;
+    }
+
+    .doc-slide {
+      align-items: start;
+      overflow-y: auto;
+    }
+
+    .doc-content {
+      width: min(1180px, 100%);
+      margin: 0 auto;
+      padding: 4vh 0 9vh;
+    }
+
+    .doc-content h2 {
+      font-size: clamp(36px, 5vw, 64px);
+    }
+
+    .doc-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 18px;
+      margin-top: 34px;
+    }
+
+    .doc-card {
+      border: 1px solid var(--line);
+      border-radius: 22px;
+      background: rgba(255,255,255,0.78);
+      box-shadow: var(--shadow);
+      padding: clamp(20px, 2.4vw, 30px);
+    }
+
+    .doc-card.wide {
+      grid-column: 1 / -1;
+    }
+
+    .doc-card h3 {
+      margin: 0 0 14px;
+      font-size: clamp(22px, 2.4vw, 32px);
+      line-height: 1.1;
+      letter-spacing: 0;
+    }
+
+    .doc-card p,
+    .doc-card li {
+      color: var(--muted);
+      font-size: clamp(15px, 1.35vw, 18px);
+      line-height: 1.48;
+    }
+
+    .doc-card ul,
+    .doc-card ol {
+      margin: 12px 0 0;
+      padding-left: 1.2em;
+    }
+
+    .doc-card a {
+      color: var(--blue);
+      text-decoration: none;
+      font-weight: 700;
+    }
+
+    .cmd {
+      margin: 12px 0 0;
+      padding: 14px 16px;
+      border-radius: 16px;
+      background: #101722;
+      color: #e8eef7;
+      font-family: "SF Mono", "Menlo", "Consolas", monospace;
+      font-size: clamp(13px, 1.1vw, 15px);
+      line-height: 1.5;
+      overflow-x: auto;
+      white-space: pre;
+    }
+
+    .burn-slide {
+      background:
+        radial-gradient(circle at 76% 36%, rgba(255, 114, 47, 0.22), transparent 30%),
+        radial-gradient(circle at 74% 66%, rgba(0, 113, 227, 0.2), transparent 34%),
+        linear-gradient(180deg, #070a10 0%, #152236 100%);
+    }
+
+    .burn-layout {
+      display: grid;
+      grid-template-columns: 0.88fr 1.12fr;
+      gap: clamp(28px, 5vw, 72px);
+      align-items: center;
+    }
+
+    .burn-copy {
+      text-align: left;
+    }
+
+    .burn-copy h2 {
+      font-size: clamp(42px, 6vw, 86px);
+    }
+
+    .burn-copy .lead {
+      margin-left: 0;
+      color: rgba(255,255,255,0.68);
+    }
+
+    .burn-shot {
+      position: relative;
+      display: grid;
+      align-items: center;
+      min-height: min(68vh, 560px);
+      border: 1px solid rgba(255,255,255,0.14);
+      border-radius: 26px;
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)),
+        #090d14;
+      box-shadow:
+        0 34px 90px rgba(0,0,0,0.38),
+        0 0 120px rgba(255, 118, 43, 0.2);
+      overflow: hidden;
+    }
+
+    .burn-shot::before {
+      content: "";
+      position: absolute;
+      inset: -40% -20%;
+      background:
+        conic-gradient(from 180deg, transparent, rgba(255, 111, 40, 0.22), transparent, rgba(0,113,227,0.16), transparent);
+      animation: spinGlow 8s linear infinite;
+    }
+
+    .burn-screen {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      gap: 18px;
+      margin: 18px;
+      padding: clamp(18px, 2vw, 28px);
+      border-radius: 18px;
+      background: rgba(5, 9, 16, 0.76);
+      backdrop-filter: blur(18px);
+      overflow: hidden;
+    }
+
+    .burn-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: rgba(255,255,255,0.6);
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    .lights {
+      display: flex;
+      gap: 8px;
+    }
+
+    .lights span {
+      width: 11px;
+      height: 11px;
+      border-radius: 50%;
+      background: #ff5f57;
+    }
+
+    .lights span:nth-child(2) {
+      background: #ffbd2e;
+    }
+
+    .lights span:nth-child(3) {
+      background: #28c840;
+    }
+
+    .burn-badge-row {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      align-items: center;
+      color: rgba(255,255,255,0.62);
+      font-size: 14px;
+      font-weight: 740;
+    }
+
+    .burn-badge {
+      display: inline-flex;
+      align-items: center;
+      min-height: 36px;
+      padding: 0 14px;
+      border: 1px solid rgba(255,255,255,0.14);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.08);
+      color: #fff;
+    }
+
+    .burn-stat-img {
+      width: 100%;
+      border-radius: 18px;
+      border: 1px solid rgba(255,255,255,0.12);
+      box-shadow: 0 28px 70px rgba(0,0,0,0.32);
+      animation: screenshotFloat 3.4s ease-in-out infinite;
+    }
+
+    .burn-evidence {
+      position: relative;
+    }
+
+    .burn-runtime-img {
+      position: absolute;
+      right: -4%;
+      bottom: -18%;
+      width: min(34%, 210px);
+      max-height: 260px;
+      object-fit: cover;
+      object-position: center bottom;
+      border-radius: 18px;
+      border: 1px solid rgba(255,255,255,0.2);
+      box-shadow: 0 24px 58px rgba(0,0,0,0.38);
+      transform: rotate(3deg);
+      animation: runtimePop 3.8s ease-in-out infinite;
+    }
+
+    .burn-callout {
+      position: relative;
+      z-index: 2;
+      margin-top: 12px;
+      color: #fff;
+      font-size: clamp(26px, 3vw, 42px);
+      font-weight: 820;
+      line-height: 1.05;
+      text-align: center;
+      text-shadow: 0 0 34px rgba(255, 121, 36, 0.44);
+      animation: logPulse 2.4s ease-in-out infinite;
+    }
+
+    .heat {
+      color: #ffb067;
+    }
+
+    @keyframes spinGlow {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes logPulse {
+      50% {
+        transform: scale(1.015);
+        color: #ffb067;
+      }
+    }
+
+    @keyframes screenshotFloat {
+      50% {
+        transform: translateY(-8px) scale(1.012);
+        box-shadow: 0 36px 90px rgba(255, 128, 48, 0.22);
+      }
+    }
+
+    @keyframes runtimePop {
+      50% {
+        transform: rotate(0deg) translateY(-7px) scale(1.035);
+      }
+    }
+
+    @media (max-width: 820px) {
+      body {
+        overflow: auto;
+      }
+
+      .slide {
+        padding: 76px 18px 86px;
+      }
+
+      .grid-3,
+      .grid-2,
+      .compare,
+      .doc-grid,
+      .burn-layout {
+        grid-template-columns: 1fr;
+      }
+
+      .burn-copy {
+        text-align: center;
+      }
+
+      .burn-copy .lead {
+        margin-left: auto;
+      }
+
+      .burn-shot {
+        min-height: 52vh;
+      }
+
+      .burn-runtime-img {
+        position: relative;
+        right: auto;
+        bottom: auto;
+        width: 100%;
+        max-height: 220px;
+        margin-top: 12px;
+        transform: none;
+      }
+
+      .doc-slide {
+        align-items: start;
+      }
+
+      .image-stage {
+        min-height: 52vh;
+      }
+
+      .image-slide .image-stage,
+      .image-stage.full {
+        min-height: 68vh;
+      }
+
+      .compact-image-slide .image-stage {
+        min-height: 58vh;
+      }
+
+      .controls {
+        display: none;
+      }
+
+      .nav {
+        max-width: calc(100vw - 28px);
+        overflow-x: auto;
+      }
+
+      .step {
+        grid-template-columns: 48px 1fr;
+        padding: 18px;
+      }
+
+      .step strong {
+        width: 42px;
+        height: 42px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      html {
+        scroll-behavior: auto;
+      }
+
+      .dot,
+      .control,
+      .progress span {
+        transition: none;
+      }
+    }
+
+    @media print {
+      body {
+        overflow: visible;
+      }
+
+      .deck {
+        overflow: visible;
+        height: auto;
+      }
+
+      .slide {
+        break-after: page;
+        min-height: 100vh;
+      }
+
+      .nav,
+      .controls,
+      .progress {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="progress" aria-hidden="true"><span id="progressBar"></span></div>
+
+  <main class="deck" id="deck">
+    <section class="slide dark" id="slide-1" data-title="封面">
+      <div class="content center">
+        <p class="eyebrow">内部分享 / 30 分钟</p>
+        <h1>AI 编程提效分享</h1>
+        <p class="lead">从工具链、插件方法到实战落地。把 AI 从偶尔帮忙，变成稳定的研发生产力。</p>
+        <div class="hero-actions" aria-label="分享主题">
+          <span class="pill">工具链</span>
+          <span class="pill">插件方法</span>
+          <span class="pill">实战闭环</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="slide" id="slide-2" data-title="问题">
+      <div class="content">
+        <p class="eyebrow">问题先讲透</p>
+        <h2>为什么用了 AI，还是没有稳定提效？</h2>
+        <div class="grid-3">
+          <article class="mini-card">
+            <span class="num">01</span>
+            <h3>入口散</h3>
+            <p>IDE、CLI、模型、供应商、插件各管各的，切换和配置本身就在耗时。</p>
+          </article>
+          <article class="mini-card">
+            <span class="num">02</span>
+            <h3>方法散</h3>
+            <p>会问 AI，但每个人都在手搓自己的流程，很难复制给团队。</p>
+          </article>
+          <article class="mini-card">
+            <span class="num">03</span>
+            <h3>验证弱</h3>
+            <p>代码生成很快，但缺少调研、设计、测试和验收，返工没有少。</p>
+          </article>
+        </div>
+        <p class="big-line">真正缺的不是模型能力，而是被组织起来的能力。</p>
+      </div>
+    </section>
+
+    <section class="slide" id="slide-3" data-title="三层模型">
+      <div class="content">
+        <p class="eyebrow">一个适合团队落地的框架</p>
+        <h2>AI 编程提效，从三层来搭。</h2>
+        <div class="stack">
+          <div class="step">
+            <strong>1</strong>
+            <span>工具链 <small>统一入口、统一路由、统一配置、统一成本观察。</small></span>
+          </div>
+          <div class="step">
+            <strong>2</strong>
+            <span>插件方法 <small>把经验固化成插件、skills、MCP 和 workflow。</small></span>
+          </div>
+          <div class="step">
+            <strong>3</strong>
+            <span>实战闭环 <small>围绕真实任务，把调研、设计、编码、测试串起来。</small></span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="slide image-slide compact-image-slide" id="slide-4" data-title="协作模型">
+      <div class="content image-content">
+        <div class="image-stage">
+          <img src="codex-claude-workflow.png" alt="Codex 与 Claude 协作工作流图">
+        </div>
+      </div>
+    </section>
+
+    <section class="slide image-slide" id="slide-5" data-title="cc-switch">
+      <div class="content image-content">
+        <div class="image-stage">
+          <img src="cc-switch-architecture.png" alt="cc-switch 配合 Codex 和 Claude Code 的架构图">
+        </div>
+      </div>
+    </section>
+
+    <section class="slide" id="slide-6" data-title="插件方法">
+      <div class="content">
+        <p class="eyebrow">从 prompt 到 workflow</p>
+        <h2>插件方法层，重点不是装了什么。</h2>
+        <div class="grid-3">
+          <article class="mini-card">
+            <span class="num">Superpowers</span>
+            <h3>让 Agent 按流程工作</h3>
+            <p>先澄清目标，再设计，再计划，再执行和验证。</p>
+          </article>
+          <article class="mini-card">
+            <span class="num">UIUXProMax</span>
+            <h3>把专业判断技能化</h3>
+            <p>设计系统、风格、反模式和检查项变成可重复调用的能力。</p>
+          </article>
+          <article class="mini-card">
+            <span class="num">MCP / Browser</span>
+            <h3>补上下文</h3>
+            <p>让 AI 访问网页、文档、系统和运行结果，而不是只看聊天记录。</p>
+          </article>
+        </div>
+        <p class="big-line">不要复制聊天记录，要复制工作方法。</p>
+      </div>
+    </section>
+
+    <section class="slide dark" id="slide-7" data-title="任务模板">
+      <div class="content">
+        <p class="eyebrow">最值得带走的一页</p>
+        <h2>给 AI 派任务，至少说清 5 件事。</h2>
+        <div class="grid-3">
+          <article class="mini-card">
+            <span class="num">01</span>
+            <h3>目标</h3>
+            <p>最终要产出什么。</p>
+          </article>
+          <article class="mini-card">
+            <span class="num">02</span>
+            <h3>上下文</h3>
+            <p>代码、文档、截图、链接在哪里。</p>
+          </article>
+          <article class="mini-card">
+            <span class="num">03</span>
+            <h3>验收</h3>
+            <p>结果怎样算完成，怎么验证。</p>
+          </article>
+        </div>
+        <p class="lead">把“帮我做一个页面”升级成“基于这些上下文和约束，先给方案，再给计划，最后给可验证结果”。</p>
+      </div>
+    </section>
+
+    <section class="slide" id="slide-8" data-title="实战">
+      <div class="content image-content">
+        <p class="eyebrow">实战层</p>
+        <h2>从调研到落地，才是最有说服力的提效。</h2>
+        <div class="image-stage full" style="margin-top:34px">
+          <img src="codex-end-to-end-practice.png" alt="Codex 从方案调研到验证测试的端到端能力实践图">
+        </div>
+        <p class="caption">核心不是全自动，而是中间交付物也一起生成出来。</p>
+      </div>
+    </section>
+
+    <section class="slide" id="slide-9" data-title="落地建议">
+      <div class="content">
+        <p class="eyebrow">团队怎么开始</p>
+        <h2>先从小范围任务跑通。</h2>
+        <div class="compare">
+          <article class="mini-card">
+            <span class="num" style="color:var(--green)">优先做</span>
+            <h3>收益稳定的任务</h3>
+            <div class="list">
+              <span>新功能 MVP</span>
+              <span>页面开发 / 原型搭建</span>
+              <span>CRUD / 后台接口</span>
+              <span>测试、文档、脚手架</span>
+            </div>
+          </article>
+          <article class="mini-card">
+            <span class="num" style="color:var(--orange)">谨慎做</span>
+            <h3>高风险或模糊任务</h3>
+            <div class="list">
+              <span>复杂遗留系统大重构</span>
+              <span>资金、权限、安全链路</span>
+              <span>验收标准不清的需求</span>
+              <span>无人负责拍板的任务</span>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="slide dark burn-slide" id="slide-10" data-title="总结">
+      <div class="content burn-layout">
+        <div class="burn-copy">
+          <h2>不要一开始追求全自动。</h2>
+          <p class="lead">先追求可用、可控、可复用。</p>
+        </div>
+        <div class="burn-shot" aria-label="Token 消耗模拟截图">
+          <div class="burn-screen">
+            <div class="burn-toolbar">
+              <div class="lights" aria-hidden="true"><span></span><span></span><span></span></div>
+              <span>cc-switch usage stats</span>
+            </div>
+            <div class="burn-badge-row">
+              <span class="burn-badge heat">TOKEN BURNING</span>
+              <span>真实消耗 Tokens</span>
+            </div>
+            <div class="burn-evidence">
+              <img class="burn-stat-img" src="token-burn-stats.png" alt="cc-switch 真实消耗 Tokens 统计截图">
+              <img class="burn-runtime-img" src="token-burn-runtime.jpg" alt="长时间运行截图，显示 17h 25m 33s">
+            </div>
+            <div class="burn-callout">4,490,038,048 tokens</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="slide doc-slide" id="slide-11" data-title="安装文档">
+      <div class="doc-content">
+        <p class="eyebrow">安装文档</p>
+        <h2>AI 编程工具安装说明</h2>
+        <p class="lead" style="margin-left:0">先装 Codex / Claude Code，再装 cc-switch，最后装 Superpowers 和 UI/UX Pro Max。</p>
+
+        <div class="doc-grid">
+          <article class="doc-card">
+            <h3>1. 基础环境</h3>
+            <p>macOS 先确认 Node.js、Git、Homebrew 可用。</p>
+            <pre class="cmd">node --version
+npm --version
+git --version
+brew --version</pre>
+            <pre class="cmd">brew install node</pre>
+          </article>
+
+          <article class="doc-card">
+            <h3>2. Codex</h3>
+            <p><a href="https://developers.openai.com/codex/cli">官方文档</a> / <a href="https://chatgpt.com/codex/install.sh">安装脚本</a></p>
+            <pre class="cmd">curl -fsSL https://chatgpt.com/codex/install.sh | sh
+codex
+codex --version</pre>
+          </article>
+
+          <article class="doc-card">
+            <h3>3. Claude Code</h3>
+            <p><a href="https://claude.com/download">Claude 下载页</a> / <a href="https://code.claude.com/docs/en/getting-started">Claude Code 文档</a></p>
+            <pre class="cmd">curl -fsSL https://claude.ai/install.sh | bash
+claude
+claude --version
+claude doctor</pre>
+            <pre class="cmd">brew install --cask claude-code</pre>
+            <pre class="cmd">winget install Anthropic.ClaudeCode</pre>
+            <pre class="cmd">npm install -g @anthropic-ai/claude-code</pre>
+          </article>
+
+          <article class="doc-card">
+            <h3>4. cc-switch</h3>
+            <p><a href="https://github.com/farion1231/cc-switch">官方仓库</a> / <a href="https://github.com/farion1231/cc-switch/releases/latest">下载页</a></p>
+            <pre class="cmd">brew install --cask cc-switch
+brew upgrade --cask cc-switch</pre>
+            <ol>
+              <li>添加供应商并填入 API Key 或团队代理。</li>
+              <li>选择 Codex / Claude Code 等目标工具。</li>
+              <li>启用供应商，重启终端验证。</li>
+            </ol>
+          </article>
+
+          <article class="doc-card">
+            <h3>5. Superpowers</h3>
+            <p><a href="https://github.com/obra/superpowers">官方仓库</a></p>
+            <pre class="cmd">/plugin install superpowers@claude-plugins-official</pre>
+            <pre class="cmd">/plugin marketplace add obra/superpowers-marketplace
+/plugin install superpowers@superpowers-marketplace</pre>
+            <p>Codex App：Plugins -> Coding -> Superpowers -> +</p>
+          </article>
+
+          <article class="doc-card">
+            <h3>6. UI/UX Pro Max</h3>
+            <p><a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill">官方仓库</a></p>
+            <pre class="cmd">npm install -g uipro-cli
+cd /path/to/project
+uipro init --ai codex
+uipro init --ai claude
+uipro init --ai cursor</pre>
+            <pre class="cmd">uipro update
+uipro uninstall</pre>
+          </article>
+
+          <article class="doc-card wide">
+            <h3>最短路径</h3>
+            <pre class="cmd"># Codex
+curl -fsSL https://chatgpt.com/codex/install.sh | sh
+brew install --cask cc-switch
+npm install -g uipro-cli
+uipro init --ai codex</pre>
+            <pre class="cmd"># Claude Code
+curl -fsSL https://claude.ai/install.sh | bash
+brew install --cask cc-switch
+/plugin install superpowers@claude-plugins-official
+npm install -g uipro-cli
+uipro init --ai claude</pre>
+          </article>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <nav class="nav" aria-label="幻灯片导航" id="slideNav"></nav>
+  <div class="controls" aria-label="上一页和下一页">
+    <button class="control" type="button" id="prevBtn" aria-label="上一页">‹</button>
+    <button class="control" type="button" id="nextBtn" aria-label="下一页">›</button>
+  </div>
+
+  <script>
+    const deck = document.getElementById("deck");
+    const slides = Array.from(document.querySelectorAll(".slide"));
+    const nav = document.getElementById("slideNav");
+    const progressBar = document.getElementById("progressBar");
+    let activeIndex = 0;
+
+    slides.forEach((slide, index) => {
+      const dot = document.createElement("button");
+      dot.className = "dot";
+      dot.type = "button";
+      dot.setAttribute("aria-label", `跳转到第 ${index + 1} 页：${slide.dataset.title}`);
+      dot.addEventListener("click", () => goTo(index));
+      nav.appendChild(dot);
+    });
+
+    const dots = Array.from(document.querySelectorAll(".dot"));
+
+    function goTo(index) {
+      const next = Math.max(0, Math.min(slides.length - 1, index));
+      slides[next].scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+
+    function setActive(index) {
+      activeIndex = index;
+      dots.forEach((dot, dotIndex) => {
+        dot.setAttribute("aria-current", String(dotIndex === index));
+      });
+      progressBar.style.width = `${((index + 1) / slides.length) * 100}%`;
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      const visible = entries
+        .filter((entry) => entry.isIntersecting)
+        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+      if (!visible) return;
+      setActive(slides.indexOf(visible.target));
+    }, { root: deck, threshold: [0.55, 0.75] });
+
+    slides.forEach((slide) => observer.observe(slide));
+    setActive(0);
+
+    document.getElementById("prevBtn").addEventListener("click", () => goTo(activeIndex - 1));
+    document.getElementById("nextBtn").addEventListener("click", () => goTo(activeIndex + 1));
+
+    window.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowRight" || event.key === "PageDown") {
+        event.preventDefault();
+        goTo(activeIndex + 1);
+      }
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft" || event.key === "PageUp") {
+        event.preventDefault();
+        goTo(activeIndex - 1);
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        goTo(0);
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        goTo(slides.length - 1);
+      }
+    });
+  </script>
+</body>
+</html>
