design-taste-frontend skill 是什麼、怎麼安裝使用：Taste Skill 的主技能，用三個「旋鈕」管住 AI 的前端審美

本文根據 Leonxlnx/taste-skill 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 58.8 萬次；所在倉庫 Leonxlnx/taste-skill 在 GitHub 約 9.4 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

Taste Skill 庫裏安裝量最高的就是這一個，文件夾叫 taste-skill，安裝名是 design-taste-frontend。description 把範圍說得很窄：給落地頁、作品集和改版用的「反套路」前端技能，讓智能體讀懂需求、推斷合適的設計方向，交出不像模板的介面。SKILL.md 開頭就劃了界線——不做後台儀表盤、數據表格和多步驟的產品介面。

它的做法分三層：

• 先讀需求：從頁面類型、你用的形容詞（「極簡」「像 Linear」「高級感」）、給的參考連結、受眾和已有品牌素材裏推斷方向，動手前先輸出一句「設計判斷」；需求模糊就只問一個問題。面向公共部門、強監管行業、無障礙優先的受眾時，這些約束壓過審美偏好。
• 三個旋鈕：DESIGN_VARIANCE（1 是完全對稱，10 是藝術化的混亂）、MOTION_INTENSITY（1 靜止，10 電影感）、VISUAL_DENSITY（1 像畫廊一樣留白，10 像駕駛艙一樣密）。預設 8 / 6 / 4，技能裏有一張表把「極簡、剋制」「高端消費品牌」「實驗、Awwwards 風」等說法換算成數值。不用改文件，在對話裏說就能調。
• 硬約束：預設技術棧與依賴核對、字體和配色的糾偏、暗色模式規則、一長串「AI 痕跡」禁用清單（霓虹外發光、純黑背景、漸變大標題、預設用 Inter 等），以及交付前必須過一遍的檢查表。

怎麼安裝

倉庫 README 給出的單獨安裝寫法（--skill 後面跟的是技能的安裝名，不是文件夾名；這個技能在倉庫裏的文件夾是 skills/taste-skill，安裝名是 design-taste-frontend）：

bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

去掉 --skill 就是整庫安裝。不想用命令行，也可以把該文件夾裏的 SKILL.md 直接複製到項目裏，或貼進對話當作長期指令。

倉庫整體介紹和其他安裝方式，詳見本站《Taste Skill 是什麼、怎麼安裝使用：讓 AI 寫前端不再千篇一律的設計 Skill（taste-skill）》。

怎麼用

• 「給一款面向設計師的字體管理工具做落地頁，風格剋制、像 Linear」——它會先報出設計判斷和三個旋鈕的取值，再寫代碼。
• 「動效收一點，MOTION 調到 3；資訊再密一些」——直接在對話裏改旋鈕。
• 「這是我們現有的官網，保留品牌色做一次改版」——走技能裏的改版流程，先審計再動手。

適合誰 / 侷限

適合用 Claude Code、Codex、Cursor 做營銷頁和個人站、又總是得到同一種「AI 風」頁面的人。侷限：SKILL.md 很長（近九萬字符），加載後會佔掉不少上下文；它明確不管後台和數據密集型介面；預設技術棧是 React / Next.js、Tailwind v4 和 Motion 動畫庫，項目用別的框架時要先說明。倉庫裏還留着舊版 design-taste-frontend-v1，兩者不要同時裝。

注意事項

• 許可：MIT。
• 不帶腳本：純說明文字。但它會讓智能體安裝字體、動畫庫等依賴，技能自己也要求先核對依賴是否存在，裝之前看一眼它要加什麼。
• 它規定的「禁用清單」帶有作者的審美立場，和團隊現有設計規範衝突時，應當明確告訴它以規範為準。