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