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 界面设计的开源规则框架它把色彩理论、布局纪律与发布前检查写进技能文件让 AI 生成的官网不再千篇一律实现 AI 设计去模板化。本文写给刚用 AI 做界面的开发者与产品同学帮你搞懂它的核心色彩规则、完成安装并配好三个风格旋钮。它解决谁的痛点你应该遇到过这种体验让 AI 写个落地页开篇总是居中大标题、紫色渐变按钮、三张等宽卡片。根源在于模型默认复用训练数据里那套固定审美。Taste-Skill 的思路相反把负面规则写进技能文件明确列出哪些不许做、哪些必须做、发布前按什么标准过一遍。它的适用范围是落地页、官网、作品集和页面改造不覆盖后台管理与数据表格类界面。如果你的工作包含用 AI 产出营销页或产品 UI这个项目值得试。 写代码前先记住的三条色彩规则记住这三条能避开大部分AI 味配色问题。第一条是色彩一致性锁。页面选定一个强调色后整页只能用这一个色。暖灰色站点不会在第 7 节突然长出蓝色按钮页脚也不会冒出青色状态徽章。做法是项目一开始就定义完整色彩系统用 CSS 变量统一管理设计令牌给颜色值起名改一处、全站生效。第二条是 Lila 规则。AI 的默认产出几乎都是紫色或蓝色渐变项目明确禁止把它当默认选择基础色用 Zinc、Slate、Stone 这类中性色强调色只用一个高对比色翠绿、电蓝、深玫瑰饱和度压在 80% 以下。品牌确实要紫色也可以但必须锁死调色板渐变要克制。第三条是对比度标准。每个按钮的文字必须在其背景上清晰可读依据是 WCAG AA一套量化文字和背景亮度差的可访问性标准正文最小对比度 4.5:1大文本 3:1白底白字直接判不合格。行业研究也支持这套做法配色统一、对比充分的页面点击表现明显更好常被引用的数字是提升约 18%。三步装好 Taste-Skill这一节让你在 10 分钟内跑起来。先克隆仓库再用官方 CLI 装默认技能。也可以完全跳过 CLI把技能文件内容直接粘给 AI 对话用文件在仓库的 skills/taste-skill/SKILL.md。git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add ./taste-skill --skill design-taste-frontend仓库里共有 13 个技能各管一件事默认装 design-taste-frontendv2编辑风页面可以另装 minimalist-skill改造现有项目用 redesign-skill不必一次装全。装好后用三个 1 到 10 的旋钮控制风格旋钮范围控制什么适合场景DESIGN_VARIANCE1-10布局实验性1 完美对称10 不对称的艺术化排布MOTION_INTENSITY1-10动画深度1 纯静态10 滚动联动与物理效果VISUAL_DENSITY1-10单屏信息量1 留白画廊感10 高密度驾驶舱基准值是 8/6/4覆盖大多数营销站。不需要改文件在对话里直接覆盖即可。两类常见场景的旋钮配法给你两套参考配置思路比具体数字更有用。场景一SaaS 产品落地页。受众是看重信息密度的技术买家配 VARIANCE 5-6、MOTION 3-4、DENSITY 2-3。强调色用一种留白充足不做抢信息的实验性布局。场景二设计师作品集或创意机构站。配 VARIANCE 9、MOTION 8、DENSITY 3。布局可以不对称动画可以联动滚动。但色彩一致性锁和对比度检查照样生效实验性布局不豁免可访问性底线。避坑清单与自查方法这是你发布前要过一遍的清单项目里有一份逐项勾选的预检矩阵思路相同。先看高频坑紫色渐变、默认 Inter 字体、三等宽卡片、99.99%这类假数据、Hero 里塞版本号。项目把它们列为典型 AI 痕迹默认全部禁用。深色模式从第一天就同时设计选一种令牌策略Tailwind 的 dark: 变体或 CSS 变量并坚持到底别用纯黑 #000000 和纯白 #ffffff。:root { --surface: #f9fafb; --text-primary: #18181b; --accent: #059669; } [data-themedark] { --surface: #18181b; --text-primary: #f9fafb; }自查可以问四个问题强调色是否全页统一每个按钮是否通过 WCAG 对比度圆角体系直角/圆角/胶囊是否全站一致你写了 MOTION 7页面是否真的有动效任何一问答不上是就先别发布。从一页开始你的第一次 AI 设计去模板化下一步可以这样走挑一个你想做的落地页开工前先告诉 AI 三件事目标受众、气质关键词比如极简高端消费、打算用哪个官方设计系统。然后让它先给出一句设计判断和旋钮取值再开始写代码。完整规则在仓库的 skills/taste-skill/SKILL.md建议先读 4.2 色彩校准和第 14 节预检清单。下次让 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），仅供参考 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 界面设计的开源规则框架它把色彩理论、布局纪律与发布前检查写进技能文件让 AI 生成的官网不再千篇一律实现 AI 设计去模板化。本文写给刚用 AI 做界面的开发者与产品同学帮你搞懂它的核心色彩规则、完成安装并配好三个风格旋钮。它解决谁的痛点你应该遇到过这种体验让 AI 写个落地页开篇总是居中大标题、紫色渐变按钮、三张等宽卡片。根源在于模型默认复用训练数据里那套固定审美。Taste-Skill 的思路相反把负面规则写进技能文件明确列出哪些不许做、哪些必须做、发布前按什么标准过一遍。它的适用范围是落地页、官网、作品集和页面改造不覆盖后台管理与数据表格类界面。如果你的工作包含用 AI 产出营销页或产品 UI这个项目值得试。 写代码前先记住的三条色彩规则记住这三条能避开大部分AI 味配色问题。第一条是色彩一致性锁。页面选定一个强调色后整页只能用这一个色。暖灰色站点不会在第 7 节突然长出蓝色按钮页脚也不会冒出青色状态徽章。做法是项目一开始就定义完整色彩系统用 CSS 变量统一管理设计令牌给颜色值起名改一处、全站生效。第二条是 Lila 规则。AI 的默认产出几乎都是紫色或蓝色渐变项目明确禁止把它当默认选择基础色用 Zinc、Slate、Stone 这类中性色强调色只用一个高对比色翠绿、电蓝、深玫瑰饱和度压在 80% 以下。品牌确实要紫色也可以但必须锁死调色板渐变要克制。第三条是对比度标准。每个按钮的文字必须在其背景上清晰可读依据是 WCAG AA一套量化文字和背景亮度差的可访问性标准正文最小对比度 4.5:1大文本 3:1白底白字直接判不合格。行业研究也支持这套做法配色统一、对比充分的页面点击表现明显更好常被引用的数字是提升约 18%。三步装好 Taste-Skill这一节让你在 10 分钟内跑起来。先克隆仓库再用官方 CLI 装默认技能。也可以完全跳过 CLI把技能文件内容直接粘给 AI 对话用文件在仓库的 skills/taste-skill/SKILL.md。git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add ./taste-skill --skill design-taste-frontend仓库里共有 13 个技能各管一件事默认装 design-taste-frontendv2编辑风页面可以另装 minimalist-skill改造现有项目用 redesign-skill不必一次装全。装好后用三个 1 到 10 的旋钮控制风格旋钮范围控制什么适合场景DESIGN_VARIANCE1-10布局实验性1 完美对称10 不对称的艺术化排布MOTION_INTENSITY1-10动画深度1 纯静态10 滚动联动与物理效果VISUAL_DENSITY1-10单屏信息量1 留白画廊感10 高密度驾驶舱基准值是 8/6/4覆盖大多数营销站。不需要改文件在对话里直接覆盖即可。两类常见场景的旋钮配法给你两套参考配置思路比具体数字更有用。场景一SaaS 产品落地页。受众是看重信息密度的技术买家配 VARIANCE 5-6、MOTION 3-4、DENSITY 2-3。强调色用一种留白充足不做抢信息的实验性布局。场景二设计师作品集或创意机构站。配 VARIANCE 9、MOTION 8、DENSITY 3。布局可以不对称动画可以联动滚动。但色彩一致性锁和对比度检查照样生效实验性布局不豁免可访问性底线。避坑清单与自查方法这是你发布前要过一遍的清单项目里有一份逐项勾选的预检矩阵思路相同。先看高频坑紫色渐变、默认 Inter 字体、三等宽卡片、99.99%这类假数据、Hero 里塞版本号。项目把它们列为典型 AI 痕迹默认全部禁用。深色模式从第一天就同时设计选一种令牌策略Tailwind 的 dark: 变体或 CSS 变量并坚持到底别用纯黑 #000000 和纯白 #ffffff。:root { --surface: #f9fafb; --text-primary: #18181b; --accent: #059669; } [data-themedark] { --surface: #18181b; --text-primary: #f9fafb; }自查可以问四个问题强调色是否全页统一每个按钮是否通过 WCAG 对比度圆角体系直角/圆角/胶囊是否全站一致你写了 MOTION 7页面是否真的有动效任何一问答不上是就先别发布。从一页开始你的第一次 AI 设计去模板化下一步可以这样走挑一个你想做的落地页开工前先告诉 AI 三件事目标受众、气质关键词比如极简高端消费、打算用哪个官方设计系统。然后让它先给出一句设计判断和旋钮取值再开始写代码。完整规则在仓库的 skills/taste-skill/SKILL.md建议先读 4.2 色彩校准和第 14 节预检清单。下次让 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），仅供参考