@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

package/skills/design-templates/guizang-ppt/assets/example-slides.html

@@ -0,0 +1,318 @@
+<!--
+  Example slides for the magazine-web-ppt skill.
+
+  Topic: "一人公司 · The Quiet Hardware" — a fictional but realistic 64-day
+  case study, mirroring the rhythm and content arc of the original 歸藏
+  guizang-ppt-skill demo. Used to power the Examples preview without
+  requiring real product imagery on disk — image slots stand in for what a
+  real deck would show.
+
+  Theme rhythm: hero dark → light → dark → light → hero light → dark →
+  hero dark → light → hero light. Hits all 8 layout categories.
+-->
+
+<!-- Layout 1 · Hero Cover ============================================ -->
+<section class="slide hero dark">
+  <div class="chrome">
+    <div>A Talk · 2026.04.22</div>
+    <div>Vol.01</div>
+  </div>
+  <div class="frame" style="display:grid; gap:4vh; align-content:center; min-height:80vh">
+    <div class="kicker">私享会 · 创作者 Demo Day</div>
+    <h1 class="h-hero">一人公司</h1>
+    <h2 class="h-sub">被 AI 折叠的组织</h2>
+    <p class="lead" style="max-width:60vw">
+      一个独立创作者 —— 在 64 天里完成 11 万行代码、覆盖 9 个平台、跨过 5 个时区，<br>
+      生活节奏几乎没有被打扰。
+    </p>
+    <div class="meta-row">
+      <span>歸藏 Guizang</span><span>·</span><span>独立创作者</span><span>·</span><span>CodePilot 作者</span>
+    </div>
+  </div>
+  <div class="foot">
+    <div>一场关于 AI · 组织 · 个体的分享</div>
+    <div>— 2026 —</div>
+  </div>
+</section>
+
+<!-- Layout 2 · Big Numbers Grid ======================================= -->
+<section class="slide light">
+  <div class="chrome">
+    <div>过去 64 天 · 开发篇</div>
+    <div>Act I / Dev · 02 / 09</div>
+  </div>
+  <div class="frame" style="padding-top:6vh">
+    <div class="kicker">一个人，做了什么。</div>
+    <h2 class="h-xl">过去 64 天</h2>
+    <p class="lead" style="margin-bottom:5vh">从 0 到开源 CodePilot。</p>
+
+    <div class="grid-6" style="margin-top:6vh">
+      <div class="stat-card">
+        <div class="stat-label">Duration</div>
+        <div class="stat-nb">64 <span class="stat-unit">天</span></div>
+        <div class="stat-note">从立项到现在</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Lines of Code</div>
+        <div class="stat-nb">110K+</div>
+        <div class="stat-note">一行一行写到 11 万+</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">GitHub Stars</div>
+        <div class="stat-nb">5,166</div>
+        <div class="stat-note">单仓库 · 60 天破 5K</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Downloads</div>
+        <div class="stat-nb">41K+</div>
+        <div class="stat-note">装进了几万台电脑里</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">AI Providers</div>
+        <div class="stat-nb">19</div>
+        <div class="stat-note">跨平台模型接入</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Commits</div>
+        <div class="stat-nb">608+</div>
+        <div class="stat-note">没有协作者</div>
+      </div>
+    </div>
+  </div>
+  <div class="foot">
+    <div>项目 · CodePilot　|　github.com/codepilot</div>
+    <div>Act I · Dev Numbers</div>
+  </div>
+</section>
+
+<!-- Layout 4 · Quote + Image ========================================== -->
+<section class="slide dark">
+  <div class="chrome">
+    <div>身份反差 · The Twist</div>
+    <div>03 / 09</div>
+  </div>
+  <div class="frame grid-2-7-5" style="padding-top:6vh">
+    <div style="display:flex; flex-direction:column; justify-content:space-between; gap:3vh">
+      <div>
+        <div class="kicker">BUT</div>
+        <h2 class="h-xl" style="white-space:nowrap; font-size:7.2vw">
+          我不是程序员。
+        </h2>
+        <p class="lead" style="margin-top:3vh">
+          大学毕业之后再没写过一行生产代码。过去十年做的是 UI 设计 / AI 特效 / 自媒体内容。
+        </p>
+      </div>
+      <div class="callout">
+        “这东西在三年前，<br>
+        需要一个十人团队做一年。”
+        <div class="callout-src">— 一个观察者的判断</div>
+      </div>
+    </div>
+    <figure class="img-slot r-3x2" style="aspect-ratio:16/10; max-height:56vh">
+      <span class="plus">+</span>
+      <span class="label">Product Screenshot · CodePilot</span>
+    </figure>
+  </div>
+  <div class="foot">
+    <div>Page 03 · 我不是程序员</div>
+    <div>— · —</div>
+  </div>
+</section>
+
+<!-- Layout 6 · Pipeline =============================================== -->
+<section class="slide light">
+  <div class="chrome">
+    <div>我的工作流 · Workflow</div>
+    <div>Act II · 04 / 09</div>
+  </div>
+  <div class="frame">
+    <div class="kicker">Pipeline · 流水线</div>
+    <h2 class="h-xl">两条流水线</h2>
+
+    <div class="pipeline-section">
+      <div class="pipeline-label">文本侧 · Text Pipeline</div>
+      <div class="pipeline">
+        <div class="step">
+          <div class="step-nb">01</div>
+          <div class="step-title">Draft</div>
+          <div class="step-desc">AI 帮我起草初稿</div>
+        </div>
+        <div class="step">
+          <div class="step-nb">02</div>
+          <div class="step-title">Polish</div>
+          <div class="step-desc">AI 润色去 AI 味</div>
+        </div>
+        <div class="step">
+          <div class="step-nb">03</div>
+          <div class="step-title">Morph</div>
+          <div class="step-desc">AI 变形成推特 / 小红书</div>
+        </div>
+        <div class="step">
+          <div class="step-nb">04</div>
+          <div class="step-title">Illustrate</div>
+          <div class="step-desc">AI 生成信息图</div>
+        </div>
+        <div class="step">
+          <div class="step-nb">05</div>
+          <div class="step-title">Distribute</div>
+          <div class="step-desc">一键分发 9 平台</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="pipeline-section">
+      <div class="pipeline-label">视觉 · 视频侧 · Video Pipeline</div>
+      <div class="pipeline" data-cols="3">
+        <div class="step">
+          <div class="step-nb">06</div>
+          <div class="step-title">Cut</div>
+          <div class="step-desc">AI 剪辑 + 自动配字幕</div>
+        </div>
+        <div class="step">
+          <div class="step-nb">07</div>
+          <div class="step-title">Wrap</div>
+          <div class="step-desc">AI 包装 + 配 BGM</div>
+        </div>
+        <div class="step">
+          <div class="step-nb">08</div>
+          <div class="step-title">Cover</div>
+          <div class="step-desc">AI 生成封面图</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="foot">
+    <div>Page 04 · 我的内容工厂</div>
+    <div>Workflow</div>
+  </div>
+</section>
+
+<!-- Layout 2 · Act Divider ============================================ -->
+<section class="slide hero light">
+  <div class="chrome">
+    <div>第二幕 · 折叠</div>
+    <div>Act II · 05 / 09</div>
+  </div>
+  <div class="frame" style="display:grid; gap:6vh; align-content:center; min-height:80vh">
+    <div class="kicker">Act II</div>
+    <h1 class="h-hero" style="font-size:8.5vw">折叠</h1>
+    <p class="lead" style="max-width:55vw">
+      从 “一个人做内容” 到 “一个人是组织”。<br>
+      AI 不是工具，是岗位的折叠器。
+    </p>
+  </div>
+  <div class="foot">
+    <div>第二幕引子</div>
+    <div>— · —</div>
+  </div>
+</section>
+
+<!-- Layout 8 · Big Quote ============================================== -->
+<section class="slide dark">
+  <div class="chrome">
+    <div>The Takeaway · 核心金句</div>
+    <div>06 / 09</div>
+  </div>
+  <div class="frame" style="display:grid; gap:5vh; align-content:center; min-height:80vh">
+    <div class="kicker">Quote · 金句</div>
+    <blockquote style="font-family:var(--serif-zh); font-weight:700; font-size:5.6vw; line-height:1.2; letter-spacing:-.01em; max-width:78vw">
+      “没有交接,<br>所有人都在构建。”
+    </blockquote>
+    <p class="lead" style="max-width:55vw; opacity:.65">
+      Without the handoff, everyone builds.<br>
+      And that makes all the difference.
+    </p>
+    <div class="meta-row">
+      <span>— Luke Wroblewski</span><span>·</span><span>2026.04.16</span>
+    </div>
+  </div>
+  <div class="foot">
+    <div>Page 06 · 金句</div>
+    <div>— · —</div>
+  </div>
+</section>
+
+<!-- Layout 7 · Hero Question ========================================== -->
+<section class="slide hero dark">
+  <div class="chrome">
+    <div>留给你的问题</div>
+    <div>07 / 09</div>
+  </div>
+  <div class="frame" style="display:grid; gap:8vh; align-content:center; min-height:80vh">
+    <div class="kicker">The Question</div>
+    <h1 class="h-hero" style="font-size:7vw; line-height:1.15">
+      你的公司里，<br>
+      哪些岗位本来就<br>
+      不该由人来做？
+    </h1>
+    <p class="lead" style="max-width:50vw">
+      这不是技术问题，是架构问题。
+    </p>
+  </div>
+  <div class="foot">
+    <div>Page 07 · The Question</div>
+    <div>— · —</div>
+  </div>
+</section>
+
+<!-- Layout 9 · Before / After ========================================= -->
+<section class="slide light">
+  <div class="chrome">
+    <div>旧 vs 新 · The Shift</div>
+    <div>08 / 09</div>
+  </div>
+  <div class="frame" style="padding-top:5vh">
+    <div class="kicker">Before / After · 范式转变</div>
+    <h2 class="h-xl" style="margin-bottom:4vh">从交接到共建</h2>
+
+    <div class="grid-2-6-6" style="gap:5vw 4vh">
+      <div style="padding:3vh 2vw; border-left:3px solid currentColor; opacity:.55">
+        <div class="kicker" style="opacity:.9">Before · 旧模式</div>
+        <h3 class="h-md" style="margin-top:2vh">设计 → 开发 → 交接</h3>
+        <ul style="margin-top:3vh; padding-left:1.2em; display:flex; flex-direction:column; gap:1.4vh; font-family:var(--sans-zh); font-size:max(14px,1.1vw); line-height:1.55">
+          <li>设计师在 Figma 做稿，反复对齐像素</li>
+          <li>开发盯着设计稿手动翻译</li>
+          <li>反复 PR 沟通，文档遗失在 Slack</li>
+          <li>非技术成员无法触碰代码</li>
+        </ul>
+      </div>
+      <div style="padding:3vh 2vw; border-left:3px solid currentColor">
+        <div class="kicker" style="opacity:.9">After · 新模式</div>
+        <h3 class="h-md" style="margin-top:2vh">同工具 · 并行 · 共建</h3>
+        <ul style="margin-top:3vh; padding-left:1.2em; display:flex; flex-direction:column; gap:1.4vh; font-family:var(--sans-zh); font-size:max(14px,1.1vw); line-height:1.55">
+          <li>三个角色同时在同一份 Intent 上工作</li>
+          <li>agents.md / SKILL.md 是共享上下文</li>
+          <li>代理处理对齐、冲突、动效</li>
+          <li>任何人都能安全贡献代码</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="foot">
+    <div>Page 08 · 范式转变</div>
+    <div>Before / After</div>
+  </div>
+</section>
+
+<!-- Layout 2 · Hero Close ============================================= -->
+<section class="slide hero light">
+  <div class="chrome">
+    <div>End · 致谢</div>
+    <div>09 / 09</div>
+  </div>
+  <div class="frame" style="display:grid; gap:5vh; align-content:center; min-height:80vh">
+    <div class="kicker">Thanks for watching</div>
+    <h1 class="h-hero" style="font-size:9vw">谢谢。</h1>
+    <p class="lead" style="max-width:55vw">
+      Slides are a single HTML file —<br>
+      open in any browser, no build, no server.
+    </p>
+    <div class="meta-row">
+      <span>github.com/op7418/guizang-ppt-skill</span><span>·</span><span>MIT License</span>
+    </div>
+  </div>
+  <div class="foot">
+    <div>Made with magazine-web-ppt skill</div>
+    <div>— Fin —</div>
+  </div>
+</section>