大家好，我是 Ai 學(xué)習(xí)的老章

PPT 這個(gè)話題在咱們號(hào)最近高頻出現(xiàn)，前陣子寫過

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

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

讓大模型從零寫一份 HTML 幻燈片，結(jié)果大概率是：上世紀(jì)末的漸變背景、Times New Roman 居中標(biāo)題、四個(gè)項(xiàng)目符號(hào)點(diǎn)對(duì)齊失敗，看一眼就想關(guān)掉

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

簡介

倉庫一句話定位：一個(gè) HTML 幻燈片模板庫，專為 coding agent 設(shè)計(jì)

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

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

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

• 配套index.json元數(shù)據(jù) +AGENTS.md操作手冊(cè)，agent 可以自動(dòng)讀取、匹配、克隆、改寫

• MIT 協(xié)議，隨便用

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

軟編輯風(fēng)（Soft Editorial）——襯線字體配奶油色背景，做品牌、做研究匯報(bào)很合適

Soft Editorial

新極簡（Neo-Grid Bold）——一抹熒光黃做點(diǎn)睛，編輯性 neo-brutalism，做產(chǎn)品發(fā)布會(huì)有那種自信感

Neo-Grid Bold

8-Bit Orbit——像素街機(jī)風(fēng)，深藍(lán)底色霓虹色塊，做游戲、做開發(fā)者技術(shù)分享會(huì)有點(diǎn)意思

8-Bit Orbit

Broadside——暗色編輯風(fēng)，中英雙語字體棧，國內(nèi)做技術(shù) deck 友好

Broadside

剩下還有藍(lán)調(diào)專業(yè)風(fēng)、招貼海報(bào)風(fēng)、兒童手繪風(fēng)、像素卡通風(fēng)、深夜霓虹風(fēng)……32 套基本能覆蓋大多數(shù)演講場景

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

模板誰都能做，但這個(gè)倉庫專門為 AI agent 寫了一份非常結(jié)構(gòu)化的"操作手冊(cè)"

index.json里每個(gè)模板都標(biāo)了多維度元數(shù)據(jù)

{
  "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 就能根據(jù) mood/tone/occasion 幾個(gè)維度做初篩，省掉一堆不必要的讀文件

AGENTS.md給的工作流也很有講究，強(qiáng)制了 6 步

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

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

3. 對(duì) 3 個(gè)候選只生成封面預(yù)覽 HTML，把用戶的真實(shí)標(biāo)題/作者/日期填進(jìn)去

4. open命令在瀏覽器打開 3 個(gè)預(yù)覽，讓用戶用眼睛挑

5. 用戶選完，再 clone 整套模板，逐頁改寫內(nèi)容

6. 內(nèi)容超出原模板槽位時(shí)，用同一套設(shè)計(jì)語言新增頁面，禁止換模板，禁止引入新視覺

這套流程的精妙之處在于——它假設(shè)了 AI 沒品味，強(qiáng)制把"選風(fēng)格"這步留給人，AI 只負(fù)責(zé)執(zhí)行

怎么用

最樸素的用法，把倉庫 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 會(huì)按AGENTS.md一步步問你

不想走 agent 流程，純手動(dòng)也行

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

每個(gè)模板目錄是自包含的，把整個(gè)文件夾復(fù)制到自己項(xiàng)目里改文字、改顏色、加頁面都很順手

實(shí)測體驗(yàn)

我用軟編輯風(fēng)格（Soft Editorial）把這篇文章轉(zhuǎn)成HTML PPT，過程很絲滑

隨便截取幾張

• 字體已經(jīng)用引好了，不用再折騰

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

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

不過也有幾個(gè)真實(shí)的不爽

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

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

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

• 32 套聽起來多，其實(shí)集中在編輯風(fēng)：design review、founder pitch 這類場景特別富，但學(xué)術(shù)匯報(bào)、路演、企業(yè)財(cái)報(bào)這種偏嚴(yán)肅的沒幾套合適

適合誰——愿意用 HTML 當(dāng) PPT 用的人，寫技術(shù)分享、產(chǎn)品發(fā)布、品牌提案、設(shè)計(jì) review 的小團(tuán)隊(duì)

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

一點(diǎn)延伸

這事讓老章想到的是另一個(gè)趨勢(shì)——HTML 正在重新成為內(nèi)容載體

Markdown 早就溢出了文字范圍（參見前面那篇 Markdown 可視化的文章），HTML 又被重新發(fā)現(xiàn)可以替代 PPT、海報(bào)、邀請(qǐng)函、電子賀卡

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

模板倉庫其實(shí)是這條路上的"標(biāo)準(zhǔn)件"——AI 負(fù)責(zé)干，人負(fù)責(zé)挑，標(biāo)準(zhǔn)件越多，AI 干活越靠譜

zarazhangrui/beautiful-html-templates這套思路我蠻喜歡，沒把寶押在 AI 自動(dòng)設(shè)計(jì)上，而是認(rèn)清 AI 當(dāng)前的能力邊界，把好東西先存起來給 AI 調(diào)用

制作不易，如果這篇文章覺得對(duì)你有用，可否點(diǎn)個(gè)關(guān)注。給我個(gè)三連擊：點(diǎn)贊、轉(zhuǎn)發(fā)和在看。若可以再給我加個(gè)，謝謝你看我的文章，我們下篇再見！