Taste-Skill：让 AI 写出的前端页面告别模板味

Taste-Skill让 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 编程代理的反模板技能包把设计规则装进 Codex、Cursor、Claude Code 等工具里让它生成的落地页、作品集在布局、字体和动效上不再千篇一律。适合正在用 AI 搭建界面、或想把老项目改得更精致的人。两条命令装好先确认能用它没有构建步骤也不需要额外的包依赖——核心就是skills/目录下的一批SKILL.md指令文件代理能直接加载。git clone https://gitcode.com/GitHub_Trending/ta/taste-skill装完之后有三种用法按场景挑整仓放进代理环境让代理扫描skills/目录一次加载全部技能只装单个技能按SKILL.md头部 frontmatter 里的name:字段指定安装名注意不是文件夹名比如默认技能的安装名是design-taste-frontend最轻量的方式把某个SKILL.md直接复制进项目或粘贴进 ChatGPT / Codex 对话。一个容易踩的点默认的taste-skill目前已是 v2实验性重写版。如果你之前装过 v1重新跑一遍安装命令即可原地升级安装名没变脚本不用改。若你依赖 v1 的精确行为单独指定design-taste-frontend-v1锁定旧版本。按任务选技能别一次全开仓库里的技能分两类输出代码的实现技能和只出参考图的生图技能。每个技能只做一件事按需取用。实现类输出代码目录适合场景skills/taste-skill通用默认项先装它最稳skills/gpt-tasteskill想要更严格的版式与动效约束、更强反模板规则skills/redesign-skill已有项目先审查 UI再修布局、间距与层级skills/output-skill代理总爱交半成品、输出被截断时skills/minimalist-skill/skills/soft-skill/skills/brutalist-skill视觉方向已定极简、高级柔和、粗野工业三选一skills/stitch-skill需要兼容 Google Stitch 规则、导出DESIGN.md生图类只出图不出码imagegen-frontend-web网页构图、imagegen-frontend-mobile移动端屏幕与流程、brandkit品牌板Logo、配色、字体。搭配 ChatGPT Images 或同类生成器使用把出的图再交给编码代理落地。规则本身不绑定框架——它约束的是设计意图而非某个框架 API所以 React、Vue、Svelte 项目都能用。用三个拨盘微调版式、动效与密度默认技能在 v2 里的核心配置是三个 1–10 的拨盘位于SKILL.md顶部DESIGN_VARIANCE布局实验度。低值偏居中对齐的干净感高值偏不对称与更激进的现代布局MOTION_INTENSITY动效深度。从仅 hover 到滚动驱动、磁性交互VISUAL_DENSITY单屏信息量。低值是留白充裕高值接近仪表盘密度。基线值为8 / 6 / 4。想改成极简风可以压到5 / 3 / 2附近做代理公司的实验向落地页则推向9 / 8 / 3。覆盖默认值直接在对话里说一句即可不必手动改文件。v2 还加了先读需求的流程动手前会先推断页面类型、受众、气质词和已有品牌资产输出一行 Design Read例如这是一个面向技术买家的 B2B 落地页走 Linear 式极简再据此定拨盘。需求含糊时它会只问一个澄清问题而不是自己瞎猜。效果不达标时这样排查页面还是模板味换装更严格的gpt-tasteskillgpt-taste它布局方差更高、动效指令更硬也可以对照research/laziness/remediation/reference-prompts.md里的参考提示词调整你的请求方式。输出总被截断、交半成品叠加output-skill强制完整输出、禁止占位注释。老项目不好看但代码想保留别让它直接重画用redesign-skill先做 UI 审计再按审查结果修间距、层级与配色。生成过程卡、响应慢先只启用当前任务需要的单个技能减少指令负担参数层面的调优思路可看research/laziness/remediation/parameter-tuning.md若本地运行脚本有依赖问题核对 Node.js 版本后重新安装依赖再对照CHANGELOG.md确认版本变更。v2 行为不合预期按前面说的锁定design-taste-frontend-v1并到CHANGELOG.md里查 v1→v2 的具体差异。组合玩法从一张参考图到上线页面技能之间是流水线关系串起来能省很多来回沟通图 → 码一条龙用image-to-code-skillimage-to-code在提示词里写明流水线顺序例如follow the skill: generate images, then analyze, then code它会先生成网站参考图、再分析、最后实现前端手动分步版用imagegen-frontend-web或imagegen-frontend-mobile出构图brandkit出品牌板再把渲染结果丢给 Codex、Cursor 或 Claude Code 落地实现改造 精修redesign-skill先修结构再用soft-skill或minimalist-skill统一视觉语气贡献新技能在skills/下新建文件夹、按既有格式写一份SKILL.md描述功能与用法然后提交 PR 或 Issue 给维护者。仓库里还有这些值得翻skills/llms.txt面向 LLM 的技能索引喂给代理做全局加载很方便research/laziness/一套完整研究文档分root-causes/AI 产出平庸的成因、remediation/提示词与参数层面的对策和findings/实证结果想理解规则背后的理由可以按图索骥CHANGELOG.mdv1 到 v2 的完整差异与动机升级前扫一眼;LICENSEMIT 协议可自由商用与分发。下一步建议先只装taste-skill跑一个真实小页面确认 Design Read 和拨盘机制符合你的预期再按任务逐步引入redesign-skill、image-to-code-skill等专用技能——技能之间互不冲突但一次全开会让代理的指令负担变重。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考