我給 Codex / Claude 做了一個有網頁審美能力的 Skill
整理版優先睇
用 Visual Taste Lab 將審美拆成 AI 可執行步驟，先判斷視覺身份再生成頁面
呢篇文章係由 siuser小偉分享佢整嘅 Visual Taste Lab Skill。佢成日用 Codex 同 Claude 整網頁，發現 AI 生成嘅頁面雖然功能完整，但總係有種「AI味」，冇品牌感。你好難話邊度錯，但就係唔似被認真設計過。佢請教大佬後發現問題出喺任務順序——太早畀 AI 開始寫頁面。
所以佢整咗 Visual Taste Lab，將審美呢件模糊嘅事拆成可執行步驟：先做 VI 審計，判斷站點類型，再提煉設計語言，最後先生成頁面。佢強調顏色要有角色、字體要對應氣質、組件形態要一致，仲加咗幾條禁令避免常見問題。佢仲用虛構品牌整咗三個公開 Demo（B2B 官網、SaaS 產品頁、內容品牌頁），證明同一 AI 喺唔同視覺身份下應該生成唔同嘅頁面。
整體結論係：要令 AI 頁面似一個品牌，唔係靠一句「做得高級啲」，而係要喺寫 code 之前先立一套審美邊界。Visual Taste Lab 嘅價值就係畀 AI 一套可重複調用嘅工作習慣，讓每次生成穩定收斂。
- 結論：AI 生成頁面缺乏品牌感嘅根源係冇先定義視覺身份，直接讓 AI 按平均審美做。
- 方法：Visual Taste Lab 將審美流程拆成 VI 審計、站點類型判斷、設計語言提煉，最後先生成頁面。
- 差異：呢個 Skill 比普通提示詞更好用，因為係一套可重複調用嘅工作習慣，唔係一次性提醒。
- 啟發：真正有用嘅審美工作流應該根據唔同視覺身份生成唔同頁面，唔好所有項目都用同一種高級模板。
- 可行動點：下次用 AI 改網站時，先讓佢用 Visual Taste Lab 跑一次審美判斷，回答關鍵問題，再進入 code 層。
Visual Taste Lab Skill
GitHub 上的 SKILL.md，包含完整審美工作流規則：VI 審計、站點判斷、設計語言模板、禁令等。
線上 Demo 預覽
用虛構品牌展示 B2B 官網、SaaS 產品頁同內容品牌頁嘅視覺差異。
可複製使用命令
/goal 使用 $visual-taste-lab 優化當前網站 UI/UX。不要直接開始改頁面。先做 VI 審計：1. 識別 Logo / 字標及其視覺錨點 2. 判斷主色、輔色、強調色、中性色和語義色 3. 判斷站點類型：公司官網 / 產品頁 / 交易工具 / 內容品牌 / 後台系統 / 其他 4. 說明訪客 5 秒內應該理解什麼、相信什麼 5. 提煉 design language：顏色、字體、間距、圓角、按鈕、卡片、表格、CTA、圖片氣質 6. 明確反模式：呢個網站最唔應該似咩。確認視覺語言後，再修改頁面和組件。
內容結構
Skill 連結:[Visual Taste Lab Skill](https://github.com/siuserxiaowei/visual-taste-lab/blob/main/visual-taste-lab/SKILL.md) 在線 Demo:[Visual Taste Lab Preview](https://siuserxiaowei.github.io/visual-taste-lab/)點解 AI 頁面總係有陣「AI味」？
大家好，我係 siuser小偉。前段時間成日用 Codex 同 Claude 整網頁，越做越覺得一個問題好明顯：而家 AI 寫頁面已經唔太難，難嘅係令頁面睇起嚟似一個真正嘅品牌。好多頁面功能完整，結構都過得去，導航、卡片、按鈕、表單一個唔少，打開之後仲係有一種熟悉嘅「AI味」。唔算難看，只係唔似俾人認真設計過。
你好難指出某一處係 bug，因為頁面確實行得到，資訊都擺曬上去。但字體冇統一氣質，顏色似臨時揀嘅，卡片同按鈕各有各嘅脾氣，模塊之間似係從幾個模板裏拼出嚟。然後你就想叫 AI 再美化一下，佢通常會繼續加陰影、加圓角、加漸變、加動效，頁面變豐富咗，但問題冇解決。
我後來請教大佬，發現問題出喺任務順序上。我哋太早讓 AI 開始寫頁面了。以前我都會對 AI 話「做得高級啲」「更有設計感啲」「參考優秀官網」，但呢啲嘢其實好難執行。高級係字體更大，定顏色更剋制？設計感係更多卡片，定更少模塊？公司官網、產品頁、內容品牌頁、後台系統，係咪可以用同一套 UI？如果呢啲問題冇先回答，AI 只能按平均審美動手，而平均審美通常就係嗰種睇起嚟完整、但冇品牌感嘅頁面。
Visual Taste Lab 點樣解決問題？
所以我做咗一個 Skill，叫Visual Taste Lab。佢要解決嘅係將審美呢件好模糊嘅事，拆成 AI 可以執行嘅步驟：先睇視覺身份，再睇站點類型，再提煉設計語言，頁面生成放到最後。
第一個想清楚嘅問題係：頁面背後到底係邊個喺度講嘢。公司官網講嘅係「我哋係邊個，我哋服務邊個，點解值得合作」；產品頁講嘅係「呢個嘢解決咩問題，你而家點開始用」；內容品牌頁講嘅係「你要記住我咩氣質」；後台系統更直接，關心信息密度、篩選效率同狀態可讀性。如果 AI 冇先判斷站點類型，就好容易將公司官網做成產品落地頁，將內容品牌做成 SaaS 首頁，將後台系統做成營銷頁面。
- 1 識別 Logo / 字標及其視覺錨點
- 2 判斷主色、輔色、強調色、中性色和語義色
- 3 判斷站點類型：公司官網 / 產品頁 / 交易工具 / 內容品牌 / 後台系統 / 其他
- 4 說明訪客 5 秒內應該理解什麼、相信什麼
- 5 提煉 design language：顏色、字體、間距、圓角、按鈕、卡片、表格、CTA、圖片氣質
- 6 明確反模式：呢個網站最唔應該似咩
呢度嘅關鍵唔係某一個顏色值，重點係顏色有冇角色。主色承擔品牌識別，輔色承擔分區同柔和狀態，強調色只在關鍵 CTA 同重點資訊出現。字體都一樣，技術感、商業感、編輯感、機構感，對應嘅字重、行高同留白都唔同。
- 唔好預設上紫藍漸變
- 唔好將所有模塊都做成浮動卡片
- 唔好忽略已有 Logo 同品牌色
- 唔好將公司官網誤做成單品落地頁
- 唔好編造客戶、案例同數據
三個公開 Demo 展示差異
為咗避免呢個 Skill 只適用於某一個具體項目，我做咗一組公開 Demo，全部用虛構品牌同通用場景。
第一個係B2B 公司官網，關鍵詞係穩、清楚、有組織感。佢嘅首屏唔會急住賣某個功能，而係先建立主體可信度：呢間公司係邊個，做得咩，合作路徑喺邊。視覺上主色更穩，模塊更像能力矩陣，資訊邊界清楚。
第二個係SaaS 產品頁，佢會更直接。用戶入嚟更關心產品解決咩問題，幾耐上手，下一步點試用。顏色對比更強，CTA 更明確，模塊更貼近產品狀態。
第三個係內容品牌頁，佢更看重編輯感同記憶點。呢度唔需要每一屏都強轉化，字體、留白、圖像節奏同標題氣質反而更重要。
呢三個 Demo 嘅重點唔係評選邊一種最好睇，而係想說明：同一AI喺唔同視覺身份下，應該生成唔同嘅頁面。真正有用嘅審美工作流，唔應該將所有項目都做成同一種高級模板。
我而家會點用佢
而家如果我想要 AI 改一個網站，我唔會直接話「優化 UI」。我會先叫佢用 Visual Taste Lab 行一次審美判斷。佢需要先回答幾個問題：呢個品牌嘅視覺錨點係咩？主色同輔色分別承擔咩角色？呢個頁面屬於邊種站點類型？訪客入嚟 5 秒內應該理解咩？頁面最唔應該似咩？
如果你都成日用 Codex 或 Claude 整網頁，我建議下次唔好急住叫佢美化頁面。先叫佢判斷視覺身份，就算只係花幾分鐘。一個頁面到底應該似公司官網、產品頁、內容品牌頁定後台工具，呢件事諗清楚之後，後面嘅 UI 先會真正收斂。
對我嚟講，Visual Taste Lab 嘅價值就係：佢唔要求 AI 模仿某個固定風格，佢更加似係喺寫 code 之前，先畀 AI 立一套審美邊界。行得到嘅頁面已經唔罕有，接下來更重要嘅係，令頁面睇起嚟似一個品牌。
大家好，我是siuser小偉
前段時間我一直在用 Codex 和 Claude 做網頁，越做越覺得一個問題很明顯：
現在 AI 寫頁面已經不太難了，難的是讓頁面看起來像一個真正的品牌。
很多頁面功能完整，結構也說得過去，導航、卡片、按鈕、表單一個不少，打開之後還是有一種熟悉的 AI 味。
不算難看只是不像被認真設計過。
你很難指出某一處是 bug，因為頁面確實能跑，信息也都擺上去了。
可字體沒有統一氣質，顏色像臨時挑的，卡片和按鈕各有各的脾氣，模塊之間像是從幾個模板裏拼出來的。
然後你就想讓 AI 再美化一下，它一般就會繼續加陰影、加圓角、加漸變、加動效，頁面變豐富了，但問題沒有解決。
我後來請教大佬發現問題出在任務順序上。
我們太早讓 AI 開始寫頁面了。
以前我也會對 AI 說做得高級一點、更有設計感一點、參考優秀官網，但這些話其實很難執行。
高級到底是字體更大，還是顏色更剋制？
設計感是更多卡片，還是更少模塊？
公司官網、產品頁、內容品牌頁、後台系統，能不能都用同一套 UI?
如果這些問題沒有先回答，AI 只能按平均審美動手，而平均審美通常就是那種看起來完整、但沒有品牌感的頁面。
所以我做了一個 Skill，叫 Visual Taste Lab。
它要解決的是把審美這件很模糊的事，拆成 AI 可以執行的步驟。
先看視覺身份，再看站點類型，再提煉設計語言，頁面生成放到最後。
先判斷誰在說話
我做這個 Skill 時，第一個想清楚的問題是：頁面背後到底是誰在說話。
公司官網說的是：我們是誰，我們服務誰，我們為什麼值得合作
產品頁說的是：這個東西解決什麼問題，你現在怎麼開始用
內容品牌頁說的是：你要記住我什麼氣質
後台系統更直接，它關心的是信息密度、篩選效率和狀態可讀性
這些頁面看起來都叫網頁，但任務完全不同。
如果 AI 沒有先判斷站點類型，就很容易把公司官網做成產品落地頁，把內容品牌做成 SaaS 首頁，把後台系統做成營銷頁面。
頁面當然也能跑，只是方向偏了。
Visual Taste Lab 在動手前會先做一個 VI 審計。
它會看 Logo 或字標，判斷主色、輔色、強調色和中性色，分析字體氣質、圖片氣質、組件形態，再決定這個頁面應該更像公司介紹、產品轉化、內容展示，還是數據工具。
這裏面的關鍵不在某一個顏色值，重點在於顏色有沒有角色。
主色承擔品牌識別
輔色承擔分區和柔和狀態
強調色只在關鍵 CTA 和重點信息裏出現
字體也一樣，技術感、商業感、編輯感、機構感，對應的字重、行高和留白都不一樣。
AI 如果沒有這些限制，就會在每個模塊裏重新發揮一次。
把好看變成一套設計語言
我不太相信一句你是世界級設計師能穩定解決問題。
它有時候會有效果，但其實更像臨場發揮，今天生成得好明天換個項目又散了。
所以我把 Skill 做成了一個小型工作流，裏面有核心規則、視覺原型和設計語言模板。
核心規則負責告訴 AI 不要一上來改頁面
視覺原型負責區分公司官網、產品頁、交易工具、內容品牌頁、後台系統
設計語言模板負責把顏色、字體、間距、圓角、卡片、按鈕、表格、CTA 這些東西落到具體約束裏
這也是我覺得 Skill 比普通提示詞好用的地方。
提示詞更像一次性提醒，Skill 更像一套可以重複調用的工作習慣。
你不用每次都從頭解釋什麼叫不要有 AI 味，可以把判斷標準、反模式和輸出格式沉澱下來，讓 AI 每次先走同一個審美流程。
我還給它加了幾條很樸素但有用的禁令：
不要默認上紫藍漸變
不要把所有模塊都做成浮動卡片
不要忽略已有 Logo 和品牌色
不要把公司官網誤做成單品落地頁
不要編造客戶、案例和數據
這些聽起來像常識，但很多 AI 頁面就是在這些地方慢慢變味的。
三個公開 Demo
為了避免這個 Skill 只適用於某一個具體項目，我做了一組公開 Demo，全部用虛構品牌和通用場景。
第一個是 B2B 公司官網，關鍵詞是穩、清楚、有組織感。
它的首屏不會急着賣某個功能，而是先建立主體可信度：這家公司是誰，能做什麼，合作路徑在哪裏。視覺上主色更穩，模塊更像能力矩陣，信息邊界清楚。
第二個是 SaaS 產品頁，它會更直接。
用戶進來更關心產品解決什麼問題，多久能上手，下一步怎麼試用。所以它的顏色對比更強，CTA 更明確，模塊也更貼近產品狀態。
第三個是內容品牌頁，它更看重編輯感和記憶點。
這裏不需要每一屏都強轉化，字體、留白、圖像節奏和標題氣質反而更重要。
這三個 Demo 的重點不在評選哪一種最好看。
它們想說明的是，同一個 AI 在不同視覺身份下，應該生成不同的頁面。真正有用的審美工作流，不應該把所有項目都做成同一種高級模板。
我現在會怎麼用它
現在如果我要讓 AI 改一個網站，我不會直接說優化 UI。
我會先讓它用 Visual Taste Lab 跑一遍審美判斷。
它需要先回答幾個問題：
這個品牌的視覺錨點是什麼
主色和輔色分別承擔什麼角色
這個頁面屬於哪種站點類型
訪客進來 5 秒內應該理解什麼
頁面最不應該像什麼
等這些問題回答完再讓它進入代碼和組件層。
這一步會讓流程慢一點，但產出的頁面穩定很多。
頁面不再像每一屏都換了一個設計師。
如果你也經常用 Codex 或 Claude 做網頁，我建議下次別急着讓它美化頁面。
先讓它判斷視覺身份，哪怕只花幾分鐘。一個頁面到底應該像公司官網、產品頁、內容品牌頁，還是後台工具，這件事想清楚之後，後面的 UI 才會真正收斂。
對我來說Visual Taste Lab 的價值就在這裏。
它不要求 AI 模仿某個固定風格，它更像是在寫代碼之前，先給 AI 立一套審美邊界。
能跑的頁面已經不稀缺了。
接下來更重要的是，讓頁面看起來像一個品牌。