GPT image 2 + Codex 強強聯合：一鍵搭建高端網站！這個 Taste-Skill 項目太強了
整理版優先睇
Taste-Skill 結合 GPT Image 2 同 Codex，用圖像引導生成高端網站，告別 AI 模板味
呢篇文章介紹咗一個叫 Taste-Skill 嘅開源項目，作者整合咗 GPT Image 2 同 Codex 兩款 AI 工具，目標係解決 AI 生成前端界面時品位不足、視覺平庸嘅問題。傳統做法直接叫 Codex 寫網站，出嚟嘅結果經常有「模板味」——功能齊全但唔夠靚。作者認為問題唔係技術，而係缺乏清晰嘅視覺目標。
Taste-Skill 提出咗新流程：先用 GPT Image 2 生成專業級網站設計圖，再由 Codex 仔細分析圖像入面嘅佈局、字體、間距、配色同交互，最後輸出 HTML、CSS、JS 或者 React、Vue 等框架代碼。呢個「生成圖片→分析→構建網站」嘅工作流，令網頁設計更一致、更精緻，結果接近真實產品級界面。
文章仲詳細列出咗成個技能工具箱，包括多個針對唔同場景嘅技能，例如圖像轉代碼、重構升級、極簡風格等，並提供安裝命令同參數調節方法。整體結論係：Taste-Skill 幫 AI 補上咗「審美目標」呢個關鍵環節，適合經常用 Codex 做網頁、原型、落地頁嘅開發者試用。
- Taste-Skill 透過「先圖像後代碼」流程，大幅提升 AI 生成網站嘅設計質素，擺脱模板味
- 方法：先用 GPT Image 2 生成專業設計圖，再由 Codex 分析佈局、字體、間距、配色，轉為 HTML/CSS/JS 或框架代碼
- 差異：同傳統直接 prompt 相比，呢個方法提供清晰視覺目標，保留細節，結果更接近真實產品級界面
- 啟發：網站唔靚往往唔係技術問題，而係一開始冇明確視覺目標；Taste-Skill 幫 AI 補上呢個目標
- 可行動點：可以一鍵安裝所有技能或單個技能，亦可以手動複製 SKILL.md 內容到 AI 對話中使用，並可調節 DESIGN_VARIANCE 等參數
Taste-Skill GitHub 倉庫
包含多個前端生成技能，整合 GPT Image 2 同 Codex，提供一鍵安裝同手動使用方式
使用效果同核心優勢
官方效果圖好靚，我用佢生成咗一個貓咖網站，出嚟嘅頁面層次分明、視覺統一，真係似一個真實品牌頁面，而唔係臨時拼出嚟嘅 Demo。
Taste-Skill
GPT Image 2
Codex
傳統用法直接叫 Codex 做網站，雖然功能齊全，但睇落似「AI 默認模板」，唔夠質感。新玩法將流程拆成三步：先用 GPT Image 2 整設計圖，再讓 Codex 分析圖像入面嘅佈局、字體、間距、配色同交互，最後輸出前端代碼。
技能包一覽
呢個倉庫唔係得一個技能，而係一整套前端生成工具箱，分為代碼輸出類同圖像生成類。
taste-skill
image-to-code-skill
- taste-skill：默認全能技能，適合大多數場景，平衡美觀與實用性
- gpt-taste：針對 GPT / Codex 優化嘅激進版本，更偏現代視覺同動效
- image-to-code-skill：圖像優先流水線，先生成參考圖像，分析後精確匹配前端代碼——係最核心嘅技能
- redesign-skill：重構升級，先審計 UI 問題再針對性優化，唔係從零重寫
- minimalist-skill：極簡主義風格，受 Notion、Linear 啓發，強調留白同剋制配色
- soft-skill：柔和高級風格，營造平靜昂貴感，使用柔和對比同高級字體
- brutalist-skill：粗暴風格、高對比、瑞士字體，適合實驗性項目
- output-skill：確保生成完整代碼，防止半成品或佔位符
安裝使用同參數調節
安裝好簡單，可以用 npx 一鍵安裝所有技能，或者只裝單個技能。
npx skills add
https://github.com/Leonxlnx/taste-skillnpx skills add
https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"如果想手動用，可以進入倉庫嘅 skill 文件夾，揾對應技能嘅 SKILL.md 文件，成個複製貼上到 ChatGPT、Codex、Cursor 等 AI 對話就得。
關鍵提示詞
使用 taste-skill 等技能時，要嚴格跟住順序：先生成圖片，然後分析，然後生成代碼。例如：
另外，taste-skill 支援三個參數調節：DESIGN_VARIANCE（設計變化度）、MOTION_INTENSITY（動效強度）、VISUAL_DENSITY（視覺密度），每個由 1 到 10。例如：DESIGN_VARIANCE 設為 9、MOTION_INTENSITY 設為 8、VISUAL_DENSITY 設為 2，可以做出更現代不對稱、強動效、大留白嘅效果。
DESIGN_VARIANCE
VISUAL_DENSITY
總結：為 AI 前端補上審美目標
GPT Image 2、Codex 同 Taste-Skill 組合嘅真正價值，係將 AI 前端生成流程從「直接寫代碼」改為「先建立審美目標，再用代碼還原目標」。呢一步看似簡單，但好關鍵。
審美目標
好多網站唔靚，並唔係缺組件或缺 CSS 技巧，而係由頭到尾都冇一個清晰嘅視覺目標。Taste-Skill 補上嘅正正就係呢個目標。如果你經常用 Codex 做網頁、原型、落地頁，呢個項目值得試下。
🌟星標+👆關注，帶俾你更多有趣嘅github項目
直接叫 GPT Image 2 生成高質素設計圖，再畀 Codex 分析張圖、精準還原代碼，呢種生成圖片，Codex 分析，Codex 構建網站嘅流程，可以令到 AI 生成嘅網站即刻由「模板味」變成「產品級」。
呢個完整又有效率嘅工作流程，完美封裝成一個開源神器 —— Taste-Skill。呢個項目徹底解決咗 AI 生成前端介面品味不足、視覺平庸嘅問題，令你用幾句說話就可以做出佈局高級、排版舒服、細節精緻嘅網頁。
GitHub 倉庫：https://github.com/Leonxlnx/taste-skill
呢篇文章我會按以下順序嚟介紹：
使用效果：先睇佢生成出嚟嘅頁面到底點樣。
核心優勢：再睇佢點解可以解決 AI 前端嘅「模板味」。
Skills 一覽：接着介紹嚇倉庫裏面嘅技能包
安裝使用教學：最後畀出安裝指令同關鍵提示詞。
使用效果
官方畀出嘅效果圖好靚
我用佢生成咗一個貓 cafe 網站，出嚟嘅效果的確比普通一句話生成嘅網站舒服好多：頁面更加有層次，視覺更統一，仲更加似一個真實品牌頁面，而唔係臨時砌出嚟嘅 Demo👍
核心優勢
傳統用法入面，你可能會直接同 Codex 講：
幫我做一個乾淨嘅貓 cafe 網站。
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 等相關技能，做一個專業嘅貓 cafe 網站。要求嚴格遵守先生成圖片，然後分析，然後生成代碼嘅順序。
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 做網頁、原型、Landing Page，呢個項目值得試嚇。你最想用佢生成邊類網站？咖啡店、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 工具、個人主頁，還是一個你一直想做但懶得開頭的小產品？歡迎在評論區留言討論。
往期回顧