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