Frontend Slides3 分鐘把 PPT 變成零依賴網(wǎng)頁演示【免費下載鏈接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.項目地址: https://gitcode.com/GitHub_Trending/ev/ECC你有沒有遇到過這種情況PPT 發(fā)給客戶換臺電腦字體就跑了或者明明想做一個帶動畫的分享卻要花一下午調(diào)對齊。ECC 項目里的 frontend-slides 技能就是為了解決這類問題告訴它你的主題它直接產(chǎn)出一個零依賴的 HTML 演示文稿雙擊瀏覽器就能開講PPT 轉(zhuǎn)網(wǎng)頁也能直接上手。它到底能干什么5 個你真正用得上的能力 零依賴單文件所有樣式和腳本都內(nèi)聯(lián)在一個 HTML 文件里發(fā)給別人就是發(fā)一個文件對方不需要裝任何軟件也不依賴網(wǎng)絡(luò)。 PPT 轉(zhuǎn)網(wǎng)頁它能讀取 .pptx 里的文字、圖片和演講者備注按原順序重新生成網(wǎng)頁版舊演示稿不用重做。 12 種風(fēng)格預(yù)設(shè)從開發(fā)者風(fēng)的 Terminal Green 到雜志感的 Vintage Editorial不問你喜歡什么配色這種玄學(xué)問題直接給你看樣例。 每頁都保證不超屏每張幻燈片都鎖死在一個視口內(nèi)手機、平板、投屏大屏上都不會出現(xiàn)頁內(nèi)滾動條。 一鍵導(dǎo)出 PDF附帶腳本能把網(wǎng)頁演示逐頁截圖拼成 PDF方便發(fā)郵件或打印。3 個真實場景舊 PPT 翻新、新幻燈片速成、導(dǎo)出 PDF 發(fā)客戶三步把舊 PPT 變成網(wǎng)頁演示先安裝解析依賴再運行倉庫里現(xiàn)成的提取腳本pip install python-pptx python skills/frontend-slides/scripts/extract-pptx.py 舊文件.pptx接著讓 AI 基于提取出的 JSON 和圖片重建網(wǎng)頁演示最后用open presentation.htmlmacOS或xdg-open presentation.htmlLinux打開檢查。小提示腳本會把圖片存到assets/目錄讓 AI 引用這個目錄圖片就能直接落位不用你手動搬。三步從零做出會議演講幻燈片第一步把三件事說清楚用途內(nèi)部分享還是客戶提案、長度5-10 頁、10-20 頁還是更長、你手里有沒有現(xiàn)成文案。第二步如果你不知道自己要什么風(fēng)格它會先在.ecc-design/slide-previews/目錄生成 3 張單頁樣例你只看效果挑一個或者說把 A 的配色和 C 的字體拼一下。第三步挑定后生成presentation.html瀏覽器里用方向鍵翻頁即可。小提示已經(jīng)認(rèn)準(zhǔn)某個預(yù)設(shè)的話直接報名字比如 Terminal Green可以跳過預(yù)覽環(huán)節(jié)省一步。一條命令把演示導(dǎo)出成 PDF運行bash skills/frontend-slides/scripts/export-pdf.sh presentation.html腳本會自動起本地服務(wù)、按 1920x1080 逐頁截圖、拼成橫版 PDF動畫部分以靜態(tài)圖呈現(xiàn)顏色字體都保留。導(dǎo)出后可以直接拖進(jìn)郵件。小提示文件太大就加--compact參數(shù)改按 1280x720 導(dǎo)出體積能小一半以上腳本需要本機已裝 Node.js。它和 PowerPoint 們比有什么不一樣維度Frontend SlidesPowerPointReveal.js上手成本描述主題即可AI 生成手動排版需學(xué)操作自己寫代碼搭結(jié)構(gòu)是否需要聯(lián)網(wǎng)否本地文件直開否常依賴 CDN 或本地部署能否進(jìn) Git能純文本可 diff不能二進(jìn)制文件能分享方式發(fā)一個 HTML發(fā) .pptx 并祈禱不跑版發(fā)一組文件適配小屏內(nèi)置 clamp() 自適應(yīng)縮放后文字糊依賴自己寫斷點需要版本管理、跨設(shè)備演示、或者想嵌入代碼片段的場景選它如果你要的是客戶能自己拖拽編輯的源文件還是老老實實用 PowerPoint。進(jìn)階小技巧改主題、挑風(fēng)格、控制代碼頁改 3 個 CSS 變量換全套配色生成出來的文件頂部有一組 CSS 變量背景、強調(diào)色、字體都從這讀。想換風(fēng)格不用動任何 HTML只改這里:root { --bg-primary: #0a0f1c; --accent: #00ffcc; --font-body: Satoshi, sans-serif; }用情緒關(guān)鍵詞 10 秒定位風(fēng)格預(yù)設(shè)文檔里有一張情緒對照表想要被說服、有壓迫感選 Bold Signal 或 Electric Studio講 AI、基建、開發(fā)者工具選 Neon Cyber 或 Terminal Green數(shù)據(jù)匯報、策略評審選 Swiss Modern。把我想要什么感覺翻譯對比糾結(jié)配色快得多。代碼頁記住 3 個上限代碼幻燈片最多 8-10 行超了就拆頁代碼塊絕不允許出現(xiàn)滾動條字體用等寬預(yù)設(shè)比如 Terminal Green 里的 JetBrains Mono。這三條是內(nèi)置的硬性約束生成時它自己會遵守你手動改稿時也建議別破例。我提前幫你踩過的坑?? 內(nèi)容一頁放不下拆成兩頁別靠縮小字號硬塞——預(yù)設(shè)里明確禁止把字縮到不可讀。負(fù)號函數(shù)會被瀏覽器靜默忽略right: -clamp(28px, 3.5vw, 44px)這種寫法不報錯但完全無效正確姿勢是calc(-1 * clamp(28px, 3.5vw, 44px))。PDF 導(dǎo)出跑不起來九成是缺 Node.js先node -v確認(rèn)一下再找其他原因。下一步資源入口skills/frontend-slides/SKILL.md完整工作流與交付驗收標(biāo)準(zhǔn)skills/frontend-slides/STYLE_PRESETS.md12 種預(yù)設(shè)的詳細(xì)配色、字體和情緒對照表skills/frontend-slides/scripts/export-pdf.shPDF 導(dǎo)出腳本現(xiàn)在打開終端git clone https://gitcode.com/GitHub_Trending/ev/ECC把倉庫拉到本地然后對 AI 說一句幫我做一個 10 頁的 HTML 演示3 分鐘后你就能在瀏覽器里翻到第一頁?！久赓M下載鏈接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.項目地址: https://gitcode.com/GitHub_Trending/ev/ECC創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考