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