32個HTML幻燈片模板開源，讓AI別再做出丑PPT了

大家好，我是 Ai 學習的老章

PPT 這個話題在咱們號最近高頻出現，前陣子寫過

今天再補一塊拼圖，一個純模板倉庫（github.com/zarazhangrui/beautiful-html-templates）

AI 出圖越來越牛，AI 出網頁/PPT 始終一言難盡，最大的問題不是不能跑，是審美

讓大模型從零寫一份 HTML 幻燈片，結果大概率是：上世紀末的漸變背景、Times New Roman 居中標題、四個項目符號點對齊失敗，看一眼就想關掉

解法其實簡單粗暴——別讓 AI 從零設計，讓它從一堆設計師手搓的好模板里選一個填內容，今天這個倉庫，專門干這件事

簡介

倉庫一句話定位：一個 HTML 幻燈片模板庫，專為 coding agent 設計

• 32 套模板，每套 8~13 張演示幻燈片，覆蓋封面/中段/尾段三種典型布局

• 純 HTML + CSS（少量 JS 用于翻頁），打開就能看，不依賴任何構建工具

• 每套都有完整的視覺系統：字體、配色、裝飾元素、間距韻律

• 配套index.json元數據 +AGENTS.md操作手冊，agent 可以自動讀取、匹配、克隆、改寫

• MIT 協議，隨便用

模板風格跨度非常大，老章簡單挑幾張感受下

軟編輯風（Soft Editorial）——襯線字體配奶油色背景，做品牌、做研究匯報很合適

Soft Editorial

新極簡（Neo-Grid Bold）——一抹熒光黃做點睛，編輯性 neo-brutalism，做產品發布會有那種自信感

Neo-Grid Bold

8-Bit Orbit——像素街機風，深藍底色霓虹色塊，做游戲、做開發者技術分享會有點意思

8-Bit Orbit

Broadside——暗色編輯風，中英雙語字體棧，國內做技術 deck 友好

Broadside

剩下還有藍調專業風、招貼海報風、兒童手繪風、像素卡通風、深夜霓虹風……32 套基本能覆蓋大多數演講場景

這個倉庫最值錢的不是模板，是 AGENTS.md

模板誰都能做，但這個倉庫專門為 AI agent 寫了一份非常結構化的"操作手冊"

index.json里每個模板都標了多維度元數據

{
  "slug": "neo-grid-bold",
"name": "Neo-Grid Bold",
"tagline": "Editorial neo-brutalism with a single neon yellow accent on off-white paper.",
"mood": ["confident", "punchy", "editorial", "modern"],
"occasion": ["product launch", "design review", "founder pitch"],
"tone": ["bold", "minimal", "design-led", "graphic"],
"formality": "medium",
"density": "high",
"scheme": "light",
"best_for": "...",
"avoid_for": "...",
"slide_count": 12
}

agent 不用打開 HTML 就能根據 mood/tone/occasion 幾個維度做初篩，省掉一堆不必要的讀文件

AGENTS.md給的工作流也很有講究，強制了 6 步

1. 先問用戶兩個問題：場景是什么？想要什么氛圍？（不允許跳過——AI 容易自作主張）

2. 讀index.json，匹配出3 個候選，注意要"風格不同"，讓用戶有真正的選擇

3. 對 3 個候選只生成封面預覽 HTML，把用戶的真實標題/作者/日期填進去

4. open命令在瀏覽器打開 3 個預覽，讓用戶用眼睛挑

5. 用戶選完，再 clone 整套模板，逐頁改寫內容

6. 內容超出原模板槽位時，用同一套設計語言新增頁面，禁止換模板，禁止引入新視覺

這套流程的精妙之處在于——它假設了 AI 沒品味，強制把"選風格"這步留給人，AI 只負責執行

怎么用

最樸素的用法，把倉庫 README 給的那句話原樣貼給 Claude Code/Codex/Cursor 就行

Clone https://github.com/zarazhangrui/beautiful-html-templates and follow
the instructions in AGENTS.md to build me a beautiful HTML slide deck.

剩下的事 agent 會按AGENTS.md一步步問你

不想走 agent 流程，純手動也行

git clone https://github.com/zarazhangrui/beautiful-html-templates.git
cd beautiful-html-templates/templates/ 
<你看上的那套>
open template.html

每個模板目錄是自包含的，把整個文件夾復制到自己項目里改文字、改顏色、加頁面都很順手

實測體驗

我用軟編輯風格（Soft Editorial）把這篇文章轉成HTML PPT，過程很絲滑

隨便截取幾張

• 字體已經用引好了，不用再折騰

• 顏色變量集中在 CSS 頂部，改一個字段全局換膚

• 翻頁用 J/K 或方向鍵，演講時直接全屏打開瀏覽器就行

不過也有幾個真實的不爽

• 圖表/數據可視化沒有：模板里基本不帶 chart，要做柱狀圖餅圖得自己塞 SVG 或 echarts

• 中文字體支持參差：很多模板的字體棧是為拉丁字母調過的，中文顯示有些會"塌"，需要手動覆蓋一層中文 fallback

• 導出 PDF 偶爾翻車：瀏覽器打印有些模板的裝飾元素（絕對定位的色塊）會跑位

• 32 套聽起來多，其實集中在編輯風：design review、founder pitch 這類場景特別富，但學術匯報、路演、企業財報這種偏嚴肅的沒幾套合適

適合誰——愿意用 HTML 當 PPT 用的人，寫技術分享、產品發布、品牌提案、設計 review 的小團隊

不適合誰——只想點一下生成完整 PPT 不想動一行代碼的人，這倉庫是毛坯房，需要 agent 或人去精裝

一點延伸

這事讓老章想到的是另一個趨勢——HTML 正在重新成為內容載體

Markdown 早就溢出了文字范圍（參見前面那篇 Markdown 可視化的文章），HTML 又被重新發現可以替代 PPT、海報、邀請函、電子賀卡

底層邏輯很簡單：HTML 是瀏覽器原生格式，所有人都能打開，AI 訓練語料里也最多，agent 寫 HTML 比寫 PPTX 二進制格式靠譜一萬倍

模板倉庫其實是這條路上的"標準件"——AI 負責干，人負責挑，標準件越多，AI 干活越靠譜

zarazhangrui/beautiful-html-templates這套思路我蠻喜歡，沒把寶押在 AI 自動設計上，而是認清 AI 當前的能力邊界，把好東西先存起來給 AI 調用

制作不易，如果這篇文章覺得對你有用，可否點個關注。給我個三連擊：點贊、轉發和在看。若可以再給我加個，謝謝你看我的文章，我們下篇再見！