不用PS不用設計軟件，瀏覽器就能做公眾號封面
整理版優先睇
一個瀏覽器即開即用嘅封面生成工具，X題圖效果最掂
呢篇文章係一個開發者測試咗一個開源工具「article-tools」嘅封面生成器。作者本身係技術用家，見到有開發者將工具開源咗——純HTML，雙擊就開到，唔使裝Node.js或Python。佢嘅目的係想知呢個工具生唔生成到靚嘅社交媒體題圖。整體結論係：X題圖效果最好，快過Figma好多；公眾號文章題圖夠用，由「冇設計感」升級到「有啲設計感」；但公眾號封面就勉強合格，Edge瀏覽器下光影效果會差啲。
工具嘅設計亮點包括：配色唔係預設色，而係比咗一個面板，支援純色、線性漸變同徑向漸變，你可以直接填品牌色，同裝飾風格唔會撞。裝飾風格係純CSS畫嘅，有極簡幾何、賽博朋克、AI球體三種，你可以打開開發者工具直接改參數。另外仲有個「AI預設存檔」功能，你可以用自然語言話俾AI知你想要點樣，AI幫你生成參數配置，下次一鍵加載——不過呢個功能需要你自己搭AI，工具本身唔帶AI，所以而家似一個接口多過功能。
作者認為呢個工具目前主要適合技術博主用，但作者計劃加入免費字體資源、背景紋理同Unsplash圖片，嗰時非技術類公眾號都可以直接用。工具係MIT協議，開源可自改。
- 工具係純HTML，雙擊即開，唔使裝任何環境，X題圖效果最好，快過Figma好多。
- 公眾號文章題圖夠用，由「冇設計感」升級到「有啲設計感」，但公眾號封面勉強合格，Edge下光影有問題。
- 配色靈活：支援純色、線性漸變、徑向漸變，可直接輸入品牌色，同裝飾風格唔會撞。
- 裝飾全用CSS，三種風格（極簡幾何、賽博朋克、AI球體），可喺開發者工具直接改參數。
- 「AI預設存檔」係接口式功能，需要你自己搭AI生成參數，下次一鍵加載，但而家未實際整合。
GitHub 倉庫
article-tools 項目，含封面生成器、排版工具、二維碼工具，MIT 協議。
在線預覽
直接喺瀏覽器試用封面生成器（cover.html）。
一句講曬：X題圖最值得用
作者一開波就帶出結論：呢個開源工具「article-tools」嘅封面生成器（cover.html），喺X題圖（1500×500px）上面效果最靚。佢直接用瀏覽器打開 cover.html，雙擊就用到，唔使安裝嘢。
工具嘅漸變背景加極簡幾何裝飾好有設計感，而且 CSS 寫得講究，線條同色塊位置唔係亂擺。作者覺得呢個工具尤其適合成日要出題圖嘅技術博主。
實測三個場景，表現不一
- 1 X題圖（1500×500px）：最滿意。漸變背景配極簡幾何，導出快，效果好。
- 2 公眾號文章題圖（900×383px）：夠用。試咗賽博朋克風格，效果可以，但因為比例窄，裝飾元素空間唔大，不過由純色背景升級到有設計感嘅題圖係冇問題。
- 3 公眾號封面（2.35:1）：勉強合格。試咗AI球體風格，Chrome上睇得嚇，Edge上光影效果差咗啲。如果對封面要求高就唔夠用。
作者特別提咗，如果你而家嘅題圖只係純色背景，用呢個工具可以直接升級，由「冇設計感」變成「有啲設計感」。
三樣值得留意嘅設計
第一係配色面板。唔係揀預設色，而係有三種模式：純色、線性漸變、徑向漸變，每種可以自己填色值。作者用佢哋嘅品牌色 #FF6B35 試過，同幾何裝飾好夾，唔會打架。
第二係裝飾風格全用CSS，冇任何圖片資源。三種風格——極簡幾何、賽博朋克、AI球體——全部用CSS畫出來。你可以直接開開發者工具改圓角、間距等參數，比喺界面上一撳一撳方便好多。
第三係AI預設存檔。你可以用自然語言描述想要嘅封面（例如「深藍底色、金色文字、暗色幾何、科技感」），然後AI幫你生成參數配置，儲存成新預設，下次一鍵加載。不過呢個功能需要你自己搭AI（例如用ChatGPT），工具本身唔帶AI，而家似一個接口多過完整功能。
點樣用同埋之後會加咩嘢
- 1 去 GitHub 下載 ZIP 或者 git clone 個項目。
- 2 解壓，揾到 cover.html，雙擊打開。
- 3 揀尺寸、揀風格、調顏色、填標題，然後導出。
作者自己做過一兩張之後，基本上半分鐘就出一張。第一張會慢啲，因為要試邊個風格好睇。
作者計劃加入嘅功能包括：免費字體資源（擺脱系統默認字體）、背景紋理提升質感、Unsplash圖片做背景底圖。字體同紋理加入之後，非技術類嘅公眾號都啱用。
有個開發者將佢用嚟做公眾號封面同 X 題圖嘅工具開源咗。
純 HTML，瀏覽器一開就用到。唔使裝 Node.js，唔使裝 Python，下載落嚟雙擊就得。
我實際試咗下，下面係結果。
先講結論：X題圖最好用。
article-tools，GitHub度啱啱開源，MIT 協議。三個工具——排版、封面生成、二維碼。呢篇只講封面生成器（），另外兩個之後再單獨寫。cover.html另外兩個之後再單獨寫。
項目地址：
https://github.com/eternityspring/article-tools
在線預覽：
https://eternityspring.github.io/article-tools/
我試咗三個場景，結果唔係好一樣。
我直接喺瀏覽器度打開咗 cover.html。雙擊，冇 npm install，冇啟動服務。打開就用得。
然後我分別用佢做咗 X 題圖、公眾號文章題圖、公眾號封面。
X 題圖——呢個我最滿意
X 嘅題圖係 1500×500px 橫版。我揀咗漸變背景配極簡幾何裝飾，填上標題文字，導出。
幾何裝飾嘅 CSS 寫得幾講究，線條同色塊嘅位置唔係亂咁擺，有啲設計功底喺度。我之前做 X 題圖一路係純文字+純色，換咗呢個之後同事問我係咪換咗設計工具。講真，比 Figma 快好多。
公眾號文章題圖——夠用
900×383px。我試咗賽博朋克風格，霓虹色+網格線效果。整出嚟睇落都仲可以，但比 X 嗰張爭啲意思——可能係因為文章題圖比例窄，裝飾元素嘅展示空間唔夠大。
不過如果你而家嘅題圖都係純色背景，換呢個工具確實可以直接升級。由「冇設計感」到「有啲設計感」呢個跨度，佢撐得住。
公眾號封面——勉強合格
公眾號封面（2.35:1）我試咗 AI 球體風格配深色背景。老實講呢張我猶豫緊要唔要放埋入嚟。球體嘅 CSS 渲染喺 Chrome 上睇落仲得，但換到 Edge 上光影效果差咗少少。如果你對封面要求比較高，呢個可能仲未夠。
幾個值得講嘅地方
配色唔係揀預設色，而係俾咗一個面板
純色、線性漸變、徑向漸變三種模式，每種可以自己填色值。我有品牌色，直接打落去就用得，同預設裝飾風格唔衝突。
我拿 #FF6B35 試咗下，配合幾何裝飾效果好自然，冇「品牌色同裝飾風格打架」嘅問題。
裝飾風格係純 CSS，可以自己改
極簡幾何、賽博朋克、AI 球體——三種風格，冇圖片資源，全部係 CSS 畫嘅。呢個意味住你可以打開開發者工具直接改參數。我喺 F12 度調咗幾次圓角同間距，比喺工具介面上點嚟點去方便。
「AI 預設存檔」——俾 AI 幫你定風格
你用自然語言描述想要嘅封面（「深藍底色、金色文字、暗色幾何、科技感」），AI 幫你生成對應嘅參數配置，保存做新預設。下次打開一鍵載入。
講白咗就係你話俾 AI 知你要咩，佢幫你整好，你下次直接用。唔使識 CSS，唔使識設計。
不過呢個功能我仲未實際跑通——因為佢需要你自己搭 AI 嚟用，工具本身冇帶 AI。我理解係作者設計咗呢個預設格式嘅接口，方便你用任何 AI 工具生成參數之後導入。想法幾好，但目前似一個「接口」而唔係「功能」。
怎麼用
第一步：git clone 或者去 GitHub下載 ZIP。
第二步：解壓，揾到 cover.html，雙擊打開。
沒了。
打開之後揀尺寸、揀風格、調顏色、填標題、導出。我自己試落嚟，做過一兩張之後基本半分鐘一張。第一張會慢啲，主要係喺度試邊個風格好睇。
作者下一步打算加啲咩
接入免費字體資源，封面文字唔只有系統默認字體 引入背景紋理，提升質感 引入 Unsplash 圖片做背景底圖
字體同背景紋理呢兩樣加埋之後，呢個工具嘅適用範圍會大好多。而家主要係技術博主用緊，字體同紋理到位之後，非技術類嘅公眾號都可以直接攞嚟用。
項目地址：
https://github.com/eternityspring/article-tools
在線預覽：
https://eternityspring.github.io/article-tools/
開源協議：MIT
一個開發者把他做公眾號封面和 X 題圖的工具開源了。
純 HTML，瀏覽器打開就能用。不裝 Node.js，不裝 Python，下載來雙擊就跑。
我實際測了一下，下面是結果。
先說結論：X題圖最好用
article-tools，GitHub上剛開源，MIT 協議。三個工具——排版、封面生成、二維碼。這篇只聊封面生成器（cover.html），另外兩個以後單獨寫。
項目地址：
https://github.com/eternityspring/article-tools
在線預覽：
https://eternityspring.github.io/article-tools/
我測了三個場景，結果不太一樣
我直接在瀏覽器裏打開了 cover.html。雙擊，沒有 npm install，沒有啓動服務。打開就能用。
然後我分別用它做了 X 題圖、公眾號文章題圖、公眾號封面。
X 題圖——這個我最滿意
X 的題圖是 1500×500px 橫版。我選了漸變背景配極簡幾何裝飾，填上標題文字，導出。
幾何裝飾的 CSS 寫得挺講究，線條和色塊的位置不是隨便擺的，有點設計功底在。我之前做 X 題圖一直是純文字+純色，換了這個之後同事問我是不是換了設計工具。說實話，比 Figma 快太多了。
公眾號文章題圖——夠用
900×383px。我試了賽博朋克風格，霓虹色+網格線效果。做出來看着還可以，但比 X 那張差點意思——可能是因為文章題圖比例窄，裝飾元素的展示空間不夠大。
不過如果你現在的題圖也是純色背景，換這個工具確實能直接升級。從"沒有設計感"到"有點設計感"這個跨度，它撐得住。
公眾號封面——勉強及格
公眾號封面（2.35:1）我試了 AI 球體風格配深色背景。說實話這張我猶豫要不要放進來。球體的 CSS 渲染在 Chrome 上看着還行，但換到 Edge 上光影效果差了一點。如果你對封面要求比較高，這個可能還不夠。
幾個值得說的地方
配色不是選預設色，是給了一個面板
純色、線性漸變、徑向漸變三種模式，每種可以自己填色值。我有品牌色，直接輸進去就能用，和預設裝飾風格不衝突。
我拿 #FF6B35 試了一下，配合幾何裝飾效果很自然，沒有"品牌色和裝飾風格打架"的問題。
裝飾風格是純 CSS，能自己改
極簡幾何、賽博朋克、AI 球體——三種風格，沒有圖片資源，全是 CSS 畫的。這意味着你可以打開開發者工具直接改參數。我在 F12 裏調了幾次圓角和間距，比在工具界面上點來點去方便。
"AI 預設存檔"——讓 AI 幫你定風格
你用自然語言描述想要的封面（"深藍底色、金色文字、暗色幾何、科技感"），AI 幫你生成對應的參數配置，保存為新預設。下次打開一鍵加載。
說白了就是你告訴 AI 你要什麼，它幫你調好，你下次直接用。不用懂 CSS，不用會設計。
不過這個功能我還沒實際跑通——因為它需要你自己搭配 AI 來用，工具本身不帶 AI。我理解的是作者設計了這個預設格式的接口，方便你用任何 AI 工具生成參數後導入。想法挺好的，但目前更像是一個"接口"而不是"功能"。
怎麼用
第一步：git clone 或者去 GitHub下載 ZIP。
第二步：解壓，找到 cover.html，雙擊打開。
沒了。
打開之後選尺寸、選風格、調顏色、填標題、導出。我自己測下來，做過一兩張之後基本半分鐘一張。第一張會慢一些，主要是在試哪個風格好看。
作者接下來打算加什麼
接入免費字體資源，封面文字不只有系統默認字體 引入背景紋理，提升質感 引入 Unsplash 圖片做背景底圖
字體和背景紋理這兩樣加上之後，這個工具的適用範圍會大很多。現在主要是技術博主在用，字體和紋理到位之後，非技術類的公眾號也能直接拿來用。
項目地址：
https://github.com/eternityspring/article-tools
在線預覽：
https://eternityspring.github.io/article-tools/
開源協議：MIT