AI 生成前端最常见的问题，不是功能缺失，而是界面在视觉上过于相似：深色背景、紫色渐变、居中标题、三张等宽卡片，再加一些无法解释的光晕和装饰点。这样的页面通常可以使用，却很难形成清晰的品牌记忆，也经不起连续项目之间的比较。

Leonxlnx/taste-skill 提供了一种不同的思路：不训练新模型，而是给编码 Agent 一套更严格的设计规范，让它在写代码之前先理解用户、场景、品牌素材和技术限制，再决定布局、字体、动效和信息密度。

一、模板化的根因是默认答案过于廉价

当需求只有“做一个现代、好看、响应式的页面”时，模型会优先选择训练数据里最常见的组合。深色底色容易制造科技感，渐变可以快速填补空白，卡片能把内容切成规整的模块，居中排版也不需要处理复杂的视觉重心。问题在于，这些选择没有回答页面服务谁、用户要完成什么任务，以及品牌希望留下什么印象。

模板化并不等于完全不能用。真正的风险是所有项目都使用相同的视觉语法，导致页面缺少层级、节奏和取舍。反模板规范的价值，就是把这些容易被忽略的判断显式化，让 Agent 在生成组件前先说明设计方向。

二、Skill 把设计判断放在编码之前

安装后，Agent 会先读取 SKILL.md，再分析页面类型、目标用户、内容结构、品牌约束和已有素材。它需要先形成一份简短的设计判断，说明页面应该采用什么视觉语言，以及哪些默认做法需要主动避开。

这一顺序改变了工作流的责任分配。模型不再直接从组件库拼装页面，而是先把需求翻译成设计系统，再把设计系统落实到组件。对开发者而言，设计判断也是一份可审查的中间产物：方向不对时，可以在几十行规则上修正，而不必等整页代码完成后返工。

三、三个档位让抽象偏好变成可执行参数

项目用三个数字控制页面的整体倾向。DESIGN_VARIANCE 决定布局变化幅度，数值越高，越鼓励非对称、分栏和不规则节奏；MOTION_INTENSITY 决定动效深度，控制悬停反馈、滚动进入和状态变化的使用程度；VISUAL_DENSITY 决定单位视口中的信息量，避免营销页过度拥挤或工具页空得没有重点。

这些数字不是模型推理参数，也不是保证质量的魔法开关。它们更像团队内部的共同语言：当需求说“希望更有个性”时，可以提高布局变化档位；当页面属于后台或复杂表单时，可以降低动效和变化，优先保障扫描效率。

四、Design Read 是生成页面前的短暂停顿

在动手实现前，规范要求 Agent 用一句话概括自己的理解：页面属于哪种类型，面向什么人，采用什么设计语言，倾向哪个设计系统。这个动作看似简单，却能暴露许多隐含假设。例如，面向销售线索的落地页和面向运营人员的数据后台，不应共享同一套留白、动效和卡片策略。

如果需求中存在真正的方向分歧，最有效的做法是先问一个澄清问题，而不是自行猜测。若上下文已经足够明确，则直接输出设计判断并继续执行。这样既能保持流程速度，也能让后续审查有一个可对照的起点。

五、反模板规则针对的是高频偷懒动作

规范明确提醒 Agent 不要随手使用紫色渐变，不要连续堆叠相同尺寸的卡片，不要用几个带边框的 div 冒充产品截图，也不要添加没有意义的装饰点、假版本号和漂浮徽章。它还要求检查按钮对比度、移动端文字是否溢出，以及减少动态效果的系统设置是否被尊重。

这些限制并不是要求所有页面变得花哨，而是阻止模型用装饰替代信息结构。一个真正有用的动效，应当服务于内容出现、状态切换或层级变化；一个真正有用的卡片，应当表达独立的内容边界或交互关系。无法解释作用的视觉元素，就应该被删除。

六、同一需求的差异来自决策过程

在相同的产品主页面任务上，未加载规范的实现通常会快速完成导航、标题、功能卡片和行动按钮，结构完整但缺少个性。加载规范后，Agent 会先解释设计选择，再调整版式、标题层级、强调色和动效节奏，避免每个模块都获得相同的视觉重量。

更重要的变化不在于颜色或圆角，而在于组件之间开始形成关系。标题负责建立方向，功能区负责说明能力，动效负责反馈状态，行动区域负责承接下一步。设计判断越清楚，代码中的间距、字号和交互状态就越不容易互相打架。

七、交付前检查表把“看起来不错”变成可验证条件

页面完成前，Agent 需要检查版式是否在不同屏幕宽度下稳定，文字是否适合阅读，交互控件是否有清晰的悬停、聚焦和按下状态，图片是否是真实相关资产，动效是否在用户关闭动画时正确降级。检查也应覆盖空状态、错误状态和加载状态，而不是只验收成功路径。

这种检查表的价值在于把审美判断拆成许多可以逐项确认的条件。它不能替代人的品味，却能减少明显的遗漏：按钮文字被背景吞没、移动端标题断行、装饰层遮挡内容、卡片密度失控，以及页面在无障碍设置下失去可用性。

八、适用范围主要是营销页和作品级前端

默认 v2 更偏向 React、Next.js、Tailwind 和 Motion 生态，适合落地页、作品集、产品展示和网站改版。这些场景通常需要建立视觉方向、组织内容节奏并通过动效强化层级，反模板规则能带来直接收益。

数据后台、复杂表格、多步骤表单和原生应用则不应直接套用全部规则。这些产品的核心指标是扫描速度、输入准确性、状态可见性和错误恢复，视觉变化和持续动效反而可能增加负担。正确做法是保留需求分析、设计判断和可访问性检查，按业务场景调整布局变化与动效强度。

九、强规则会带来上下文成本与迁移成本

完整加载主 Skill 会占用一定上下文，规则越详细，模型用于分析和自检的篇幅就越长。对于简单页面，这种成本可能超过收益；对于需要长期维护的品牌站点，则可能换来更稳定的视觉一致性。团队应根据任务复杂度决定使用完整版本、精简版本还是只引用其中的检查表。

规范还带有明确的技术偏好。项目换成其他框架、CSS 方案或动效库时，开发者需要改写不适用的代码示例和工具约定。直接复制一份规范而不检查运行环境，会把设计要求变成无法执行的伪约束。

十、品牌约束比反模板规则拥有更高优先级

一套通用规范不应压过真实品牌。如果品牌确实需要特定字体、强调色、装饰元素或动效，应该在需求中明确写出原因、使用范围和禁用边界。反模板的目的，是阻止没有目的的重复，而不是消灭所有可识别的品牌资产。

较稳妥的做法是先建立品牌令牌，再让 Skill 参与组合：哪些颜色是核心色，哪些字体负责标题，圆角和阴影的范围是什么，动效在哪些状态出现。这样，规则负责减少懒惰默认值，品牌系统负责定义可以被重复使用的独特语言。

十一、把 Skill 放进真实开发闭环

接入时不必一次改造全部项目。可以先挑一页低风险的产品介绍页，记录原始需求、设计判断、生成代码、浏览器截图和人工修改，再比较加载前后的差异。重点观察的不是页面是否更复杂，而是需求澄清次数、返工时间、组件复用性和交付前发现的问题数量。

一旦确定哪些规则真正有效，就可以将它们与代码审查、视觉回归和响应式测试连接起来。设计规范负责提出约束，自动化测试负责发现尺寸和交互问题，开发者负责判断业务例外。三者组合后，Skill 才会从一份长文档变成团队工作流的一部分。

十二、评价效果要看一致性与可解释性

评估反模板工具时，可以建立一组相同需求的对照样本，比较布局重复率、移动端缺陷、无障碍问题、人工修改时长和品牌规则遵守情况。还要检查它是否能解释关键设计选择，以及在规则冲突时是否明确停下来等待确认。

如果结果只是从一种模板换成另一种模板，说明规范仍然停留在表面。真正的收益是让页面拥有与任务匹配的层级和节奏，同时让团队知道这些选择从何而来、哪些部分可以修改，以及下一次项目如何复用经验。

十三、结论：给 Agent 一套可审查的设计判断

Taste Skill 的核心价值不是让每个页面都更夸张，而是把“不要套模板”转成一条可执行的前置流程：先读需求，写出 Design Read，调整三个档位，选择与场景匹配的组件和动效，最后逐项完成交付检查。

截至 2026 年 8 月 27 日，项目采用 MIT 许可证，默认 v2 仍在迭代。使用它时应以真实品牌和业务目标为最高约束，在适合的前端场景中小范围验证，把有效规则沉淀为团队资产；对于复杂后台和原生应用，则应只采用其中适合的分析与质量检查部分。