Zakaria
a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
319 lines
12 KiB
HTML
319 lines
12 KiB
HTML
<!--
|
||
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>
|