出的前端頁(yè)面告別模板味)
Taste-Skill讓 AI 寫(xiě)出的前端頁(yè)面告別模板味【免費(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ì)規(guī)則裝進(jìn) Codex、Cursor、Claude Code 等工具里讓它生成的落地頁(yè)、作品集在布局、字體和動(dòng)效上不再千篇一律。適合正在用 AI 搭建界面、或想把老項(xiàng)目改得更精致的人。兩條命令裝好先確認(rèn)能用它沒(méi)有構(gòu)建步驟也不需要額外的包依賴(lài)——核心就是skills/目錄下的一批SKILL.md指令文件代理能直接加載。git clone https://gitcode.com/GitHub_Trending/ta/taste-skill裝完之后有三種用法按場(chǎng)景挑整倉(cāng)放進(jìn)代理環(huán)境讓代理掃描skills/目錄一次加載全部技能只裝單個(gè)技能按SKILL.md頭部 frontmatter 里的name:字段指定安裝名注意不是文件夾名比如默認(rèn)技能的安裝名是design-taste-frontend最輕量的方式把某個(gè)SKILL.md直接復(fù)制進(jìn)項(xiàng)目或粘貼進(jìn) ChatGPT / Codex 對(duì)話(huà)。一個(gè)容易踩的點(diǎn)默認(rèn)的taste-skill目前已是 v2實(shí)驗(yàn)性重寫(xiě)版。如果你之前裝過(guò) v1重新跑一遍安裝命令即可原地升級(jí)安裝名沒(méi)變腳本不用改。若你依賴(lài) v1 的精確行為單獨(dú)指定design-taste-frontend-v1鎖定舊版本。按任務(wù)選技能別一次全開(kāi)倉(cāng)庫(kù)里的技能分兩類(lèi)輸出代碼的實(shí)現(xiàn)技能和只出參考圖的生圖技能。每個(gè)技能只做一件事按需取用。實(shí)現(xiàn)類(lèi)輸出代碼目錄適合場(chǎng)景skills/taste-skill通用默認(rèn)項(xiàng)先裝它最穩(wěn)skills/gpt-tasteskill想要更嚴(yán)格的版式與動(dòng)效約束、更強(qiáng)反模板規(guī)則skills/redesign-skill已有項(xiàng)目先審查 UI再修布局、間距與層級(jí)skills/output-skill代理總愛(ài)交半成品、輸出被截?cái)鄷r(shí)skills/minimalist-skill/skills/soft-skill/skills/brutalist-skill視覺(jué)方向已定極簡(jiǎn)、高級(jí)柔和、粗野工業(yè)三選一skills/stitch-skill需要兼容 Google Stitch 規(guī)則、導(dǎo)出DESIGN.md生圖類(lèi)只出圖不出碼imagegen-frontend-web網(wǎng)頁(yè)構(gòu)圖、imagegen-frontend-mobile移動(dòng)端屏幕與流程、brandkit品牌板Logo、配色、字體。搭配 ChatGPT Images 或同類(lèi)生成器使用把出的圖再交給編碼代理落地。規(guī)則本身不綁定框架——它約束的是設(shè)計(jì)意圖而非某個(gè)框架 API所以 React、Vue、Svelte 項(xiàng)目都能用。用三個(gè)撥盤(pán)微調(diào)版式、動(dòng)效與密度默認(rèn)技能在 v2 里的核心配置是三個(gè) 1–10 的撥盤(pán)位于SKILL.md頂部DESIGN_VARIANCE布局實(shí)驗(yàn)度。低值偏居中對(duì)齊的干凈感高值偏不對(duì)稱(chēng)與更激進(jìn)的現(xiàn)代布局MOTION_INTENSITY動(dòng)效深度。從僅 hover 到滾動(dòng)驅(qū)動(dòng)、磁性交互VISUAL_DENSITY單屏信息量。低值是留白充裕高值接近儀表盤(pán)密度。基線(xiàn)值為8 / 6 / 4。想改成極簡(jiǎn)風(fēng)可以壓到5 / 3 / 2附近做代理公司的實(shí)驗(yàn)向落地頁(yè)則推向9 / 8 / 3。覆蓋默認(rèn)值直接在對(duì)話(huà)里說(shuō)一句即可不必手動(dòng)改文件。v2 還加了先讀需求的流程動(dòng)手前會(huì)先推斷頁(yè)面類(lèi)型、受眾、氣質(zhì)詞和已有品牌資產(chǎn)輸出一行 Design Read例如這是一個(gè)面向技術(shù)買(mǎi)家的 B2B 落地頁(yè)走 Linear 式極簡(jiǎn)再據(jù)此定撥盤(pán)。需求含糊時(shí)它會(huì)只問(wèn)一個(gè)澄清問(wèn)題而不是自己瞎猜。效果不達(dá)標(biāo)時(shí)這樣排查頁(yè)面還是模板味換裝更嚴(yán)格的gpt-tasteskillgpt-taste它布局方差更高、動(dòng)效指令更硬也可以對(duì)照research/laziness/remediation/reference-prompts.md里的參考提示詞調(diào)整你的請(qǐng)求方式。輸出總被截?cái)?、交半成品疊加output-skill強(qiáng)制完整輸出、禁止占位注釋。老項(xiàng)目不好看但代碼想保留別讓它直接重畫(huà)用redesign-skill先做 UI 審計(jì)再按審查結(jié)果修間距、層級(jí)與配色。生成過(guò)程卡、響應(yīng)慢先只啟用當(dāng)前任務(wù)需要的單個(gè)技能減少指令負(fù)擔(dān)參數(shù)層面的調(diào)優(yōu)思路可看research/laziness/remediation/parameter-tuning.md若本地運(yùn)行腳本有依賴(lài)問(wèn)題核對(duì) Node.js 版本后重新安裝依賴(lài)再對(duì)照CHANGELOG.md確認(rèn)版本變更。v2 行為不合預(yù)期按前面說(shuō)的鎖定design-taste-frontend-v1并到CHANGELOG.md里查 v1→v2 的具體差異。組合玩法從一張參考圖到上線(xiàn)頁(yè)面技能之間是流水線(xiàn)關(guān)系串起來(lái)能省很多來(lái)回溝通圖 → 碼一條龍用image-to-code-skillimage-to-code在提示詞里寫(xiě)明流水線(xiàn)順序例如follow the skill: generate images, then analyze, then code它會(huì)先生成網(wǎng)站參考圖、再分析、最后實(shí)現(xiàn)前端手動(dòng)分步版用imagegen-frontend-web或imagegen-frontend-mobile出構(gòu)圖brandkit出品牌板再把渲染結(jié)果丟給 Codex、Cursor 或 Claude Code 落地實(shí)現(xiàn)改造 精修r(nóng)edesign-skill先修結(jié)構(gòu)再用soft-skill或minimalist-skill統(tǒng)一視覺(jué)語(yǔ)氣貢獻(xiàn)新技能在skills/下新建文件夾、按既有格式寫(xiě)一份SKILL.md描述功能與用法然后提交 PR 或 Issue 給維護(hù)者。倉(cāng)庫(kù)里還有這些值得翻skills/llms.txt面向 LLM 的技能索引喂給代理做全局加載很方便research/laziness/一套完整研究文檔分root-causes/AI 產(chǎn)出平庸的成因、remediation/提示詞與參數(shù)層面的對(duì)策和findings/實(shí)證結(jié)果想理解規(guī)則背后的理由可以按圖索驥CHANGELOG.mdv1 到 v2 的完整差異與動(dòng)機(jī)升級(jí)前掃一眼;LICENSEMIT 協(xié)議可自由商用與分發(fā)。下一步建議先只裝taste-skill跑一個(gè)真實(shí)小頁(yè)面確認(rèn) Design Read 和撥盤(pán)機(jī)制符合你的預(yù)期再按任務(wù)逐步引入redesign-skill、image-to-code-skill等專(zhuān)用技能——技能之間互不沖突但一次全開(kāi)會(huì)讓代理的指令負(fù)擔(dān)變重?!久赓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),僅供參考