嗨，我是 Maneshwar。我正在打造 git-lrc，一個會在每次提交時執行的微型 AI 程式碼審查工具。它在 GitHub 上免費且原始碼可用。幫 git-lrc 點個星星，幫助開發者發現這個專案。歡迎試用，也請分享你的回饋。
讓我猜猜。
你打開 Claude Code，輸入「幫我做一個現代感的登陸頁」，按下 Enter，結果得到一個技術上可用，但看起來又跟你滑過的每個網站都一樣的東西。
紫到藍的漸層。
所有字都用 Inter。
每個標題上方都有一排小小的圓角圖示方塊。
一個英雄區塊，放到地球上任何一家 SaaS 公司都毫無違和感。
恭喜你，剛剛端上來的是一碗全新的 AI 餿水。
我為了這件事已經奮戰一段時間了，我想帶你看看我是怎麼真正打敗它的。
不是靠一個神奇提示詞，也絕對不是靠你從某個討論串複製來的 1 萬行 DESIGN.md。
只要三個動作、幾個工具，再加上一種不再把輸出交給一次性抽獎的工作方式就夠了。
為什麼會出現餿水？
先說個讓人不太舒服、但值得停下來想一下的事實。
餿水的問題不是技術問題。
模型不是不會寫 CSS。
老實說，它們很會寫。
問題在於輸出太過「通用」，而通用是一個會移動的目標。
如果模型明天變強 10 倍，它們只會把「基本款」的標準拉高。
地板往上移，餿水也會跟著往上移。
為什麼？因為訓練於公開網路的模型，學到的是公開網路的統計中心，而 2026 年設計網路的中心，就是 Tailwind 範本、Vercel starter，以及其他 AI 生成的登陸頁。
你叫它做「現代感」，它就會給你所有曾經上線過的登陸頁的數學平均值。那個平均值，就是餿水。
所以問題不是要更好的模型。
問題是你自己。更精確地說，是你的品味。這也是很多人只會勉強撐著，而不是真的動手做好的地方。
對，這就是勉強撐著。
接下來這篇文章就是在講怎麼反過來做。
在深入之前，先用一張圖看懂整個玩法：
第 1 步：培養一點品味（你沒有的東西，無法注入）
你一定聽過一百次「AI 沒有品味」。好吧。
但沒人明講的隱藏推論是：你 也需要有能交給它的品味，而我們大多數人其實都沒有刻意建立過。我們只是憑感覺。
所以第 1 步很無聊、不花俏，而且完全不可省略：去蒐集你喜歡的東西。
當個喜鵲。打開 Dribbble，搜尋「web design」，依熱門排序，開始把會讓你有感的首頁截圖下來。
Pinterest 也做一樣的事。
然後，這是我個人最愛的部分，去 Twitter／X 看，真正驚人的 UI 作品很多都會先發在那裡，才輪得到其他地方。
存截圖。也存實際網站連結，因為真實頁面比平面圖片更能讓模型理解。
你當然可以把那些截圖丟在一個叫做 inspo_FINAL_v3 的資料夾裡讓它爛掉。或者你也可以選更好玩的做法，讓 Claude Code 幫你做一個小小的靈感資料庫網站。
我自己的版本會依設計風格分類，會用真正的設計術語命名美學風格，還會替每個作品產生關鍵字。
點一張截圖，我就能複製圖片提示詞（之後要生成相似的英雄背景）或複製完整簡報（用來生成整個頁面）。
它把一堆漂亮圖片，變成可重複使用、屬於「你」的品味調色盤。
這一步的目的不是抄別人。
而是給未來的自己一個可指向的基礎，讓你永遠不是從空白提示詞和一個平均結果開始。
你是從一個你已經知道自己喜歡的方向開始。
第 2 步：替 Claude Code 裝上它預設沒有的工具
Claude Code 開箱即用時，是個很強的開發者，但視覺判斷大概跟擲硬幣差不多。
所以我們要給它更好的眼睛和更好的手。只要三類工具就夠了。
一個真正的設計技能
預設的 Anthropic frontend-design 技能一開始還算不錯，但現在它有點開始產出它本來要避免的那種餿水了。
我現在最常用的是 Impeccable，這是 Paul Bakaus 做的開源 Claude Code 技能。
它不是含糊地拜託模型「不要看起來像 AI 生成」（這種方法從來沒用），而是做了一件很聰明的事：它直接命名那些具體的餿水模式，並告訴模型要避開它們。
它以一個技能包的形式提供，裡面有一組像斜線指令一樣可以呼叫的命令。我最常用的幾個有：
/critique：誠實檢視層級結構與清晰度的 UX 評審/bolder：把安全、保守的設計往更有衝擊力的方向推/quieter：把過度興奮的設計拉回來/polish：在上線前做最後的對齊與間距整理
它的底層會從七個面向找餿水：字體排版、色彩、空間設計、響應式、互動、動效，以及 UX 文案。
它甚至有個 Chrome 擴充功能，可以在實際網站上把餿水模式標示出來，雖然有點失禮，但非常實用。
文件裡的前後對照範例比我講得更有說服力。
如果 Impeccable 不是你的菜，GitHub 上還有其他同樣理念的「品味」類技能，原理也差不多。
一個圖像與影片 MCP
Claude Code 不會畫圖。它也沒辦法幫你生成那種霧感、電影感、適合放在英雄區塊背後的山景。
所以給它這個能力：Higgsfield MCP，它基本上是透過單一連線，給你的代理一張可使用 30 多個圖像與影片模型的後台通行證。
你描述英雄圖片，它就幫你生成，再塞進區塊裡，完成。不用在五個工具之間來回切換分頁。
一個元件資料庫
對於較小的東西，像按鈕、卡片、定價區塊、分頁（你上一次認真思考分頁是什麼時候？），我會去逛 21st.dev。
這是一個開放式元件資料庫，每個元件都附有一個「複製提示詞」按鈕。
把它貼到 Claude Code，它就會在你的程式碼庫裡，依照你的技術棧重建那個元件。
你可以把它想成第 1 步的品味蒐集，只是尺度縮小到元件層級。
去買工具前先提醒你一件事
陷阱在這裡，而我不只一次踩進去。
很容易讓自己相信，只要再多一個技能，所有設計問題就解決了。其實沒有。
你會找到一些很炫的技能，能做出漂亮的網站。
但問題是，它們通常很窄、很強制，最後每次都只會給你同一種輸出。
那不是品味，那只是更花俏的範本。
我喜歡 Impeccable 和 Higgsfield，正是因為它們夠彈性。
彈性的代價是，它們不會神奇地自動產生卓越成果。這仍然取決於你的提示方式和你的品味。這才是重點。
第 3 步：用迭代循環來做，不要一次定生死
這是改變我一切的思維轉換，所以請讀兩遍：停止嘗試一次到位。
一次到位就是買彩券。
你輸入「做得高級一點」，按下 Enter，然後祈禱。
有時候會中。大多時候只會得到字型稍微好看一點的餿水。
相反地，一開始先大範圍鋪開，再慢慢收斂。
我實際上的流程是這樣：
我具體說明一下。
假設我正在做一個假想的 AI 分析新創公司 Kestrel 的登陸頁，目標是讓人預約 demo。
第一步，一次做五個版本，五種風格。 不是一個，是五個。
如果你有按照第 1 步建立靈感資料庫，你就可以直接叫 Claude Code 讀取它，挑出五種美學家族，然後各做一版。
把它們並排放在同一個畫面上，你會立刻看出哪個方向有潛力；這是你盯著終端機一次看一個版本時永遠做不到的。
假設我最後選到的是一種「廣闊寧靜」的極簡風格，英雄區塊後方放一張大尺寸的電影感影像。
接著，對這個方向再做三個變體。
美學相同，但主體版面不同。
也許一個超垂直、極簡；一個是「帳本」風格，側邊有一個跟著你一起捲動的索引；另一個則用邊框把每個區塊框住。
我會選帳本版，因為那個捲動索引真的很酷。
接下來，先把英雄圖片搞定，再去煩其他東西。
我啟動 Higgsfield MCP，要四個符合寧靜美學的 2K 選項，直接放在實際的英雄區塊位置看。
太黑白？那就要求多一點色彩變化。
那張柔和金色的「山巒暮光」版本？成交。
然後是轉場和重量感。
我會要求英雄區塊過渡到內文時不要硬切，並且讓元素帶著一點厚重感進場，整體才會有高級感，而不是輕飄飄、廉價感很重。
注意現在發生了什麼。
在每個階段，我都在看選項並做選擇，而不是盲目相信某一次生成。這就是整個訣竅。
提示詞裡值得放的四件事
你不需要一份超長的設計文件。
那些東西一旦太具體，最後只會每次都產出同一個結果，那只是把餿水問題換了一件更漂亮的大衣。
我大致上只放四件事：
- 美學風格。 你想要的整體設計家族。
- 參考圖片。 這就是你的品味資料庫開始派上用場的地方。丟一張截圖，或更好，直接給一個你喜歡的網站 URL。你是在對齊一種感受，不是複製內容。
- 意圖。 這是什麼？它為什麼存在？是 SaaS 產品？活動頁？受眾是誰？你希望他們做什麼、讀什麼、點什麼、或填什麼？
- 護欄。 一定要有的，以及絕對不要的。這就是你的反餿水條款。「絕對不要紫色漸層。絕對不要 Inter。不要 3D SaaS 泡泡。」
秘密武器：即時調整列
即使做完這些，頁面還是會有點「幾乎對了，但又稍微太極簡」。
與其再用更多「讓它更有存在感」之類的提示詞去猜，我改成請 Claude Code 在開發伺服器裡加一個即時調整列，就是你在 Claude Design 裡會看到的那種面板。
字型家族、字型大小、重點色、動效、揭露距離，任何跟設計決策有關的專案都可以放進去。
現在我就能靠眼睛迭代。
我不是叫它重建十個頁面再來比，而是即時切換字型，直接看差異。
能夠立刻看到差別，才是最後讓你做到真正喜歡的東西的關鍵。而且別忘了：參考資料不只適用於英雄區塊。
也把你想要的內文排版方式的 URL 和截圖丟給模型，因為 Claude Code 真的可以看著一個實際頁面並套用它的結構。
收尾
這些都不是教條。不要照字面死背，因為一旦某件事變成死板公式，它就會開始產生自己那一種餿水。
重點是一個可以依照任何專案彈性調整的工作流程：
培養品味，讓你有東西可以交出去。
替你的代理裝上設計技能、圖像 MCP 和元件資料庫。
接著用循環方式來做，先大範圍，再逐步收斂，最後用眼睛微調，這樣你就不會受制於一次擲骰子的結果。
護城河從來不是工具箱。
一直都是你的品味。
去做一個看起來像「你」的作品，把紫色漸層留給它們該待的地方。
如果你試了這套方法，我很想看看你做出來的成果。歡迎在留言裡貼連結，讓我們交流一下心得。
AI 代理能很快寫出程式碼。但它們也會默默移除邏輯、改變行為、引入 bug，卻不會告訴你。你往往要到上線後才發現。
git-lrc 就是為了解決這件事而生。它會接到 git commit 流程中，並在每個 diff 合併前進行審查。60 秒完成設定。完全免費。
歡迎提供任何回饋或成為貢獻者！它已上線、原始碼可用，而且準備好供任何人使用。
⭐ 到 GitHub 幫它點星：
{% github=https://github.com/HexmosTech/git-lrc
原文出處：https://dev.to/lovestaco/teaching-your-ai-web-design-some-actual-taste-4p13
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
