<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ameng-ppt · 工业纸感旗舰 16:9</title>
<link rel="stylesheet" href="../assets/fonts.css">
<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="../assets/components.css">
<link rel="stylesheet" id="theme-link" href="../assets/themes/industrial-paper.css">
<link rel="stylesheet" href="../assets/toolbar.css">
<link rel="stylesheet" href="../assets/presenter.css">
</head>
<body>
<!-- data-grain = film grain · deck--chrome = 留白避让顶/脚栏 · T 键明暗切换 -->
<div class="deck deck--chrome" data-grain
    >
  <div class="deck__stage">

    <!-- 持久编辑式 chrome（runtime 自动填页码/分段） -->
    <div class="chrome-top">
      <span class="chrome-top__brand">从 DEMO 到产品 · <b>BRAND</b></span>
      <span class="chrome-top__meta"><span class="chrome-top__sec">开场 · OPEN</span>
        <span class="chrome-top__page">01 / 10</span></span>
    </div>
    <div class="chrome-foot">
      <span><b>SPEAKER</b> 你的名字 · 你的身份</span>
      <span class="mono">2026.05.30 · Vol.01</span>
    </div>

    <!-- 1 · COVER：大标题走【全宽】，下方 [lead | terminal] 一行（工业纸感 签名）
         CJK 大标题用 zh-mega 时务必全宽：每个汉字 ~99px，塞进 grid-2 半栏（~520px）会反复折行。
         半栏放标题只适合 ≤5 汉字/行 的极短标题；正常长度一律全宽。-------------------- -->
    <section class="slide center" data-layout="cover" data-section="开场 · OPEN" data-accent="ember">
      <div class="stack" style="--gap:var(--s-6)">
        <span class="eyebrow" data-anim="fade">DEPLOYMENT &amp; DEBUGGING IN PRACTICE</span>
        <h1 class="zh-mega" data-anim="rise">从 <span class="hl">Demo</span> → 到 <span class="hl">正式产品</span></h1>
        <!-- ⚠ terminal = 技术/代码主题专属签名（英文 CLI，非技术受众看不懂）。
             只有当 deck 主题是「代码 / 开发 / DevOps / 技术产品」时才保留。
             非技术主题（美食/教育/营销/品牌…）务必换成下列之一：
               · 大数字  <div class="data-hero"><div class="data-hero__num fx-pop">…</div>…</div>
               · 金句    <blockquote class="quote">…</blockquote>
               · 要点    <ul class="stack">…</ul>  · 配图  <div class="frame frame--browser">…</div>
             —— 别让非技术 deck 的封面甩一个英文终端。 -->
        <div class="grid-2" style="--gap:var(--s-8);align-items:end;margin-top:var(--s-2)">
          <p class="lead" data-anim="fade">部署与调试实战</p>
          <div class="terminal" data-anim="rise">
            <div class="cmd">deploy --env=prod</div>
            <div class="ok">build</div>
            <div class="ok">migrate</div>
            <div class="ok">healthcheck</div>
            <div class="comment"># shipped, not a demo.</div>
          </div>
        </div>
      </div>
      <div class="notes">开场：自我介绍 + 这场讲什么。高亮带落在「Demo / 正式产品」对比上。停 2 秒再翻。</div>
    </section>

    <!-- 2 · BIG STATEMENT（说清楚 > 好看） -------------------------------- -->
    <section class="slide center" data-layout="big-statement" data-section="开场 · OPEN" data-accent="ember">
      <h2 class="h1 measure" data-anim="rise">大多数 idea 死于<span class="hl">「没人真的要」</span>，<br>而不是没做出来。</h2>
      <p class="lead muted" style="margin-top:var(--s-6)" data-anim="fade">先验证需求，再写一行代码。</p>
      <div class="notes">核心论点。一句话、大字号、一个高亮短语。标题陈述结论。</div>
    </section>

    <!-- 3 · 编号编辑卡（非 icon-card-shadow） ------------------------------ -->
    <section class="slide" data-layout="numbered-cards" data-section="调试 · DEBUG" data-accent="cinnabar">
      <h3 class="h2" data-anim="rise" style="margin:0 0 var(--s-6)">三个工具，按这个顺序看最容易看懂区别</h3>
      <div class="grid-3 fill anim-stagger">
        <div class="card card--num"><span class="num">01</span><span class="eyebrow">SKILL · 接入工作流</span>
          <p class="h3">Skills</p><p class="body">能直接接入 Claude Code 工作流的一段；规则、流程、审查的化身。</p>
          <div class="card__tags"><span>规则</span><span>流程</span><span>审查</span></div></div>
        <div class="card card--num"><span class="num">02</span><span class="eyebrow">PENCIL · 方向探索</span>
          <p class="h3">Pencil</p><p class="body">页面方向探索与设计辅助，帮你跳出当前 demo 的惯性。</p>
          <div class="card__tags"><span>方向</span><span>探索</span></div></div>
        <div class="card card--num"><span class="num">03</span><span class="eyebrow">CLAUDE DESIGN · 视觉</span>
          <p class="h3">Claude Design</p><p class="body">把生成与表达拉到上限，直观对比不同设计方向带来的差异。</p>
          <div class="card__tags"><span>生成</span><span>上限</span></div></div>
      </div>
      <div class="notes">编号卡 = 01 + 衬线标题 + mono 标签。差异化填充、统一描边，不是模板网格。</div>
    </section>

    <!-- 4 · Swiss Data Hero（KPI 占屏宽 ~20%） ----------------------------- -->
    <section class="slide center" data-layout="data-hero" data-section="调试 · DEBUG" data-accent="cinnabar">
      <div class="data-hero" data-anim="rise">
        <div class="data-hero__num fx-pop">42<span class="unit">%</span></div>
        <div class="data-hero__label">创业失败归因于「<span class="hl">没有市场需求</span>」，远高于任何技术原因。</div>
        <div class="data-hero__src">来源：CB Insights, Top Reasons Startups Fail（示例，需替换为真实出处）</div>
      </div>
      <div class="notes">Data Hero：一个真实大数字当视觉主角，配出处。无真实数据就别用这版式。</div>
    </section>

    <!-- 5 · 截图框 + 文字（截图美化子系统） ------------------------------- -->
    <section class="slide" data-layout="screenshot" data-section="设计 · DESIGN" data-accent="mint">
      <div class="grid-2 fill" style="--gap:var(--s-6);align-items:center">
        <div class="stack" style="--gap:var(--s-4)">
          <h3 class="h2" data-anim="rise">Pencil 帮你<span class="hl">跳出惯性</span>，<br>Claude Design 帮你<span class="hl">看到上限</span>。</h3>
          <p class="body">把产品截图放进统一的浏览器框里，加柔和卡片与阴影，比裸贴截图专业一个量级。</p>
        </div>
        <div class="frame frame--browser frame--shadow" data-anim="rise">
          <!-- 真实截图就 <img src="images/01-shot.png" alt="...">；没图先用诚实占位 -->
          <div class="frame__placeholder">images/01-shot.png · 1600px 宽</div>
        </div>
      </div>
      <div class="notes">截图是第一公民：统一框、统一阴影。没图用 .frame__placeholder（不造假 UI）。</div>
    </section>

    <!-- 6 · 诚实条形图（只画真实数据） ------------------------------------ -->
    <section class="slide center" data-layout="bars" data-section="设计 · DESIGN" data-accent="mint">
      <span class="eyebrow" data-anim="fade">渠道意愿（示例 · 需替换为真实数据）</span>
      <h3 class="h2" data-anim="rise" style="margin:var(--s-3) 0 var(--s-6)">哪个钩子转化最高</h3>
      <div class="bars anim-stagger" style="max-width:48rem">
        <div class="bar"><span class="body">立即购买</span><div class="bar__track"><div class="bar__fill fx-grow-x" style="--v:78%"></div></div><span class="bar__val">78%</span></div>
        <div class="bar"><span class="body">免费试用</span><div class="bar__track"><div class="bar__fill fx-grow-x" style="--v:54%;background:var(--accent-2)"></div></div><span class="bar__val">54%</span></div>
        <div class="bar"><span class="body">加入候补</span><div class="bar__track"><div class="bar__fill fx-grow-x" style="--v:31%;background:var(--ink-3)"></div></div><span class="bar__val">31%</span></div>
      </div>
      <div class="notes">纯 CSS 条形图，--v 是真实百分比。强调=accent，副系列=accent-2。绝不编数字。</div>
    </section>

    <!-- 7 · 对比（右侧 accent 落点） -------------------------------------- -->
    <section class="slide" data-layout="comparison" data-section="部署 · DEPLOY" data-accent="cyan">
      <h3 class="h2" data-anim="rise" style="margin:0 0 var(--s-6)">先验证 vs 先开发</h3>
      <div class="grid-2 fill" style="--gap:var(--s-5)">
        <div class="card card--soft"><span class="tag">先开发</span>
          <p class="h3 muted">花 3 个月做完美产品</p><p class="body">上线发现没人要 · 沉没成本高 · 难回头</p></div>
        <div class="card card--accent"><span class="tag">先验证 ✓</span>
          <p class="h3">花 7 天测真实意愿</p><p class="body">便宜 · 可快速转向 · 数据驱动决策</p></div>
      </div>
      <div class="notes">视觉分层不是热闹：右侧用 card--accent 做唯一落点，引导结论。</div>
    </section>

    <!-- 8 · 金句 ---------------------------------------------------------- -->
    <section class="slide center" data-layout="quote" data-section="部署 · DEPLOY" data-accent="cyan">
      <blockquote class="quote measure" data-anim="blur" style="max-width:26ch">“Make something people want.”</blockquote>
      <p class="quote__by" data-anim="fade">— Paul Graham, Y Combinator</p>
      <div class="notes">金句页：大字、留白、一个署名。</div>
    </section>

    <!-- 9 · 分节页（整页 accent，演示分段色域切换） ----------------------- -->
    <section class="slide center" data-layout="section-divider" data-section="收束 · CLOSE" data-accent="ember" style="background:var(--accent)">
      <span class="eyebrow" data-anim="fade" style="color:var(--accent-ink);opacity:.92">PART 02</span>
      <h2 class="zh-mega" data-anim="rise" style="color:var(--accent-ink);font-size:clamp(3rem,1rem+6cqw,6.5rem)">现在，开始验证</h2>
      <div class="notes">分节页：整页强调色，作为节奏呼吸点。chrome 的分段标签会跟着切到「收束」。</div>
    </section>

    <!-- 10 · 收尾 CTA + terminal ----------------------------------------- -->
    <section class="slide center" data-layout="close" data-section="收束 · CLOSE" data-accent="ember">
      <div class="grid-2" style="--gap:var(--s-8);align-items:center">
        <div class="stack" style="--gap:var(--s-5)">
          <h2 class="h1" data-anim="rise">现在就<br>做出你的 <span class="hl">第一版</span>。</h2>
        </div>
        <!-- ⚠ 非技术主题把这个 terminal 换成 CTA 卡片 / 金句 / 二维码（见封面注释）。 -->
        <div class="terminal" data-anim="rise"><div class="cmd">your-cli ship --prod</div><div class="comment"># 一行命令，把想法发出去</div></div>
      </div>
      <div class="notes">收尾：一个具体的行动召唤，不写「Get Started」。</div>
    </section>

  </div>
</div>
<script src="../assets/runtime.js"></script>
<script src="../assets/editor.js"></script>
<script src="../assets/export.js"></script>
</body>
</html>
