這個開源兩萬星的 Skill 給你的AI審美加點品味
整理版優先睇
Taste Skill：用一套審美規則，令AI 寫出唔再「AI 味」嘅前端界面
呢篇文章介紹咗一個叫 Taste Skill 嘅開源專案，由德國工程師 Leon Lin（GitHub ID Leonxlnx）開發，目前喺 GitHub 上已經超過兩萬星。佢發現 AI 編程工具（如 Cursor、Claude Code、Codex）生成前端代碼時，永遠走最平庸嘅路，紫色漸變卡片加圓角模糊背景，換邊個模型都差唔多。為咗解決呢個問題，佢寫咗一套審美規則，直接裝入 AI 嘅「腦」入面，每次生成前會先讀呢啲規則再輸出。
呢套規則唔係組件庫，而係三個可調參數：DESIGN_VARIANCE（佈局變化度，1-10）、MOTION_INTENSITY（動效強度）、ICON_STYLE（圖標風格，限定用 @phosphor-icons/react 或 @radix-ui/react-）。另外仲有好多硬性工程規則，例如唔準用 h-screen 做全屏 Hero（要用 min-h-[100dvh]）、用 CSS Grid 代替複雜 Flex 百分比計算、用 figure + picture 代替 img 標籤等。
整體結論係：AI 寫代碼能力已經冇問題，問題係你冇畀佢一套「乜嘢叫做靚」嘅標準。Taste Skill 就係做呢件事，令 AI 輸出嘅前端界面更有設計感，唔再係一式一樣嘅「AI 味」。
- Taste Skill 係一套審美規則，唔係組件庫，直接裝入 AI 腦入面，令佢生成前端時跳出平庸模板。
- 三個可調參數（DESIGN_VARIANCE、MOTION_INTENSITY、ICON_STYLE）讓你可以控制佈局、動效同圖標風格。
- 硬性工程規則：唔準用 h-screen（要用 min-h-[100dvh]）、用 CSS Grid 取代複雜 Flex 計算、用 figure + picture 做響應式圖片。
- 安裝好簡單：一條命令 npx skills add Leonxlnx/taste-skill，支援主流 AI 編程工具。
- 適合用 AI 寫前端、想界面更有設計感、唔想次次手動改嘅開發者，尤其係展示類項目。
Taste Skill GitHub 倉庫
專案主頁，包含完整文檔同 examples 目錄
AI 寫前端，永遠係嗰副「AI 樣」
無論你用 Claude、GPT 定 Cursor，生成出嚟嘅前端永遠係紫色漸變卡片加 Inter 字體、圓角加模糊背景，換邊個模型都差唔多。呢啲唔叫設計，叫模板複印。
德國工程師 Leon Lin 忍唔住，佢發現 AI 寫前端嘅老大難問題唔係做唔到，而係佢唔知乜嘢叫「好睇」。
Taste Skill：一套裝入 AI 腦嘅審美規則
呢個 Skill 唔係組件庫，而係一套審美規則。AI 每次生成前端代碼前，會先讀呢套規則，然後跟住嚟做。效果係唔會再輸出「AI 味」十足嘅同款頁面。
- DESIGN_VARIANCE（佈局變化度）：預設 8，可調 1-10。1 極度對稱，10 藝術化混亂。
- MOTION_INTENSITY（動效強度）：控制動畫激烈程度，AI 自己判斷場景適合咩量級。
- ICON_STYLE（圖標風格）：只認 @phosphor-icons/react 或 @radix-ui/react-，唔會再塞來源不明嘅 SVG。
工程細節固化，AI 輸出即刻升呢
Taste Skill 嘅文檔寫咗好多硬性規則，將前端工程師都知嘅坑直接固化落去，AI 想錯都難。
唔準用 h-screen 做全屏 Hero，要用 min-h-[100dvh]，因為 iOS Safari 上 h-screen 會搞到佈局抖動。
- 1 永遠用 CSS Grid，唔好用複雜 Flex 百分比計算，例如 w-[calc(33%-1rem)] 喺唔同屏幕會崩。
- 2 圖片唔好直接 img 標籤，要用 figure + picture，先做到真正嘅響應式圖片方案。
呢啲細節一旦固化落 Skill，AI 生成嘅質量直接跳上一個台階。
一條命令，即刻裝入 AI 工具
安裝好簡單：用 npx skills add Leonxlnx/taste-skill 即可。支援 Claude Code、Cursor、Codex、Windsurf 等主流 AI 編程工具。GitHub 倉庫入面有完整文檔同 examples 目錄，可以睇實際效果。
npx skills add Leonxlnx/taste-skillAI 寫代碼已經好掂，差嘅係審美標準
AI 寫代碼嘅能力已經冇問題，問題係你有冇俾佢一套「乜嘢樣嘅代碼算好睇」嘅標準。Taste Skill 正正係做呢件事。
19K Star 說明呢個痛點真係存在，而且好多人喺度揾解法。
- 適合用 AI 寫前端，每次出嚟都好似同一個人做嘅你。
- 想 AI 生成更有設計感嘅界面，唔想次次手動改。
- 做前端展示類項目，需要 AI 快速出稿而且要能睇。
呢個開源兩萬星嘅 Skill 幫你嘅 AI 審美加返啲品味
呢個係人哋用 AI 寫出嚟嘅頁面：
再睇嚇呢個：
再諗嚇自己用 AI 寫出嚟嘅前端，永遠都係嗰個樣。
紫色漸變卡片 + Inter 字體 + 圓角 + 模糊背景。
換邊個模型都差唔多。Claude、GPT、Cursor 通殺。
呢樣嘢唔叫設計，叫模板複印。
一個德國工程師忍唔住啦
Leon Lin，慕尼黑，GitHub ID Leonxlnx。
佢喺 Cursor、Claude Code、Codex 呢啲 AI 編程工具入面發現咗一個老大難問題：
AI 寫前端嘅時候，永遠都係揀最平庸嗰條路。
唔係做唔好，係佢唔知乜嘢叫『靚』。
所以佢寫咗一個 Skill，叫 Taste Skill。
GitHub：https://github.com/Leonxlnx/taste-skill
Star：18875（而家仲喺度升緊）
協議：MIT
佢做咗啲乜？
Taste Skill 唔係俾你提供一個組件庫。
佢係一套審美規則，裝入 AI 個腦度。
AI 每次生成前端代碼之前，會先讀呢套規則，然後跟規則生成。
效果係：唔再每次都輸出『AI 味』十足嘅同款頁面。
三個參數，調出設計感
呢個係 Taste Skill 最直接嘅地方。
DESIGN_VARIANCE：佈局變化度
預設係 8，可以校到 1-10。
1 係極度對稱，10 係藝術化混亂。
AI 寫首頁嘅時候，唔再每次都套 max-w-[1400px] mx-auto，而係真係去思考：呢個產品適合咩氣質。
MOTION_INTENSITY：動效強度
控制動畫嘅激烈程度。
唔做動畫太死板，做太多太花巧。呢個參數讓 AI 自己判斷當前場景適合咩量級嘅動效。
ICON_STYLE：圖標風格
只認兩個庫：@phosphor-icons/react 或 @radix-ui/react-。
AI 唔會再塞一堆來歷不明嘅 SVG 圖標俾你。
具體改變咗啲乜？
Taste Skill 嘅文檔入面寫咗好多硬性規則：
不能用 h-screen 做全屏 Hero。
要用 min-h-[100dvh]。iOS Safari 上 h-screen 會導致災難性佈局抖動，呢個係做前端嘅人都知嘅坑。
永遠用 CSS Grid，唔用複雜 Flex 百分比計算。
w-[calc(33%-1rem)] 呢種 Flex 寫法，喺唔同屏幕寬度之下會分分鐘崩。CSS Grid 更穩。
圖片唔好直接 img 標籤，要用 figure + picture。
咁樣 AI 先可以輸出正確嘅響應式圖片方案。
一個 Skill，可以將呢啲工程細節固化入去，AI 生成嘅質量直接上一個台階。
點樣裝？
一條命令：
npx skills add Leonxlnx/taste-skill支援 Claude Code、Cursor、Codex、Windsurf 等主流 AI 編程工具。
GitHub 倉庫入面有完整文檔，仲有 examples 目錄可以睇實際效果。
適合邊個？
你喺用 AI 寫前端，每次出嚟都好似同一個人做咁。
你想讓 AI 生成更有設計感嘅界面，唔想每次都手動改。
你做緊前端展示類項目，需要 AI 快速出稿，而且唔可以太樣衰。
呢樣嘢唔係幫你寫代碼，係幫你管 AI 嘅審美。
說到底
AI 寫代碼嘅能力已經冇乜問題啦。
問題係你有冇俾佢一套『乜嘢嘅代碼算靚』嘅標準。
Taste Skill 做嘅就係呢件事。
19K Star，說明呢個痛點真係存在，而且好多人都在揾解法。
如果你正在用 AI 寫前端，呢個 Skill 值得試嚇。
GitHub：https://github.com/Leonxlnx/taste-skill
這個開源兩萬星的 Skill 給你的AI審美加點品味
這是別人AI寫出來的頁面：
再看看這個：
再想想自己用AI 寫出來的前端，永遠是那副德行。
紫色漸變卡片 + Inter 字體 + 圓角 + 模糊背景。
換哪個模型都差不多。Claude、GPT、Cursor 通吃。
這東西不叫設計，叫模板複印。
一個德國工程師忍不了了
Leon Lin，慕尼黑，GitHub ID Leonxlnx。
他在 Cursor、Claude Code、Codex 這些 AI 編程工具裏發現了一個老大難問題：
AI 寫前端的時候，永遠在走最平庸的那條路。
不是不能做好，是它不知道什麼叫"好看"。
所以他寫了一個 Skill，叫 Taste Skill。
GitHub：https://github.com/Leonxlnx/taste-skill
Star：18875（目前還在漲）
協議：MIT
它做了什麼？
Taste Skill 不是給你提供一個組件庫。
它是一套審美規則，裝進 AI 的腦子裏。
AI 每次生成前端代碼前，會先讀這套規則，然後按規則生成。
效果是：不再每次都輸出"AI 味"十足的同款頁面。
三個參數，調出設計感
這是 Taste Skill 最直接的地方。
DESIGN_VARIANCE：佈局變化度
默認 8，可以調到 1-10。
1 是極度對稱，10 是藝術化混亂。
AI 寫首頁的時候，不再每次都套 max-w-[1400px] mx-auto，而是真的去思考：這個產品適合什麼氣質。
MOTION_INTENSITY：動效強度
控制動畫的激烈程度。
不做動畫太死板，做太多太花哨。這個參數讓 AI 自己判斷當前場景適合什麼量級的動效。
ICON_STYLE：圖標風格
只認兩個庫：@phosphor-icons/react 或 @radix-ui/react-。
AI 不會再給你塞一堆來源不明的 SVG 圖標。
具體改變了什麼？
Taste Skill 的文檔裏寫了很多硬性規則：
不能用 h-screen 做全屏 Hero。
要用 min-h-[100dvh]。iOS Safari 上 h-screen 會導致災難性佈局抖動，這是做前端的人都知道的坑。
永遠用 CSS Grid，不用複雜 Flex 百分比計算。
w-[calc(33%-1rem)] 這種 Flex 寫法，在不同屏幕寬度下會分分鐘崩。CSS Grid 更穩。
圖片不要直接 img 標籤，要用 figure + picture。
這樣 AI 才能輸出正確的響應式圖片方案。
一個 Skill，能把這些工程細節固化進去，AI 生成的質量直接上一個台階。
怎麼裝？
一條命令：
npx skills add Leonxlnx/taste-skill支持 Claude Code、Cursor、Codex、Windsurf 等主流 AI 編程工具。
GitHub 倉庫裏有完整文檔，也有 examples 目錄可以看實際效果。
適合誰？
你在用 AI 寫前端，每次出來都像同一個人做的。
你想讓 AI 生成更有設計感的界面，不想每次都手動改。
你在做前端展示類項目，需要 AI 快速出稿，而且要能看。
這東西不是幫你寫代碼，是幫你管 AI 的審美。
說到底
AI 寫代碼的能力已經沒什麼問題了。
問題是你有沒有給它一套"什麼樣的代碼算好看"的標準。
Taste Skill 做的是這件事。
19K Star，說明這個痛點真的存在，而且很多人都在找解法。
如果你正在用 AI 寫前端，這個 Skill 值得試試。
GitHub：https://github.com/Leonxlnx/taste-skill