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