這個神級Skill，讓Codex學會任何大廠設計，任意網頁秒變完整設計系統！

作者：AI應用實踐進階
日期：2026年5月11日 上午6:00
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

hue Skill 讓任意網頁秒變設計系統，Codex 生成可重複使用設計語言

整理版摘要

呢篇文章係由螢柳分享，佢之前介紹過用大廠設計語言快速生成 UI，今次再發現一個叫 hue 嘅 Skill，可以將任意網頁連結或截圖轉化為完整嘅設計系統。作者想解決嘅問題係：當你見到一個風格好靚嘅網站，但佢唔喺主流大廠設計語言入面，點樣可以快速拆解並重用佢嘅設計風格。整體結論係：透過 Codex 安裝 hue 之後，只要輸入網址或截圖，hue 就會自動生成一套設計語言檔案，包括暗黑/淺色主題、組件系列（按鈕、卡片、搜索等），仲可以儲存成 Skill 反覆使用。

呢個工作流嘅核心係將 AI 嘅分析能力同設計師嘅判斷力結合：AI 負責快速拆解風格，設計師負責決定邊啲元素值得借鑑同點樣調整，最後變成適合自己項目嘅設計。作者仲提到適合用嚟做靈感拆解、作品集包裝、風格遷移同快速出方案。

文章最後推廣咗一套付費嘅「AI+UI 設計知識庫」，但主要價值仲係個 hue Skill 本身嘅用法。對於想提升 UI 設計效率同風格拆解能力嘅人嚟講，呢個工具好值得試。

  • hue 係一個 Codex Skill，可以將任意網頁連結或截圖轉化為完整嘅設計系統，包括顏色、字體、圓角、組件等。
  • 使用步驟：先喺 Codex 安裝 hue（將 GitHub 連結畀 Codex 下載），然後用指令 /Hue <網址> 分析網站，等幾分鐘就會生成一堆 HTML 預覽檔案。
  • 生成嘅設計系統分為設計語言系列（暗黑/淺色風格）同組件系列（按鈕、項目卡片、搜索、芯片、覆蓋層等），可以直接用喺新界面。
  • 呢個工具最大嘅差異係由「手動吸色截圖」變成「AI 自動拆解」，設計師可以反覆調用同一套風格，加快産出速度。
  • 可行動點：揾幾個風格明顯嘅網站（如 Apple、Linear、Behance、Airbnb）試下，先用 hue 生成設計系統，再喺自己嘅設計入面套用，練習風格遷移。
值得記低
Skill github.com

hue - 任意網頁轉設計系統

從網頁連結或截圖生成完整設計系統的 Codex Skill，GitHub 開源

開啟
工具 hueapp.io

hue 官網

hue 工具介紹同示範

開啟
整理重點

hue 係乜？點解值得用？

螢柳之前分享過用大廠設計語言快速生成 UI，但如果你鍾意嘅網站風格唔喺嗰 60+ 大廠入面，就可以用呢個叫 hue 嘅 Skill。佢係一個開源工具，裝喺 Codex 嘅 skills 目錄之後，可以將任意網頁連結或截圖轉化為一套完整嘅設計系統。

適合嘅場景包括靈感拆解、作品集包裝、風格遷移同快速出方案。設計師負責決定邊啲元素值得用，AI 負責快速拆解。

整理重點

點樣安裝同使用 hue？

首先你要有 Codex，安裝方法可以睇返作者之前嘅文章。然後將 hue 嘅 GitHub 連結畀 Codex 叫佢下載，記住要安裝喺skills 目錄，否則用唔到。下載完成之後，直接打指令：

使用指令範例 text 
/Hue
https://www.behance.net/ 根據呢個網站生成一個 hue skill

等幾分鐘，Codex 就會生成一堆檔案，你可以打開下面 4 個 HTML 預覽效果。佢會產出設計語言系列（暗黑同淺色風格）同組件系列（按鈕、項目卡片、搜索、芯片、覆蓋層等）。

  1. 1 將 GitHub 連結畀 Codex，叫佢下載 hue 並安裝到 skills 目錄。
  2. 2 輸入 /Hue <網址> 指令，例如 /Hue https://www.behance.net/
  3. 3 等待生成完成，打開 HTML 檔案預覽設計語言同組件。
  4. 4 用生成嘅設計系統配合你嘅界面描述，叫 Codex 生成新界面或者改現有界面。
整理重點

生成咗設計系統之後點用？

你可以用新生成嘅設計系統 Skill 嚟做風格遷移。例如先叫 Codex 「做一個簡單嘅創意項目發現網站首頁」，然後再用「用剛形成嘅設計系統 Skill 改成 Behance 風格」，等一會就會見到類似 Behance 嘅設計。

如果你本身有現成嘅界面設計，都可以直接套用 hue 生成嘅設計系統，唔使重新由頭開始。呢個 Skill 最方便嘅地方係將你鍾意嘅網頁風格拆成一套可以反覆調用嘅設計語言，以後唔使再手動截圖、吸色、分析圓角、字體、按鈕同卡片樣式。

整理重點

設計師嘅理想工作流

螢柳強調呢個工作流好適合做靈感拆解、作品集包裝、風格遷移同快速出方案。平時見到好靚嘅網站，例如Apple、Linear、Behance、Airbnb呢類風格明顯嘅網站，用 hue 一轉就出到設計系統。

然後你可以喺自己嘅設計項目入面直接引用呢套系統，加快速度。作者仲提醒，有啲效果更直觀嘅網站可以優先試，例如風格統一、組件豐富嘅網站。佢自己亦整咗個 AI+UI 設計知識庫，不過係付費嘅，有興趣可以參考。

哈囉大家好，我係螢柳！
之前同大家分享過用大廠嘅設計語言，可以快速整到高級嘅UI界面。
未睇過嘅可以睇下面呢篇：
60+ 大廠設計語言，全部喺呢份免費嘅 DESIGN.md 裏面，快速生成高級UI界面！(附教學)
如果我打開任何一個網站，佢嘅風格我好鍾意，但又唔喺嗰60+大廠設計語言入面。
咁點算好呢？
最近發現一個Skill，叫hue。
佢可以將任何網頁連結或者截圖轉成一個完整嘅設計系統！
官網連結：https://hueapp.io/
GitHub連結：https://github.com/dominikmartn/hue
唔講咁多，教大家點樣用！
呢度要用到Codex，叫佢幫手下載。
Codex點樣安裝，可以睇呢篇：我用 Codex 免費打通 Figma，自動生成全套設計規範，1 分鐘將UI設計稿變做網頁
打開Codex之後，Send上面個GitHub連結俾佢，叫佢下載。
要安裝喺Codex嘅 skills 目錄度，如果唔係就用唔到，可以直接叫Codex安裝。
圖片
下載完成之後，我哋拎Behance嘅官網試下：
/Hue https://www.behance.net/ 根據這個網站生成一個hue skill
圖片
等幾分鐘，佢就會生成一堆檔案，我哋可以打開下面4個html預覽下效果。
圖片
設計語言系列：暗黑風格同淺色風格。
圖片
圖片
組件系列：例如按鈕、項目卡片、搜索、芯片、覆蓋層等。
圖片
設計系統生成好咗，咁點樣用到界面度呢？
我哋先生成一個界面，例如叫佢【做一個簡單嘅創意項目發現網站首頁】。
或者你本身有嘅界面，都可以直接用。
生成出嚟係下圖咁嘅效果。
圖片
我哋用返啱啱形成嘅設計系統Skill，將佢改成Behance嘅風格，如下圖。
圖片
等一陣，Codex就會生成類似Behance嘅設計風格喇。
圖片
呢個 Skill 最方便嘅地方係，佢將你鍾意嘅網頁風格拆成咗一套可以重複用嘅設計語言。
以後見到一個好鍾意嘅網站，唔使再手動截圖、吸色、分析圓角、字體、按鈕同卡片樣式，直接俾hue，叫佢幫你整理成Skill，再用到自己嘅頁面度。
對於設計師嚟講，呢個工作流真係好適合做靈感拆解、作品集包裝、風格遷移同快速出方案。
AI 負責將風格快速拆出嚟，設計師負責判斷邊度值得參考，邊度需要調整，最後將佢變成真正適合項目嘅設計。
有興趣嘅可以自己揾幾個鍾意嘅網站試下，例如 Apple、Linear、Behance、Airbnb 呢類風格好明顯嘅網站，效果會更直觀。
今日嘅分享就到呢度，希望幫到你！
如果你都想系統提升自己嘅 UI 設計能力，我整理咗一套「AI+UI設計知識庫」。
入面唔係啲睇完就唔記得嘅理論資料，而係我平時做設計、拆案例、寫教學時會不斷用到嘅內容：
設計規範、組件拆解、配色方法、版式參考、作品集思路、AI+UI 工作流，仲有好多可以直接套用嘅設計資料。
適合想提升審美、補返基礎、做作品集，或者想將 AI 工具真正用喺設計流程嘅同學。
與其每日周圍零星收藏，不如將呢啲內容系統整理好，遇到項目、練習、改稿嘅時候隨時翻睇。

詳細嘅訂閲方式大家可以睇下面連結👇👇👇

永久買斷！呢套All in one嘅 UI / UX 設計知識庫，可能係你今年最抵嘅投資 （添加作者微信時：備註“知識庫-A01”，有折扣）
圖片

延伸閲讀：

近三個月設計圈AI新工具，盤點UI/UX全球27款AI設計工具合集！

GPT Image2 搞掂全套品牌方案，一鍵生成Logo動效+Logo品牌視覺規範！

我只係用咗5分鐘，用AI開發咗一個微信小程序！(附教學)





讚好轉發推薦，祝你年薪億萬！


哈嘍大家好，我是螢柳！
之前給大家分享過通過用大廠的設計語言，快速生成高級的UI界面。
沒看過的可以看下面這篇：
60+ 大廠設計語言，都在這份免費的 DESIGN.md裏了，快速生成高級UI界面！(附教程)
如果我打開任意的一個網站，它的風格我很喜歡，而且又不在60+的大廠設計語言中。
那怎麼辦呢？
最近發現一個Skill，叫hue。
它可以讓任意的網頁連結或截圖轉為一個完整的設計系統！
官網連結：https://hueapp.io/
GitHub連結：https://github.com/dominikmartn/hue
話不多說，教大家怎麼使用！
這裏要用到Codex，讓它幫忙下載。
Codex怎麼安裝，可以看這篇：我用 Codex 免費打通 Figma，自動生成全套設計規範，1 分鐘把UI設計稿變成網頁
打開Codex後，發上面的GitHub連結，讓它下載。
要安裝在Codex 的 skills 目錄裏，不然無法使用，可以直接讓Codex安裝。
圖片
下載完成後，我們拿Behance的官網試一下：
/Hue https://www.behance.net/ 根據這個網站生成一個hue skill
圖片
等幾分鐘，它就會生成一堆文件，我們可以打開下面4個html預覽一下效果。
圖片
設計語言系列：暗黑風格和淺色風格。
圖片
圖片
組件系列：比如按鈕、項目卡片、搜索、芯片、覆蓋層等。
圖片
設計系統生成好了，那怎麼使用到界面中呢？
我們先生成一個界面，比如我們讓它【做一個簡單的創意項目發現網站首頁】。
或者你原來有的界面，也可以直接用。
生成的是下圖這樣的效果。
圖片
我們使用剛剛形成的設計系統Skill，用它改成Behance的風格，如下圖。
圖片
等待一會，Codex就會生成類似Behance的設計風格了。
圖片
這個 Skill 最方便的地方在於，它把你喜歡的網頁風格拆成了一套可以反覆調用的設計語言。
以後看到一個很喜歡的網站，不用再手動截圖、吸色、分析圓角、字體、按鈕和卡片樣式了，直接丟給 hue，讓它先幫你整理成 Skill，再用到自己的頁面裏。
對於設計師來說，這個工作流真的很適合做靈感拆解、作品集包裝、風格遷移和快速出方案。
AI 負責把風格快速拆出來，設計師負責判斷哪裏該借鑑，哪裏該調整，最後把它變成真正適合項目的設計。
感興趣的可以自己找幾個喜歡的網站試一下，比如 Apple、Linear、Behance、Airbnb 這類風格很明顯的網站，效果會更直觀。
今天的分享就到這裏，希望對你有幫助！
如果你也想系統提升自己的 UI 設計能力，我整理了一套「AI+UI設計知識庫」。
裏面不是那種看完就忘的理論資料，而是我平時做設計、拆案例、寫教程時會反覆用到的內容：
設計規範、組件拆解、配色方法、版式參考、作品集思路、AI+UI 工作流，還有很多可以直接套用的設計資料。
適合想提升審美、補齊基礎、做作品集，或者想把 AI 工具真正用到設計流程裏的同學。
與其每天到處零散收藏，不如把這些內容系統整理起來，遇到項目、練習、改稿的時候隨時翻。

詳細的訂閲方式大家可以查看下面連結👇👇👇

永久買斷！這套All in one的 UI / UX 設計知識庫，可能是你今年最值的投資 （添加作者微信時：備註“知識庫-A01”，有折扣）
圖片

拓展閲讀：

近三個月設計圈AI新工具，盤點UI/UX全球27款AI設計工具合集！

GPT Image2 搞定全套品牌方案，一鍵生成Logo動效+Logo品牌視覺規範！

我只花了5分鐘，用AI開發了一個微信小程序！(附教程)





點贊轉發推薦，祝您年薪億萬！