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