Taste Skill 快速上手用 3 個(gè)設(shè)計(jì)參數(shù)讓 AI 前端界面告別模板味【免費(fèi)下載鏈接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillTaste Skill 是一套寫給 AI 編碼代理使用的前端設(shè)計(jì)技能包。你把它裝進(jìn) Codex、Cursor 或 Claude CodeAI 生成的落地頁、作品集和改版頁面就不再是千篇一律的AI 模板味而是先讀懂需求、再按可調(diào)參數(shù)產(chǎn)出界面的 AI 前端設(shè)計(jì)流程。它為什么存在你用 AI 生成前端頁面時(shí)大概率見過這種結(jié)果居中大標(biāo)題壓在深色背景上紫藍(lán)漸變發(fā)光下面橫排三張一樣的卡片字體是 Inter。代碼能跑設(shè)計(jì)沒靈魂。問題不在模型不會(huì)寫代碼而在于它拿到需求后直接套默認(rèn)審美跳過了設(shè)計(jì)師本來會(huì)做的讀需求環(huán)節(jié)。更麻煩的是這些默認(rèn)審美高度趨同換個(gè)產(chǎn)品還是同一張臉。Taste Skill 的思路就是把讀需求和審美判斷寫成顯式規(guī)則塞給 AI 強(qiáng)制執(zhí)行。核心機(jī)制AI 先當(dāng)設(shè)計(jì)師再當(dāng)程序員第一步不是寫代碼而是簡報(bào)推理就像設(shè)計(jì)師開工前聽客戶講清楚要什么AI 會(huì)先分析六個(gè)信號(hào)頁面類型SaaS 落地頁還是作品集、受眾B2B 采購方還是設(shè)計(jì)敏感的消費(fèi)者、你提到的風(fēng)格詞minimalist、Linear-style、brutalist、貼的參考圖和競品以及已有的品牌資產(chǎn)。然后它必須先用一句話交設(shè)計(jì)判讀例如這是一個(gè)面向技術(shù)買家的 B2B SaaS 落地頁走 Linear 式極簡語言傾向 Tailwind 克制動(dòng)效。需求模糊時(shí)規(guī)則要求它只問一個(gè)問題不許猜也不許連珠炮式追問。同時(shí)還有一份反默認(rèn)清單AI 紫色漸變、三張等高卡片、玻璃擬態(tài)糊滿全屏這些標(biāo)志性套路都被點(diǎn)名禁止。三個(gè) 1-10 的旋鈕像調(diào)相機(jī)曝光一樣調(diào)設(shè)計(jì)這是整套系統(tǒng)里最直觀的部分。AI 在輸出判讀后要給三個(gè)參數(shù)定值后面所有布局、動(dòng)效、間距決策都以它們?yōu)殚l門參數(shù)含義低值1-3高值8-10DESIGN_VARIANCE布局實(shí)驗(yàn)程度嚴(yán)格對(duì)稱的 12 列網(wǎng)格、居中對(duì)齊錯(cuò)落網(wǎng)格、非對(duì)稱留白、分?jǐn)?shù)單位列MOTION_INTENSITY動(dòng)效深度只有 hover 狀態(tài)滾動(dòng)劫持、視差、物理感交互VISUAL_DENSITY每屏信息量畫廊式大留白駕駛艙式緊湊數(shù)據(jù)排布典型配置長這樣SaaS 落地頁常用VARIANCE 7 / MOTION 6 / DENSITY 4創(chuàng)意作品集則推到9 / 8 / 3。你可以直接在對(duì)話里覆蓋這些值不用改文件。規(guī)則還要求動(dòng)效必須說得出理由每個(gè)動(dòng)畫要么引導(dǎo)注意力要么表達(dá)狀態(tài)變化答不上來就刪掉。有官方設(shè)計(jì)系統(tǒng)就用官方的第三層機(jī)制處理選什么地基。需求像微軟企業(yè)風(fēng)就裝fluentui/react-componentsIBM 數(shù)據(jù)分析界面用 CarbonGitHub 風(fēng)格開發(fā)工具用 Primer一條項(xiàng)目只允許一個(gè)設(shè)計(jì)系統(tǒng)不許混用。而玻璃擬態(tài)、粗野主義、雜志風(fēng)這類沒有官方包的美學(xué)方向就用原生 CSS 自己實(shí)現(xiàn)并在代碼注釋里誠實(shí)標(biāo)注這是近似實(shí)現(xiàn)不是官方 Material。安裝與集成一條命令加一個(gè)選型倉庫可以整包安裝git clone https://gitcode.com/GitHub_Trending/ta/taste-skill然后把對(duì)應(yīng) skill 裝進(jìn)你的代理。按需選包即可默認(rèn)taste-skill管落地頁、作品集和改版image-to-code-skill走先生成參考圖、再分析、再寫碼的圖像優(yōu)先流程redesign-skill針對(duì)存量項(xiàng)目先審計(jì)現(xiàn)有品牌 token 再漸進(jìn)優(yōu)化另有imagegen-frontend-web、imagegen-frontend-mobile、brandkit三個(gè)只出參考圖不寫代碼的包配合任何圖像生成工具使用。默認(rèn)技術(shù)棧是 React/Next.jsServer Components 優(yōu)先動(dòng)效隔離在獨(dú)立客戶端組件里、Tailwind 和 Motion 動(dòng)畫庫。規(guī)則本身不綁框架Vue、Svelte 項(xiàng)目同樣適用。落地與質(zhì)量交付前過一遍這張表技能包內(nèi)置了一份強(qiáng)制起飛前檢查任何一項(xiàng)沒過頁面就算沒做完檢查面核心要求布局Hero 首屏裝下標(biāo)題不超 2 行、CTA 不滾動(dòng)可見320px 到 1920px 斷點(diǎn)全部聲明移動(dòng)端折疊懸停、加載、空、錯(cuò)誤狀態(tài)齊全可訪問性按鈕與表單文字對(duì)比度達(dá) WCAG AA4.5:1Tab 鍵可訪問全部交互元素動(dòng)效支持 prefers-reduced-motion 降級(jí)為靜態(tài)性能LCP 2.5sINP 200msCLS 0.1動(dòng)畫只碰 transform 和 opacity交付前跑一遍 Lighthouse一致性一個(gè)強(qiáng)調(diào)色用到底、一套圓角規(guī)范、整頁單主題不許中間某個(gè)區(qū)塊突然反色全文零破折號(hào)等 AI 特征符號(hào)下一步Taste Skill 把設(shè)計(jì)判斷從 AI 的黑箱變成了可檢查、可覆蓋的規(guī)則。你的品味負(fù)責(zé)定調(diào)它負(fù)責(zé)讓 AI 穩(wěn)定執(zhí)行。想試試的話裝一個(gè)默認(rèn)的 taste-skill先讓它輸出那句設(shè)計(jì)判讀再?zèng)Q定要不要?jiǎng)哟a?！久赓M(fèi)下載鏈接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考