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