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点击查看免费下载html-pptHTML PPT Studio内置 15 个自包含的 full-deck 全 deck 模板knowledge-arch-blueprint是其中之一定位为奶油蓝图架构风格暖米色纸底、单一锈红强调色、硬黑描边卡片与虚线反馈回路箭头整体视觉接近一张建筑蓝图或技术白皮书架构图。本文以 模板说明文档 为主线结合模板源码 index.html 与 style.css拆解它的设计令牌、八页结构、SVG 反馈回路画法以及如何通过脚手架脚本把它落地成自己的架构分享 deck。模板定位full-deck 家族中的架构图专家在 html-ppt 的模板体系里templates/full-decks/name/下每个文件夹都是一个完整的 deck包含index.html7 页以上的多页 deck、以.tpl-name类前缀隔离的style.css以及一份说明设计理据的README.md。references/full-decks.md 中对它的登记信息是Source inspiration20260405-Karpathy-知识库/20260405 架构图v2.html—— 模板作者自己标注的灵感来源是一张真正的技术白皮书架构图Key visual traitscream paper#F0EAE0base、single rust accent#B5392A、48px blueprint grid mask、hard 2px black border cards、pipeline step-boxes with one hero raised、right-side rust insight callout、Playfair serif big numbers、SVG dashed feedback-loop arrows且Zero gradients, zero soft shadows零渐变、零柔和阴影When to use系统架构图、数据流向图、工程白皮书式内容需要严肃感、印刷感、可直接截图放进 README 的场景。这个模板属于 SKILL.md 所称的 8 个extracted from real-world decks从真实 deck 提炼之一与pitch-deck、tech-sharing等 7 个场景脚手架并列共 15 个可在 templates/full-decks-index.html 画廊中逐页预览。与单页 layout 模板不同full-deck 模板给出的是一套完整、有观点opinionated的视觉语言——README 明确指出用它时你得到的是整份 deck 的一致观感而不是拼凑单页版式。适用判断来自 README 的 Use when讲系统架构、数据流向、流程拆解想让内容看起来像一份正经技术白皮书而不是营销贴需要严肃感、印刷感、截图可直接塞进 README。设计令牌一组克制到极致的 CSS 变量整个模板的视觉身份由 style.css 顶部作用域选择器.tpl-knowledge-arch-blueprint中的一组 CSS 变量定义style.css 第 2–13 行变量取值用途--kb-bg#F0EAE0奶油纸底色铺满.slide背景--kb-ink#1a1a1a主墨色正文与描边基色--kb-ink2/--kb-ink3#555/#aaa次级灰阶用于小字与标签--kb-rust#B5392A唯一的锈红强调色accent--kb-rust-softrgba(181,57,42,.08)锈红 8% 透明度浅底用于高亮卡片底色--kb-line#cec8be分隔线页脚上边框等字体栈为Inter,Noto Sans SC,-apple-system,sans-serifstyle.css 第 12 行具体 webfont 由共享文件 assets/fonts.css 提供Inter、Noto Sans SC中文、JetBrains Mono代码框.kb-codebox使用、Playfair Display大号衬线数据.kb-big-num使用。离线时字体回退到系统字体栈deck 本身仍可在纯本地环境渲染。这套令牌值得注意的工程约束是所有颜色必须走变量而不是裸色值——这是 SKILL.md 中 Authoring rules 对全仓库的统一要求Use tokens, not literal colorsfull-deck 模板同样遵守。替换主题色时只需改--kb-rust一个值hero step、insight callout、大数字、SVG 箭头会整体联动。视觉特征逐项拆解对照源码README 的 Visual traits 段落列了九个特征下面逐一给出 style.css / index.html 中的实现证据微弱 48px 网格做 blueprint 感—— 每页.slide内放一个.kb-grid-bg占位层style.css 第 15 行用两条 1pxlinear-gradient画出 48px 方格opacity:.35并叠加mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%)做径向遮罩让网格在页面中心最清晰、四角淡出。pointer-events:none保证不干扰交互.slide *{position:relative;z-index:2}确保内容压在网格之上。硬朗 2px 黑边卡片——.kb-card与.kb-step统一border:2px solid #1a1a1a;border-radius:12px;background:#fff白底 硬描边是印刷品观感的核心来源。README 特别强调无渐变无阴影极度克制——唯一例外是 hero step 的box-shadow:0 10px 32px rgba(181,57,42,.28)只给核心步骤用锈红色投影制造凸起。pipeline step-box 一字排开 hero box 凸起——.kb-pipeline是 flex 横排容器每个.kb-step白底黑边、min-height:200px内部三段式结构.kb-step-num10px、字距 2.5px 的编号如 STEP 01→.kb-step-title22px 900 字重→.kb-step-body13px 说明margin-top:auto贴底。加上.hero修饰类后锈红填充、flex:1.25更宽、transform:translateY(-10px)上移 10px整条流水线里核心步骤一眼可辨。右上 insight 红色 callout——.kb-insight是锈红实底白字的内联块第 21 行圆角 10px、最大宽 340px、带锈红 22% 透明度投影内部.kk子标签是 10px、字距 2px 的小 kicker如 KEY INSIGHT。它出现在封面页右上角承担一句话立论的职能。大小写 kicker 2.5–4px 字距—— 模板内 kicker 体系分三档.kb-kicker为 13px、800 字重、letter-spacing:4px、全大写、锈红色.kb-section-label为 11px、字距 3.5px、灰#aaa并用::after生成一条延伸到行尾的 1px 分隔线.kb-step-num为 10px、字距 2.5px。这正是 README 所写 kicker 2.5-4px 字距 的具体出处。Playfair 大字号衬线数据——.kb-big-num用Playfair Display,Georgia,serif、200px、900 字重、letter-spacing:-.04em、锈红色第 49 行专用于统计页的大数字制造印刷报纸头版数字的效果。SVG 反馈回路虚线 箭头—— 见下一节直接内联在 index.html 中无外部依赖。深色代码框——.kb-codebox为黑底#1a1a1a 奶油字配四组手工 token注释.cm灰、关键词.kw暖橙#e8a87c、字符串.st浅绿#b3d1bc、高亮.hl锈红 白底 8% 衬底。整张卡片与纸底形成强烈反差是全 deck 中唯一的深色块。页脚 chrome——.kb-footer绝对定位在bottom:36px左右各 80px 留白11px 灰色大写小字 顶部分隔线左为页面语义标签如 Content · Compare、右为页码03 / 08复刻技术文档的页眉页脚习惯。八页结构一份完整架构白皮书的叙事骨架index.html 共 8 个section classslidebody挂tpl-knowledge-arch-blueprint类第 11 行页码标注 01/08 至 08/08叙事顺序与页脚标签一一对应01 COVERkicker 66px 大标题锈红span classrust点缀关键词 副标题右上角放.kb-insightcallout下方用.kb-section-labelPipeline · End-to-end领起一条 4 步.kb-pipeline其中第三步Wiki 化为 hero。封面即信息量最重的一页——把系统主线直接摆在第一屏。02 SECTION DIVIDER居中 120px 超大标题 一行论断章节过渡页。03 CONTENT 2-col.kb-grid-2两列对比卡原版 vs 升级版其中高亮卡把背景换成var(--kb-rust-soft)、边框换成var(--kb-rust)下方.kb-legend图例用 14px 小方块 实线/虚线符号解释普通节点 / 核心节点 / 数据流 / 反馈回路的记号系统——这是把图纸图例做进 deck 的细节。04 CODE.kb-codebox手工着色代码块展示一个 100 行 Agent Skill 清单on_hit / on_miss / on_wrong / nightly四条规则说明反馈回路怎么实现。05 DIAGRAM内联 SVG 系统图下一节详解这是模板最有辨识度的一页。06 STATS1.3fr 1fr 1fr三列网格左列 200px Playfair 大数字 两条锈红强调的.kb-card指标下方再排两张说明卡。07 CTA复用.kb-pipeline做成TONIGHT → DAY 2 → DAY 8hero→ MONTH 1的时间线行动页。08 THANKS居中 140px 巨型标题收尾。需要明确的是demo 文案知识库 pipeline、幻觉率 -62% 等数字、命令行与仓库地址都是示例内容模板作者用它演示了一条完整白皮书叙事能长什么样。references/full-decks.md 的 Authoring notes 对此有明确指引替换 demo 内容但保留结构性 classSwap demo content, but keep the structural classes — they are what gives each template its identity。SVG 反馈回路手绘架构图的核心技法第 5 页的内联 SVGindex.html 第 97–140 行是这个模板区别于其他 full-deck 的关键能力——它展示了一套可复制的蓝图式 SVG 绘图法画布viewBox0 0 1200 520width:100%;max-width:1200px自适应缩放无 CDN 依赖references/full-decks.md 亦强调 Charts are hand-rolled SVG (no CDN dependency)。箭头 markerdefs里定义两个三角 marker——#arrow黑#1a1a1a与#arrow-r锈红#B5392A分别用于正向数据流与反馈回路颜色语义即图例语义。节点盒子普通节点是rx10 fill#fff stroke#1a1a1a stroke-width2的圆角矩形标题 16px 700 字重 12px 灰色副说明核心节点Vault直接锈红填充白字与卡片体系的 hero 处理一致。正向箭头三条linemarker-endurl(#arrow)一字排开。反馈回路两条path用二次贝塞尔曲线Q绕行上下stroke-dasharray6 6虚线 锈红 marker并在弧线上压一个奶油底、锈红描边的小标签框FEEDBACK · wrong / miss、NIGHTLY · suggest new sources——虚线 回路、实线 数据流的记号系统与第 3 页.kb-legend图例严格对应。这套矩形节点 实线/虚线路径 双 marker 标签框的画法可以直接作为模板改造起点换掉节点文字与坐标就能画任何数据流 / 架构反馈图。运行时集成它依赖共享资产的哪些部分模板头三行link与尾部的 runtime 脚本index.html 第 7–9、188 行声明了全部外部依赖且全部指向 skill 根目录assets/fonts.csswebfont 导入Inter / Noto Sans SC / JetBrains Mono / Playfair Display 等assets/base.css.slide基类、设计画布默认 1920×1080只缩放不重排等原语assets/runtime.js零依赖键盘运行时——← →/Space 翻页、F全屏、O总览、T切主题、#/N深链、S 演讲者模式等。从 runtime.js 头注释与 SKILL.md 的说明可以确认两点实现事实一、slide 按固定设计画布默认 1920×1080authoring浏览器视图、演讲者预览、总览缩略图与 headless PNG 渲染全部是同一张缩放图二、runtime.js让.slide.is-active可见、其余隐藏模板自身不需要写任何 JS。这也解释了 full-deck 模板目录中index.html相对 skill 根用../../../assets/三级相对路径的原因——而 SKILL.md 明确警告不要手工复制目录再改路径应使用脚手架见下节。落地使用脚手架、改写与导出1. 预览模板原样直接打开 templates/full-decks/knowledge-arch-blueprint/index.html或从 templates/full-decks-index.html 画廊进入方向键翻页。2. 基于它创建自己的 deck在 skill 根目录运行脚手架指定模板名./scripts/new-deck.sh my-arch-talk -t knowledge-arch-blueprintscripts/new-deck.sh 对 full-deck 模板是整目录拷贝cp -R $TEMPLATE/. $OUT_DIR/随后用sed把所有../assets/前缀按目标目录深度重写rewrite_assets函数并对index.html中每一处本地href/src/url()引用做存在性校验list_refslexjoin任何解析失败的引用都会让脚本非零退出。脚本成功后会打印assets: REL/assets/的实际前缀与next steps。这正是 SKILL.md Never hand-edit the../depth in asset paths 规则的执行机制——full-deck 模板的../../../assets/是相对它自身位置的手工拷贝到错误深度会静默打碎所有引用。3. 改写内容保留kb-kicker / kb-h1 / kb-pipeline / kb-step(.hero) / kb-grid-2 / kb-card / kb-insight / kb-codebox / kb-big-num / kb-footer这些结构性 class 与页面骨架替换 demo 文案画架构图时复制第 5 页 SVG 骨架改坐标与文字。4. 导出 PNG用 headless Chrome 脚本逐页截图./scripts/render.sh examples/my-arch-talk/index.html allscripts/render.sh 依赖runtime.js暴露的#/N深链迭代 1..N 渲染由于画布缩放机制PNG 输出与屏幕所见一致。这也呼应了 README 的用途描述——可直接截图塞进 README。选型建议什么时候用它什么时候不用结合 README 与 references/full-decks.md 的对比描述可以给出清晰的选型边界用knowledge-arch-blueprint受众是工程师/技术决策者内容是系统架构、数据流、pipeline 拆解你希望成品像可印刷的技术白皮书需要严肃、克制、印刷感截图后直接进文档或 README。不用它营销 / 融资叙事选pitch-deck或product-launch、暗色终端感的技术测评选hermes-cyber-terminal、知识图谱 / 数据可视化发布选graphify-dark-graph、小红书竖版图文选xhs-post其画布为 3:4 的 810×1080。该模板的零渐变、零柔和阴影、单一锈红 accent是刻意为之的克制美学一旦为内容加多色渐变或圆角玻璃卡就会丢掉它最核心的识别度。改造时建议遵循 full-decks 家族的通用约束CSS 保持.tpl-name作用域前缀保证多模板可共存不冲突、颜色走 CSS 变量、图表用手绘 SVG、deck 必须引入runtime.js以获得键盘导航能力。小结knowledge-arch-blueprint用一个 49 行的 scoped CSS 文件和一份 190 行的 index.html完整演示了 html-ppt 的设计哲学视觉身份收敛为一组 CSS 令牌奶油纸 锈红 硬黑描边版式收敛为一套结构性 classkicker / pipeline / hero / card / footer图形收敛为手绘 SVG 记号系统实线数据流 虚线反馈回路 双色 marker。它的 demo 叙事封面 pipeline → 章节页 → 对比 → 代码 → 系统图 → 数据 → CTA → 致谢本身就是一份架构白皮书 deck的写作模板——替换内容、保留结构再用new-deck.sh与render.sh完成落地与导出就能得到一份可讲、可截图、可进 README 的蓝图风技术 deck。赞分享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点击查看免费下载相关推荐TVBoxOSC 剧情编辑器不写代码4 步做出你的第一个互动故事TVBoxOSC 剧情编辑器不写代码4 步做出你的第一个互动故事 草稿纸上画着三条箭头箭头末端各写着不同结局。手机拍了张照片然后就没有然后了——你不知道人工智能AI AgentAgent 沙箱云原生容器运行时零信任hermes-cyber-terminal用暗终端 扫描线打造「Honest Cyber Review」风格的 HTML PPT 全 Deck 模板hermes cyber terminal用暗终端 扫描线打造「Honest Cyber Review」风格的 HTML PPT 全 Deck 模板 heAI 技能/插件前端树莓派也能流畅跑Frosted Glass Lite 性能优化完整指南树莓派也能流畅跑Frosted Glass Lite 性能优化完整指南 树莓派或旧手机上Home Assistant 的仪表盘滑到下一页总是慢半拍鼠标人工智能大模型推理引擎本地部署上一篇Apache Cassandra 3.x vs 4.x终极版本特性对比指南下一篇掌握Min浏览器夜间模式从基础设置到高级视觉优化的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
