AI寫前端最大的問題，不是代碼，是“審美”
整理版優先睇
taste-skill 為 AI 注入前端設計思維，解決模板化審美問題
呢篇文章係由公眾號「AI開源前哨」嘅作者整理，佢發現而家用AI寫前端雖然快，但成日出嚟嘅界面都帶住一股「模板味」，最後改樣式仲耐過自己寫。作者想解決嘅問題就係點樣令AI生成嘅界面有真正嘅「好品味」。
佢介紹咗一個開源項目叫 Leonxlnx/taste-skill，呢個項目唔係做新框架，而係畀AI編程助手注入一套完整嘅專業前端設計思維。項目分成多個獨立技能模塊，好似 taste-skill、gpt-taste、image-to-code-skill 等，開發者可以按需取用。另外仲有參數化設計，可以調節佈局實驗性、動效深度同資訊密度。
整體結論係，taste-skill 從根源上杜絕AI產生無聊嘅模板代碼，令寫出嚟嘅界面真正有質感。而且接入超簡單，一行命令就搞掂，絕對係提升效率同產出質量的實用工具。
- 結論：taste-skill 從根源解決 AI 前端代碼嘅審美問題，令界面有「好品味」。
- 方法：提供模塊化技能集（如 taste-skill、gpt-taste 等）同參數化設計（DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY）來靈活控制輸出。
- 差異：有別於普通 prompt 工程，佢注入完整設計思維，唔係簡單模板堆砌。
- 啟發：AI 寫前端唔再只係代碼生成，而係能理解設計邏輯嘅合作伙伴。
- 可行動點：一行命令即可接入（npx skills add ...），按需選用模塊，零門檻上手。
taste-skill 前端設計技能集
模塊化AI設計技能，注入完整前端設計思維，包含多個子技能和參數化控制。
AI 寫前端嘅通病：模板味太重
而家做前端開發，邊個未試過用AI嚟寫代碼？Cursor、Claude Code、Codex輪住上，幾句prompt就出成個頁面嘅代碼，效率真係好高。但幾乎所有開發者都遇到一個共通問題：AI寫出嚟嘅界面，永遠帶住一股洗唔甩嘅「模板味」——萬年不變嘅居中佈局、毫無層次嘅字體層級、敷衍了事嘅間距同動效。睇落用得，但離「專業、有質感、有設計感」差好遠，最後改樣式嘅時間，仲耐過自己由頭寫。
AI寫出嚟嘅界面，永遠帶住一股洗唔甩嘅「模板味」
最後改樣式嘅時間，仲耐過自己由頭寫
taste-skill：為AI注入設計思維
最近我挖到咗一個專門解決呢個痛點嘅開源項目——Leonxlnx/taste-skill。佢唔係做新框架，亦唔係疊代碼模板，而係直接畀你嘅AI編程助手注入一套完整嘅專業前端設計思維，從根源上阻止AI生成無聊嘅模板代碼，令AI寫出嚟嘅界面真正擁有「好品味」。
taste-skill
「好品味」
項目拆成多個獨立技能模塊，按需取用。實現類技能輸出代碼，圖片生成類技能只輸出參考圖。
- taste-skill：默認全能型，輸出高品質前端效果，不限單一風格。
- gpt-taste：面向GPT/Codex嘅嚴格增強版，佈局多樣性更高，杜絕模板化。
- image-to-code-skill：圖片優先工作流，先生成參考圖再還原代碼。
- redesign-skill：存量項目改造，先審計再修復佈局與樣式。
- soft-skill：打造精緻、沉穩、高質感UI，柔和對比度與充足留白。
- output-skill：強制輸出完整代碼，無佔位符。
- minimalist-skill：編輯向產品UI（Notion/Linear風格），剋制配色。
- brutalist-skill：硬核工業風，瑞士字體與實驗性佈局。
參數化設計：精準控制輸出風格
核心嘅 taste-skill 仲有參數化設計，設咗三個1-10級嘅調節旋鈕，唔使改複雜規則，就可以快速調整AI嘅輸出風格。
- 1 DESIGN_VARIANCE：控制佈局實驗性。數值低偏向居中穩妥，數值高傾向不對稱創新佈局。
- 2 MOTION_INTENSITY：控制動效深度。低數值保留基本懸停效果，高數值加入滾動觸發、磁性動效等。
- 3 VISUAL_DENSITY：控制單屏資訊密度。做官網營銷頁可調低，留白多啲；做後台儀錶板可調高，放更多資訊。
DESIGN_VARIANCE
MOTION_INTENSITY
VISUAL_DENSITY
一分鐘接入，零門檻使用
接入門檻極低，官方已經適配咗Vercel Agent Skills嘅CLI工具，一行命令就裝好。
npx skills add
https://github.com/Leonxlnx/taste-skill如果只想用特定技能，加--skill參數指定名稱，例如：
npx skills add
https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"npx skills add https://github.com/Leonxlnx/taste-skill
總結：AI從工具人變成設計夥伴
taste-skill 令AI唔再只係一個淨係識得敲代碼嘅工具人，而係一個真正理解設計邏輯、幫你把控視覺細節嘅合作伙伴。呢個工具絕對能實實在在提升效率同產出質量。
AI唔再只係一個淨係識得敲代碼嘅工具人，而係一個真正理解設計邏輯嘅合作伙伴
而家做前端開發，邊個未試過用AI寫代碼？
Cursor、Claude Code、Codex輪住上場，幾行prompt就出到成個頁面嘅代碼，效率真係爆曬燈。
但幾乎所有開發者都避唔開一個通病：AI寫出來嘅界面，永遠帶住一股洗唔甩嘅「模板味」——萬年不變嘅置中佈局、毫無層次嘅字體層級、是是旦旦嘅間距同動效，睇落用得，但同「專業、有質感、有設計感」差咗十萬八千里，最後改樣式嘅時間，仲耐過自己從頭寫過。
最近我揾到一個專門解決呢個痛點嘅開源項目——Leonxlnx/taste-skill。
佢唔做新嘅前端框架，亦唔疊現成嘅代碼模板，而係直接俾你嘅AI編程助手，注入一套完整、專業嘅前端設計思維，由根源上阻止AI生成啲無聊、同質化嘅模板代碼，令AI寫出來嘅界面，真正擁有 「好品味」。
按需要取用嘅模塊化技能，覆蓋全場景開發需求
項目冇做一個大而全嘅「萬能包」，而係拆咗做多個獨立、各司其職嘅技能模塊，你唔需要一次過全部用曬，根據自己嘅開發場景按需要取用就得。
實現類Skill會輸出代碼，圖片生成類Skill只輸出參考圖片。
實現類Skill
| taste-skill | |
| gpt-taste | |
| image-to-code-skill | |
| redesign-skill | |
| soft-skill | |
| output-skill | |
| minimalist-skill | |
| brutalist-skill | |
| stitch-skill |
圖片生成類Skill
呢類Skill只生成設計圖片（唔輸出代碼），可以搭配ChatGPT圖片生成、Codex圖片模式，或者任何支持生成圖片嘅智能體使用。
| imagegen-frontend-web | |
| imagegen-frontend-mobile | |
| brandkit |
實例項目
好似調音台咁靈活嘅參數，精準匹配項目需求
喺核心嘅taste-skill入面，項目仲做咗非常貼心嘅參數化設計，文件頂部設置咗三個1-10級嘅調節旋鈕，唔使修改複雜嘅規則，就能夠快速調整AI嘅輸出風格，精準匹配唔同嘅項目需求。
DESIGN_VARIANCE用嚟控制佈局嘅實驗性，數值越低，輸出嘅佈局越偏向置中、穩陣嘅簡潔風格；數值越高，AI就會越傾向於使用不對稱、更具現代感嘅創新佈局。
MOTION_INTENSITY用嚟控制動效嘅深度，低數值只會保留基礎嘅懸停動效，高數值則會加入更豐富嘅滾動觸發、磁性動效等進階動畫。
VISUAL_DENSITY用嚟控制單屏嘅信息密度，做官網、營銷頁可以調低數值，留出充足嘅留白提升呼吸感；做後台儀錶板、工具類產品可以調高數值，喺單屏內擺低更多有效信息。
一分鐘就能上手，零門檻接入
呢個項目嘅使用門檻極低，就算你係第一次接觸，都可以一分鐘完成接入。官方已經適配咗Vercel Agent Skills嘅CLI工具，一行命令就完成安裝。
想將所有技能都裝到項目入面，直接執行：
npx skills add https://github.com/Leonxlnx/taste-skill如果只想用某一個特定嘅技能，例如移動端嘅圖像生成技能，加上--skill參數指定名稱就得：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"
最後講幾句
佢令AI唔再只係一個只會寫代碼嘅工具人，而係能真正理解設計邏輯、幫你把控視覺細節嘅合作夥伴，呢個絕對係一個能實實在在提升效率同產出質量嘅工具。
如果你都成日用AI生成前端代碼，但成日對產出嘅界面設計唔滿意，不妨去試試呢個項目，話唔定能徹底改變你用AI寫前端嘅體驗。
項目地址：
歡迎 置頂（標星）關注本公眾號「AI開源前哨」獲取有趣AI技術/工具分享，咁就可以第一時間收到推送啦~
現在做前端開發，誰還沒試過用AI擼代碼？
Cursor、Claude Code、Codex輪番上陣，幾行prompt就能出一整個頁面的代碼，效率確實拉滿。
但幾乎所有開發者都繞不開一個通病：AI寫出來的界面，永遠帶着一股洗不掉的“模板味”——萬年不變的居中佈局、毫無層次的字體層級、敷衍了事的間距和動效，看着能用，但離“專業、有質感、有設計感”差了十萬八千里，最後改樣式的時間，比自己從頭寫還久。
最近我挖到了一個專門解決這個痛點的開源項目——Leonxlnx/taste-skill。
它不做新的前端框架，也不堆現成的代碼模板，而是直接給你的AI編程助手，注入一套完整的、專業的前端設計思維，從根源上阻止AI生成那些無聊、同質化的模板代碼，讓AI寫出來的界面，真正擁有 “好品味”。
按需取用的模塊化技能，覆蓋全場景開發需求
項目沒有做一個大而全的“萬能包”，而是拆成了多個獨立的、各司其職的技能模塊，你不需要一次性全用上，根據自己的開發場景按需取用就好。
實現類Skill會輸出代碼，圖片生成類Skill僅輸出參考圖片。
實現類Skill
| taste-skill | |
| gpt-taste | |
| image-to-code-skill | |
| redesign-skill | |
| soft-skill | |
| output-skill | |
| minimalist-skill | |
| brutalist-skill | |
| stitch-skill |
圖片生成類Skill
此類Skill僅生成設計圖片（不輸出代碼），可搭配ChatGPT圖片生成、Codex圖片模式，或任意支持生成圖片的智能體使用。
| imagegen-frontend-web | |
| imagegen-frontend-mobile | |
| brandkit |
實例項目
像調音台一樣靈活的參數，精準匹配項目需求
在核心的taste-skill裏，項目還做了非常貼心的參數化設計，文件頂部設置了三個1-10級的調節旋鈕，不用修改複雜的規則，就能快速調整AI的輸出風格，精準匹配不同的項目需求。
DESIGN_VARIANCE用來控制佈局的實驗性，數值越低，輸出的佈局越偏向居中、穩妥的簡潔風格；數值越高，AI就會越傾向於使用不對稱、更具現代感的創新佈局。
MOTION_INTENSITY用來控制動效的深度，低數值只會保留基礎的懸停動效，高數值則會加入更豐富的滾動觸發、磁性動效等進階動畫。
VISUAL_DENSITY用來控制單屏的信息密度，做官網、營銷頁可以調低數值，留出充足的留白提升呼吸感；做後台儀表板、工具類產品可以調高數值，在單屏內放下更多有效信息。
一分鐘就能上手，零門檻接入
這個項目的使用門檻極低，哪怕你是第一次接觸，也能一分鐘完成接入。官方已經適配了Vercel Agent Skills的CLI工具，一行命令就能完成安裝。
想把所有技能都裝到項目裏，直接執行：
npx skills add https://github.com/Leonxlnx/taste-skill如果只想用某一個特定的技能，比如移動端的圖像生成技能，加上--skill參數指定名稱即可：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-mobile"最後說幾句
它讓AI不再只是一個只會敲代碼的工具人，而是能真正理解設計邏輯、幫你把控視覺細節的合作伙伴，這絕對是一個能實實在在提升效率和產出質量的工具。
如果你也經常用AI生成前端代碼，卻總對產出的界面設計不滿意，不妨去試試這個項目，說不定能徹底改變你用AI寫前端的體驗。
項目地址：
歡迎 置頂（標星）關注本公眾號「AI開源前哨」獲取有趣AI技術/工具分享,這樣就第一時間獲取推送啦~