Leonxlnx/taste-skill

Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop

TL;DR

Taste Skill 是一系列 Agent Skills（微型、可攜式的指令檔案），能告訴基於 LLM 的程式碼助手（如 ChatGPT、Claude、Codex、Cursor 等）如何產出更簡潔、更精緻的前端 UI 程式碼與設計素材。您只需透過單一 npx skills add … 指令安裝技能，代理程式便會遵循內嵌規則（佈局變化、動態強度、視覺密度、防草率準則）來生成 HTML/CSS/JS 或設計草圖。

功能特色

以設計為導向的程式碼生成 – 讀取簡介、選擇設計語言，並輸出完整的前端實作（基於 GSAP 的動畫骨架、嚴格的間距、排版等）。
可調整的「旋鈕」 – 三個數值參數（DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY）讓您能控制輸出的實驗性或密度程度。
專業變體 – 例如用於更嚴格 GPT/Codex 輸出的 gpt‑taste、用於高級 UI 外觀的 soft‑skill、用於高對比工業風格的 brutalist‑skill，以及用於審核與修復現有程式碼庫的 redesign‑skill。
影像生成技能 – 產出參考板（網頁、行動裝置、品牌套件），您可以將其提供給具備影像能力的代理程式，再將框架交給程式碼技能（image‑to‑code）。
可攜式 SKILL.md 檔案 – 每個技能都位於 skills/ 下的專屬資料夾中，可透過 Vercel‑Labs 的 npx skills add CLI 安裝，或直接複製到專案或聊天中。

適用對象

使用 AI 程式碼助手的開發者，希望在不手動編寫每個 CSS 規則的情況下獲得一致且高品質的 UI。
設計轉程式碼流程，先生成草圖（透過 ChatGPT Images、DALL‑E 等），然後自動將其轉化為生產就緒的程式碼。
需要跨 React、Vue、Svelte 或任何前端框架重複使用風格指南的團隊 – 無論底層函式庫為何，該技能都能強制執行佈局與動態規則。

如何開始

安裝預設技能（v2，實驗性）：

npx skills add https://github.com/Leonxlnx/taste-skill

在給 LLM 的提示詞中，引用技能名稱，例如：

Use skill "design‑taste‑frontend" to build a landing page for a fintech startup. Keep motion intensity low and visual density high.

如果您只需要原始行為，請改為安裝 design‑taste‑frontend‑v1。
對於以影像為先的工作流程，請加入 imagegen-frontend-web（或 mobile/brandkit），然後執行 image‑to‑code。
若想要更具實驗性的佈局，請在 SKILL.md 頂部加入如 DESIGN_VARIANCE: 7 的行來調整三個旋鈕。

儲存庫內容

skills/ 資料夾 – 每個子資料夾包含一個 SKILL.md，定義了提示詞模板、旋鈕預設值以及任何輔助腳本。
research/ – 關於防草率設計原則的背景筆記，這些原則為技能提供了依據。
CHANGELOG.md – v1 到 v2 重寫的詳細資訊與未來路線圖。
MIT 授權 – 可自由使用與修改。

限制與待解決問題

這些技能生成的是 框架無關的標記語言；您可能仍需根據特定的元件庫調整輸出。
影像生成技能僅產生參考影像；它們依賴獨立的影像模型（例如 ChatGPT Images、Kimi）來實際渲染視覺效果。
預設的 design‑taste‑frontend 被標記為 實驗性 (v2)；穩定性與邊緣情況處理仍在發展中。

快速連結

網站： https://tasteskill.dev
安裝文件： 上方的 #installing 區段
完整技能列表： #skills
授權： MIT