我讓 Claude Code 學會"審美"了：一個 Hue 工作流，直接復刻網站風格並生成整個頁面
整理版優先睇
一個叫 Hue 嘅工作流可以將網站截圖提煉成設計語言，令 Claude Code 生成風格統一嘅頁面，解決 AI 網頁「一眼就知係 AI 做」嘅問題。
呢篇文章係一個成日用 AI 做網頁嘅開發者分享嘅經驗。佢成日遇到一個問題：AI 生成嘅代碼冇 bug，結構亦都啱，但係就係唔靚——字體冇氣質、配色唔剋制、組件似臨時拼湊，成個頁面冇統一嘅設計語言。為咗解決呢個問題，佢發現咗一個叫 Hue 嘅工作流，核心概念係：唔好俾 Claude 直接設計，而係先教佢一套設計語言，再叫佢生成頁面。
Hue 本質上係一個「審美蒸餾器」，可以將你鍾意嘅網站（可以透過截圖、URL 或者品牌名輸入）拆解成字體、配色、圓角、間距、陰影、組件結構等具體規則，而唔係得一句「呢個頁面好高級」。呢套規則會被轉化為一個可複用嘅 skill，之後 Claude 生成任何頁面都會嚴格跟隨呢個風格，唔會每塊都似換咗個設計師。作者認為，呢種「先繼承審美再動手」嘅思路，比叫 AI 自由發揮有效得多。
- 先讓 AI 繼承明確審美再開始動手，比讓 AI 自由發揮效果好得多。
- Hue 能將網站截圖或 URL 分析成視覺 token、組件語言同設計哲學，生成可複用嘅 skill。
- 傳統做法係俾 AI 一句「做得高級啲」，但呢個係情緒詞，冇辦法執行；Hue 將風格轉化為字體、顏色、圓角等可執行規則。
- 呢套工作流將靈感變為可持續調用嘅生產資料，一次分析，後續所有頁面都受同一套規則約束，避免拼湊感。
- 具體步驟：安裝 Hue skill -> 去 Refero 揾參考並複製整頁截圖 -> 叫 Claude 用 Hue 分析並生成 skill -> 再用呢套 skill 生成頁面。
Hue GitHub 倉庫
安裝指令：git clone ~/.claude/skills/hue，呢個係用嚟提取設計語言嘅 Claude Code skill。
Refero 設計靈感網站
提供大量真實產品界面截圖，可以按頁面類型、產品屬性、交互模式等維度揾風格參考，並支援複製整頁截圖。
問題與 Hue：先讓 AI 學審美
如果你成日都用 AI 做網頁，應該有過一種好熟嘅挫敗感：程式碼行得通，結構亦都啱，但就係唔靚。冇明顯嘅 bug，只係一眼就睇得出——呢個係 AI 做嘅。字體冇氣質，配色唔剋制，卡片同按鈕似臨時拼湊，成個頁面雖然「完整」，但係冇設計語言。
別讓 Claude 直接設計
先讓佢學識一套設計語言
為咗解決呢個問題，作者試咗一個好猛嘅工作流，核心工具叫 Hue。Hue 本質上係一個「審美蒸餾器」，可以將你鍾意嘅一個頁面，提煉成一套可複用嘅設計規範。佢唔會停留喺「呢個頁面睇落好高級」呢啲層面，而係拆落去：字體係咩？配色點樣分層？圓角偏大定偏細？間距係緊湊定係舒展？陰影同動效剋制到咩程度？按鈕、卡片、輸入框、標籤頁係咩體系？
規則，唔係淨係長相
呢一步好關鍵。AI 真正缺嘅，從來都係穩定嘅風格約束。寫頁面嘅能力早就不缺了。
四步工作流：從安裝到生成頁面
- 1 第一步：安裝 Hue skill。就咁行一條指令：git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue，裝完之後 Hue 就會出現喺 Claude 嘅 skills 列表度。
- 2 第二步：去 Refero 揾一個你真心鍾意嘅風格。Refero 整理咗大量真實產品界面，支援按頁面類型、產品屬性、交互模式等維度搜尋，最重要係可以複製整頁截圖。
- 3 第三步：將截圖或 URL 丟俾 Claude Code，叫佢用 Hue 分析，提煉成一套可複用嘅 design language skill。分析過程會逐步拆解視覺 Token（主色、輔色、字號、圓角等）、組件語言（按鈕、卡片、輸入框等）同設計哲學（剋制型定表達型、留白驅動定密度驅動等）。
- 4 第四步：等 skill 生成之後，再叫 Claude 根據呢套 skill 生成頁面。唔好自由發揮新風格，嚴格沿用剛才提煉出嘅設計語言。
git clone
https://github.com/dominikmartn/hue ~/.claude/skills/hue成個流程最令人驚喜嘅係，Hue 分析完之後唔係得一段結論，而係會生成一個專屬嘅 design language skill，包含設計 Token 定義、風格原則、正反模式、參考文件等。換句話講，你鍾意嘅參考圖唔再係「我鍾意呢個感覺」，而係被翻譯成咗一套可以被調用、被複用、被約束嘅規則系統。
你得到嘅係一張圖 → 變成一門「頁面方言」
總結：將靈感變為可複用系統
呢套工作流代表咗一種重要嘅思路轉變：等 AI 先繼承一個明確審美再開始動手，而唔係叫 AI 幫你想審美。先沉澱一套可複用規則，再批量生成結果；一次分析，後續嘅頁面都喺呢套規則入面跑。
讓 AI 先繼承一個明確審美再開始動手
將靈感變成可持續調用嘅生產資料
截圖唔再係「見到覺得唔錯，下次唔記得咩樣」
呢個流程對幾類人特別有用：獨立開發者、做官網或落地頁嘅人、用 Claude Code 搭原型嘅人、想將 AI 頁面質感拉高一個層級嘅人。以前你可能覺得 AI 好識寫程式但唔太識設計，而家你可以試嚇換個思路：唔好等佢憑空設計，先等佢學識審美。
如果你做產品、做內容、做官網，或者只係受夠咗 AI 味網頁——呢套方法，值得你今日就試一次。記住四句口訣：安裝 Hue skill -> 去 Refero 揾參考 -> 用 Hue 分析生成 skill -> 用呢套 skill 生成你嘅頁面。
如果你成日用 AI 整網頁，應該都試過一種好熟嘅挫敗感：
Code 行得到，結構又啱，但就係樣衰。
冇明顯嘅 bug。但係一眼就睇得出——呢個係 AI 整嘅。
字體冇氣質，配色冇剋制，卡片同按鈕好似臨時砌出嚟嘅，成個頁面雖然「完整」，但冇設計語言。
我最近試咗一個好勁嘅 workflow，核心就一句：
唔好俾 Claude 直接設計。先等佢學識一套設計語言，再叫佢生成頁面。
而我用來做呢件事嘅工具，叫 Hue。
一、Hue 本質上係一個「審美蒸餾器」
先講結論：
Hue 最有價值嘅地方，係將你鍾意嘅一個頁面，提煉成一套可以重用嘅設計規範。
你可以當佢係一個 meta-skill。
佢支援俾 Claude Code 呢啲輸入：
然後佢唔會停留喺「呢個頁面睇落好高級」呢個層面嘅描述，而係再拆落去：
佢學嘅係規則，唔只係「樣」咁簡單。
呢一步好關鍵。
AI 真正欠缺嘅，從來都係穩定嘅風格約束。寫頁面嘅能力一早已經唔缺㗎喇。
二、第一步：先裝咗 Hue 先
安裝好簡單，一條 command：
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue裝完之後，Hue 就會出現喺 Claude 嘅 skills 列表入面。
佢本質上好似一個「設計語言生成器」：
先將鍾意嘅網站拆成設計原則，再將呢套原則變成 Claude 可以反覆調用嘅 skill。
呢個比起「叫 AI 一句：整得高級啲」強太多。
「高級啲」係情緒詞，冇得執行。
字體、顏色、圓角、留白、組件結構，呢啲係可以執行嘅。
三、第二步：去 Refero 揾一個你真係鍾意嘅風格
我今次用嘅係 https://refero.design/。
呢個網站對做產品、做官網、做 landing page 嘅人嚟講，真係好抵。
佢整理咗大量真實產品界面、流程、頁面結構同設計模式，比起嗰啲淨係俾你睇一堆「靚截圖」嘅靈感站強一個維度。
你可以按好多維度揾參考：
呢個意味住你係精準咁揾風格錨點，而唔係隨機碌圖。
例如你想做一個更剋制、偏向編輯感、更有秩序感嘅網站，就可以揾到一批接近呢種氣質嘅頁面。
最方便嘅一點係：
佢支援直接複製成頁截圖。
呢一步太重要喇。
以前我哋俾 AI 參考，通常係掉低一個連結，或者隨手截一張局部圖。問題係資訊唔夠完整，AI 理解到嘅只係一個片段。
而成頁截圖，等於將呢個頁面嘅：
一次過餵咗俾模型。
呢個時候 Hue 先至真正開始「抽設計語言」。
四、第三步：將截圖或者 URL 掉俾 Claude Code，等 Hue 先分析
跟住唔好急住話「幫我做個首頁」。
正確做法係先講：
用 Hue 分析呢張截圖，提煉成一套可以重用嘅 design language skill。
你可以直接俾 URL，或者品牌名、code base。
但如果你嘅目標係盡快復刻某種質感，截圖通常係最穩陣嘅。
截圖入面直接包含咗視覺結果，唔使人靠文字去描述「嗰種感覺」。
Hue 分析嘅過程，好似一個認真負責嘅設計系統工程師喺度拆解。佢會逐步將頁面拆成幾層：
1）視覺 Token
2）組件語言
3）設計哲學
呢一層好容易俾人忽略，但其實最值錢。
令一個頁面「似某個體系」嘅，往往唔係某個黃色按鈕，而係背後嘅整體氣質。
五、第四步：Claude 會生成一個「專屬 skill」，用完唔會消失嗰種
呢個係成個流程入面最令我驚喜嘅地方。
Hue 行完之後，Claude 會進一步生成一個專屬設計語言 skill，而唔係得一段分析結論。
通常會包含呢啲嘢：
你會突然發現，原來嗰張你鍾意嘅參考圖，唔再只係「我鍾意呢種感覺」。
佢被翻譯成咗一套可以俾人調用、重用、約束嘅規則系統。
換句話說：
你得到嘅係一張圖 → 而家變咗成一門「頁面方言」。
六、第五步：再叫 Claude 跟呢套 skill 生成頁面，質感會完全唔同
呢個時候你再講：
根據啱啱生成嘅 skill，做一個設計規範聚合網站。
或者：
根據呢個 design language，生成一個首頁，保持同樣嘅字體、配色、留白、卡片體系同深淺色邏輯。
呢個時候出嚟嘅效果，通常會比「直接憑空生成」好非常多。
原因好簡單：
之前嘅 Claude，係一個會寫頁面嘅模型。
而家嘅 Claude，係一個俾明確約束過風格嘅頁面生成器。
佢會更統一，亦更剋制。
而且最關鍵嘅係：
佢唔會每個模塊都好似換咗個設計師。
呢個係好多 AI 頁面最常見嘅問題——分開睇每塊都仲可以，但係拼埋一齊唔似一個系統。
有咗 Hue 之後，頁面終於開始「似一個品牌做出嚟嘅」。
七、呢套 workflow 點解值得你記住？
佢代表咗一種好重要嘅思路轉變：
等 AI 先繼承一個明確嘅審美
再開始動手。而唔係叫 AI 幫你想審美。
先沉澱一套可以重用嘅規則，再批量生成結果
一次分析，跟住嘅頁面都喺呢套規則入面行。
將靈感變成可以持續調用嘅生產資料
截圖唔再係「見到覺得唔錯，下次唔記得乜樣」嘅嘢。
呢個對幾類人特別有用：
以前好多人卡喺「AI 做得唔夠靚」。
我而家越嚟越覺得，問題唔一定出喺模型弱，好多時只係因為：
你俾佢太早開始寫。
佢喺冇風格錨點嘅情況下動手，最後當然只能產出平均值。
Hue 嘅價值，就係幫你先將「平均值」打爛，再建立一個自己嘅視覺基準。
八、如果你都想復刻，跟住呢 4 句說話做就得
你唔需要記住複雜理論，直接套用呢個流程：
第一句：
安裝 Hue skill。
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue第二句：
去 Refero 揾你鍾意嘅網站，複製成頁截圖。
第三句：
將截圖 send 俾 Claude Code，話：
用 Hue 分析呢張圖，提煉成一套可以重用嘅 design language skill。
第四句：
等 skill 生成之後，再講：
用呢套 skill 做一個我嘅頁面，唔好自由發揮新風格，嚴格沿用啱啱提煉出嚟嘅設計語言。
大多數人做到呢度，頁面質感已經會明顯提升一個層次。
最後
如果你過去成日覺得：
AI 好識寫 code，但係唔太識設計。
咁你可以試嚇換個思路：
唔好俾佢憑空設計，先等佢學識審美。
Hue 厲害嘅，唔係「幫你畫一個靚嘅頁面」。
而在於佢將「我鍾意呢個風格」呢件模糊嘅事，變成咗一套可以重用、可以約束、可以繼續生產嘅系統。
呢個先似專業 workflow 嘅地方。
如果你做產品、做內容、做官網，或者只係單純受夠咗 AI 味網頁——
呢套方法，值得你今日就試一次。
如果你經常用 AI 做網頁，應該有過一種很熟悉的挫敗感：
代碼能跑，結構也對，但就是不好看。
沒有明顯的 bug。只是一眼就能看出來——這是 AI 做的。
字體沒氣質，配色沒剋制，卡片和按鈕像臨時拼起來的，整個頁面雖然"完整"，但沒有設計語言。
我最近試了一個很猛的工作流，核心就一句話：
別讓 Claude 直接設計。先讓它學會一套設計語言，再讓它生成頁面。
而我用來做這件事的工具，叫 Hue。
一、Hue 本質上是一個"審美蒸餾器"
先說結論：
Hue 最有價值的地方，是把你喜歡的一個頁面，提煉成一套可複用的設計規範。
你可以把它理解成一個 meta-skill。
它支持給 Claude Code 喂這些輸入：
然後它不會停留在"這個頁面看起來很高級"這種層面的描述，而是往下拆：
它學的是規則，不只是"長相"。
這一步非常關鍵。
AI 真正缺的，從來都是穩定的風格約束。寫頁面的能力早就不缺了。
二、第一步：先把 Hue 裝上
安裝很簡單，一條命令：
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue裝完之後，Hue 就會出現在 Claude 的 skills 列表裏。
它本質上像一個"設計語言生成器"：
先把喜歡的網站拆成設計原則，再把這套原則變成 Claude 可以反覆調用的 skill。
這就比"給 AI 發一句：做得高級一點"強太多了。
"高級一點"是情緒詞，沒法執行。
字體、顏色、圓角、留白、組件結構，這些是可執行的。
三、第二步：去 Refero 找一個你真心喜歡的風格
我這次用的是 https://refero.design/。
這個網站對做產品、做官網、做落地頁的人來說，真的很值。
它整理了大量真實產品界面、流程、頁面結構和設計模式，比那種只會給你看一堆"好看截圖"的靈感站強一個維度。
你可以按很多維度找參考：
這意味着你是在精準找風格錨點，而不是隨機刷圖。
比如你想做一個更剋制、更偏編輯感、更有秩序感的網站，就可以找到一批接近這種氣質的頁面。
最方便的一點是：
它支持直接複製整頁截圖。
這一步太重要了。
以前我們給 AI 喂參考，往往是丟一個連結，或者隨手截一張局部圖。問題是信息不夠完整，AI 理解到的只是一個片段。
而整頁截圖，等於把這個頁面的：
一次性餵給了模型。
這時候 Hue 才能真正開始"抽設計語言"。
四、第三步：把截圖或 URL 丟給 Claude Code，讓 Hue 先分析
接下來別急着說"給我做個首頁"。
正確姿勢是先說：
用 Hue 分析這張截圖，提煉成一套可複用的 design language skill。
你也可以直接給 URL，或者品牌名、代碼庫。
但如果你的目標是儘快復刻某種質感，截圖通常是最穩的。
截圖裏直接包含了視覺結果，不用靠文字去描述"那種感覺"。
Hue 分析的過程，很像一個認真負責的設計系統工程師在做拆解。它會逐步把頁面拆成幾層：
1）視覺 Token
2）組件語言
3）設計哲學
這一層很容易被忽略，但其實最值錢。
讓一個頁面"像某個體系"的，往往不是某個黃色按鈕，而是背後的整體氣質。
五、第四步：Claude 會生成一個"專屬 skill"，用完不會消失的那種
這是整個流程裏最讓我驚喜的地方。
Hue 跑完以後，Claude 會進一步生成一個專屬設計語言 skill，而不只是一段分析結論。
通常會包含這些東西：
你會突然發現，原來那張你喜歡的參考圖，不再只是"我喜歡這個感覺"。
它被翻譯成了一套可以被調用、被複用、被約束的規則系統。
換句話說：
你得到的是一張圖 → 現在變成了一門"頁面方言"。
六、第五步：再讓 Claude 按這套 skill 生成頁面，質感會完全不一樣
這時候你再說：
根據剛才生成的 skill，做一個設計規範聚合網站。
或者：
根據這個 design language，生成一個首頁，保持同樣的字體、配色、留白、卡片體系和深淺色邏輯。
這時出來的效果，通常會比"直接憑空生成"好非常多。
原因很簡單：
之前的 Claude，是一個會寫頁面的模型。
現在的 Claude，是一個被明確約束過風格的頁面生成器。
它會更統一，也更剋制。
而且最關鍵的是：
它不會每個模塊都像換了一個設計師。
這是很多 AI 頁面最常見的問題——單看每塊都還能看，但拼在一起不像一個系統。
有了 Hue 之後，頁面終於開始"像一個品牌做出來的"。
七、這套工作流為什麼值得你記住？
它代表了一種很重要的思路轉變：
讓 AI 先繼承一個明確審美
再開始動手。而不是讓 AI 替你想審美。
先沉澱一套可複用規則，再批量生成結果
一次分析，後續的頁面都在這套規則裏跑。
把靈感變成可持續調用的生產資料
截圖不再是"看到覺得不錯，下次忘了長什麼樣"的東西。
這對幾類人尤其有用：
以前很多人卡在"AI 做得不夠好看"。
我現在越來越覺得，問題不一定出在模型弱，很多時候只是因為：
你讓它太早開始寫了。
它在沒有風格錨點的情況下動手，最後當然只能產出平均值。
Hue 的價值，就是幫你先把"平均值"打碎，再建立一個自己的視覺基準。
八、如果你也想復刻，照着這 4 句話走就行
你不需要記住複雜理論，直接套這個流程：
第一句：
安裝 Hue skill。
git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue第二句：
去 Refero 找你喜歡的網站，複製整頁截圖。
第三句：
把截圖發給 Claude Code，說：
用 Hue 分析這張圖，提煉成一套可複用的 design language skill。
第四句：
等 skill 生成後，再說：
用這套 skill 做一個我的頁面，不要自由發揮新風格，嚴格沿用剛剛提煉出的設計語言。
大多數人做到這裏，頁面質感已經會明顯提升一個級別。
最後
如果你過去總覺得：
AI 很會寫代碼，但不太會設計。
那你可以試試換個思路：
別讓它憑空設計，先讓它學會審美。
Hue 厲害的，不在"幫你畫一個好看的頁面"。
而在於它把"我喜歡這個風格"這件模糊的事，變成了一套可以複用、可以約束、可以繼續生產的系統。
這才是更像專業工作流的地方。
如果你做產品、做內容、做官網，或者只是單純受夠了 AI 味網頁——
這套方法，值得你今天就試一次。