1. 项目概述：为AI注入“品味”的系统性解决方案
如果你和我一样，长期使用Claude Code、Cursor这类AI编程助手来辅助UI设计和前端开发，那你一定经历过那种“又爱又恨”的瞬间。AI能快速生成一个看起来功能完整的登录页面，但仔细一看，字体是默认的Inter，按钮用了俗套的紫色渐变，文案充斥着“在当今快节奏的世界中……”这类空洞的套话。它生成的是“统计意义上的平均值”——一种安全、平庸、缺乏灵魂的设计，我称之为“AI流水线产物”。everything-design-taste这个项目，就是为了从根本上解决这个问题而生的。它不是又一个设计系统组件库，也不是一份静态的风格指南，而是一套完整的“品味系统”，旨在赋予AI代理一种类似人类设计师的审美判断力和决策框架。
简单来说，这个项目提供了一系列可组合的“技能”、“代理”、“规则”和“钩子”，它们以Markdown文件的形式存在，可以被你的AI助手读取并内化为其工作流的一部分。其核心目标是让AI的输出摆脱那种千篇一律的“电梯音乐”质感，产出真正具有设计品质和意图的工作成果。无论你是独立开发者、产品经理，还是设计团队的负责人，这套系统都能帮助你将AI从一个单纯的代码生成器，提升为一个具备基本设计审美的协作伙伴。
2. 核心问题与设计哲学：为何我们需要“反平庸”系统
2.1 AI设计输出的“平庸陷阱”
在深入技术细节之前，我们必须先理解我们对抗的是什么。当前基于大语言模型的AI在设计相关任务上，存在几个根深蒂固的倾向：
视觉语言的“安全区”依赖：由于训练数据中充斥着大量BootStrap、Tailwind UI等流行框架的案例，AI会倾向于生成具有高度可预测性的视觉模式。例如，三列等宽卡片网格、大圆角、轻微的投影、居中的Hero区域配上一个“Get Started”按钮。这些组合本身没有错，但它们的泛滥成灾导致数字产品界面变得高度同质化，缺乏品牌辨识度和用户记忆点。
文案的“企业腔调”：AI在生成文案时，容易落入一种我称之为“企业演讲术”的陷阱。它会大量使用名词化结构（如“进行一个优化”而非“优化”）、空洞的副词（“极大地”、“显著地”）、以及诸如“赋能”、“打通”、“闭环”、“抓手”这类脱离具体语境的 jargon。这种文案读起来正确但乏味，无法与用户建立真实的情感连接。
决策的“默认值偏好”：当面临选择时，AI倾向于选择数据集中最常见的选项，而非最合适的选项。字体选Inter或SF Pro，主色调选蓝色或紫色，阴影用shadow-md。这些选择是“统计上最可能正确的”，但很少是“情境下最优的”。优秀的设计恰恰在于挑战默认，做出有意图的、服务于特定目标的独特选择。
everything-design-taste的哲学，记录在其核心文件SOUL.md中，可以概括为以下几点：
- 设计是方向，而非装饰：每一个像素、每一个词语的存在都必须服务于一个清晰的战略目标。
- 品味是一项技能，而非天赋：它可以通过学习、编码和系统化的方法被掌握和传授，包括传授给AI。
- 诚实胜过抛光：生硬地追求“高端大气”往往适得其反，清晰、直接、真诚的沟通本身就是一种强大的设计原则。
2.2 系统架构解析：模块化构建品味
该项目采用高度模块化的架构，允许用户按需取用。理解其目录结构是有效使用它的关键。
everything-design-taste/ ├── agents/ # 【代理】- 具备特定专长和视角的“虚拟评审员” ├── skills/ # 【技能】- 具体领域的工作流和知识库 ├── rules/ # 【规则】- 始终生效的质量约束和设计原则 ├── hooks/ # 【钩子】- 在特定操作（如保存文件）时触发的自动检查 ├── contexts/ # 【上下文】- 用于切换工作模式的预设（如“深度评审模式”） ├── design-templates/ # 【设计模板】- 预设的、具有完整美学体系的设计系统 └── docs/ # 【文档】- 从哲学到实操的完整指南这种架构的巧妙之处在于其组合性。你可以只为AI配备一个design-reviewer代理和anti-slop技能，让它具备基础的“排雷”能力；也可以为整个团队配置完整的full档案，建立一个从产品策略到像素级QA的自动化品控流水线。
3. 核心组件深度剖析与应用场景
3.1 代理：你的专属设计智囊团
代理是系统的“大脑”，每个代理都模拟了一个特定领域的专家视角。它们不是简单的提示词模板，而是包含了评审框架、提问逻辑和决策树。
以design-reviewer（设计评审员）为例，它的工作流程远不止说“这里不好看”。它会按照一个结构化的清单进行审查：
- 层次结构：页面上是否存在一个无可争议的视觉焦点？次要行动点是否得到了恰当的弱化？
- 间距与节奏：是否使用了基于
4px或8px的基线网格？不同区块间的留白是否建立了清晰的视觉关系？ - 色彩意图：色彩的使用是功能性的（状态指示、交互反馈）还是纯装饰性的？主色、辅助色、警示色的系统是否一致？
- 排版系统：是否建立了清晰的字体阶梯（H1-H6, Body, Caption）？行高、字重、颜色的使用是否有逻辑可循？
实操心得：如何与代理有效协作不要仅仅把代理文件丢给AI然后说“请评审”。我习惯在向AI提出设计需求后，紧接着附加一句：“现在，请切换至design-reviewer代理模式，对刚才生成的UI草案进行评审，重点指出在层次结构和间距节奏上的问题。” 这样AI会以“评审员”的身份重新审视输出，其反馈会更具批判性和建设性。
另一个强大的代理是copy-editor（文案编辑）。它内置了一个庞大的“企业腔调”词库和模式识别器。它能精准地揪出“leverage our robust ecosystem to drive synergistic outcomes”这类句子，并建议改为“用我们的工具来更好地完成任务”。它不仅仅是替换词汇，更会重构句子结构，让文案更直接、更有人味。
3.2 技能：封装领域知识的“工具箱”
技能是具体的、可执行的工作流。如果说代理是专家，技能就是他们手中的工具。每个技能都是一个独立的Markdown文件，包含YAML前置元数据来描述其用途、输入/输出和操作步骤。
以anti-slop（反流水线产物）技能为例，这是我最常使用的技能之一。它不仅仅是一个黑名单。它的工作流程是：
- 模式识别：扫描UI代码或设计稿，寻找“AI设计模式”集群，例如：圆角卡片+图标+标题+描述文的重复组合；全屏Hero区域配一个居中标题和按钮；过度使用背景模糊（backdrop-filter）的导航栏。
- 意图质询：对于识别出的模式，它会生成一系列问题：“这个卡片容器的圆角半径为什么是
12px而不是8px或16px？它与品牌性格有何关联？”“这个背景渐变是为了创造情绪，还是仅仅因为‘渐变很流行’？” - 提供替代方案：它会基于
design-templates/中的某个美学模板，或根据上下文，建议更独特的解决方案。例如，与其用卡片，是否可以考虑用分隔线、不同背景色块或边框来区分内容？
typography-craft（排版工艺）技能则深入字体选择的微观层面。它会检查你是否在同一个项目中混用了多个无衬线字体（一个常见的AI错误），会评估字号阶梯是否具有和谐的数学比例（例如，使用1.25倍的类型比例），甚至会建议在英文排版中启用连字（ligatures）和旧式数字（oldstyle figures）来提升文本质感。
3.3 规则：不可妥协的设计底线
规则是“始终在线”的质量门禁。它们被设计成强制性的约束条件，一旦安装，AI在生成任何内容时都会潜意识地受到其影响。
anti-ai-aesthetic（反AI美学）规则是最直接的一条。它明确禁止了几类AI最爱的“俗套”：
- 字体：禁止将Inter或SF Pro作为唯一或默认的无衬线字体选择。鼓励探索如Manrope, Figtree, Geist Sans, Plus Jakarta Sans等更具特色的字体。
- 色彩：禁止使用
linear-gradient(135deg, #667eea 0%, #764ba2 100%)这类泛滥的紫色到蓝色渐变作为主视觉。 - 布局：禁止无脑使用等分多栏网格（尤其是三栏）来陈列内容，除非有强烈的信息平等诉求。
intentionality（意图性）规则是哲学层面的约束。它要求每一个设计元素都必须能回答“为什么存在？”这个问题。这迫使AI（和开发者）避免使用默认值。例如，一个按钮的padding是12px 24px，规则会追问：“这个尺寸是基于触摸目标的最小44px准则吗？还是为了与输入框的高度匹配？抑或是为了在视觉上达到特定的重量感？” 如果答案仅仅是“因为Tailwind里px-6 py-3很常用”，那么这个选择就需要被重新审视。
3.4 钩子：自动化代码审查
钩子是嵌入到开发工作流中的自动化脚本。例如，check-ai-tone钩子可以集成到Git的pre-commit阶段或编辑器的保存动作中，自动扫描提交信息或代码注释中的文案，标记出“leverage”、“synergy”、“disrupt”等词汇。
check-contrast钩子则更为实用。它可以在你编写或修改CSS时，自动计算前景色和背景色的对比度，并与WCAG AA/AAA标准进行比对。如果发现一个#888888的文字放在#FFFFFF的背景上（对比度仅为3.54，低于AA标准的4.5），它会立即发出警告，并建议调整至#767676（对比度4.54）或更深的颜色。这比在开发完成后才进行无障碍测试要高效得多。
4. 从安装到实战：构建你的品味工作流
4.1 安装策略与个性化配置
项目提供了极简的安装脚本，但理解其背后的配置逻辑能让你用得更得心应手。
# 使用标准档案安装（推荐起点） ./install.sh --profile standard这个命令会安装大约8个核心技能（如anti-slop,typography-craft）、全部通用规则（common）以及4个关键代理（design-reviewer,copy-editor,product-strategist,brand-guardian）。对于大多数项目和团队，这是一个非常均衡的起点。
高级自定义安装： 如果你的项目是特定的技术栈或领域，可以像搭积木一样组合。
# 一个专注于React组件库开发的环境 ./install.sh --skills design-system-patterns,component-styling,typography-craft \ --rules common,react-ui \ --agents design-reviewer,design-system-auditor,visual-qa这条命令构建了一个专注于组件体系质量和一致性的环境，非常适合维护大型UI库的团队。
手动安装与集成： 对于不支持自动安装脚本的AI工具（或你想进行深度定制），可以手动复制文件。关键在于理解目标工具的配置结构。以Cursor为例，你通常需要将代理文件（.md）放入某个特定的“Agent”目录，并在设置中启用它。核心是把everything-design-taste中的知识，变成你AI助手“已知上下文”的一部分。
4.2 实战工作流示例：从零设计一个产品着陆页
假设我们要为一个新的开发者工具设计着陆页。以下是如何串联使用多个代理和技能的步骤：
第一阶段：策略与定位（使用product-strategist代理）首先，不要直接让AI“生成一个漂亮的着陆页”。而是先启动product-strategist代理，让它帮你框定问题。
提示词：“我是
product-strategist。我们的产品是一个面向独立开发者的API监控工具，核心优势是极简设置和实时告警。请帮我分析目标用户（独立开发者）的核心痛点和信息接收习惯，并据此规划着陆页需要传达的3个核心信息层级。”
AI会基于该代理的知识，输出类似：“1. 首要痛点：现有工具太复杂（突出‘一分钟部署’）。2. 核心能力：告警精准（用‘零误报’作为信任状）。3. 社会证明：其他开发者正在使用（展示简洁的集成代码片段和用户评价）。” 这为后续设计奠定了内容策略基础。
第二阶段：创意方向与视觉探索（使用art-director代理 +minimal-saas设计模板）接下来，引入art-director代理和minimal-saas模板来设定视觉基调。
提示词：“现在，你是
art-director。基于刚才的策略，并参考minimal-saas模板（使用Plus Jakarta Sans字体，蓝色系，明亮风格），为这个API监控工具构思着陆页的视觉情绪板。描述关键视觉元素，如图像风格（是代码截图还是抽象插图？）、色彩的情绪感受、整体的空间感。”
AI会生成更具象的指导：“建议采用深色代码截图与明亮界面对比的视觉风格，传达专业与清晰。主色使用偏冷调的科技蓝（如#2563eb），辅助色为中性灰。布局应大量留白，突出内容本身，避免装饰性元素。”
第三阶段：UI生成与初步评审现在，你可以用常规方式让AI生成HTML/Tailwind代码。生成后，立即调用design-reviewer代理进行第一轮评审。
提示词：“请以
design-reviewer的身份，评审以下着陆页代码。请按照‘层次结构’、‘间距节奏’、‘色彩意图’三个维度给出具体分数（1-5分）和改进建议。”
第四阶段：文案精炼与细节打磨将design-reviewer的输出和改进后的代码，交给copy-editor代理处理所有文案。
提示词：“请
copy-editor检查并重写以下页面中的所有文案，确保其直接、人性化，并去除任何AI腔调或企业套话。”
第五阶段：最终质量门禁（使用taste-audit技能）最后，使用taste-audit技能进行终审。这是一个量化评估工具。
提示词：“运行
taste-audit技能，对最终版的着陆页设计（附代码和文案）进行评分。请给出五个维度的得分和总体评价。”
你会得到一个类似雷达图的评估报告，明确指出“意图性：4/5”、“工艺质量：4/5”、“AI流水线产物检查：5/5（优秀，未发现）”、“文案质量：4/5”、“无障碍基础：3/5（对比度有几处需微调）”。这为“是否可发布”提供了一个客观的参考。
4.3 设计模板：快速启动美学系统
design-templates/目录下的模板是预设的、内部一致的美学系统。它们不仅仅是颜色和字体，更是一套完整的规则。
例如，luxury-brand（奢侈品牌）模板规定：
- 字体：标题使用高对比度的衬线字体（如Cormorant Garamond），正文使用优雅的无衬线字体。
- 色彩：主色调为深色背景（
#0a0a0a），搭配金色（#d4af37）或铜色作为强调色。禁止使用纯白色背景和鲜艳色彩。 - 空间与边框：使用大量的负空间（留白），元素间距离较大。边框锐利（
border-radius: 0或极小值），传达精确和定制感。 - 图像：要求使用高质量、有故事性的摄影或极简的抽象图形，避免通用的库存照片。
直接引用模板，可以让你和AI在同一个美学频道上对话，极大减少风格漂移和反复修改。
5. 高级技巧、常见问题与避坑指南
5.1 性能与集成优化
问题：代理和技能太多，导致AI上下文窗口被占满，影响主要任务。解决方案：不要一次性加载所有内容。利用contexts/目录。你可以创建一个deep-review.context.md文件，里面只包含在深度设计评审时才需要的代理和技能指令。在平时编码时，使用一个更轻量级的上下文。这样可以根据任务动态切换，而不是始终背负所有规则。
问题：规则与现有项目风格冲突。解决方案：everything-design-taste是高度可配置的。直接修改rules/目录下的规则文件。例如，如果你的品牌色就是紫色，那么可以修改anti-ai-aesthetic规则，将“禁止紫色渐变”改为“禁止使用#667eea到#764ba2这个特定渐变，但允许使用基于品牌色的其他渐变组合”。记住，这是一个起点，而不是终点。
5.2 培养AI的“品味”：一个渐进的过程
不要期望安装后AI立刻变成设计大师。品味的培养是一个协作和训练的过程。
- 从评审开始，而非生成：初期，更多地使用
design-reviewer来评审你或AI生成的现有作品。仔细阅读它的评审意见，理解其背后的原则（如“视觉层次不清晰”）。这本身就是一个学习过程。 - 提供具体反馈：当AI的建议不准确时，不要简单拒绝。告诉它为什么。“你建议增大标题字号来提升层次，但我认为当前问题的核心是背景对比度不足，标题已经足够突出。” 这种反馈能帮助AI（实则是帮助你自己的提示工程）更好地理解上下文。
- 创建自定义技能：将你团队内部的设计规范编码成技能。例如，创建一个
brand-typography技能，明确规定：“所有数字使用等宽字体Roboto Mono，颜色为brand-gray-700；所有产品名称首次出现时加粗。” 这能将团队知识沉淀下来，并让AI consistently地应用它。
5.3 常见陷阱与应对策略
陷阱一：过度依赖，丧失主观判断。系统提供的是基于规则的“品味”，但它无法理解你项目独有的商业背景、用户情感或创新意图。它擅长识别“平庸”和“错误”，但不擅长定义“卓越”和“突破”。始终将AI的输出视为草案，将系统的评审视为专家意见，但最终决策权在你手中。
陷阱二：规则僵化，扼杀创意。anti-ai-aesthetic规则反对的是“无意识的俗套”，而不是反对所有渐变、圆角或卡片。如果你有意识地为了创造某种特定的复古或柔和氛围而使用大圆角和渐变，并且能解释其意图，那么这恰恰是“好设计”。关键在于“意图性”。当系统发出警告时，把它看作一个质询的机会，而不是一个绝对的禁令。
陷阱三：忽略文案质量。许多开发者只关注视觉设计。但copy-editor代理和writing-quality规则可能是整个系统里投资回报率最高的部分。糟糕的文案会瞬间拉低产品的整体质感。务必让文案审查成为你工作流中不可或缺的一环。
5.4 扩展与贡献：让系统为你所用
该项目的真正力量在于其开放性。你可以且应该扩展它。
- 为特定技术栈添加规则：如果你主要用Vue和UnoCSS，可以仿照
rules/react-ui创建一个rules/vue-ui目录，定义基于Vue单文件组件和UnoCSS工具类的质量规则。 - 创建行业特定技能：如果你在医疗健康领域工作，可以创建一个
healthcare-ui技能，封装关于数据隐私提示、可访问性高标准（WCAG AAA）、以及冷静、可信赖的视觉语言等知识。 - 设计新的美学模板：如果你团队打磨出了一套独特的视觉语言，可以将其抽象成一个新的设计模板，放入
design-templates/，方便所有项目复用。
在我自己的使用中，我为其添加了一个performance-first技能，专门审查CSS中可能导致布局偏移（CLS）或过大渲染区域的属性，以及一个chinese-typography规则，优化了中英文混排时的字体设置和段落间距。这些贡献回馈社区后，也让系统变得更加强大。
最终，everything-design-taste不仅仅是一套工具，它更是一种工作理念的载体：在AI辅助设计日益普及的今天，我们必须更加主动、更加系统地去定义和追求“好”的标准。它不能替代设计师的创造力和决策力，但它能成为一个强大的守门员和协作者，确保我们产出的每一行代码、每一个界面，都离“平庸的流水线产物”更远一步，离“有意图的设计”更近一步。
