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你第 47 次看到那个紫色渐变按钮。Taste-Skill 就是冲着这个问题来的一套写给 AI 编码代理的设计规则包用反模板的配色与布局纪律让 AI 界面设计不再像出自同一条流水线。它是一组可移植的 Agent Skills每个 SKILL.md 都是一份编码代理会加载的设计规则手册解决的是 AI 配色和布局没品位、千篇一律的问题。 如何让它把 AI 界面配色从模板里拉出来它不是组件库也不是 CSS 预设而是一堆“禁令加约束”。核心 SKILL.md 有 14 个章节执行顺序是一条因果链读需求简报 → 定旋钮 → 选设计基础 → 逐条约束 → 交付前跑预检。如何阻止 AI 默认用紫色渐变问题出在训练数据模型生成页面时抄的是高频模式而最高频的恰好就是紫色渐变、Inter 字体和三张等宽卡片。于是最出名的规则是 Lila 规则默认不碰 AI 紫蓝光效要求中性底色Zinc/Slate/Stone加单一高对比强调色饱和度压在 80% 以下。禁令还有更细的米色加黄铜加暗红的“高端消费”配色因为生产测试里每个生成的厨具品牌都长一个颜色被禁止作为默认选项必须轮换冷奢、钴蓝加奶油这类备选。品牌本身就是紫色的也有放行通道但必须用一致的色板执行不能是随手一抹渐变。三个旋钮如何从需求简报推导动代码之前代理要先说出一行“Design Read”比如“面向技术买家的 B2B SaaS 落地页Linear 式极简”然后定三个旋钮DESIGN_VARIANCE: 6 // 布局1完美对称10艺术性混乱 MOTION_INTENSITY: 4 // 动画1静态10电影级 VISUAL_DENSITY: 3 // 密度1美术馆式留白10驾驶舱级密集旋钮不用你手调文件里有“信号到数值”的对照表说“极简/编辑风”落到 5-6/3-4/2-3说“agency/Awwwards”就升到 9-10/8-10营销落地页默认 7/6/4。另有按用例的预设创意机构 9/8/3、政府类站点 3/2/5改造项目则在现有站点的读数上加 2。全文的布局、动画、留白决策都受这三个数门控而且每个动画都要能用一句话说出“它在传达什么”说不出就删。交付前的最后一道闸预检清单规则不只说做什么还说怎么算失败。文件末尾是一份 60 多项的 Pre-Flight 清单配色一致性锁强调色一旦选定整页只用这一个暖灰页面不许在第 7 节突然长出蓝色 CTA、一套圆角体系、每个 CTA 过 WCAG AA 对比度、眉题小标签每 3 个 section 最多 1 个、页面破折号数量为零。破折号这条值得多说一句它最初被写成“少用”测试发现模型从来不听于是改成零容忍页面里出现任何一个—就直接判不过。任何一项不能如实勾选页面就算没做完。 最短安装路径与三个旋钮参数的含义npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill这条命令会扫描仓库的 skills/ 目录一次装好全部 14 个技能只装默认的前端技能就加--skill design-taste-frontend。不想走 CLI 的话把一个 SKILL.md 复制进项目、或直接粘进和 Codex、Claude 的对话里效果一样。真正需要理解的参数就是上面那三个旋钮生成的页面太稳就在对话里把 VARIANCE 和 MOTION 调高太挤就把 DENSITY 调低。不用改文件直接说代理会自己覆盖旋钮值。前后对比一个紫色渐变落地页的改造改造前同一份需求的默认输出深紫径向渐变 hero、Inter 标题、三张等宽特性卡片、角落的 BETA 标签、底部“Scroll to explore”提示。一眼就是 AI 做的。换上技能后代理先报 Design Read 再定旋钮产出长这样Reading: B2B SaaS landing, technical buyer, Linear-style 旋钮: VARIANCE 6 / MOTION 4 / DENSITY 3 强调色锁定: 单一电光蓝, 全页使用, 饱和度 80% Hero: 标题 2 行, 副文案 20 词, CTA 免滚动可见 预检: 逐项通过, 0 个破折号紫色渐变没了三卡片变成非对称布局CTA 对比度过 4.5:1。两个版本的差别不是“更好看”而是每个元素都能追溯到一条规则。常见踩坑版本锁定与范围外边界一个是版本锁定。默认技能已换成 v2experimental是一次大重写重跑安装命令会原地升级但安装名没变。如果你的工作流依赖 v1 的精确行为要显式指定design-taste-frontend-v1否则某天产出的风格会悄悄变化。两个版本的完整差异在 CHANGELOG.md。另一个是它会“拒活”。仪表盘、数据表、多步表单在第 13 节被明确列为范围外拿数据密集的管理后台去找它它不会开始写 CSS而是建议你转去用 Fluent、Carbon 或 Atlassian 这类官方设计系统。如果定位是“把数据后台做好看”选错工具了它的主场是落地页、作品集和营销页。它在工具链中的位置它不是运行时库不占一行 bundle而是坐在编码代理上面的一层指令Codex、Cursor、Claude Code 写前端代码时加载规则。要先生成视觉参考图的仓库里的 imagegen 系列技能可以先出图再交给编码代理落地改造存量项目则用 redesign 技能先审计再动手。看腻了同质化的 AI 界面配色去通读一遍 SKILL.md 的 14 个章节比读十篇博客更快。【免费下载链接】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），仅供参考 3 个旋钮调校 AI 界面设计：告别模板化配色的完整指南
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你第 47 次看到那个紫色渐变按钮。Taste-Skill 就是冲着这个问题来的一套写给 AI 编码代理的设计规则包用反模板的配色与布局纪律让 AI 界面设计不再像出自同一条流水线。它是一组可移植的 Agent Skills每个 SKILL.md 都是一份编码代理会加载的设计规则手册解决的是 AI 配色和布局没品位、千篇一律的问题。 如何让它把 AI 界面配色从模板里拉出来它不是组件库也不是 CSS 预设而是一堆“禁令加约束”。核心 SKILL.md 有 14 个章节执行顺序是一条因果链读需求简报 → 定旋钮 → 选设计基础 → 逐条约束 → 交付前跑预检。如何阻止 AI 默认用紫色渐变问题出在训练数据模型生成页面时抄的是高频模式而最高频的恰好就是紫色渐变、Inter 字体和三张等宽卡片。于是最出名的规则是 Lila 规则默认不碰 AI 紫蓝光效要求中性底色Zinc/Slate/Stone加单一高对比强调色饱和度压在 80% 以下。禁令还有更细的米色加黄铜加暗红的“高端消费”配色因为生产测试里每个生成的厨具品牌都长一个颜色被禁止作为默认选项必须轮换冷奢、钴蓝加奶油这类备选。品牌本身就是紫色的也有放行通道但必须用一致的色板执行不能是随手一抹渐变。三个旋钮如何从需求简报推导动代码之前代理要先说出一行“Design Read”比如“面向技术买家的 B2B SaaS 落地页Linear 式极简”然后定三个旋钮DESIGN_VARIANCE: 6 // 布局1完美对称10艺术性混乱 MOTION_INTENSITY: 4 // 动画1静态10电影级 VISUAL_DENSITY: 3 // 密度1美术馆式留白10驾驶舱级密集旋钮不用你手调文件里有“信号到数值”的对照表说“极简/编辑风”落到 5-6/3-4/2-3说“agency/Awwwards”就升到 9-10/8-10营销落地页默认 7/6/4。另有按用例的预设创意机构 9/8/3、政府类站点 3/2/5改造项目则在现有站点的读数上加 2。全文的布局、动画、留白决策都受这三个数门控而且每个动画都要能用一句话说出“它在传达什么”说不出就删。交付前的最后一道闸预检清单规则不只说做什么还说怎么算失败。文件末尾是一份 60 多项的 Pre-Flight 清单配色一致性锁强调色一旦选定整页只用这一个暖灰页面不许在第 7 节突然长出蓝色 CTA、一套圆角体系、每个 CTA 过 WCAG AA 对比度、眉题小标签每 3 个 section 最多 1 个、页面破折号数量为零。破折号这条值得多说一句它最初被写成“少用”测试发现模型从来不听于是改成零容忍页面里出现任何一个—就直接判不过。任何一项不能如实勾选页面就算没做完。 最短安装路径与三个旋钮参数的含义npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill这条命令会扫描仓库的 skills/ 目录一次装好全部 14 个技能只装默认的前端技能就加--skill design-taste-frontend。不想走 CLI 的话把一个 SKILL.md 复制进项目、或直接粘进和 Codex、Claude 的对话里效果一样。真正需要理解的参数就是上面那三个旋钮生成的页面太稳就在对话里把 VARIANCE 和 MOTION 调高太挤就把 DENSITY 调低。不用改文件直接说代理会自己覆盖旋钮值。前后对比一个紫色渐变落地页的改造改造前同一份需求的默认输出深紫径向渐变 hero、Inter 标题、三张等宽特性卡片、角落的 BETA 标签、底部“Scroll to explore”提示。一眼就是 AI 做的。换上技能后代理先报 Design Read 再定旋钮产出长这样Reading: B2B SaaS landing, technical buyer, Linear-style 旋钮: VARIANCE 6 / MOTION 4 / DENSITY 3 强调色锁定: 单一电光蓝, 全页使用, 饱和度 80% Hero: 标题 2 行, 副文案 20 词, CTA 免滚动可见 预检: 逐项通过, 0 个破折号紫色渐变没了三卡片变成非对称布局CTA 对比度过 4.5:1。两个版本的差别不是“更好看”而是每个元素都能追溯到一条规则。常见踩坑版本锁定与范围外边界一个是版本锁定。默认技能已换成 v2experimental是一次大重写重跑安装命令会原地升级但安装名没变。如果你的工作流依赖 v1 的精确行为要显式指定design-taste-frontend-v1否则某天产出的风格会悄悄变化。两个版本的完整差异在 CHANGELOG.md。另一个是它会“拒活”。仪表盘、数据表、多步表单在第 13 节被明确列为范围外拿数据密集的管理后台去找它它不会开始写 CSS而是建议你转去用 Fluent、Carbon 或 Atlassian 这类官方设计系统。如果定位是“把数据后台做好看”选错工具了它的主场是落地页、作品集和营销页。它在工具链中的位置它不是运行时库不占一行 bundle而是坐在编码代理上面的一层指令Codex、Cursor、Claude Code 写前端代码时加载规则。要先生成视觉参考图的仓库里的 imagegen 系列技能可以先出图再交给编码代理落地改造存量项目则用 redesign 技能先审计再动手。看腻了同质化的 AI 界面配色去通读一遍 SKILL.md 的 14 个章节比读十篇博客更快。【免费下载链接】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），仅供参考