lucid.page

<!DOCTYPE html> <html lang=“zh”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>AI 技能系统 · 网页幻灯片</title> <style> *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{font-family:-apple-system,BlinkMacSystemFont,“PingFang SC”,“Microsoft YaHei”,sans-serif;background:#0b1020;color:#eaf0ff;overflow:hidden} .bg{position:fixed;inset:0;background:radial-gradient(1200px 800px at 80% -10%,rgba(30,58,138,.4),transparent),radial-gradient(1000px 700px at -10% 110%,rgba(124,58,237,.3),transparent),linear-gradient(160deg,#0b1020,#111a33)} .deck{position:relative;height:100%} .slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:9vh 10vw;opacity:0;visibility:hidden;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease,visibility .55s} .slide.active{opacity:1;visibility:visible;transform:none} .kicker{letter-spacing:.35em;color:#7dd3fc;font-size:13px;font-weight:700;margin-bottom:2.5vh;text-transform:uppercase} h1{font-size:clamp(40px,7vw,84px);font-weight:800;line-height:1.15;background:linear-gradient(90deg,#7dd3fc,#a78bfa,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent} h2{font-size:clamp(28px,4.2vw,50px);font-weight:700;margin-bottom:3.5vh} .sub{color:#a8b3d6;font-size:clamp(15px,1.6vw,19px);line-height:1.85;max-width:62ch} .chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:4vh} .chips span{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:14px;color:#c7d2fe} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:1vh} .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px;backdrop-filter:blur(8px)} .card b{display:block;font-size:19px;margin-bottom:8px;color:#fff} .card span{color:#a8b3d6;font-size:14.5px;line-height:1.7} .steps{list-style:none} .steps li{padding:15px 20px;margin:12px 0;background:rgba(255,255,255,.05);border-left:3px solid #7dd3fc;border-radius:0 12px 12px 0;font-size:clamp(15px,1.5vw,18px);line-height:1.7} .steps li b{color:#7dd3fc;margin-right:8px} .quote{border-left:4px solid #a78bfa;padding:18px 24px;background:rgba(167,139,250,.08);border-radius:0 14px 14px 0;font-size:clamp(16px,1.8vw,21px);line-height:1.8;margin-top:3vh} .chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2vh} .chain .node{padding:12px 20px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);font-size:15px} .chain .arrow{color:#7dd3fc;font-size:20px;font-weight:700} .hud{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;font-size:13px;color:#8fa0c9;z-index:5} .navs{display:flex;gap:10px} .navs button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#eaf0ff;font-size:17px;cursor:pointer;transition:background .2s} .navs button:hover{background:rgba(255,255,255,.2)} #bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#7dd3fc,#a78bfa,#f0abfc);transition:width .4s;z-index:9} .end{text-align:center;align-items:center} </style> </head> <body> <div class=“bg”></div> <div id=“bar”></div> <div class=“deck”>

<section class=“slide”> <div class=“kicker”>Demo · Html Slides</div> <h1>让 AI 拥有<br>「技能」</h1> <p class=“sub” style=“margin-top:3vh”>一份由 AI 直接生成的网页幻灯片：单文件、零依赖、纯 HTML/CSS/JS。<br>没有 PowerPoint，照样做演示。</p> <div class=“chips”><span>零依赖</span><span>键盘翻页</span><span>触屏滑动</span><span>动画过渡</span><span>可在线分享</span></div> </section>

<section class=“slide”> <h2>什么是 Skill？</h2> <p class=“sub”>Skill 本质上是一份写在本地的「操作手册」（SKILL.md）：告诉 AI 什么场景用它、按什么步骤做、有哪些坑要避。</p> <div class=“grid”> <div class=“card”><b>📦 触发条件</b><span>写在描述里：用户提到 PPT、幻灯片、周报……任务匹配时自动启用</span></div> <div class=“card”><b>🧭 执行流程</b><span>分步说明 + 配套脚本与参考文档，AI 照着做，不靠猜</span></div> <div class=“card”><b>⚠️ 边界约定</b><span>哪些操作要先征求用户确认、失败时如何兜底</span></div> </div> </section>

<section class=“slide”> <h2>关键设计：渐进式披露</h2> <ul class=“steps”> <li><b>① 平时</b>上下文里只有技能的名称和一句话描述——非常省 token</li> <li><b>② 匹配时</b>任务命中描述，才读取 SKILL.md 正文</li> <li><b>③ 需要时</b>再按需加载 references/ 下的具体参考文件</li> </ul> <p class=“sub” style=“margin-top:2.5vh”>上下文窗口是稀缺资源——技能让专业性「按需上车」。</p> </section>

<section class=“slide”> <h2>实例：pptx 技能的 4 种工作流</h2> <div class=“grid”> <div class=“card”><b>🔍 解析 PPT</b><span>从 .pptx 提取文本、视觉元素与原始 XML</span></div> <div class=“card”><b>✏️ 编辑 PPT</b><span>基于模板的 XML 操作修改现有文件</span></div> <div class=“card”><b>🎬 生成 PPTX</b><span>SVG 管线从零构建 .pptx</span></div> <div class=“card”><b>🌐 HTML 幻灯片</b><span>零依赖、富动画的网页演示 ← 你正在看的就是它</span></div> </div> </section>

<section class=“slide”> <h2>生态：技能从哪里来？</h2> <div class=“chain”> <div class=“node”>本机已装</div><div class=“arrow”>→</div> <div class=“node”>千帆 Skill 广场</div><div class=“arrow”>→</div> <div class=“node”>Skill Hub</div><div class=“arrow”>→</div> <div class=“node”>skill-creator 自造</div> </div> <p class=“sub” style=“margin-top:3vh”>查找时按此优先级让位：本地能用就不看远端；都不匹配才现场造一个。安装只需一次 <code>POST /skill/install</code>。</p> </section>

<section class=“slide”> <h2>彩蛋：这份幻灯片本身就是案例</h2> <div class=“quote”>当 pptx 技能的参考文档和脚本缺失时，AI 没有硬撑，而是启用兜底方案——现场手写了一份自包含的 HTML 演示文稿并发布上线。</div> <p class=“sub” style=“margin-top:2.5vh”>启示：技能描述 ≠ 能力保证。文件完整 + 流程清晰，AI 才真正可靠。</p> </section>

<section class=“slide end”> <div class=“kicker”>Summary</div> <h1 style=“font-size:clamp(36px,6vw,72px)”>给 AI 装技能<br>就是给它装说明书</h1> <p class=“sub” style=“margin:3.5vh auto 0”>技能 = 场景触发 + 分步手册 + 按需加载 + 明确兜底</p> <div class=“chips” style=“justify-content:center”><span>👏 谢谢观看</span><span>← → 可回看</span></div> </section>

</div>

<div class=“hud”> <span>AI 技能系统 · HTML Slides</span> <span id=“cnt”>1 / 7</span> <div class=“navs”><button id=“prev”>←</button><button id=“next”>→</button></div> </div>

End