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-skill
Taste-Skill 是一套面向 AI 编码代理的前端设计技能包，通过可移植的 SKILL.md 指令文件，纠正 AI 生成网页时的模板化倾向。它不引入任何依赖，也不改动你的框架，只把一套经过实测的审美规则注入给 Codex、Cursor、Claude 这类 Agent。装好之后，AI 写出的落地页在布局、字体、动效和间距上会明显更接近专业设计，而不是千篇一律的"AI 脸"。
📜 它不是框架，而是一份"反 AI 味"规则手册
很多人会以为它是组件库或设计框架，其实它只是一组指令文件：每个技能就是一个 SKILL.md，由编码代理在干活时自动加载。仓库的skills/目录下共有 13 个，分两类：实现类技能直接产出前端代码，出图类技能只产设计参考图。规则针对的是"设计意图"而不是某个框架 API，所以 React、Vue、Svelte 项目里表现一致。
🚫 它具体封杀了哪些"AI 脸"
规则的价值在于具体。SKILL.md 里有一整章专门封杀 AI 的默认审美，举几条典型：
| 维度 | AI 默认输出 | Taste-Skill 的规则 |
|---|---|---|
| 布局 | 居中 Hero + 三张等高卡片 | 变化度大于 4 时禁止居中 Hero；三列等宽卡片直接封杀，同一版式全页最多用一次 |
| 色彩 | 紫蓝渐变发光 | 最多一种强调色，饱和度低于 80%，全页颜色锁定 |
| 字体 | 默认 Inter + 随手加衬线 | Inter 不作默认，衬线仅限编辑、奢侈类简报 |
| 动效 | 到处无限循环动画 | 只允许动 transform 和 opacity，动效等级大于 3 必须支持"减弱动态"偏好 |
| 细节 | 破折号、装饰圆点、Scroll 提示 | 破折号全面禁用，装饰性圆点默认零容忍 |
每条规则背后都对应一份"Pre-Flight Check"清单，代理在交付代码前要逐项过一遍，任何一项不过关就不算完成。
🎛️ 如何调节三个 1-10 设计参数
taste-skill 提供三个旋钮，决定页面气质，默认值是 8 / 6 / 4。不需要改文件，代理会根据你的需求简报自动推断取值，你也可以直接在对话里改：
| 参数 | 1-3 | 4-7 | 8-10 |
|---|---|---|---|
| DESIGN_VARIANCE 布局变化 | 对称 12 列网格、居中对齐 | 元素重叠、图片比例混搭 | 瀑布流、2fr 1fr 1fr 非对称网格 |
| MOTION_INTENSITY 动效强度 | 仅悬停和按压状态 | 0.3 秒过渡、级联延迟入场 | 滚动触发显现、视差 |
| VISUAL_DENSITY 视觉密度 | 画廊级大留白 | 标准 Web 应用间距 | 1px 线分隔数据、数字一律等宽字体 |
推断映射也写在技能里：简报说"极简、安静"，旋钮落在 5-6 / 3-4 / 2-3 区间；说"实验、炸场"，直接推到 9-10 / 8-10。
🧩 13 个技能，按场景各取所需
不必全装，每个技能只干一件事，常用场景快速对照：
| 场景 | 安装名 | 产出 |
|---|---|---|
| 通用落地页、作品集 | design-taste-frontend | 前端代码 |
| 给 GPT / Codex 的更严变体 | gpt-taste | 前端代码 |
| 参考图驱动开发 | image-to-code | 参考图 + 代码 |
| 旧站改造 | redesign-existing-projects | UI 审计 + 代码 |
| 只要设计图不要代码 | imagegen-frontend-web / mobile | 设计参考图 |
风格定向类（soft、minimalist、brutalist）、防输出截断的 output-skill、品牌板 brandkit 同样按需安装。规则并非拍脑袋，背后的研究笔记放在 research/ 目录。
📦 三步安装，两种用法
第一步，克隆仓库：
git clone https://gitcode.com/GitHub_Trending/ta/taste-skill
第二步，运行npx skills add加上仓库地址即可一次装齐；只想装某一个，就补上--skill "安装名"，例如--skill "design-taste-frontend"。
第三步是零安装用法：把任意一个 SKILL.md 复制进项目，或直接粘进 ChatGPT、Codex 的对话，规则即刻生效。
Taste-Skill 把设计品味变成了一份 AI 能执行、也能自查的规则书。下次让 AI 写页面之前，先装一个试试。
【免费下载链接】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），仅供参考
)
