大家好我是Java1234_小锋老师。如果你在深夜对着屏幕叹气页面能跑功能也对但总有一股说不清的「塑料感」那往往不是技术不行而是审美与排版规则没有被完整地「交给模型」。最近我在逛 GitHub 时注意到一个专门对抗这种「千篇一律界面」取向的开源项目——Taste Skill。它并不是什么新框架更像一套可携带的 Agent 说明书把高级感拆成可被模型反复执行的约束与工作流。项目地址https://github.com/Leonxlnx/taste-skill1. 先说说我们到底在厌烦什么很多人把前端「AI味」简单归结为紫色渐变或大圆角卡片。其实只是表象。更值得警惕的是一整套可被模型低成本复用的模版路径居中堆叠区块、差不多的字重层级、相差无几的留白节奏、动起来永远同一套 easing。它们不是丑而是可被无限复制的平均品味——平均在统计学上很好用在艺术指导上却让人犯困。Taste Skill 的自述很直白The Anti-Slop Frontend Framework for AI Agents。这里的 slop你可以理解为廉价的视觉填充物不是要否定 AI 生产力而是用一份更完整、可被版本管理的「味觉协议」压住模型默认走捷径的本能。下图用夸张对比的方式呈现了「模版堆栈」与「更有编辑感层级」的差别——真实项目当然不会这么戏剧化但这种信息密度 / 字型节奏 / 余白策略的差别往往在第一眼就会暴露出来。2. Taste Skill 是什么不是什么它是什么一组可按需加载的Agent Skills以常见的SKILL.md带 frontmatter 的便携说明文件为载体实现向技能偏代码产出目标是更好的布局、字体排印、动态表现与间距体系而不是替你背下一套组件库图像生成向技能只做设计参照图Landing、移动端流程、Brand Kit随后再把画面交给 Cursor、Codex、Claude Code 等编码代理落实与具体框架不强绑定 README 也写明更像设计意图层的约束而不是 React / Vue / Svelte 某一种 API 说明书。它不是什么不提供「一键生成完美产品」的魔法按钮不是官方代币或链上项目——仓库里有明确声明提防蹭名代币骗局不替代你做设计决策只是把「高级感」翻译成模型更容易稳定遵守的语言。如果你对「一整套技能如何挂载到日常工作流」更感兴趣可以想象成CLI 一键拉取或把 SKILL 剪贴进会话或放进你自己的仓库。下图用偏信息图的方式概括了这条「技能—工具链」之间的关系仅为示意。3. 它怎样组织「味道」——技能矩阵一览仓库把技能拆得非常细每个 SKILL 只做一件事你可以按阶段叠加而不是一把梭全糊进上下文。以下为 README 中所列核心技能的压缩理解版若要精确安装名请以官方表格为准。实现侧产出代码或与代码强相关方向Install name节选你可以把它理解成……通用默认盘design-taste-frontend「先别太偏科」的高质感缺省味觉更激进的 GPT/Codex 取向gpt-taste更强排版变化与动效取向readme 用词是 aggressive anti-slop图 → 拆解 → 写码image-to-code先产出视觉参照再走分析与实现链路旧项目救火redesign-existing-projects先做 UI audit对症下药柔和高阶商业感high-end-visual-design更安静的对白界面、留白、弹性动效收尾强迫症full-output-enforcement截断半成品时使用减少「TODO你自己补」这类交付极简编辑风minimalist-uiNotion / Linear 气质一类的克制板式工业瑞士感实验industrial-brutalist-uiBETA高对比排版语言适合你明确要硬核实验风时只做参考图的技能Install name简述imagegen-frontend-webWeb Landing / 分区画面偏重字体与留白走向imagegen-frontend-mobile移动端流程与可读性一整套brandkit品牌板式标志方向、调色板与字体气质的拼贴板另外还有一个Google Stitch兼容方向的stitch-design-taste以及专门的说明文档导出格式可选。整体上你可以选择「从代码起手」或者「先从画面起手」——后者的妙处在于先给一个视觉锚点再编码时模型就不太容易滑回模版路径。4. 安装与日常使用官方推荐与 Vercel Labs 社区的agent-skillsCLI 对齐。最省事的方式是直接拉整条仓库的技能集合npx skillsaddhttps://github.com/Leonxlnx/taste-skill若你只想挂载某一个技能用--skill传入 SKILL 文件中name:字段所写的Install name例如npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skilldesign-taste-frontend小提示name:可能与文件夹名不同请以官方 README 的安装名列为准。若你拷贝链接请自查正确仓库地址当然你也可以手动复制任一SKILL.md到项目里或者像很多人那样直接在 ChatGPT / Codex 的对话中粘贴相关内容——本质都是把「可读、可复述、可复盘」的规则喂给模型。5. 从选型到落地的典型流程选型这件事不该靠掷骰子。下面是 README 语境下比较顺的一条决策链我用 Mermaid 画出来你也可以把它打印贴在显示器边上。5.1 我该先装哪一个新项目旧项目救火没有有是想更激进的版式与 motion柔和高阶 calm 感极简编辑风实验工业瑞士排版输出老被截断开始我有一个前端任务新项目还是翻新是否已有画面参考优先考虑 redesign-existing-projects可选imagegen-* 先出几张板再配合 image-to-code直接进入实现技能我需要更温和的默认质感design-taste-frontend 起步gpt-taste已知视觉方向吗叠加 high-end-visual-design叠加 minimalist-ui慎用industrial-brutalist-ui BETA再加 full-output-enforcement5.2 「图先走」的一站式 pipeline如果你在提示里反复强调流程效果会更好。README 建议你直接写类似follow the skill先生成参照图 → 再做画面分析 → 最后写代码对齐用图描述就是Cursor / Codex / Claude Codeimage-to-codeimagegen-* / 外部图像模型你Cursor / Codex / Claude Codeimage-to-codeimagegen-* / 外部图像模型你依 SKILL 导出关键帧Web / Mobile / Brand得到一组对齐风格的参考画面发起「分析 对齐实现」的流程提示规则化约束层级 / 留白 / motion提交更接近参考排版的代码6.taste-skill上的三枚旋钮——把风格从口号变成参数在默认的 taste-skill 里作者在文件顶端放了三个1–10的旋钮式参数口述整理如下具体仍以源码为准。旋钮README 语义意译DESIGN_VARIANCE版式胆识越低越规整居中越高越敢做非对称和现代实验排版MOTION_INTENSITY动效深度从轻微 hover到滚动联动、磁力感等更重层次VISUAL_DENSITY单屏信息量低密度偏「杂志留白」高密度偏仪表板信息量旋钮的意义在于我们终于可以少喊一点「高级感」「大气一点」多给模型可操作、可复述、可回放的数字区间。下面是围绕这一概念的插画示意。7. 和「多喝热水式提示词」相比差在哪里很多人在前端调教模型时习惯于每次会话重新发明一遍审美宪法「字体好看一点」「阴影自然一点」「动效别太用力」。这当然有效但难以沉淀。Taste Skill 试图解决的是三件小事可搬运装进仓库、装进 CLI、装进对话可组合像乐高一样按阶段挂载而不是单次巨型提示可对照research 文件夹里还有背景写作沉淀读起来像是「为什么我们讨厌某些路径依赖」的长期笔记。它不会让一个坏品味的人自动变成艺术指导——但它能减少你在「反复强调同一段排版纪律」上所消耗的心智带宽。8. 后记工具只是起点判别力仍是你的读到这里也许你会想立刻装上一整套技能试水。我个人的建议是先选一个最贴近你团队的默认味觉跑一两个真实页面或小模块如果模型仍爱截断半成品再把full-output-enforcement当作「交付保险」挂上。说到底Anti-Slop 不是站队「人类 vs AI」而是提醒我们可复制的是套路不可取替的是判别力。Taste Skill 把一部分判别力做成了文件与流程这已经是开源社区很值得珍惜的方向。如果你对视觉规范、排版史或动机好奇也别错过仓库内的research/目录——那里面往往比自己临时写的几句「要好看」更耐读。祝你下一次 Code Review少听到一句「怪怪的说不出哪里怪。」——因为这次你心里或许已经有一块更清晰的参照尺。参考与链接项目主页Leonxlnx/taste-skill安装范式基于npx skills add以官方文档为准
从此前端告别「AI味」，又一个神级 Skill。。。
大家好我是Java1234_小锋老师。如果你在深夜对着屏幕叹气页面能跑功能也对但总有一股说不清的「塑料感」那往往不是技术不行而是审美与排版规则没有被完整地「交给模型」。最近我在逛 GitHub 时注意到一个专门对抗这种「千篇一律界面」取向的开源项目——Taste Skill。它并不是什么新框架更像一套可携带的 Agent 说明书把高级感拆成可被模型反复执行的约束与工作流。项目地址https://github.com/Leonxlnx/taste-skill1. 先说说我们到底在厌烦什么很多人把前端「AI味」简单归结为紫色渐变或大圆角卡片。其实只是表象。更值得警惕的是一整套可被模型低成本复用的模版路径居中堆叠区块、差不多的字重层级、相差无几的留白节奏、动起来永远同一套 easing。它们不是丑而是可被无限复制的平均品味——平均在统计学上很好用在艺术指导上却让人犯困。Taste Skill 的自述很直白The Anti-Slop Frontend Framework for AI Agents。这里的 slop你可以理解为廉价的视觉填充物不是要否定 AI 生产力而是用一份更完整、可被版本管理的「味觉协议」压住模型默认走捷径的本能。下图用夸张对比的方式呈现了「模版堆栈」与「更有编辑感层级」的差别——真实项目当然不会这么戏剧化但这种信息密度 / 字型节奏 / 余白策略的差别往往在第一眼就会暴露出来。2. Taste Skill 是什么不是什么它是什么一组可按需加载的Agent Skills以常见的SKILL.md带 frontmatter 的便携说明文件为载体实现向技能偏代码产出目标是更好的布局、字体排印、动态表现与间距体系而不是替你背下一套组件库图像生成向技能只做设计参照图Landing、移动端流程、Brand Kit随后再把画面交给 Cursor、Codex、Claude Code 等编码代理落实与具体框架不强绑定 README 也写明更像设计意图层的约束而不是 React / Vue / Svelte 某一种 API 说明书。它不是什么不提供「一键生成完美产品」的魔法按钮不是官方代币或链上项目——仓库里有明确声明提防蹭名代币骗局不替代你做设计决策只是把「高级感」翻译成模型更容易稳定遵守的语言。如果你对「一整套技能如何挂载到日常工作流」更感兴趣可以想象成CLI 一键拉取或把 SKILL 剪贴进会话或放进你自己的仓库。下图用偏信息图的方式概括了这条「技能—工具链」之间的关系仅为示意。3. 它怎样组织「味道」——技能矩阵一览仓库把技能拆得非常细每个 SKILL 只做一件事你可以按阶段叠加而不是一把梭全糊进上下文。以下为 README 中所列核心技能的压缩理解版若要精确安装名请以官方表格为准。实现侧产出代码或与代码强相关方向Install name节选你可以把它理解成……通用默认盘design-taste-frontend「先别太偏科」的高质感缺省味觉更激进的 GPT/Codex 取向gpt-taste更强排版变化与动效取向readme 用词是 aggressive anti-slop图 → 拆解 → 写码image-to-code先产出视觉参照再走分析与实现链路旧项目救火redesign-existing-projects先做 UI audit对症下药柔和高阶商业感high-end-visual-design更安静的对白界面、留白、弹性动效收尾强迫症full-output-enforcement截断半成品时使用减少「TODO你自己补」这类交付极简编辑风minimalist-uiNotion / Linear 气质一类的克制板式工业瑞士感实验industrial-brutalist-uiBETA高对比排版语言适合你明确要硬核实验风时只做参考图的技能Install name简述imagegen-frontend-webWeb Landing / 分区画面偏重字体与留白走向imagegen-frontend-mobile移动端流程与可读性一整套brandkit品牌板式标志方向、调色板与字体气质的拼贴板另外还有一个Google Stitch兼容方向的stitch-design-taste以及专门的说明文档导出格式可选。整体上你可以选择「从代码起手」或者「先从画面起手」——后者的妙处在于先给一个视觉锚点再编码时模型就不太容易滑回模版路径。4. 安装与日常使用官方推荐与 Vercel Labs 社区的agent-skillsCLI 对齐。最省事的方式是直接拉整条仓库的技能集合npx skillsaddhttps://github.com/Leonxlnx/taste-skill若你只想挂载某一个技能用--skill传入 SKILL 文件中name:字段所写的Install name例如npx skillsaddhttps://github.com/Leonxlnx/taste-skill--skilldesign-taste-frontend小提示name:可能与文件夹名不同请以官方 README 的安装名列为准。若你拷贝链接请自查正确仓库地址当然你也可以手动复制任一SKILL.md到项目里或者像很多人那样直接在 ChatGPT / Codex 的对话中粘贴相关内容——本质都是把「可读、可复述、可复盘」的规则喂给模型。5. 从选型到落地的典型流程选型这件事不该靠掷骰子。下面是 README 语境下比较顺的一条决策链我用 Mermaid 画出来你也可以把它打印贴在显示器边上。5.1 我该先装哪一个新项目旧项目救火没有有是想更激进的版式与 motion柔和高阶 calm 感极简编辑风实验工业瑞士排版输出老被截断开始我有一个前端任务新项目还是翻新是否已有画面参考优先考虑 redesign-existing-projects可选imagegen-* 先出几张板再配合 image-to-code直接进入实现技能我需要更温和的默认质感design-taste-frontend 起步gpt-taste已知视觉方向吗叠加 high-end-visual-design叠加 minimalist-ui慎用industrial-brutalist-ui BETA再加 full-output-enforcement5.2 「图先走」的一站式 pipeline如果你在提示里反复强调流程效果会更好。README 建议你直接写类似follow the skill先生成参照图 → 再做画面分析 → 最后写代码对齐用图描述就是Cursor / Codex / Claude Codeimage-to-codeimagegen-* / 外部图像模型你Cursor / Codex / Claude Codeimage-to-codeimagegen-* / 外部图像模型你依 SKILL 导出关键帧Web / Mobile / Brand得到一组对齐风格的参考画面发起「分析 对齐实现」的流程提示规则化约束层级 / 留白 / motion提交更接近参考排版的代码6.taste-skill上的三枚旋钮——把风格从口号变成参数在默认的 taste-skill 里作者在文件顶端放了三个1–10的旋钮式参数口述整理如下具体仍以源码为准。旋钮README 语义意译DESIGN_VARIANCE版式胆识越低越规整居中越高越敢做非对称和现代实验排版MOTION_INTENSITY动效深度从轻微 hover到滚动联动、磁力感等更重层次VISUAL_DENSITY单屏信息量低密度偏「杂志留白」高密度偏仪表板信息量旋钮的意义在于我们终于可以少喊一点「高级感」「大气一点」多给模型可操作、可复述、可回放的数字区间。下面是围绕这一概念的插画示意。7. 和「多喝热水式提示词」相比差在哪里很多人在前端调教模型时习惯于每次会话重新发明一遍审美宪法「字体好看一点」「阴影自然一点」「动效别太用力」。这当然有效但难以沉淀。Taste Skill 试图解决的是三件小事可搬运装进仓库、装进 CLI、装进对话可组合像乐高一样按阶段挂载而不是单次巨型提示可对照research 文件夹里还有背景写作沉淀读起来像是「为什么我们讨厌某些路径依赖」的长期笔记。它不会让一个坏品味的人自动变成艺术指导——但它能减少你在「反复强调同一段排版纪律」上所消耗的心智带宽。8. 后记工具只是起点判别力仍是你的读到这里也许你会想立刻装上一整套技能试水。我个人的建议是先选一个最贴近你团队的默认味觉跑一两个真实页面或小模块如果模型仍爱截断半成品再把full-output-enforcement当作「交付保险」挂上。说到底Anti-Slop 不是站队「人类 vs AI」而是提醒我们可复制的是套路不可取替的是判别力。Taste Skill 把一部分判别力做成了文件与流程这已经是开源社区很值得珍惜的方向。如果你对视觉规范、排版史或动机好奇也别错过仓库内的research/目录——那里面往往比自己临时写的几句「要好看」更耐读。祝你下一次 Code Review少听到一句「怪怪的说不出哪里怪。」——因为这次你心里或许已经有一块更清晰的参照尺。参考与链接项目主页Leonxlnx/taste-skill安装范式基于npx skills add以官方文档为准
