GPT image 2 + Codex 強強聯合：一鍵搭建高端網站！這個 Taste-Skill 項目太強了
整理版優先睇
Taste-Skill 將 AI 前端生成流程改為「先建立審美目標，再用代碼還原」，大幅提升網頁質感
呢篇文章係介紹一個叫 Taste-Skill 嘅開源項目，佢結合 GPT Image 2 同 Codex，幫你由一句話生成高質網頁。作者想解決嘅問題係：直接用 AI 寫前端成日有「模板味」，睇落好普通，唔夠審美。整體結論係 Taste-Skill 將流程拆成三步——先用 GPT Image 2 整設計圖，再叫 Codex 分析圖像，最後輸出代碼——咁樣出嚟嘅網頁就會有層次、有質感，更貼近產品級。
作者仲親身試過用佢整貓咖網站，效果確實比直接生成好。文章詳細列出咗十幾個技能，仲有安裝方法同參數調校。呢個項目最值得留意嘅係佢嘅思維轉變：由「直接寫 code」變成「先定視覺目標，再還原目標」，呢一步正正係好多 AI 前端生成工具忽略咗嘅。
總括嚟講，Taste-Skill 唔單止係工具，而係一套流程。佢示範咗點樣用圖像做媒介，將 AI 嘅視覺品位提升到另一個層次。如果你成日要用 Codex 做網頁、原型或落地頁，呢個項目值得一試。
- Taste-Skill 結合 GPT Image 2 同 Codex，先設計圖後生成代碼，顯著提升 AI 前端網頁質感。
- 三步流程：生成設計圖 → 分析圖像佈局配色 → 輸出對應 HTML/CSS/JS 或框架代碼。
- 傳統 prompt 直接生成容易有「模板味」，Taste-Skill 以圖像為視覺目標，減少隨機性，還原度高。
- AI 生成前端嘅瓶頸往往唔係 coding 能力，而係欠缺清晰嘅視覺目標；先建立審美目標再執行，係關鍵。
- 你可以用 npx skills add 命令一鍵安裝，或直接複製 SKILL.md 內容到 AI 對話使用；配合參數調節（如 DESIGN_VARIANCE）可控制設計風格。
GitHub 倉庫
Taste-Skill 開源項目，包含所有技能及安裝說明
一鍵安裝所有技能
npx skills add
用家體驗與效果
作者親身用 Taste-Skill 生成咗一個貓咖網站，效果比普通一句話生成嘅網站舒服好多：頁面更有層次，視覺更統一，仲似真實品牌頁面，唔似臨時拼湊嘅 Demo。官方提供嘅效果圖亦都好靚，睇得出呢個流程嘅威力。
貓咖網站
傳統玩法係直接對 Codex 講「做一個乾淨嘅貓咖網站」，出到嚟嘅頁面雖然完整，但往往有「AI 默認模板」味——能用，但唔夠有質感。Taste-Skill 就唔同，佢透過 三步流程 解決咗呢個問題。
核心優勢：點解要咁樣做
Taste-Skill 嘅新玩法係將流程拆成三步：先用 GPT Image 2 生成專業級網站設計圖，再叫 Codex 仔細分析圖像嘅佈局、字體、間距、配色同交互，最後輸出 HTML、CSS、JS，或者適應 React、Vue、Svelte 等框架。呢套流程嘅價值在於頁面唔再完全依賴文字提示詞想像，視覺目標更明確，減少咗 「模板味」，佈局、排版、色彩呢啲細節更容易被保留下來。
最終結果更接近真實產品級界面，而唔係「AI 生成嘅樣板」。呢個思維轉變——從直接寫 code 變成先定目標再還原——係整個項目最聰明嘅地方。
技能套件一覽
呢個倉庫唔只有一個技能，而係一整盒前端生成工具箱，分為代碼輸出類同圖像生成類。以下係主要技能：
- 1 taste-skill：默認全能技能，適合大多數場景，平衡美觀與實用性。
- 2 gpt-taste：針對 GPT/Codex 優化嘅激進版本，偏現代視覺同動效。
- 3 image-to-code-skill：核心技能，先生成設計圖再轉成代碼。
- 4 redesign-skill：重構升級技能，適合改造已有項目。
- 5 minimalist-skill：極簡主義風格，受 Notion、Linear 啓發。
- 6 soft-skill：柔和高級風格，用柔和對比、大留白、高級字體。
- 7 brutalist-skill：實驗性粗暴風格，高對比、瑞士字體。
- 8 output-skill：確保 AI 輸出完整代碼，唔會半途而廢。
圖像生成類技能包括：imagegen-frontend-web（桌面端設計稿）、imagegen-frontend-mobile（移動端界面）、brandkit（品牌視覺套件）。你可以按需要選擇對應技能。
安裝使用與參數調教
安裝好簡單：用 npx skills add 命令可以一鍵裝曬所有技能，或者指定單個技能。如果你唔想用命令，都可以直接進入倉庫嘅 skill 文件夾，揾對應嘅 SKILL.md 檔，成個內容複製貼上到 ChatGPT、Codex、Cursor 等 AI 對話度就用得。
# 一鍵安裝所有技能
npx skills add https://github.com/Leonxlnx/taste-skill
# 安裝單個技能
npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"關鍵使用提示詞係：「使用 taste-skill 等相關技能，做一個專業嘅貓咖網站。要求嚴格遵守先生成圖片，然後分析，然後生成代碼嘅順序。」另外，taste-skill 支援三個參數調節：DESIGN_VARIANCE（設計變化度）、MOTION_INTENSITY（動效強度）、VISUAL_DENSITY（視覺密度），每個由 1 到 10，可以任意組合。
DESIGN_VARIANCE
MOTION_INTENSITY
VISUAL_DENSITY
例如你想做一個現代不對稱、強動效、大留白嘅網站，可以設定 DESIGN_VARIANCE=9, MOTION_INTENSITY=8, VISUAL_DENSITY=2。呢啲參數令你唔使改 prompt 都可以微調風格，好實用。
🌟星標+👆關注，帶俾你更多有意思嘅github項目
直接用 GPT Image 2 先生成高質量設計圖，再叫 Codex 分析圖像、精準還原代碼，呢種“生成圖片，Codex 分析，Codex 構建網站”嘅流程，可以令 AI 生成嘅網站即刻由“模板味”變成“產品級”。
呢個完整高效嘅工作流，完美被封裝成一個開源神器 —— Taste-Skill。呢個項目徹底解決咗 AI 生成前端界面品味不足、視覺平庸嘅問題，等你用幾句說話就可以做出佈局高級、排版舒服、細節精緻嘅網頁。
GitHub 倉庫：https://github.com/Leonxlnx/taste-skill
呢篇文章我會按以下順序介紹：
使用效果：先睇佢生成出嚟嘅頁面到底點樣。
核心優勢：再睇佢點解可以解決 AI 前端嘅“模板味”。
Skills 一覽：接着介紹倉庫入面嘅技能包
安裝使用教程：最後俾出安裝命令同關鍵提示詞。
使用效果
官方俾出嘅效果圖好靚
我用佢生成咗一個貓咖網站，出嚟嘅效果的確比普通一句話生成嘅網站舒服好多：頁面更加有層次，視覺更加統一，仲更加似一個真實品牌頁面，而唔係臨時拼出嚟嘅 Demo👍
核心優勢
傳統用法入面，你可能會直接同 Codex 講：
幫我整一個乾淨嘅貓咖網站。
Codex 多數都做到。頁面打得開，佈局亦完整，按鈕、標題、圖片區域都有。但問題係，好大機會睇起嚟似“AI 默認模板”：用得，但唔夠質感。
Taste-Skill 嘅新玩法，係將流程拆成三步：
先用 GPT Image 2 生成專業級網站設計圖。 再叫 Codex 仔細分析圖像入面嘅佈局、字體、間距、配色同交互。 最後輸出 HTML、CSS、JS，或者適應 React、Vue、Svelte 等框架。
呢套流程嘅價值在於：
頁面唔再完全依賴文字提示詞去想象。 視覺目標更明確，減少“模板味”。 佈局、排版、色彩呢啲細節更易被保留落嚟。 最終結果更接近真實產品級界面。
Skills 一覽
呢個倉庫唔係得一個技能，而係一整套前端生成工具箱。
代碼輸出類：
taste-skill：默認全能技能，適合大多數場景。唔鎖定單一風格，提供高端前端輸出，平衡美觀同實用性。
gpt-taste：針對 GPT / Codex 優化嘅激進版本，更偏現代視覺同動效。如果你想要更強嘅視覺衝擊力，可以試呢個。
image-to-code-skill：圖像優先流水線技能。先叫AI生成網站參考圖像，分析圖像之後，再精確實現匹配嘅前端代碼。呢個係成個項目最核心嘅“圖像轉代碼”技能。
redesign-skill：重構升級技能。適合改造現有項目，先審計目前UI嘅問題（佈局、間距、層級、樣式等），再針對性優化提升，而唔係從零重寫。
minimalist-skill：極簡主義風格。受 Notion、Linear 啟發，強調留白、剋制配色、清晰結構，適合編輯類產品界面。
soft-skill：柔和高端風格。營造平靜、昂貴感，使用柔和對比、大面積留白、高端字體同彈簧物理動效，適合需要優雅氣質嘅品牌。
brutalist-skill：實驗性更強，偏粗暴風格、高對比、瑞士字體，適合想做啲唔同嘅項目。
output-skill：輸出完整性技能。防止AI輸出半成品或者佔位符，確保生成完整嘅代碼。
stitch-skill：兼容 Google Stitch 嘅技能，支持導出 DESIGN.md 格式嘅設計系統文件。
圖像生成類：
imagegen-frontend-web：生成桌面端網站設計稿。 imagegen-frontend-mobile：生成流動端界面。 brandkit：生成品牌視覺套件，包括配色方案、字體應用同 Logo 方向等品牌身份素材。
安裝使用
1. 一鍵安裝所有技能
npx skills add https://github.com/Leonxlnx/taste-skill
2. 安裝單個技能
npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"
3. 手動加載方式
入去倉庫嘅
skill文件夾，揾到對應技能嘅SKILL.md文件；直接複製曬成個內容，貼落ChatGPT、Codex、Cursor、Claude Code等AI對話入面就可以用。
4. 關鍵使用提示詞
使用 taste-skill 等相關技能，做一個專業嘅貓咖網站。要求嚴格遵守先生成圖片，然後分析，然後生成代碼嘅順序。
5. 參數調節（淨係 taste-skill 支持）
DESIGN_VARIANCE | ||
MOTION_INTENSITY | ||
VISUAL_DENSITY |
使用 taste-skill，DESIGN_VARIANCE 設為 9（更現代不對稱），MOTION_INTENSITY 設為 8（強動效），VISUAL_DENSITY 設為 2（大留白）
寫在最後
GPT Image 2、Codex 同 Taste-Skill 組合埋一齊，真正有趣嘅地方，係佢將 AI 前端生成嘅流程，由“直接寫代碼”改成“先建立審美目標，再用代碼還原目標”。
呢一步看似簡單，其實好關鍵。因為好多網站唔靚，並唔係缺組件，亦唔係缺 CSS 技巧，而係由一開始就冇一個清晰嘅視覺目標。Taste-Skill 幫 AI 補返嘅，就係呢個目標。
如果你成日用 Codex 做網頁、原型、落地頁，呢個項目值得試下。你最想用佢生成邊類網站？咖啡店、SaaS 工具、個人主頁，定係一個你一直想做但懶得開頭嘅小產品？歡迎喺評論區留言討論。
往期回顧
🌟星標+👆關注，帶給你更多有意思的github項目
直接用 GPT Image 2 先生成高質量設計圖，再讓 Codex 分析圖像、精準還原代碼，這種“生成圖片，Codex 分析，Codex 構建網站”的流程，能讓 AI 生成的網站瞬間從“模板味”變成“產品級”。
這個完整高效的工作流，被完美封裝成了一個開源神器 —— Taste-Skill。這個項目徹底解決了 AI 生成前端界面品位不足、視覺平庸的問題，讓你用幾句話就能做出佈局高級、排版舒服、細節精緻的網頁。
GitHub 倉庫：https://github.com/Leonxlnx/taste-skill
這篇文章我會按以下順序來介紹：
使用效果：先看它生成出來的頁面到底怎麼樣。
核心優勢：再看它為什麼能解決 AI 前端的“模板味”。
Skills 一覽：接着介紹一下倉庫裏的技能包
安裝使用教程：最後給出安裝命令和關鍵提示詞。
使用效果
官方給出的效果圖很棒
我用它生成了一個貓咖網站，出來的效果確實比普通一句話生成的網站舒服不少：頁面更有層次，視覺更統一，也更像一個真實品牌頁面，而不是臨時拼出來的 Demo👍
核心優勢
傳統用法裏，你可能會直接對 Codex 說：
給我做一個乾淨的貓咖網站。
Codex 往往能做出來。頁面能打開，佈局也完整，按鈕、標題、圖片區域都有。但問題是，它大概率看起來像“AI 默認模板”：能用，但不夠有質感。
Taste-Skill 的新玩法，是把流程拆成三步：
先用 GPT Image 2 生成專業級網站設計圖。 再讓 Codex 仔細分析圖像裏的佈局、字體、間距、配色和交互。 最後輸出 HTML、CSS、JS，或者適配 React、Vue、Svelte 等框架。
這套流程的價值在於：
頁面不再完全依賴文字提示詞想象。 視覺目標更明確，減少“模板味”。 佈局、排版、色彩這些細節更容易被保留下來。 最終結果更接近真實產品級界面。
Skills 一覽
這個倉庫不是隻有一個技能，而是一整套前端生成工具箱。
代碼輸出類：
taste-skill：默認全能技能，適合大多數場景。不鎖定單一風格，提供高端前端輸出，平衡美觀與實用性。
gpt-taste：針對 GPT / Codex 優化的激進版本，更偏現代視覺和動效。如果你想要更強的視覺衝擊力，可以試這個。
image-to-code-skill：圖像優先流水線技能。先讓AI生成網站參考圖像，分析圖像後，再精確實現匹配的前端代碼。這是整個項目最核心的“圖像轉代碼”技能。
redesign-skill：重構升級技能。適合改造已有項目，先審計當前UI的問題（佈局、間距、層級、樣式等），再針對性優化提升，而非從零重寫。
minimalist-skill：極簡主義風格。受Notion、Linear啓發，強調留白、剋制配色、清晰結構，適合編輯類產品界面。
soft-skill：柔和高級風格。營造平靜、昂貴感，使用柔和對比、大面積留白、高級字體和彈簧物理動效，適合需要優雅氣質的品牌。
brutalist-skill：實驗性更強，偏粗暴風格、高對比、瑞士字體，適合想做點不一樣的項目。
output-skill：輸出完整性技能。防止AI輸出半成品或佔位符，確保生成完整的代碼。
stitch-skill：兼容Google Stitch的技能，支持導出DESIGN.md格式的設計系統文件。
圖像生成類：
imagegen-frontend-web：生成桌面端網站設計稿。 imagegen-frontend-mobile：生成移動端界面。 brandkit：生成品牌視覺套件，包括配色方案、字體應用和 Logo 方向等品牌身份素材。
安裝使用
1. 一鍵安裝所有技能
npx skills add https://github.com/Leonxlnx/taste-skill
2. 安裝單個技能
npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"
3. 手動加載方式
進入倉庫的
skill文件夾，找到對應技能的SKILL.md文件；直接複製整個內容，粘貼到ChatGPT、Codex、Cursor、Claude Code等AI對話中即可使用。
4. 關鍵使用提示詞
使用taste-skill等相關技能，做一個專業的貓咖網站。要求嚴格遵守先生成圖片，然後分析，然後生成代碼的順序。
5. 參數調節（僅 taste-skill 支持）
DESIGN_VARIANCE | ||
MOTION_INTENSITY | ||
VISUAL_DENSITY |
使用 taste-skill，DESIGN_VARIANCE 設為 9（更現代不對稱），MOTION_INTENSITY 設為 8（強動效），VISUAL_DENSITY 設為 2（大留白）
寫在最後
GPT Image 2、Codex 和 Taste-Skill 組合在一起，真正有意思的地方，是它把 AI 前端生成的流程，從“直接寫代碼”改成了“先建立審美目標，再用代碼還原目標”。
這一步看似簡單，其實很關鍵。因為很多網站不好看，並不是缺組件，也不是缺 CSS 技巧，而是從一開始就沒有一個清晰的視覺目標。Taste-Skill 給 AI 補上的，正是這個目標。
如果你經常用 Codex 做網頁、原型、落地頁，這個項目值得試一下。你最想用它生成哪類網站？咖啡店、SaaS 工具、個人主頁，還是一個你一直想做但懶得開頭的小產品？歡迎在評論區留言討論。
往期回顧