Taste-Skill：3 个参数调出高级感，免费给 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 帮你写个官网，结果大概率是这套组合拳：紫蓝渐变的标题、中间一排三张等大卡片、深色背景加毛玻璃、Inter 字体配深灰。这些"LLM 默认审美"已经被大模型用滥了。Taste-Skill 是一个免费开源的 Agent Skills 工具包，专门治这个病——它不改你的框架代码，而是在提示词层面给 AI 立规矩，把布局、字体、配色、动效拉回专业水准，阻止"AI 生成 UI 一眼假"的模板感。
先对号入座：AI 生成 UI 的 5 个经典翻车姿势
如果你最近用过 AI 做前端，下面这几条估计条条命中：
- 首屏永远居中，左右两个按钮雷打不动
- 三张等宽 feature 卡片横排，谁都不敢多写一张
- "AI 紫"渐变标题 + 深色 mesh 背景
- 玻璃拟态糊在每一个组件上，包括本来不需要它的地方
- 字号没阶梯，H2 和正文差点一个粗
这不是模型不够聪明，而是它偷懒走默认值。Taste-Skill 的思路很直接：把反套路的规则写成技能文件，让 AI 在动手前先"读懂需求"，再决定用什么设计语言。它的默认技能甚至内置了一份"禁止清单"：默认紫渐变、默认三卡片、默认 Inter+slate-900，一个都不许用。
装好只要一步：一条命令把 13 个技能模块搬进项目
本地没有克隆过的话，先拉一份仓库：
git clone https://gitcode.com/gh_mirrors/ta/taste-skill然后安装全部技能（代码类 + 图像类都走同一条路）：
npx skills add https://github.com/Leonxlnx/taste-skill不想全装？加一个--skill参数按名字挑。比如只要默认的主力技能：--skill "design-taste-frontend"。这些技能的本质是 SKILL.md——一个可移植的指令文件，Codex、Cursor、Claude Code 这类 Agent 能自动加载；嫌麻烦也可以直接复制进项目，或者整段贴进 ChatGPT 的对话框里用，不挑工具。
参数怎么调出高级感：VARIANCE / MOTION / DENSITY 三旋钮
主力技能把风格压缩成 3 个 1-10 的旋钮，改数字就能换气质：
| 旋钮 | 管什么 | 拉低的效果 | 拉高的效果 |
|---|---|---|---|
| DESIGN_VARIANCE | 布局实验度 | 居中、对称、规整 | 打破对称、分数网格、非对称留白 |
| MOTION_INTENSITY | 动效深度 | 只有 hover 反馈，页面基本静止 | 滚动驱动、GSAP 编排、视差 |
| VISUAL_DENSITY | 一屏塞多少信息 | 画廊式大留白，高级且克制 | 驾驶舱式高密度，1px 线条分隔数据 |
默认值是8 / 6 / 4，官方已经调校过的均衡点。按场景换预设更省事：做 Linear 式极简产品页，三值往 5/3/2 附近压；做创意机构官网，动效和变化度直接拉到 8-10；改版老项目则"跟随现有风格，动效 +1"，不强行翻新。这些数值不用改文件，对话里说一声就行。
挑哪个技能：13 个模块按场景对号入座
技能分两类：代码类吐前端代码，图像类只吐设计参考图，不用全装，按活儿挑人。
代码类（出代码）
| 场景 | 选它 |
|---|---|
| 通用默认，最稳 | taste-skill（现为 v2 实验版） |
| 主要用 GPT / Codex，要更狠的反套路 | gpt-taste |
| 手里有设计图，要照着实现 | image-to-code |
| 老项目救场：先审计 UI 再修 | redesign-existing-projects |
| AI 老是写一半、留 TODO 占位符 | full-output-enforcement |
| 视觉方向已定：高奢 / 极简 / 粗野风 | high-end-visual-design / minimalist-ui / industrial-brutalist-ui |
图像类（只出图）：imagegen-frontend-web 出网站整页参考图（首屏、着陆页、多区块），imagegen-frontend-mobile 出 iOS / Android 界面流，brandkit 出品牌板（Logo 方向、色板、字体、应用示例）。
推荐链路是"先图后码"：图像技能先出参考稿 → 喂给编码 Agent 分析 → 用 image-to-code 落地成代码。提示词里把管线说死一句即可，例如：follow the skill: generate images, then analyze, then code。
成品长什么样：一张 Floria 官网说明问题
上面首屏截图来自 Taste-Skill 生成的示例站 Floria——左文右图、不等宽的网格、克制的配色、有阶梯的字号。它没有堆渐变和卡片墙，但一眼就能看出"经过设计"。
想自己跑一遍：装好 taste-skill，给 Agent 一句"给 XX 产品做一个落地页"，看它先输出一行"设计解读"再动手——这就是技能生效的标志。
新手最关心的 3 个问题
SKILL.md 到底是什么？一份给 Agent 读的结构化指令，规定它"该怎么设计"。安装到仓库、复制进项目、贴进对话，三种用法等价。
换框架就没用了吗？不会。规则约束的是设计意图（留白、层级、动效节奏），不是某个框架的 API，React、Vue、Svelte 通吃，也通吃 Codex、Cursor、Claude Code 这些 Agent。
图像技能也要单独装吗？不用，它们和代码技能同在 skills/ 目录下，同一条安装命令就能发现。
还在为 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），仅供参考
