5分鐘接入 Taste-Skill:讓 AI 生成的前端告別模板臉的實戰指南【免費下載鏈接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop項目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillAI 生成的落地頁清一色:居中 H1、三等分卡片、紫藍漸變按鈕,客戶看完只說了一個詞:土。Taste-Skill 把反模板寫成 Agent 可執行的規則包,裝進你的編碼工具,頁面才像人做的。 5分鐘跑通:把技能裝進你的 Agent拉倉庫,技能全在skills/下,一個文件夾一個技能,互不依賴:git clone https://gitcode.com/gh_mirrors/ta/taste-skill選技能:通用場景選 默認技能規則(當前 v2);給 GPT/Codex 想要更嚴的,換skills/gpt-tasteskill/SKILL.md。裝進工具:Codex、Claude Code 把 SKILL.md 放進項目即可;Cursor 放進 rules 或對話里引用;ChatGPT 直接粘貼全文。給需求,一句話就夠:做一個花藝工作室的官網。驗收信號:Agent 動筆前先輸出一行 Design Read(讀單,聲明它把需求理解成了什么頁面、什么受眾、什么語言),沒有這行說明規則沒生效。工具接入方式生效范圍Codex / Claude Code項目內放 SKILL.md自動加載Cursorrules 目錄或對話引用會話級ChatGPT粘貼全文當次對話看懂三個旋鈕:輸入、中間件、產出輸入是你的一句話需求。中間經過四步:讀 brief(頁面類型、受眾、vibe 詞、已有品牌資產)→ 定三個 1-10 的旋鈕 → 映射設計系統(Fluent、Carbon、shadcn/ui 等官方包,或原生 CSS,一個項目只準選一套)→ 過一遍約 60 項的 pre-flight 清單,任一項不過就返工。旋鈕是全局閘門,文件頭三行:DESIGN_VARIANCE: 8 # 1 完全對稱 → 10 藝術化混沌 MOTION_INTENSITY: 6 # 1 靜態 → 10 電影級滾動編排 VISUAL_DENSITY: 4 # 1 畫廊留白 → 10 駕駛艙密度基線 8/6/4,所有排版、動效、密度規則都以它們為條件觸發:VARIANCE 大于 4 就禁止居中 Hero,MOTION 大于 5 才解鎖磁吸按鈕和滾動編排,DENSITY 大于 7 禁止用卡片容器。其余像禁用 Inter、襯線字體克制、em-dash 零容忍,屬于硬約束,不用細看。實戰場景:三種頁面,三套擰法規則本身框架無關,React、Vue、Svelte 都適用,它約束的是設計意圖而非某套 API。按頁面復雜度分檔:落地頁:默認檔直接開適用:標準 SaaS 或產品落地頁,沒有強品牌資產。 差異:旋鈕保持基線 8/6/4;Hero 必須一屏放下(標題 ≤2 行、副文 ≤20 詞);Trusted by Logo 墻放 Hero 下方,不塞進 Hero 內部。 效果:出來的頁面是左文右圖的非對稱結構,強調色全頁鎖定一個,不再是模板臉。作品集 / 品牌站:拉高方差,動效跟上適用:客戶點名要Awwwards 感。 差異:VARIANCE 9-10、MOTION 8-10、DENSITY 3;用 bento 網格加 sticky 滾動堆疊(文檔里有標準 GSAP 骨架,關鍵是start: top top);圖片位必須真實圖片,禁止 div 拼假截圖。 效果:頁面開始像設計工作室交付,而不是套出來的模板。存量項目整容:先審計,再動刀適用:站點已上線,URL 和搜索排名動不得。 差異:換 redesign 技能,先審計品牌 token、信息架構、SEO 基線,再按字體 → 間距 → 色彩 → 動效的順序改表面;路由 slug、導航文案、表單字段名永不靜默修改。 效果:視覺升級,但下游埋點和搜索流量一條線不斷。踩坑實錄:四個高頻翻車點你大概率會這么寫:const [x, setX] useState(0)配onMouseMove做磁懸浮按鈕。改成這樣:useMotionValue/useTransform(直接操作 DOM 屬性、繞過 React 渲染管線的動畫狀態值)。底層原因:每次 set 都重渲染組件樹,移動端的磁吸 hover 直接掉幀。你大概率會這么寫:window.addEventListener(scroll, ...)手動算滾動進度。改成這樣:Motion 的useScroll()或 GSAP 的 ScrollTrigger。底層原因:scroll 事件每幀觸發且不批處理,卡頓是默認結果而非意外。你大概率會這么寫:Hero 用h-screen,三欄用w-[calc(33%-1rem)]。改成這樣:min-h-[100dvh]加 CSS Gridgrid-cols-3 gap-6。底層原因:h-screen在 iOS 上含地址欄會布局跳動,flex 百分比有亞像素誤差,Grid 沒有。你大概率會這么寫:Inter 字體加紫藍漸變,配三等分 feature 卡片。改成這樣:Geist 或 Outfit,加一個飽和度低于 80% 的強調色,卡片換成 12 不對稱 bento。底層原因:這是訓練數據里概率最高的默認組合,SKILL.md 把它寫成硬禁令而非建議。按場景擰旋鈕你的場景擰法政府或合規站,信任優先VARIANCE 3-4、MOTION 2-3,直接映射 GOV.UK 或 USWDS模型總交半成品加裝 output-skill,強制完整交付想要更嚴的版式與動效換 gpt-tasteskill,方差下限更高把 SKILL.md 丟進下一個項目的倉庫,讓 AI 重寫那個土頁面,刷新對比。【免費下載鏈接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop項目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 5分鐘接入 Taste-Skill:讓 AI 生成的前端告別模板臉的實戰指南
5分鐘接入 Taste-Skill:讓 AI 生成的前端告別模板臉的實戰指南【免費下載鏈接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop項目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillAI 生成的落地頁清一色:居中 H1、三等分卡片、紫藍漸變按鈕,客戶看完只說了一個詞:土。Taste-Skill 把反模板寫成 Agent 可執行的規則包,裝進你的編碼工具,頁面才像人做的。 5分鐘跑通:把技能裝進你的 Agent拉倉庫,技能全在skills/下,一個文件夾一個技能,互不依賴:git clone https://gitcode.com/gh_mirrors/ta/taste-skill選技能:通用場景選 默認技能規則(當前 v2);給 GPT/Codex 想要更嚴的,換skills/gpt-tasteskill/SKILL.md。裝進工具:Codex、Claude Code 把 SKILL.md 放進項目即可;Cursor 放進 rules 或對話里引用;ChatGPT 直接粘貼全文。給需求,一句話就夠:做一個花藝工作室的官網。驗收信號:Agent 動筆前先輸出一行 Design Read(讀單,聲明它把需求理解成了什么頁面、什么受眾、什么語言),沒有這行說明規則沒生效。工具接入方式生效范圍Codex / Claude Code項目內放 SKILL.md自動加載Cursorrules 目錄或對話引用會話級ChatGPT粘貼全文當次對話看懂三個旋鈕:輸入、中間件、產出輸入是你的一句話需求。中間經過四步:讀 brief(頁面類型、受眾、vibe 詞、已有品牌資產)→ 定三個 1-10 的旋鈕 → 映射設計系統(Fluent、Carbon、shadcn/ui 等官方包,或原生 CSS,一個項目只準選一套)→ 過一遍約 60 項的 pre-flight 清單,任一項不過就返工。旋鈕是全局閘門,文件頭三行:DESIGN_VARIANCE: 8 # 1 完全對稱 → 10 藝術化混沌 MOTION_INTENSITY: 6 # 1 靜態 → 10 電影級滾動編排 VISUAL_DENSITY: 4 # 1 畫廊留白 → 10 駕駛艙密度基線 8/6/4,所有排版、動效、密度規則都以它們為條件觸發:VARIANCE 大于 4 就禁止居中 Hero,MOTION 大于 5 才解鎖磁吸按鈕和滾動編排,DENSITY 大于 7 禁止用卡片容器。其余像禁用 Inter、襯線字體克制、em-dash 零容忍,屬于硬約束,不用細看。實戰場景:三種頁面,三套擰法規則本身框架無關,React、Vue、Svelte 都適用,它約束的是設計意圖而非某套 API。按頁面復雜度分檔:落地頁:默認檔直接開適用:標準 SaaS 或產品落地頁,沒有強品牌資產。 差異:旋鈕保持基線 8/6/4;Hero 必須一屏放下(標題 ≤2 行、副文 ≤20 詞);Trusted by Logo 墻放 Hero 下方,不塞進 Hero 內部。 效果:出來的頁面是左文右圖的非對稱結構,強調色全頁鎖定一個,不再是模板臉。作品集 / 品牌站:拉高方差,動效跟上適用:客戶點名要Awwwards 感。 差異:VARIANCE 9-10、MOTION 8-10、DENSITY 3;用 bento 網格加 sticky 滾動堆疊(文檔里有標準 GSAP 骨架,關鍵是start: top top);圖片位必須真實圖片,禁止 div 拼假截圖。 效果:頁面開始像設計工作室交付,而不是套出來的模板。存量項目整容:先審計,再動刀適用:站點已上線,URL 和搜索排名動不得。 差異:換 redesign 技能,先審計品牌 token、信息架構、SEO 基線,再按字體 → 間距 → 色彩 → 動效的順序改表面;路由 slug、導航文案、表單字段名永不靜默修改。 效果:視覺升級,但下游埋點和搜索流量一條線不斷。踩坑實錄:四個高頻翻車點你大概率會這么寫:const [x, setX] useState(0)配onMouseMove做磁懸浮按鈕。改成這樣:useMotionValue/useTransform(直接操作 DOM 屬性、繞過 React 渲染管線的動畫狀態值)。底層原因:每次 set 都重渲染組件樹,移動端的磁吸 hover 直接掉幀。你大概率會這么寫:window.addEventListener(scroll, ...)手動算滾動進度。改成這樣:Motion 的useScroll()或 GSAP 的 ScrollTrigger。底層原因:scroll 事件每幀觸發且不批處理,卡頓是默認結果而非意外。你大概率會這么寫:Hero 用h-screen,三欄用w-[calc(33%-1rem)]。改成這樣:min-h-[100dvh]加 CSS Gridgrid-cols-3 gap-6。底層原因:h-screen在 iOS 上含地址欄會布局跳動,flex 百分比有亞像素誤差,Grid 沒有。你大概率會這么寫:Inter 字體加紫藍漸變,配三等分 feature 卡片。改成這樣:Geist 或 Outfit,加一個飽和度低于 80% 的強調色,卡片換成 12 不對稱 bento。底層原因:這是訓練數據里概率最高的默認組合,SKILL.md 把它寫成硬禁令而非建議。按場景擰旋鈕你的場景擰法政府或合規站,信任優先VARIANCE 3-4、MOTION 2-3,直接映射 GOV.UK 或 USWDS模型總交半成品加裝 output-skill,強制完整交付想要更嚴的版式與動效換 gpt-tasteskill,方差下限更高把 SKILL.md 丟進下一個項目的倉庫,讓 AI 重寫那個土頁面,刷新對比。【免費下載鏈接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop項目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考