AI 技能/插件前端【免費(fèi)下載鏈接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations項(xiàng)目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill點(diǎn)擊查看免費(fèi)下載本篇圍繞 templates/full-decks/tech-sharing/README.md 展開(kāi)系統(tǒng)講清 html-ppt-skill 中tech-sharing全 deck 模板的定位8 頁(yè)工程演講結(jié)構(gòu)、GitHub 暗色調(diào)、終端代碼塊、逐頁(yè)骨架與視覺(jué) token 的實(shí)現(xiàn)細(xì)節(jié)以及通過(guò)new-deck.sh/render.sh腳手架復(fù)用該模板、導(dǎo)出 PNG 的完整操作路徑。讀完后你能直接基于該模板搭出一場(chǎng)可截圖分享的技術(shù)分享 deck并理解其 scoped CSS 與共享資產(chǎn)的分層設(shè)計(jì)。1. 模板定位它是什么、什么時(shí)候用tech-sharing是 html-ppt-skill 提供的 15 個(gè) full-deck 模板之一原始 README 對(duì)它的定義非常凝練8 頁(yè)工程演講結(jié)構(gòu)8-slide engineering talk deck封面主題 講者、議程agenda、背景鋪墊context、兩頁(yè)深度解析deep-dive、一個(gè)代碼示例、結(jié)論要點(diǎn)takeaways、QAGitHub 風(fēng)格暗色視覺(jué)深色 GitHub 風(fēng)格底色#0d1117搭配 JetBrains Mono 等寬字體與帶語(yǔ)法高亮的終端塊設(shè)計(jì)目標(biāo)適合截圖后分發(fā)到內(nèi)部 wiki 或社交平臺(tái)README 原文 Built to be screenshotted and shared on an internal wiki or Twitter適用場(chǎng)景團(tuán)隊(duì)技術(shù)分享日tech-sharing Fridays、brown-bag talks、lunch learn、會(huì)議投稿氣質(zhì)定位GitHub README 遇上好的會(huì)議演講——暗色、等寬、信息密度高但可讀GitHub README meets a good conference talk。在 references/full-decks.md 的場(chǎng)景 deck 目錄中它被登記為第 11 號(hào)模板#名稱(chēng)頁(yè)數(shù)風(fēng)格使用場(chǎng)景11tech-sharing8GitHub-dark、JetBrains Mono、終端代碼塊、agenda QA技術(shù)分享、內(nèi)部技術(shù) talk、會(huì)議演講與其他 full-deck 模板一樣tech-sharing目錄遵循統(tǒng)一的三文件約定templates/full-decks/tech-sharing/ ├── index.html # 完整的 8 頁(yè) deck帶真實(shí)演示內(nèi)容Rust 異步運(yùn)行時(shí) ├── style.css # 以 .tpl-tech-sharing 前綴隔離的 scoped CSS └── README.md # 模板定位與使用說(shuō)明SKILL.md 強(qiáng)調(diào)這類(lèi)模板應(yīng)當(dāng)整份作為腳手架使用而不是手工拷貝原因是模板內(nèi)資產(chǎn)路徑../../../assets/是相對(duì)于模板自身位置聲明的手工復(fù)制到別的目錄深度會(huì)導(dǎo)致路徑失效——這一點(diǎn)在 scripts/new-deck.sh 的自動(dòng)重寫(xiě)邏輯中解決見(jiàn)第 5 節(jié)。2. 逐頁(yè)拆解8 頁(yè)骨架與演示內(nèi)容index.html 內(nèi)置了一套完整的演示 deck——以 Rust 異步運(yùn)行時(shí)到底在調(diào)度什么? 為題的技術(shù)分享。逐頁(yè)看它的結(jié)構(gòu)類(lèi)命名正是你復(fù)用模板時(shí)應(yīng)當(dāng)保留的結(jié)構(gòu)類(lèi)第 1 頁(yè) · Cover封面.kicker標(biāo)簽行tech-sharing / 2026-04-15等寬字體、帶前綴.h1大標(biāo)題 78px/字重 800關(guān)鍵詞用--grad三段漸變文字background-clip: text突出.lede副標(biāo)題說(shuō)明本場(chǎng)范圍從Future::poll到 tokio 的 work-stealing.speaker講者塊漸變圓形頭像占位 昵稱(chēng) 團(tuán)隊(duì)/時(shí)長(zhǎng).deck-footer含話題標(biāo)簽#async #rust #tokio與.slide-number頁(yè)碼由共享 runtime 驅(qū)動(dòng)。第 2 頁(yè) · Agenda議程5 行.agenda-row每行由三部分構(gòu)成.num等寬綠色編號(hào) 01–05、.t章節(jié)標(biāo)題、.d預(yù)計(jì)時(shí)長(zhǎng)如~12min。行與行之間用虛線分隔——這是該模板議程頁(yè)的標(biāo)志性樣式。第 3 頁(yè) · Context背景鋪墊grid g3三張card card-accent卡片分別對(duì)比 Thread-per-conn、Event loop、Async/await 三種并發(fā)模型每張卡片底部用一個(gè).tag給出結(jié)論? 不現(xiàn)實(shí)、 callback hell、? Rust 選這個(gè)。注意卡片頂部的 3px 主色描邊來(lái)自.card-accent。第 4–5 頁(yè) · Deep Dive ×2深度解析兩頁(yè)均采用grid g2左右分欄左側(cè)一段.lede論述 若干.tag要點(diǎn)條右側(cè)分別是——第 4 頁(yè)一個(gè).terminal終端塊內(nèi)嵌Futuretrait 定義手工標(biāo)注的語(yǔ)法高亮 token.kw關(guān)鍵字、.fn函數(shù)名、.str字符串、.cmt注釋第 5 頁(yè)一張調(diào)度 tick 循環(huán)步驟卡片5 步用主色編號(hào)演示如何在沒(méi)有圖表的情況下用純文本列表講清調(diào)度器行為。第 6 頁(yè) · Code代碼示例整頁(yè)一個(gè)大的.terminal塊mini-runtime.rs · ~40 LOC展示用Wake/Waker手寫(xiě)最小運(yùn)行時(shí)關(guān)鍵行用注釋// 就是這一行高亮poll調(diào)用。終端塊帶 macOS 風(fēng)格的紅黃綠三點(diǎn)標(biāo)題欄與文件名src/main.rs。第 7 頁(yè) · Takeaways結(jié)論要點(diǎn)三張card-accent卡片各講一件事底部一行.lede列出延伸閱讀tokio 調(diào)度器博客、async-book。第 8 頁(yè) · QA.center.tc居中布局120px 主色問(wèn)號(hào) 聯(lián)系方式 兩個(gè)資源鏈接.tag。這套骨架的價(jià)值在于演示內(nèi)容可以隨時(shí)替換但.kicker / .h1 / .h2 / .lede / .terminal / .agenda-row / .card / .tag / .speaker這些結(jié)構(gòu)類(lèi)不要輕易改——它們是模板視覺(jué)身份的來(lái)源references/full-decks.md 的 authoring notes 也明確 Swap demo content, but keep the structural classes。3. 視覺(jué)系統(tǒng)scoped CSS 與 GitHub 暗色 tokenstyle.css 只有約 50 行但把整個(gè)視覺(jué)身份壓縮在一個(gè).tpl-tech-sharing作用域內(nèi)。逐類(lèi)解讀3.1 設(shè)計(jì) 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 的經(jīng)典兩級(jí)灰主色--accent:#7ee787GitHub 綠、輔色#79c0ff藍(lán)、#ff7b72珊瑚紅與 GitHub 語(yǔ)法高亮同源--accent-ink:#0b1024是落在--accent填充色上的文字色注釋里寫(xiě)明對(duì)比度 12.3:1。這對(duì)應(yīng) SKILL.md 的寫(xiě)作規(guī)則accent 填充上的文字必須用var(--accent-ink)因?yàn)楦髦黝}的 accent 明度跨度從純白到純黑沒(méi)有單一字面色能通吃--grad是綠→藍(lán)→紫的三段漸變只用于標(biāo)題關(guān)鍵詞與講者頭像這類(lèi)小面積強(qiáng)調(diào)。3.2 氛圍背景與文字層級(jí).slide::before疊了兩層低透明度徑向漸變右上藍(lán)光 12%、左下綠光 8%在不引入任何圖片的前提下?tīng)I(yíng)造暗色空間的層次.slide *通過(guò)z-index:1壓在氛圍層之上。字號(hào)體系.h178px/800/-.03em字距.h254px/700均強(qiáng)制白色#fff比--text-1更亮的#e6edf3保證暗底標(biāo)題的沖擊力。3.3 終端塊與手工語(yǔ)法高亮.terminal是整個(gè)模板的視覺(jué)錨點(diǎn)背景比頁(yè)面更深的#010409、1px 邊框、--radius圓角、0 30px 80px重陰影.bar標(biāo)題欄放三個(gè) 12px 圓點(diǎn)紅#ff5f56/ 黃#ffbd2e/ 綠#27c93f經(jīng)典 macOS 窗口色與文件名pre區(qū) 15px JetBrains Mono、行高 1.65、max-height:440px防溢出。語(yǔ)法 token 是一套手工 span 類(lèi)名模板內(nèi)容里直接寫(xiě)span classkw等配色全部對(duì)齊 GitHub Dark 語(yǔ)法主題類(lèi)名含義顏色.kw關(guān)鍵字#ff7b72珊瑚紅.fn函數(shù)/方法名#d2a8ff紫.str字符串#a5d6ff淺藍(lán).cmt注釋斜體#8b949e灰.num數(shù)字#79c0ff藍(lán)這意味著該模板不依賴(lài)任何 JS 高亮庫(kù)——寫(xiě)代碼示例時(shí)用 span 手工標(biāo)注 token 即可離線可用、渲染確定性高。3.4 其余組件.kicker::before{content: }每頁(yè)小標(biāo)簽行自動(dòng)獲得 shell 提示符前綴強(qiáng)化命令行敘事感.tag12px 等寬小膠囊用于議程外的任何元信息結(jié)論標(biāo)記、資源鏈接.agenda-rowflex 基線對(duì)齊 虛線分隔編號(hào)列固定 48px 寬.card-accent覆蓋 base 卡片的border-top:3px solid var(--accent)讓卡片在暗底上有主色頂邊。3.5 為什么必須 scoped 到.tpl-tech-sharingfull-decks 的約定是每個(gè)模板 CSS 以.tpl-name前綴隔離多模板可在同一頁(yè)面共存而不沖突references/full-decks.md Authoring notes。所有選擇器都寫(xiě)作.tpl-tech-sharing .terminal pre形式且 body 上帶classtpl-tech-sharing見(jiàn) index.html 第 11 行激活整套變量。若你基于此模板二創(chuàng)改色只需改文件頭部的:root級(jí)變量塊結(jié)構(gòu)類(lèi)不要?jiǎng)印?. 與共享資產(chǎn)的協(xié)作base.css 與 runtime.js模板自身只負(fù)責(zé)長(zhǎng)相骨架能力全部來(lái)自共享資產(chǎn)index.html頭部按固定順序引入四個(gè)文件link relstylesheet href../../../assets/fonts.css link relstylesheet href../../../assets/base.css link relstylesheet href../../../assets/animations/animations.css link relstylesheet hrefstyle.css對(duì)應(yīng)關(guān)系assets/base.cssreset 默認(rèn) token 布局原語(yǔ).grid/.g2/.g3、.card、.stack、.mt-*間距、.slide系統(tǒng)。tech-sharing 用到的.lede、.mono、.grid、.card都出自這里模板 CSS 只做覆寫(xiě)固定 1920×1080 設(shè)計(jì)畫(huà)布base.css規(guī)定.deck是var(--deck-w,1920px) × var(--deck-h,1080px)的固定畫(huà)布由 runtime 按視口計(jì)算--deck-scale縮放。這保證了瀏覽器里看到的、presenter 預(yù)覽、headless 截圖三者像素一致——正是 README 所說(shuō)適合截圖分發(fā)的底層保障assets/animations/animations.css封面標(biāo)題的data-animfade-up入場(chǎng)動(dòng)畫(huà)來(lái)自這里頁(yè)面切到當(dāng)前頁(yè)時(shí)觸發(fā)assets/runtime.js鍵盤(pán)導(dǎo)航← →/Space/Home/End、F全屏、O總覽網(wǎng)格、T主題切換、S演講者模式、#/N深度鏈接、?previewN單頁(yè)預(yù)覽模式等全部由 runtime 統(tǒng)一提供模板內(nèi)不需要寫(xiě)任何 JS。演講者模式值得單獨(dú)一提按S會(huì)打開(kāi)一個(gè)含 CURRENT / NEXT / SPEAKER SCRIPT / TIMER 四張磁性卡片的彈窗預(yù)覽用 iframe 加載真實(shí) deck 加?previewN參數(shù)因此與觀眾視圖共用同一套 CSS 與字體顏色布局保證一致見(jiàn) SKILL.md 與 references/presenter-mode.md。5. 落地實(shí)操腳手架、替換內(nèi)容、渲染導(dǎo)出5.1 用 new-deck.sh 從 tech-sharing 腳手架在項(xiàng)目根目錄執(zhí)行./scripts/new-deck.sh my-talk -t tech-sharing open examples/my-talk/index.htmlnew-deck.sh 的處理流程可直接讀源碼驗(yàn)證模板解析-t tech-sharing命中templates/full-decks/tech-sharing/目錄整個(gè)目錄含style.css、README.md拷貝到目標(biāo)位置默認(rèn)落在examples/name/資產(chǎn)路徑重寫(xiě)腳本用relpath()計(jì)算 deck 新位置到 skill 根目錄的相對(duì)前綴再用正則把文件里所有…/assets/引用統(tǒng)一重寫(xiě)——模板里寫(xiě)的是../../../assets/落位到examples/后自動(dòng)變成../assets/。SKILL.md 明確警告不要手改這個(gè)../深度引用自檢list_refslexjoin會(huì)枚舉index.html中所有本地href/src/url()引用包括常被漏掉的自身style.css逐一驗(yàn)證文件真實(shí)存在任一引用懸空腳本直接失敗退出。成功后會(huì)打印 refs: N local reference(s) verified。5.2 替換演示內(nèi)容時(shí)的守則保留第 2 節(jié)列出的結(jié)構(gòu)類(lèi)僅替換文字與代碼示例顏色、圓角、陰影一律走 CSS 變量Use tokens, not literal colors例如想讓結(jié)論卡頂邊換色改--accent而不是在 HTML 里寫(xiě)死accent 填充上的文字用var(--accent-ink)需要講者備注時(shí)把備注放進(jìn)每頁(yè)的div classnotes…/divS鍵打開(kāi)演講者視圖可見(jiàn)切勿把備注寫(xiě)成頁(yè)面可見(jiàn)元素每頁(yè)對(duì)應(yīng)一個(gè)section classslide>./scripts/render.sh examples/my-talk/index.html all # 或指定頁(yè)數(shù)與輸出目錄 ./scripts/render.sh examples/my-talk/index.html 8 out-dir腳本行為要點(diǎn)以--window-size1920,1080的 headless Chrome 逐頁(yè)訪問(wèn)file://...#/N深度鏈接截圖輸出index_01.png … index_08.pngall參數(shù)會(huì)按class中完整含slide詞元的section計(jì)數(shù)避免把.slide-number誤計(jì)為頁(yè)。適用前提Chrome 位于 macOS 默認(rèn)路徑腳本內(nèi)寫(xiě)死/Applications/Google Chrome.app/…Linux 下需自行調(diào)整$CHROME變量或改用等效的 headless 截圖流程。倉(cāng)庫(kù)的 scripts/verify-output/ 目錄保留了主題/動(dòng)畫(huà) showcase 的成圖樣例可對(duì)照預(yù)期截圖質(zhì)量。6. 小結(jié)這個(gè)模板做對(duì)了什么把 README.md 的兩行描述放回倉(cāng)庫(kù)上下文可以看到tech-sharing的完整設(shè)計(jì)閉環(huán)結(jié)構(gòu)上8 頁(yè)骨架cover/agenda/context/deep-dive×2/code/takeaways/QA覆蓋了工程分享最典型的敘事節(jié)奏議程頁(yè)自帶時(shí)間預(yù)算列天然適合 30–60 分鐘的 talk視覺(jué)上約 50 行 scoped CSS GitHub 暗色 token 手工語(yǔ)法高亮零圖片、零 JS 高亮依賴(lài)截圖導(dǎo)出效果穩(wěn)定工程上/ .tpl-tech-sharing /作用域讓它可以與其余 14 個(gè) full-deck 共存new-deck.sh的路徑重寫(xiě)與引用自檢解決了模板拷貝到別處就壞的經(jīng)典問(wèn)題render.sh的 1920×1080 固定畫(huà)布截圖補(bǔ)齊了截圖分發(fā)這條使用鏈路。如果你要做的是帶逐字稿的演講場(chǎng)景可以進(jìn)一步參考 references/presenter-mode.md或直接選用同為場(chǎng)景 deck 的presenter-mode-reveal模板兩者與tech-sharing共享同一套 runtime 與鍵盤(pán)協(xié)議切換成本很低。贊分享AI 技能/插件前端【免費(fèi)下載鏈接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations項(xiàng)目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill點(diǎn)擊查看免費(fèi)下載相關(guān)推薦樹(shù)莓派也能流暢跑Frosted Glass Lite 性能優(yōu)化完整指南樹(shù)莓派也能流暢跑Frosted Glass Lite 性能優(yōu)化完整指南 樹(shù)莓派或舊手機(jī)上Home Assistant 的儀表盤(pán)滑到下一頁(yè)總是慢半拍鼠標(biāo)人工智能大模型推理引擎本地部署html-ppt product-launch 全 deck 模板解析8 頁(yè)產(chǎn)品發(fā)布會(huì)幻燈片的敘事結(jié)構(gòu)、設(shè)計(jì)令牌與換膚實(shí)戰(zhàn)html ppt product launch 全 deck 模板解析8 頁(yè)產(chǎn)品發(fā)布會(huì)幻燈片的敘事結(jié)構(gòu)、設(shè)計(jì)令牌與換膚實(shí)戰(zhàn) product launch 是AI 技能/插件前端html-ppt的15套完整Deck模板怎么選從融資路演到技術(shù)分享的全場(chǎng)景實(shí)戰(zhàn)攻略html ppt的15套完整Deck模板怎么選從融資路演到技術(shù)分享的全場(chǎng)景實(shí)戰(zhàn)攻略 html pptHTML PPT Studio是一款開(kāi)源的 HTMLAI 技能/插件前端上一篇TypeScript函數(shù)式編程新范式Rambda完全指南下一篇React-Virgin 項(xiàng)目推薦創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考