AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载本篇围绕 templates/full-decks/tech-sharing/README.md 展开系统讲清 html-ppt-skill 中tech-sharing全 deck 模板的定位8 页工程演讲结构、GitHub 暗色调、终端代码块、逐页骨架与视觉 token 的实现细节以及通过new-deck.sh/render.sh脚手架复用该模板、导出 PNG 的完整操作路径。读完后你能直接基于该模板搭出一场可截图分享的技术分享 deck并理解其 scoped CSS 与共享资产的分层设计。1. 模板定位它是什么、什么时候用tech-sharing是 html-ppt-skill 提供的 15 个 full-deck 模板之一原始 README 对它的定义非常凝练8 页工程演讲结构8-slide engineering talk deck封面主题 讲者、议程agenda、背景铺垫context、两页深度解析deep-dive、一个代码示例、结论要点takeaways、QAGitHub 风格暗色视觉深色 GitHub 风格底色#0d1117搭配 JetBrains Mono 等宽字体与带语法高亮的终端块设计目标适合截图后分发到内部 wiki 或社交平台README 原文 Built to be screenshotted and shared on an internal wiki or Twitter适用场景团队技术分享日tech-sharing Fridays、brown-bag talks、lunch learn、会议投稿气质定位GitHub README 遇上好的会议演讲——暗色、等宽、信息密度高但可读GitHub README meets a good conference talk。在 references/full-decks.md 的场景 deck 目录中它被登记为第 11 号模板#名称页数风格使用场景11tech-sharing8GitHub-dark、JetBrains Mono、终端代码块、agenda QA技术分享、内部技术 talk、会议演讲与其他 full-deck 模板一样tech-sharing目录遵循统一的三文件约定templates/full-decks/tech-sharing/ ├── index.html # 完整的 8 页 deck带真实演示内容Rust 异步运行时 ├── style.css # 以 .tpl-tech-sharing 前缀隔离的 scoped CSS └── README.md # 模板定位与使用说明SKILL.md 强调这类模板应当整份作为脚手架使用而不是手工拷贝原因是模板内资产路径../../../assets/是相对于模板自身位置声明的手工复制到别的目录深度会导致路径失效——这一点在 scripts/new-deck.sh 的自动重写逻辑中解决见第 5 节。2. 逐页拆解8 页骨架与演示内容index.html 内置了一套完整的演示 deck——以 Rust 异步运行时到底在调度什么? 为题的技术分享。逐页看它的结构类命名正是你复用模板时应当保留的结构类第 1 页 · Cover封面.kicker标签行tech-sharing / 2026-04-15等宽字体、带前缀.h1大标题 78px/字重 800关键词用--grad三段渐变文字background-clip: text突出.lede副标题说明本场范围从Future::poll到 tokio 的 work-stealing.speaker讲者块渐变圆形头像占位 昵称 团队/时长.deck-footer含话题标签#async #rust #tokio与.slide-number页码由共享 runtime 驱动。第 2 页 · Agenda议程5 行.agenda-row每行由三部分构成.num等宽绿色编号 01–05、.t章节标题、.d预计时长如~12min。行与行之间用虚线分隔——这是该模板议程页的标志性样式。第 3 页 · Context背景铺垫grid g3三张card card-accent卡片分别对比 Thread-per-conn、Event loop、Async/await 三种并发模型每张卡片底部用一个.tag给出结论❌ 不现实、 callback hell、✅ Rust 选这个。注意卡片顶部的 3px 主色描边来自.card-accent。第 4–5 页 · Deep Dive ×2深度解析两页均采用grid g2左右分栏左侧一段.lede论述 若干.tag要点条右侧分别是——第 4 页一个.terminal终端块内嵌Futuretrait 定义手工标注的语法高亮 token.kw关键字、.fn函数名、.str字符串、.cmt注释第 5 页一张调度 tick 循环步骤卡片5 步用主色编号演示如何在没有图表的情况下用纯文本列表讲清调度器行为。第 6 页 · Code代码示例整页一个大的.terminal块mini-runtime.rs · ~40 LOC展示用Wake/Waker手写最小运行时关键行用注释// 就是这一行高亮poll调用。终端块带 macOS 风格的红黄绿三点标题栏与文件名src/main.rs。第 7 页 · Takeaways结论要点三张card-accent卡片各讲一件事底部一行.lede列出延伸阅读tokio 调度器博客、async-book。第 8 页 · QA.center.tc居中布局120px 主色问号 联系方式 两个资源链接.tag。这套骨架的价值在于演示内容可以随时替换但.kicker / .h1 / .h2 / .lede / .terminal / .agenda-row / .card / .tag / .speaker这些结构类不要轻易改——它们是模板视觉身份的来源references/full-decks.md 的 authoring notes 也明确 Swap demo content, but keep the structural classes。3. 视觉系统scoped CSS 与 GitHub 暗色 tokenstyle.css 只有约 50 行但把整个视觉身份压缩在一个.tpl-tech-sharing作用域内。逐类解读3.1 设计 token第 2–12 行.tpl-tech-sharing{ --bg:#0d1117;--bg-soft:#161b22;--surface:#161b22;--surface-2:#1c2230; --border:rgba(139,148,158,.22);--border-strong:rgba(139,148,158,.4); --text-1:#e6edf3;--text-2:#8b949e;--text-3:#6e7681; --accent:#7ee787;--accent-2:#79c0ff;--accent-3:#ff7b72; --accent-ink:#0b1024; /* text on --accent — 12.3:1 */ --grad:linear-gradient(120deg,#7ee787 0%,#79c0ff 60%,#d2a8ff 100%); --radius:14px;--radius-lg:20px; --shadow:0 20px 60px rgba(0,0,0,.5); font-family:Inter,Noto Sans SC,sans-serif; }底色#0d1117与 surface#161b22取自 GitHub Dark 的经典两级灰主色--accent:#7ee787GitHub 绿、辅色#79c0ff蓝、#ff7b72珊瑚红与 GitHub 语法高亮同源--accent-ink:#0b1024是落在--accent填充色上的文字色注释里写明对比度 12.3:1。这对应 SKILL.md 的写作规则accent 填充上的文字必须用var(--accent-ink)因为各主题的 accent 明度跨度从纯白到纯黑没有单一字面色能通吃--grad是绿→蓝→紫的三段渐变只用于标题关键词与讲者头像这类小面积强调。3.2 氛围背景与文字层级.slide::before叠了两层低透明度径向渐变右上蓝光 12%、左下绿光 8%在不引入任何图片的前提下营造暗色空间的层次.slide *通过z-index:1压在氛围层之上。字号体系.h178px/800/-.03em字距.h254px/700均强制白色#fff比--text-1更亮的#e6edf3保证暗底标题的冲击力。3.3 终端块与手工语法高亮.terminal是整个模板的视觉锚点背景比页面更深的#010409、1px 边框、--radius圆角、0 30px 80px重阴影.bar标题栏放三个 12px 圆点红#ff5f56/ 黄#ffbd2e/ 绿#27c93f经典 macOS 窗口色与文件名pre区 15px JetBrains Mono、行高 1.65、max-height:440px防溢出。语法 token 是一套手工 span 类名模板内容里直接写span classkw等配色全部对齐 GitHub Dark 语法主题类名含义颜色.kw关键字#ff7b72珊瑚红.fn函数/方法名#d2a8ff紫.str字符串#a5d6ff浅蓝.cmt注释斜体#8b949e灰.num数字#79c0ff蓝这意味着该模板不依赖任何 JS 高亮库——写代码示例时用 span 手工标注 token 即可离线可用、渲染确定性高。3.4 其余组件.kicker::before{content: }每页小标签行自动获得 shell 提示符前缀强化命令行叙事感.tag12px 等宽小胶囊用于议程外的任何元信息结论标记、资源链接.agenda-rowflex 基线对齐 虚线分隔编号列固定 48px 宽.card-accent覆盖 base 卡片的border-top:3px solid var(--accent)让卡片在暗底上有主色顶边。3.5 为什么必须 scoped 到.tpl-tech-sharingfull-decks 的约定是每个模板 CSS 以.tpl-name前缀隔离多模板可在同一页面共存而不冲突references/full-decks.md Authoring notes。所有选择器都写作.tpl-tech-sharing .terminal pre形式且 body 上带classtpl-tech-sharing见 index.html 第 11 行激活整套变量。若你基于此模板二创改色只需改文件头部的:root级变量块结构类不要动。4. 与共享资产的协作base.css 与 runtime.js模板自身只负责长相骨架能力全部来自共享资产index.html头部按固定顺序引入四个文件link relstylesheet href../../../assets/fonts.css link relstylesheet href../../../assets/base.css link relstylesheet href../../../assets/animations/animations.css link relstylesheet hrefstyle.css对应关系assets/base.cssreset 默认 token 布局原语.grid/.g2/.g3、.card、.stack、.mt-*间距、.slide系统。tech-sharing 用到的.lede、.mono、.grid、.card都出自这里模板 CSS 只做覆写固定 1920×1080 设计画布base.css规定.deck是var(--deck-w,1920px) × var(--deck-h,1080px)的固定画布由 runtime 按视口计算--deck-scale缩放。这保证了浏览器里看到的、presenter 预览、headless 截图三者像素一致——正是 README 所说适合截图分发的底层保障assets/animations/animations.css封面标题的data-animfade-up入场动画来自这里页面切到当前页时触发assets/runtime.js键盘导航← →/Space/Home/End、F全屏、O总览网格、T主题切换、S演讲者模式、#/N深度链接、?previewN单页预览模式等全部由 runtime 统一提供模板内不需要写任何 JS。演讲者模式值得单独一提按S会打开一个含 CURRENT / NEXT / SPEAKER SCRIPT / TIMER 四张磁性卡片的弹窗预览用 iframe 加载真实 deck 加?previewN参数因此与观众视图共用同一套 CSS 与字体颜色布局保证一致见 SKILL.md 与 references/presenter-mode.md。5. 落地实操脚手架、替换内容、渲染导出5.1 用 new-deck.sh 从 tech-sharing 脚手架在项目根目录执行./scripts/new-deck.sh my-talk -t tech-sharing open examples/my-talk/index.htmlnew-deck.sh 的处理流程可直接读源码验证模板解析-t tech-sharing命中templates/full-decks/tech-sharing/目录整个目录含style.css、README.md拷贝到目标位置默认落在examples/name/资产路径重写脚本用relpath()计算 deck 新位置到 skill 根目录的相对前缀再用正则把文件里所有…/assets/引用统一重写——模板里写的是../../../assets/落位到examples/后自动变成../assets/。SKILL.md 明确警告不要手改这个../深度引用自检list_refslexjoin会枚举index.html中所有本地href/src/url()引用包括常被漏掉的自身style.css逐一验证文件真实存在任一引用悬空脚本直接失败退出。成功后会打印 refs: N local reference(s) verified。5.2 替换演示内容时的守则保留第 2 节列出的结构类仅替换文字与代码示例颜色、圆角、阴影一律走 CSS 变量Use tokens, not literal colors例如想让结论卡顶边换色改--accent而不是在 HTML 里写死accent 填充上的文字用var(--accent-ink)需要讲者备注时把备注放进每页的div classnotes…/divS键打开演讲者视图可见切勿把备注写成页面可见元素每页对应一个section classslide>./scripts/render.sh examples/my-talk/index.html all # 或指定页数与输出目录 ./scripts/render.sh examples/my-talk/index.html 8 out-dir脚本行为要点以--window-size1920,1080的 headless Chrome 逐页访问file://...#/N深度链接截图输出index_01.png … index_08.pngall参数会按class中完整含slide词元的section计数避免把.slide-number误计为页。适用前提Chrome 位于 macOS 默认路径脚本内写死/Applications/Google Chrome.app/…Linux 下需自行调整$CHROME变量或改用等效的 headless 截图流程。仓库的 scripts/verify-output/ 目录保留了主题/动画 showcase 的成图样例可对照预期截图质量。6. 小结这个模板做对了什么把 README.md 的两行描述放回仓库上下文可以看到tech-sharing的完整设计闭环结构上8 页骨架cover/agenda/context/deep-dive×2/code/takeaways/QA覆盖了工程分享最典型的叙事节奏议程页自带时间预算列天然适合 30–60 分钟的 talk视觉上约 50 行 scoped CSS GitHub 暗色 token 手工语法高亮零图片、零 JS 高亮依赖截图导出效果稳定工程上/ .tpl-tech-sharing /作用域让它可以与其余 14 个 full-deck 共存new-deck.sh的路径重写与引用自检解决了模板拷贝到别处就坏的经典问题render.sh的 1920×1080 固定画布截图补齐了截图分发这条使用链路。如果你要做的是带逐字稿的演讲场景可以进一步参考 references/presenter-mode.md或直接选用同为场景 deck 的presenter-mode-reveal模板两者与tech-sharing共享同一套 runtime 与键盘协议切换成本很低。赞分享AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载相关推荐树莓派也能流畅跑Frosted Glass Lite 性能优化完整指南树莓派也能流畅跑Frosted Glass Lite 性能优化完整指南 树莓派或旧手机上Home Assistant 的仪表盘滑到下一页总是慢半拍鼠标人工智能大模型推理引擎本地部署html-ppt product-launch 全 deck 模板解析8 页产品发布会幻灯片的叙事结构、设计令牌与换肤实战html ppt product launch 全 deck 模板解析8 页产品发布会幻灯片的叙事结构、设计令牌与换肤实战 product launch 是AI 技能/插件前端html-ppt的15套完整Deck模板怎么选从融资路演到技术分享的全场景实战攻略html ppt的15套完整Deck模板怎么选从融资路演到技术分享的全场景实战攻略 html pptHTML PPT Studio是一款开源的 HTMLAI 技能/插件前端上一篇TypeScript函数式编程新范式Rambda完全指南下一篇React-Virgin 项目推荐创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考