3 个旋钮驯服 AI 审美Taste-Skill 反平庸前端设计完整指南【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillAI 写的前端代码越来越能跑界面却越来越像同一副模板。Taste-Skill 是开源的反平庸前端设计框架Agent Skills 集合它不替你写代码而是把设计决策拆解成可调参数与硬性检查项让 Codex、Cursor、Claude Code 生成的落地页、作品集、重设计项目摆脱一眼假的模板感。AI 前端设计为什么总是一眼假痛点不在代码能力而在审美默认值。大模型写 UI 时会直接滑向一组默认审美紫色渐变、深色背景上的居中 hero、三张等宽特性卡片、到处糊玻璃拟态、Inter 配 slate-900。再叠加占位文案和 div 拼的假产品截图模板感就成型了。Taste-Skill 的解法是把品味工程化先读需求、再调参数、选对设计系统、最后过一张硬性检查清单。整套规则以可移植的SKILL.md文件分发跨编码 Agent 通用规则针对设计意图而非某套框架 API。先读需求Design Read 推理机制结论生成任何代码之前Agent 必须先输出一行设计读再动手。技能的第一阶段叫 BRIEF INFERENCE。Agent 从 6 类信号源判断用户到底要什么再压缩成一行判断例如Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind Geist restrained motion. 后续所有布局、动效、密度决策都锚定这一行。信号源作用页面类型落地页、作品集、重设计、编辑型内容各对应不同设计语言气质词用户说的极简Awwwardsbrutalist等词直接映射参数区间参考信号贴的截图、点名的产品与竞品品牌受众受众决定审美而不是模型的口味既有品牌资产重设计时是起点材料不是可选项隐性约束可访问性、公共部门、受监管行业优先级高于一切审美偏好需求有歧义时只允许追问一个问题禁止多问题轰炸更禁止靠猜。同时有一条反默认纪律除非需求明确指向否则主动避开 LLM 默认审美组合。设计参数怎么调3 个 1-10 旋钮设计读定方向后Taste-Skill 用三个 1-10 的旋钮锁定整体气质写在技能文件顶部DESIGN_VARIANCE: 8 # 1 完全对称 - 10 艺术化非对称 MOTION_INTENSITY: 6 # 1 纯 hover 状态 - 10 电影级物理动效 VISUAL_DENSITY: 4 # 1 画廊式大留白 - 10 驾驶舱式高密度每个旋钮都有明确的分档定义VARIANCE 在 1-3 档用 12 列对称网格8-10 档用错位网格和2fr 1fr 1fr这类分数轨道且中高值布局在窄屏必须塌回单列MOTION 在 4-7 档只碰transform和opacity8-10 档才允许滚动叙事与视差DENSITY 在 8-10 档要求所有数字用等宽字体、卡片让位 1px 分隔线。按气质词查表直接得到推荐区间气质信号VARIANCEMOTIONDENSITY极简、干净、Linear 风5-63-42-3高端品牌感、Apple 风7-85-73-4实验性、Awwwards 风9-108-103-4信任优先、公共部门3-42-34-5重设计保留品牌对齐现状现状 1对齐现状这三个值就是全局变量文档内所有规则引用变量名不造别名。改参数不需要改文件在对话里直接覆盖即可。完整参数定义见 skills/taste-skill/SKILL.md。设计系统怎么选官方包与近似实现结论需求指向官方设计系统就装官方包别手搓需求是美学方向就自建并诚实标注。映射表把需求直接落到具体包Microsoft 生态上 Fluent UIGoogle 风格上material/web加 Material 3 tokensIBM 式企业分析上 CarbonGitHub 风格开发者页面上 PrimerShopify 管理界面必须 Polaris现代 SaaS 自持组件则用 shadcn/ui 或 Tailwind v4。硬性规则一个项目只用一个系统不允许把 Fluent 和 Carbon 混进同一棵树也不允许只抄别人的 tokens 再覆盖 90%。玻璃拟态、Bento 网格、粗野主义、杂志风这类方向没有官方包用原生 CSS 加组件库实现并在代码注释里写清楚哪些是借鉴、哪些是官方。例如玻璃态用backdrop-filter加分层边框近似同时给prefers-reduced-transparency用户留纯色回退。反 AI 味规则与验收检查清单Taste-Skill 的 AI Tells 部分是从真实落地页测试里归纳的一眼假信号清单全部是硬性禁令被禁信号说明版本号 eyebrowhero 里的 V0.6、BETA、EARLY ACCESS默认禁止分节编号001 / INDEX、Stage 1 这类装饰性编号装饰性中点与状态小圆点每行一个·当默认分隔符、每行列表前置彩色圆点div 拼的假产品 UI假终端、假任务列表、假仪表盘是最重的 AI 味来源hero 底部装饰文字条、滚动提示Scroll to explore、品牌词滚动带默认禁em-dash—生产测试中违反率最高的 Tell零容忍最后一行最严格页面任何可见位置出现一个 em-dash就算 Pre-Flight Check 直接失败必须重写。规则不给少用的余地因为历史经验是模型会无视适量使用的措辞。交付前的验收检查清单响应式320px 到 1920px 全断点检查非对称布局窄屏必须塌回单列视觉层级优先级靠尺寸、颜色、间距传达而不是装饰元素交互状态hover、focus、active、disabled 齐全暗色模式消费级页面默认双模式两种模式都过一遍才算完成动效降级prefers-reduced-motion有静态替代性能护栏只动画transform与opacity禁止裸window.addEventListener(scroll)Tells 扫描对照清单逐项过em-dash 计数必须为零任何一条不过重写对应部分再交付。快速上手路径与技能矩阵一条命令安装代码技能与图像技能共用同一条 CLInpx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill也可以只装单个技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend懒办法是把任意SKILL.md拷进项目或直接贴进 ChatGPT、Codex 对话。旧版 v1 与 v2 并存重跑安装即原地升级脚本不用动。技能矩阵按用途分工实现类产出代码图像类只产出参考图技能安装名适用场景taste-skilldesign-taste-frontend默认起点v2 重写版taste-skill-v1design-taste-frontend-v1依赖 v1 精确行为的存量项目redesign-skillredesign-existing-projects先审计再修复存量界面image-to-code-skillimage-to-code生成参考图、分析、实现一条龙imagegen 系列imagegen-frontend-web / mobile / brandkit只出参考图网页、移动端、品牌板soft / minimalist / brutalisthigh-end-visual-design 等视觉方向已定的风格变体output-skillfull-output-enforcement模型爱交半成品时强制完整输出两条典型路径先出图再写码用 imagegen 系列产出概念图与团队对齐确认方向后把渲染图交给编码 Agent 落地或者直接写码配 output-skill 防止截断与占位注释。总结Taste-Skill 把好看从玄学拆成了工程问题Design Read 定方向三个旋钮管布局、动效与密度设计系统映射表防重复造轮子AI Tells 清单加 Pre-Flight 做最后闸门形成完整的验收闭环。它适合新建落地页与作品集、重设计存量项目、先出概念图再写代码、以及需要并行对比多种风格方向的所有场景。MIT 开源、基于 Agent Skills 标准跨 Agent 可移植仓库research/目录还内置了关于模型为何偷懒、输出为何截断的专项调研是这套反平庸机制的实证底座。【免费下载链接】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 审美：Taste-Skill 反平庸前端设计完整指南
3 个旋钮驯服 AI 审美Taste-Skill 反平庸前端设计完整指南【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillAI 写的前端代码越来越能跑界面却越来越像同一副模板。Taste-Skill 是开源的反平庸前端设计框架Agent Skills 集合它不替你写代码而是把设计决策拆解成可调参数与硬性检查项让 Codex、Cursor、Claude Code 生成的落地页、作品集、重设计项目摆脱一眼假的模板感。AI 前端设计为什么总是一眼假痛点不在代码能力而在审美默认值。大模型写 UI 时会直接滑向一组默认审美紫色渐变、深色背景上的居中 hero、三张等宽特性卡片、到处糊玻璃拟态、Inter 配 slate-900。再叠加占位文案和 div 拼的假产品截图模板感就成型了。Taste-Skill 的解法是把品味工程化先读需求、再调参数、选对设计系统、最后过一张硬性检查清单。整套规则以可移植的SKILL.md文件分发跨编码 Agent 通用规则针对设计意图而非某套框架 API。先读需求Design Read 推理机制结论生成任何代码之前Agent 必须先输出一行设计读再动手。技能的第一阶段叫 BRIEF INFERENCE。Agent 从 6 类信号源判断用户到底要什么再压缩成一行判断例如Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind Geist restrained motion. 后续所有布局、动效、密度决策都锚定这一行。信号源作用页面类型落地页、作品集、重设计、编辑型内容各对应不同设计语言气质词用户说的极简Awwwardsbrutalist等词直接映射参数区间参考信号贴的截图、点名的产品与竞品品牌受众受众决定审美而不是模型的口味既有品牌资产重设计时是起点材料不是可选项隐性约束可访问性、公共部门、受监管行业优先级高于一切审美偏好需求有歧义时只允许追问一个问题禁止多问题轰炸更禁止靠猜。同时有一条反默认纪律除非需求明确指向否则主动避开 LLM 默认审美组合。设计参数怎么调3 个 1-10 旋钮设计读定方向后Taste-Skill 用三个 1-10 的旋钮锁定整体气质写在技能文件顶部DESIGN_VARIANCE: 8 # 1 完全对称 - 10 艺术化非对称 MOTION_INTENSITY: 6 # 1 纯 hover 状态 - 10 电影级物理动效 VISUAL_DENSITY: 4 # 1 画廊式大留白 - 10 驾驶舱式高密度每个旋钮都有明确的分档定义VARIANCE 在 1-3 档用 12 列对称网格8-10 档用错位网格和2fr 1fr 1fr这类分数轨道且中高值布局在窄屏必须塌回单列MOTION 在 4-7 档只碰transform和opacity8-10 档才允许滚动叙事与视差DENSITY 在 8-10 档要求所有数字用等宽字体、卡片让位 1px 分隔线。按气质词查表直接得到推荐区间气质信号VARIANCEMOTIONDENSITY极简、干净、Linear 风5-63-42-3高端品牌感、Apple 风7-85-73-4实验性、Awwwards 风9-108-103-4信任优先、公共部门3-42-34-5重设计保留品牌对齐现状现状 1对齐现状这三个值就是全局变量文档内所有规则引用变量名不造别名。改参数不需要改文件在对话里直接覆盖即可。完整参数定义见 skills/taste-skill/SKILL.md。设计系统怎么选官方包与近似实现结论需求指向官方设计系统就装官方包别手搓需求是美学方向就自建并诚实标注。映射表把需求直接落到具体包Microsoft 生态上 Fluent UIGoogle 风格上material/web加 Material 3 tokensIBM 式企业分析上 CarbonGitHub 风格开发者页面上 PrimerShopify 管理界面必须 Polaris现代 SaaS 自持组件则用 shadcn/ui 或 Tailwind v4。硬性规则一个项目只用一个系统不允许把 Fluent 和 Carbon 混进同一棵树也不允许只抄别人的 tokens 再覆盖 90%。玻璃拟态、Bento 网格、粗野主义、杂志风这类方向没有官方包用原生 CSS 加组件库实现并在代码注释里写清楚哪些是借鉴、哪些是官方。例如玻璃态用backdrop-filter加分层边框近似同时给prefers-reduced-transparency用户留纯色回退。反 AI 味规则与验收检查清单Taste-Skill 的 AI Tells 部分是从真实落地页测试里归纳的一眼假信号清单全部是硬性禁令被禁信号说明版本号 eyebrowhero 里的 V0.6、BETA、EARLY ACCESS默认禁止分节编号001 / INDEX、Stage 1 这类装饰性编号装饰性中点与状态小圆点每行一个·当默认分隔符、每行列表前置彩色圆点div 拼的假产品 UI假终端、假任务列表、假仪表盘是最重的 AI 味来源hero 底部装饰文字条、滚动提示Scroll to explore、品牌词滚动带默认禁em-dash—生产测试中违反率最高的 Tell零容忍最后一行最严格页面任何可见位置出现一个 em-dash就算 Pre-Flight Check 直接失败必须重写。规则不给少用的余地因为历史经验是模型会无视适量使用的措辞。交付前的验收检查清单响应式320px 到 1920px 全断点检查非对称布局窄屏必须塌回单列视觉层级优先级靠尺寸、颜色、间距传达而不是装饰元素交互状态hover、focus、active、disabled 齐全暗色模式消费级页面默认双模式两种模式都过一遍才算完成动效降级prefers-reduced-motion有静态替代性能护栏只动画transform与opacity禁止裸window.addEventListener(scroll)Tells 扫描对照清单逐项过em-dash 计数必须为零任何一条不过重写对应部分再交付。快速上手路径与技能矩阵一条命令安装代码技能与图像技能共用同一条 CLInpx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill也可以只装单个技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend懒办法是把任意SKILL.md拷进项目或直接贴进 ChatGPT、Codex 对话。旧版 v1 与 v2 并存重跑安装即原地升级脚本不用动。技能矩阵按用途分工实现类产出代码图像类只产出参考图技能安装名适用场景taste-skilldesign-taste-frontend默认起点v2 重写版taste-skill-v1design-taste-frontend-v1依赖 v1 精确行为的存量项目redesign-skillredesign-existing-projects先审计再修复存量界面image-to-code-skillimage-to-code生成参考图、分析、实现一条龙imagegen 系列imagegen-frontend-web / mobile / brandkit只出参考图网页、移动端、品牌板soft / minimalist / brutalisthigh-end-visual-design 等视觉方向已定的风格变体output-skillfull-output-enforcement模型爱交半成品时强制完整输出两条典型路径先出图再写码用 imagegen 系列产出概念图与团队对齐确认方向后把渲染图交给编码 Agent 落地或者直接写码配 output-skill 防止截断与占位注释。总结Taste-Skill 把好看从玄学拆成了工程问题Design Read 定方向三个旋钮管布局、动效与密度设计系统映射表防重复造轮子AI Tells 清单加 Pre-Flight 做最后闸门形成完整的验收闭环。它适合新建落地页与作品集、重设计存量项目、先出概念图再写代码、以及需要并行对比多种风格方向的所有场景。MIT 开源、基于 Agent Skills 标准跨 Agent 可移植仓库research/目录还内置了关于模型为何偷懒、输出为何截断的专项调研是这套反平庸机制的实证底座。【免费下载链接】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），仅供参考