Taste-Skill: 3个参数调出AI前端设计品味，新手3分钟上手指南
【免费下载链接】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写个落地页，它交回来紫色渐变背景加三张居中卡片。AI界面生成快是快，就是张张脸熟。Taste-Skill 专治这个：一组给 AI 编程助手装的前端设计技能，让页面有布局、有排版、有节奏，AI前端设计不再靠运气。
3分钟跑通第一次：装好默认技能，丢一段话给它
仓库里不是组件库，是一堆 SKILL.md 指令文件。助手读到它，就会按设计规则干活。实现类技能和图像生成技能用同一条命令安装，Codex、Cursor、Claude Code 这些主流编码代理都兼容。
# 全量安装：所有实现类 + 图像生成技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 只装默认技能（安装名来自 SKILL.md 的 name 字段，不是文件夹名） npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "design-taste-frontend"用法更简单。装好后，在对话里说清楚做什么、参数给多少就行：
按设计技能做一个 SaaS 落地页： DESIGN_VARIANCE 8，MOTION_INTENSITY 6，VISUAL_DENSITY 4。 主色深绿，读者是技术负责人。两个提醒。默认技能现在是 v2 实验版，要旧版行为就用安装名design-taste-frontend-v1。另外 SKILL.md 是纯文本，不想装也可以直接贴进对话。更多说明见 README.md。
三个关键参数怎么拨：骨架、动静、信息量
技能文件顶部有三个旋钮，取值都是 1 到 10。出厂默认是 8 / 6 / 4。助手也会根据你的需求从预设矩阵里推推荐值，不用背档位，记住方向就行。
DESIGN_VARIANCE（布局变化度）：管页面敢不敢"离开中线"。类比拍照构图。拧低是证件照，人人对称居中；拧高是街拍，斜切构图、大块留白、错落排布。默认 8 意味着首屏基本不会居中。
MOTION_INTENSITY（动效强度）：像调视频的"动感程度"。低档是静帧，最多 hover 变色；中档是滚动进场、0.3 到 0.6 秒的过渡；高档是滚动联动和物理感动画。技能里有条铁律：声称有动效就必须真有动画，做不到就降档，不许虚报。
VISUAL_DENSITY（视觉密度）：一屏摆多少道"菜"。低档是画廊，一道菜占一屏，留白管够；高档是驾驶舱，能塞都塞，适合数据密集的仪表盘。普通落地页放在 3 到 5，呼吸感刚好。
三个值直接在对话里报数即可，不用改文件。
为你的项目挑对技能模块：按场景选装
仓库里有 10 个实现类技能和 3 个图像生成技能。不需要全装，按场景各取所需。
- 从零建站。SaaS 落地页、作品集，用默认 taste-skill。它先读你的需求、定风格，再调参数。走 GPT/Codex 工作流可选 gpt-tasteskill，布局变化和动效的规矩更严。
- 老站翻新。用 redesign-skill。先审计现有 UI，再修布局、间距和层级。URL 结构、表单字段名这类东西不会悄悄改。
- 高端品牌。用 soft-skill。对比更柔、留白更多、字体更讲究、弹簧式动效。想要反方向的实验风，选 brutalist-skill，瑞士字体加锐利对比。
- 极简工具。Notion/Linear 那种调子，用 minimalist-skill。编辑感排版，配色克制。
- 设计稿转代码。先用 imagegen-frontend-web 出设计稿，再交给 image-to-code-skill，走"出图→分析→写代码"三步。注意图像类技能（含移动端、brandkit）只出图，不写代码。
| 你的处境 | 装哪个 | 它替你做了什么 |
|---|---|---|
| 从零做一个落地页 | taste-skill | 读需求、定风格、调参数一条龙 |
| 老站翻新 | redesign-skill | 先审计后动刀，URL 和字段名不动 |
| 高端品牌感 | soft-skill | 柔对比、大留白、弹簧式动效 |
| Notion 式极简 | minimalist-skill | 编辑感排版、克制配色 |
| 设计稿转代码 | image-to-code | 出图、分析、写代码三步走 |
它怎么避开"AI味"：5条可以逐条检查的硬规则
技能不是一堆软建议，而是带量化标准的硬规则。页面出来后，你可以逐条对照：
- 色彩：强调色最多 1 种，饱和度低于 80%。AI 招牌的紫蓝发光被点名禁止。强调色一旦选定，全页锁定，不许第 7 个区块换颜色。
- 布局：变化度大于 4 时，首屏不许居中，强制左右分屏或不对称留白。同一种布局家族全页最多出现一次。
- 卡片：只有表达层级时才配用卡片，否则用顶部分隔线或留白代替。密度超过 7 时，通用卡片容器直接禁用。
- 排版：Inter 不当默认字体。"有创意就上衬线体"的条件反射同样被禁。强调词语用同字体族的粗体或斜体。
- 细节：eyebrow（标题上方那行小号大写字母标签）每 3 个区块最多 1 个。按钮文字和背景对比度必须达到 4.5:1。首屏标题不超 2 行，副文案不超 20 词。
这些规则背后有一整套研究支撑。仓库的 research/ 目录记录了完整笔记，比如大模型为什么偏爱产出模板页。
前后对比：重构前后的数据
某企业 SaaS 平台用这套技能重构界面，核心数据如下：
| 指标 | 重构前 | 重构后 |
|---|---|---|
| 页面加载 | 3.2 秒 | 1.8 秒 |
| 首次内容绘制 | 2.1 秒 | 1.2 秒 |
| 设计一致性 | 65% | 94% |
页面加载 3.2 秒降到 1.8 秒。
电商侧的样本：购物车页改成左右分栏，加购按钮配上微动画，再修掉对比度问题。购物车转化率从 3.2% 升到 4.7%。
常见翻车点：结果还是模板脸怎么办
- **先查参数是否说清楚了。**默认 8 / 6 / 4 不算差，但想要更强的节奏感，直接报"变化度 9、密度 3"一句话，比写一段形容词有效。
- **先调 DESIGN_VARIANCE。**布局是骨架，骨架站住了，密度和动效才有意义。骨架还是居中的时候先加动效，再怎么动也像模板。
- 助手老交半成品代码，装 output-skill。它强制完整输出，禁止用占位注释糊弄。
- **v2 是实验版。**工作流里哪个环节不对劲，就钉住 v1：
--skill "design-taste-frontend-v1"。安装名不变，重装即升级。 - **别跳过需求描述。**技能要求助手先用一句话报"我怎么读这个需求"，需求真模糊时它只问一个问题。所以别只丢一句"做得好看点"。
Taste-Skill 的实质，是把"好品味"拆成可执行的参数和能逐条打勾的硬规则，让 AI 界面生成可以调控，而不是碰运气。今天就动手：装一次design-taste-frontend，给你手上的页面重新生成一版，对照上面 5 条硬规则，看看 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），仅供参考
