同樣的設計 Skill，為什麼 AI 給別人做的封面好看，給你的還是一坨？

前排 AI 圈有個幾流行嘅講法——「HTML 先至係 AI 時代嘅新 Markdown」。呢句話出自 Anthropic Claude Code 團隊工程師 Thariq（原推文），出咗之後 16 個鐘就衝到 400 幾萬瀏覽，連 Karpathy 都嚟撐場。

意思係 AI 整出嚟嘅嘢，由「睇得明嘅文字」變緊做「用得嘅界面」：可以㩒、可以互動、可以重用。

喵嘅 AI 博主推薦系列，封面圖就係先用 HTML 整、再轉做圖片㗎。

喺實戰入面，喵成日卡咗喺一個好具體嘅位——改封面嘅設計細節時成日炒車。用緊 GPT-5.4 呢啲算唔錯嘅模型，每次都有附上截圖，但一個封面改咗十幾版都唔得：一係文字同圖形疊埋一齊，一係較咗半日行距都係錯。

喵諗諗下，其實入面有兩個問題：

呢兩個問題現實入面可以理解做兩個例子：一張醜但易改嘅 HTML，同一張好睇但一改就爛嘅 HTML。

呢兩個問題拆開嚟睇，好明顯係兩個問題，但我哋問 AI 點樣解決其中一個時，AI 成日會撈埋一齊答，例如用解決「好睇」嘅方法去答「點改」，自然點樣都對唔上。

喵對呢兩個問題好㾗：呢幾年 AI 快速發展嘅時候，人哋係點樣嘗試解決佢哋㗎？而家又有啲乜嘢真正用得嘅解法同工具？呢篇就等我哋一齊探索呢兩個問題。

喺拆「審美」之前，先答一個前置問題：點解最近大家都喺度講 HTML？佢同我哋熟嘅 AI 生圖（AIGC）又有咩分別？

先講呢股風係邊度嚟。源頭就係開頭嗰篇 Thariq 嘅文章——前排喺 AI 圈真係爆：16 個鐘 400 萬瀏覽，Karpathy 轉發力撐，國內 36氪、知乎都跟住嘈咗一輪。

佢嘅核心論點其實一句話：Agent 越來越強，Markdown 反而變咗「限制性格式」。 當 AI 一次過吐出上百行、或者一個複雜 PR 嘅審查結果，純文字就變咗一面「文字牆」——冇得 highlight、冇得畫圖、冇得並排對比。而 HTML 可以上色、可以互動、可以一鍵分享，等於將輸出由「文字流」升級做「用得嘅體驗對象」。

不過呢個觀點都有反對聲音，喵將另一面都列出嚟，費事淨係聽一面之詞：

更普遍嘅應該係中立看法，喵自己都最認同：與其爭邊個取代邊個，不如話工作流分成咗兩層——HTML 係畀人睇嘅「審閲層」，Markdown 係畀機器嘅「記憶層」，用邊個取決於呢樣嘢「到底畀邊個睇」。帶住呢個判斷，再睇 HTML 到底適合做乜就清楚得多。

講多少少：

1.

由「睇得明」到「用得」：Markdown 畀你一段睇得明嘅文字，HTML 畀你一個用得嘅嘢——可以㩒、可以跳轉、可以互動、可以重用。呢個係佢最近被捧嘅核心原因。

2.

適合「結構化、文字密集」嘅場景：乾貨清單、知識卡、流程圖、對比表呢啲靠排版同色塊說話嘅內容，HTML 係強項，精準又可以批量重用。

3.

同 AIGC 生圖係兩種玩法：生圖模型擅長氛圍感、插畫質感、有「人味」嘅主視覺；HTML 擅長將資訊排得清楚又靚。柔光插畫硬用 CSS 去砌，只會一直都唔滿意。

4.

代價都好實際：HTML 比起 Markdown 更嘥 token、手改麻煩、版本對比有噪音。佢唔係萬能解，而係「特定場景下嘅利器」。

開頭先分清楚呢度嘅「AI」指邊個——其實有兩類：一類係負責畫畫嘅視覺 / 生圖模型，佢哋嘅審美呢兩年已經相當打得；另一類係負責寫 HTML、砌版式的嘅語言模型。呢篇要拆嘅「冇審美」，由頭到尾都係講緊後者。

我哋成日覺得「好睇」係玄學、係天份。但喺 AI 同程式眼中，審美係一組可以量化嘅決策：視覺層級、對比、留白、對齊、節奏、色彩和諧、字體層次……每一條，都可以翻譯做具體參數。

咁點解呢類語言模型默認生成嘅 HTML 仲係容易「平庸、炒車」？追落去，就三個根因：

•

佢學嘅係「平均值」：模型擅長輸出統計上最常見嘅寫法，而最常見 = 平均。呢個就係點解全網都喺度鬧「AI 做嘅 UI 全部都係一個樣」.

•

佢冇眼睛：AI 寫完 HTML，睇唔到渲染出嚟係點樣。標題有冇壓埋一齊、兩個顏色打唔打架，佢根本唔知——等於矇住眼畫畫。

•

品味好難用語言講清：你成日「感覺到唔妥，但講唔出邊度唔妥」，硬要預先塞入 prompt，結果就係睇落都幾完整，但又唔似你自己嘅嘢。

所以解法嘅最小組合，其實得兩個零件，缺一不可：

呢度就要講講設計 skill 喇——佢本質就係將零件 A 打包成「開箱即用」嘅形態：將品牌色、字號、間距、組件、自檢清單一次過餵畀模型。專門做 HTML / 前端設計嘅 skill 呢兩年亦真係井噴，係好省力嘅工具，有啲（好似後面會提到嘅 impeccable）甚至自帶「反 AI 味」檢測，算補咗半對眼。

但喵之前「down 咗幾個設計 skill 都係好咗少少」，原因就係呢度：skill 基本上只補咗零件 A（標準），冇補零件 B（眼睛）。剩係知規矩、睇唔到自己邊度犯規，一樣改唔鬱——呢個正係呢篇標題想講嘅：唔好剩係裝個 Skill。

呢度仲有個好常見嘅誤區，喵自己都踩過：既然佢「冇長眼睛」，咁我截圖畀佢睇就得啦？喵每次改一版都好老實附上截圖，結果效果都係好差。

原因係——隨手掉一張截圖 ≠ 真係幫佢裝咗對眼。 零件 B 嘅關鍵唔係「畀佢睇一眼」，而係「渲染 → 截圖 → 令識睇圖嘅模型對住標準逐條挑剔 → 再針對性改」呢成個閉環。就咁掉張圖過去，模型一來冇標準對比，二來冇被要求系統自查，自然係矇住改。

將呢兩年捋成五代，你會睇得好清楚——每一代到底係解緊「好睇」定係「好改」。

•

第 0 代・盲生時代：早期模型識得吐 HTML，但冇預覽、冇審美，兩個問題都冇解。

•

第 1 代・文生 UI：靠「套組件庫」託底審美——呢個其實就係「標準注入」嘅雛形（呢條線一路大，就係今日周圍都係嘅「設計 skill」）。改細節仲要返去硬啃 prompt。

•

第 2 代・可視化產物：HTML 可以即時渲染喇，仲可以「揀中一段淨改嗰忽、唔使重寫整體」——呢個係「好改」第一次實質突破。

•

第 3 代・點選式編輯：由「對話改」進化到「用 mouse 㩒住改」，仲唔使嘥 token。Claude Design 同 Codex 都開始支援呢種功能，國產 IDE 同期井噴（字節 Trae、騰訊 CodeBuddy、阿里 Qoder 等）。

•

第 4 代・審美專用模型：出現咗專登被「調過審美」嘅模型，將審美模型 + 設計系統 + 識睇圖能力一次過打包。HTML 亦正式升格做 AI 嘅「一級產物」。

時間軸最大嘅發現係——

大部分人（包括之前嘅喵）淨係喺第一層「改 prompt、堆形容詞」度用力；但審美真正大面積流失嘅，係「默認值堆砌」同「閉環斷裂」呢兩層。

你喺錯咗嘅嗰層用力，再點用力都係好得少少。

講到「點樣改」呢條線，喵發現一個而家統一嘅模式——不論係某啲工具入面嘅標註，定係設計軟件入面嘅評論框，本質都係同一件事：

將現實入面「設計評審貼便條紙」嘅動作，搬咗入 AI 工作流。

點解佢可以根治「改一處炒一處」？因為「改 HTML」其實拆成兩個動作：話畀 AI 知改邊度（定位），和話畀 AI 知改成點（指令）。

而真正嘅瓶頸，一直都係「定位」。喵以前喺工具入面話「嗰個標題下面、第二張卡片右邊嗰個掣」——呢種用語言形容位置嘅方式有好多歧義，AI 成日揾錯地方，於是改 A 整爛 B。

標註式編輯嘅妙處就喺：將「定位」由語言交咗畀 mouse。 Mouse 一圈零歧義，文字淨係負責講「改成點」。呢次係乾淨嘅解耦。再加上「儲起一批標註一次過發」，模型一次過睇曬全部意圖，反而冇咁容易顧此失彼。

仲有一個更高層次嘅點喵好鍾意：代碼擅長「收斂」（一次行一條路、去到一個結果），畫布擅長「發散」（攤開全貌、同時比較幾個方向）。 新一代設計工具唔捨得嗰塊「畫布」，正正因為創作者真正需要嘅，係「同一個封面試三個方向、揀最順眼嗰個」嗰種發散感。

與其追住各家 IDE、設計軟件逐個試，喵更推薦直接去開源社區攞現成嘅——呢兩年專門幫「AI 寫 HTML」補審美嘅 skill 同工具井噴，免費、可移植、裝咗就用得。誠實提一句：審美會隨版本波動，唔好盲信，自己拎一張封面實測最準。

先說設計 skill——主要補「零件 A（好睇嘅標準）」，唔少仲自帶「反 AI 味」檢測，算半對眼：

再講重啲嘅開源工具 / 平台——佢哋唔止畀標準，仲將「預覽 → 出圖 → 導出」串成閉環，更加接近完整解法：

畀個簡單決定：

•

想快啲幫現有流程補啲審美 → 先裝一個設計 skill（taste-skill / impeccable 起步），令 AI 至少有規矩跟、少啲 AI 味。

•

想直接出小紅書封面、仲要一鍵導出 → 重點睇 html-anything，版面同中文優化最貼喵呢種場景。

•

想砌一套自己嘅、完整閉環嘅設計工作流 → 上 open-design 呢類平台，將品牌規範沉澱成 DESIGN.md 長期重用。

但唔好忘記標題嗰句——唔好剩係裝個 Skill。 呢啲 skill 同工具大多係補緊「好睇」(零件 A)，真係要做到「指邊度改邊度」，仲要配上前面講嘅「眼睛」(零件 B 嘅渲染→截圖→挑剔→再改閉環) 同標註式定位，先算真正閉環。

講返喵自己。捋完呢個圈，喵嘅結論都幾務實：呢個封面系列，喵唔打算再花時間死啃「點改」喇。

原因係喵發現，自己嘅卡點大多唔係 AI 改唔鬱，而係喵同 AI 喺「版式到底應該係點樣」上面冇達成一致——佢冇辦法完全跟足喵嘅意願改。而呢個問題，其實可以靠「重新整一版有詳細規範嘅 HTML」嚟解決，唔使喺反覆修改上嘥時間。

呢個同做其他 vibe coding 係同一個道理：PRD 出咗問題，後面改 code、改產出會好麻煩；不如一開始就將 PRD 改啱、重新做過。 好彩喵呢個系列嘅版式已經固定咗落嚟，咁就更冇必要喺修改上面糾結。

所以呢篇捋落嚟，對喵最有用嘅就一句：審美同修改係兩件事，先分清楚自己卡咗喺邊層，再決定係補「標準 + 眼睛」，定係索性重寫規範。 呢個比起死改到第十幾版實際得多。

咁如果你都係同 AI 死啃 HTML——你係點樣破局㗎？有冇啲順手嘅工具或方法，歡迎喺留言區分享畀喵同其他小夥伴，等我哋一齊成長～

📢 關注喵，同多元宇宙喵探索 AI 嘅 N 種可能，令 AI 成為你嘅工具，而唔係你嘅焦慮～

👉掃碼長按識別圖片加入喵嘅多元宇宙交流羣

前段時間 AI 圈有個挺火的說法——「HTML 才是 AI 時代的新 Markdown」。這話出自 Anthropic Claude Code 團隊工程師 Thariq（原推文），發出後 16 小時就衝到 400 多萬瀏覽，連 Karpathy 都來站台。

意思是 AI 產出的東西，正在從「能讀的文本」變成「能用的界面」：可點擊、可交互、可複用。

喵的 AI 博主推薦系列，封面圖就是先用 HTML 生成、再轉成圖片的。

在實踐中，喵經常卡在一個很具體的地方——改封面的設計細節時頻頻翻車。用的是 GPT-5.4 這種還不錯的模型，每次也都附上截圖，可一個封面改了十幾板還是不行：要麼文字和圖形遮擋，要麼一個行間距調了半天就是不對。

喵想了想，這裏面其實有兩個問題：

這兩個問題在現實中可以被理解為兩個實例：一張醜但好改的 HTML，和一張好看但一改就崩的 HTML。

這兩個問題當被拆解出來的時候，看起來是很明顯的兩個問題，但我們在問AI如何解決其中之一時，AI經常會把它們混在一起回答，比如說會用解決「好看」的辦法去回答「怎麼改」，自然怎麼都對不上。

喵對這兩個問題抓耳撓腮的好奇：人們在 AI 迅速發展的這幾年中是怎麼試圖去解決他們的？現在又有哪些真正能用的解法和工具？這篇就讓我們一起探索這兩個問題。

在拆「審美」之前，先回答一個前置問題：為什麼最近大家都在聊 HTML？它和我們熟悉的 AI 生圖（AIGC）又有什麼不一樣？

先說這股風是哪來的。源頭就是開頭那篇 Thariq 的文章——前段時間在 AI 圈是真的炸：16 小時 400 萬瀏覽，Karpathy 轉發力挺，國內 36氪、知乎也跟着吵了一輪。

他的核心論點其實一句話：Agent 越來越強，Markdown 反而成了「限制性格式」。 當 AI 一次吐出上百行、或者一個複雜 PR 的審查結果，純文本就成了一面「文字牆」——沒法高亮、沒法畫圖、沒法並排對比。而 HTML 能上色、能交互、能一鍵分享，等於把輸出從「文本流」升級成「能用的體驗對象」。

不過這觀點也有反對聲，喵把另一面也列出來，免得只聽一家之言：

更普遍的應該是中立看法，喵自己也最認同：與其爭誰取代誰，不如說工作流分成了兩層——HTML 是給人看的「審閲層」，Markdown 是給機器的「記憶層」，用哪個取決於這東西「到底給誰看」。帶着這個判斷，再看 HTML 到底適合幹嘛就清楚多了。

稍微多說點：

1.

從「能讀」到「能用」：Markdown 給你一段能讀的文字，HTML 給你一個能用的東西——可點擊、可跳轉、可交互、可複用。這是它最近被捧的核心原因。

2.

適合「結構化、文字密集」的場景：乾貨清單、知識卡片、流程圖、對比表這類靠排版和色塊說話的內容，HTML 是強項，精準又能批量複用。

3.

和 AIGC 生圖是兩種活：生圖模型擅長氛圍感、插畫質感、有「人味」的主視覺；HTML 擅長把信息排得清楚又漂亮。柔光插畫硬用 CSS 去磕，只會一直不滿意。

4.

代價也很實在：HTML 比起 Markdown 更費 token、手改麻煩、版本對比有噪聲。它不是萬能解，而是「特定場景下的利器」。

開頭先分清這裏的「AI」指誰——其實有兩類：一類是負責畫畫的視覺 / 生圖模型，它們的審美這兩年已經相當能打；另一類是負責寫 HTML、摳版式的語言模型。這篇要拆的「沒審美」，從頭到尾說的都是後者。

我們總覺得「好看」是玄學、是天賦。但AI以及程序的眼中，審美是一組可以量化的決策：視覺層級、對比、留白、對齊、節奏、色彩和諧、字體層次……每一條，都能翻譯成具體參數。

那為什麼這類語言模型默認生成的 HTML 還是容易「平庸、翻車」？追下去，就三個根因：

•

它學的是「平均值」：模型擅長輸出統計上最常見的寫法，而最常見 = 平均。這就是為什麼全網都在吐槽「AI 做的 UI 長得都一樣」。

•

它沒有眼睛：AI 寫完 HTML，看不到渲染出來長啥樣。標題壓沒壓到一起、兩個顏色打不打架，它根本不知道——等於蒙着眼畫畫。

•

品味很難用語言說清：你往往「能感覺到不對，但說不出哪不對」，硬要提前塞進 prompt，結果就是看着挺完整，卻不像你自己的。

所以解法的最小集合，其實只有兩個零件，缺一不可：

這裏就得說說設計 skill 了——它本質就是把零件 A 打包成「開箱即用」的形態：把品牌色、字號、間距、組件、自檢清單一次性餵給模型。專門做 HTML / 前端設計的 skill 這兩年也確實井噴，是很省力的工具，有的（比如後面會提到的 impeccable）甚至自帶「反 AI 味」檢測，算補了半隻眼睛。

但喵之前「下了好幾個設計 skill 卻只好了一點點」，原因也在這：skill 基本只補了零件 A（標準），沒補零件 B（眼睛）。光知道規矩、看不到自己哪裏違規，照樣改不動——這正是這篇標題想說的：不光只裝個 Skill。

這裏還有個特別常見的誤區，喵自己也踩過：既然它「沒長眼睛」，那我截圖給它看不就得了？喵每改一版都老老實實附上截圖，結果效果還是很差。

原因是——隨手丟一張截圖 ≠ 真給它裝上了眼睛。 零件 B 的關鍵不在「讓它瞄一眼」，而在「渲染 → 截圖 → 讓會看圖的模型對着標準逐條挑刺 → 再針對性改」這一整套閉環。圖甩過去，模型既沒有要比對的標準、也沒被要求系統自查，自然還是蒙着改。

把這兩年捋成五代，你會看得很清楚——每一代到底在解「好看」還是「好改」。

•

第 0 代 · 盲生時代：早期模型能吐 HTML，但無預覽、無審美，兩個問題都沒解。

•

第 1 代 · 文生 UI：靠「套組件庫」託底審美——這其實就是「標準注入」的雛形（這條線一路長大，就是今天滿天飛的「設計 skill」）。改細節還得回去硬剛 prompt。

•

第 2 代 · 可視化產物：HTML 能即時渲染了，還能「選中一段只改那塊、不重寫整體」——這是「好改」的第一次實質突破。

•

第 3 代 · 點選式編輯：從「對話改」進化到「鼠標點着改」，而且不費 token。Claude Design和Codex都開始支持這種功能，國產 IDE 也同期井噴（字節 Trae、騰訊 CodeBuddy、阿里 Qoder等）。

•

第 4 代 · 審美專用模型：出現了被專門「調過審美」的模型，把審美模型 + 設計系統 + 看圖能力一次性打包。HTML 也正式升格為 AI 的「一等產物」。

時間軸最大的發現是——

大部分人（包括之前的喵）只在第一層「改 prompt、堆形容詞」上使勁；但審美真正大面積流失的，是「默認值堆砌」和「閉環斷裂」這兩層。

你在錯的那一層使勁，再用力也只能好一點點。

聊到「怎麼改」這條線，喵發現一個現在的統一模式——不管是某些工具裏的標註，還是設計軟件裏的評論框，本質都是同一件事：

把現實裏「設計評審貼便籤」的動作，搬進了 AI 工作流。

它為什麼能根治「改一處崩一處」？因為「改 HTML」其實拆成兩個動作：告訴 AI 改哪裏（定位），和告訴 AI 改成什麼（指令）。

而真正的瓶頸，一直是「定位」。喵以前在工具裏說「那個標題下面、第二張卡片右邊的那個按鈕」——這種用語言描述位置的方式歧義巨大，AI 經常找錯地方，於是改 A 碰壞 B。

標註式編輯的妙處就在：把「定位」從語言交給了鼠標。 鼠標一圈零歧義，文字只負責說「改成什麼」。這是一次乾淨的解耦。再加上「攢一批標註一次性發」，模型一次就看到全部意圖，反而更不容易顧此失彼。

還有一個更高維的點喵很喜歡：代碼擅長「收斂」（一次走一條路、到一個結果），畫布擅長「發散」（鋪開全貌、同時比較好幾個方向）。 新一代設計工具捨不得那塊「畫布」，正是因為創作者真正需要的，是「同一個封面試三個方向、挑最順眼的」那種發散感。

與其追着各家 IDE、設計軟件挨個試，喵更推薦直接去開源社區薅現成的——這兩年專門給「AI 寫 HTML」補審美的 skill 和工具井噴，免費、可移植、裝上就能用。誠實提醒一句：審美會隨版本波動，別盲信，自己拿一張封面實測最準。

先說設計 skill——主要補「零件 A（好看的標準）」，不少還自帶「反 AI 味」檢測，算半隻眼睛：

再說更重的開源工具 / 平台——它們不止給標準，還把「預覽 → 出圖 → 導出」串成閉環，更接近完整解法：

給個簡單決策：

•

想快速給現有流程補點審美 → 先裝一個設計 skill（taste-skill / impeccable 起步），讓 AI 至少有規矩可循、少點 AI 味。

•

想直接出小紅書封面、還要一鍵導出 → 重點看 html-anything，版面和中文優化最貼喵這種場景。

•

想搭一套自己的、完整閉環的設計工作流 → 上 open-design 這類平台，把品牌規範沉澱成 DESIGN.md 長期複用。

但別忘了標題那句——不光只裝個 Skill。 這些 skill 和工具大多在補「好看」(零件 A)，真要做到「指哪改哪」，還得配上前面說的「眼睛」(零件 B 的渲染→截圖→挑刺→再改閉環) 和標註式定位，才算真正閉環。

說回喵自己。捋完這一圈，喵的結論挺務實的：這個封面系列，喵不打算再花時間死磕「怎麼改」了。

原因是喵發現，自己的卡點大多不是 AI 改不動，而是喵和 AI 在「版式到底該長啥樣」上沒達成一致——它沒法完全照喵的意願改。而這個問題，其實可以靠「重新做一版有詳細規範的 HTML」來解決，不用在反覆修改上耗。

這和做其他 vibe coding 是一個道理：PRD 出了問題，後面改代碼、改產出會很麻煩；不如一開始就把 PRD 改對、重做一遍。 好在喵這個系列的版式已經固定下來了，那就更沒必要在修改上糾結。

所以這篇捋下來，對喵最有用的就一句：審美和修改是兩件事，先分清自己卡在哪一層，再決定是補「標準 + 眼睛」，還是乾脆重寫規範。 這比悶頭改到第十幾板實在得多。

那如果你也在跟 AI 死磕 HTML——你是怎麼破局的？有什麼順手的工具或方法，歡迎在評論區分享給喵和小夥伴們，讓我們一起成長～

📢 關注喵，跟多元宇宙喵探索AI的N種可能，讓AI成為你的工具，而不是你的焦慮～

👉掃碼長按識別圖片加入喵的多元宇宙交流羣