为AI编码助手注入设计评判力：Taste-Skills项目实战指南

1. 项目概述：为AI编码助手注入“设计品味”的评判能力

最近在折腾AI驱动的代码助手时，我遇到了一个挺有意思的瓶颈。无论是Claude Code还是Cursor，它们生成前端界面的速度确实惊人，但产出的设计质量却像开盲盒——有时惊艳，有时却让人不忍直视。问题核心在于，这些AI助手能“建造”界面，却缺乏“评判”界面的能力。它们不理解为什么一个按钮的间距看起来别扭，也分辨不出标题和正文的视觉层级是否清晰。这让我开始思考：能否给这些冰冷的代码生成工具，注入一些关于视觉设计“品味”的规则和判断力？

这正是“Taste-Skills”项目试图解决的问题。它不是一个设计系统，也不是一个组件库，而是一个“设计评判层”。你可以把它理解为一套给AI编码助手使用的“设计审查插件集”。它包含了从视觉层次、排版、色彩系统到间距节奏、交互质量等数十个维度的评判技能。当AI在生成代码时，这些技能会作为上下文约束，引导它进行自我检查，确保产出的界面在视觉上更经得起推敲，更接近一位有经验的设计师会做出的选择。

这个项目目前仍处于实验阶段，但它指向了一个非常明确的方向：在AI自动化生成代码的时代，“执行”本身正在被商品化，而真正的差异化优势将来自于“判断力”和“品味”。对于前端开发者、全栈工程师，或者任何需要与AI协作产出界面的从业者来说，掌握并善用这类工具，意味着你能更高效地获得高质量的输出，而不是在一堆粗糙的草稿中反复修改。

2. 核心设计思路：将主观“品味”转化为可执行的客观约束

2.1 从“感觉”到“原则”：解构设计评判的底层逻辑

设计“品味”听起来很玄乎，似乎是一种难以言传的直觉。但Taste-Skills项目的核心思路，正是试图将这种主观的“感觉”拆解成一系列可描述、可执行的原则和模式。这有点像把一位资深设计评审的思考过程，编写成一份详尽的检查清单。

例如，我们常说的“这个页面看起来有点乱”，其背后可能对应着多个可被检视的具体问题：视觉层次是否清晰（hierarchy-principles）？不同区域的间距是否遵循了统一的节奏（spatial-rhythm）？颜色使用是否具有语义一致性，还是仅仅为了装饰（color-systems）？Taste-Skills中的每一个技能（Skill），都瞄准了这样一个具体的评判维度。它不是告诉AI“要设计得好看”，而是提供了一套诸如“主要操作按钮的视觉权重应高于次要按钮”、“正文的行高应为字体大小的1.5至1.75倍”这样的具体启发式规则。

这种做法的优势在于，它让AI的“学习”和“应用”过程变得透明且可控。作为使用者，你可以清晰地知道是哪些原则在影响AI的决策。如果你不同意某个技能中的某些约束，你完全可以打开对应的Markdown文件进行编辑，让它更符合你或你所在团队的设计哲学。这比训练一个黑盒模型，然后祈祷它产出符合你品味的结果，要可靠和灵活得多。

2.2 技能矩阵：构建全方位的设计感知与决策框架

浏览Taste-Skills的技能列表，你会发现它被精心组织成了一个覆盖设计全流程的矩阵。这不仅仅是功能的堆砌，更反映了一套培养和运用设计判断力的方法论。

感知层（Perception）的技能，如visual-audit（10秒视觉审计）和detail-observation（细节观察），训练的是AI（以及使用AI的你）的“眼力”。它要求快速捕捉一个设计中的关键要素和问题点，就像一位经验丰富的医生能迅速从X光片中看出异常。cross-domain-seeing（跨领域观察）这个技能尤其有趣，它鼓励从建筑、时尚、电影等非数字领域汲取设计灵感，这能有效避免界面设计陷入陈词滥调。

分析与判断层（Analysis & Judgment）的技能，则更进一步。decision-tracing（决策追溯）和tradeoff-assessment（权衡评估）引导AI去理解设计决策背后的原因和取舍。taste-vs-trends（品味与潮流）则试图区分那些历久弥新的设计选择与转瞬即逝的流行风潮。这一层的技能，旨在培养批判性思维，让AI不仅能看到“是什么”，还能思考“为什么”。

表达与执行层（Articulation & Visual Language）的技能，是将内部判断转化为外部产出的关键。critique-vocabulary（批判词汇表）提供了精确描述设计问题的语言，避免使用“感觉不对”这类模糊反馈。而hierarchy-principles、color-systems等技能，则直接包含了可应用于代码生成的具体视觉语言规则。

这种分层结构的意义在于，它模拟了一个从“输入”（观察学习）到“处理”（分析判断）再到“输出”（表达执行）的完整认知循环。当你为AI助手加载这套技能时，你不仅在提升它单次输出的质量，更是在为它构建一个持续进化的设计思维框架。

3. 环境准备与技能部署实战

3.1 兼容性确认与基础环境搭建

Taste-Skills的核心交付物是一系列遵循SKILL.md格式的Markdown文件。因此，它的首要要求是你的AI编码助手支持读取并利用此类文件作为上下文或系统提示词。目前，主流的AI编程工具如Claude Code（在Cursor或Windsurf中）、Cursor自身的Agent模式、Continue.dev、Aider等都支持这种机制。在开始前，请确认你使用的工具允许你指定一个包含提示词文件的目录。

你不需要复杂的开发环境。只需要确保你的系统已安装Node.js（建议版本16或以上）和npm。因为Taste-Skills提供了一个便捷的CLI（命令行界面）工具来管理技能。打开你的终端（Terminal、iTerm、PowerShell等），通过运行node --version和npm --version来验证安装。

注意：虽然项目通过npx调用，理论上无需全局安装，但保持Node.js环境为较新版本可以避免潜在的包管理或脚本执行问题。如果你在团队环境中使用，建议统一基础环境版本。

3.2 使用CLI工具安装与管理技能

Taste-Skills的安装过程极其简单，这要归功于其设计良好的CLI。你无需克隆整个仓库，也无需手动下载文件。所有操作都通过npx命令完成。

首次安装全部技能：这是最快捷的入门方式。在你的项目根目录下，执行以下命令：

npx github:0xDragoon/taste-skills add --all

这个命令会从GitHub仓库拉取所有技能包，并在你的项目根目录下创建一个名为.taste-skills/的隐藏文件夹。所有技能都会以子文件夹的形式存放在这里，每个文件夹内包含一个SKILL.md文件。这个隐藏目录的好处是通常不会被版本控制系统（如Git）跟踪，你可以根据需要在.gitignore文件中决定是否忽略它。

选择性安装特定技能：如果你的项目只关注特定方面，或者想逐步引入，可以单独安装技能。技能名称就是你在技能表格中看到的标识符，例如hierarchy-principles。

# 安装单个技能 npx github:0xDragoon/taste-skills add hierarchy-principles # 一次性安装多个技能 npx github:0xDragoon/taste-skills add critique-vocabulary type-selection spatial-rhythm

技能探索与信息查看：在安装前，你可以先查看有哪些技能可用，以及它们的详细描述。

# 列出所有可用技能 npx github:0xDragoon/taste-skills list # 查看某个技能的详细信息 npx github:0xDragoon/taste-skills info color-systems

list命令会以清晰的表格形式输出所有技能及其分类，帮助你规划需要安装哪些。info命令则会展示该技能文件的简要内容预览，让你在安装前心中有数。

自定义安装路径：默认的.taste-skills目录可能不符合你的项目结构要求。你可以使用--dir参数指定任意目录。

npx github:0xDragoon/taste-skills add --all --dir ./src/agent-skills

这样，所有技能将被安装到./src/agent-skills/目录下。请务必记下这个路径，因为在配置AI助手时需要指向它。

实操心得：我建议在项目初期先使用--all安装全部技能，然后在.taste-skills目录中进行浏览。这样你可以全面了解技能库的内容，之后再根据项目特点，通过删除子文件夹的方式来精简，或者创建不同的技能组合目录用于不同场景（比如一个目录放“基础UI审查”技能，另一个放“高级交互设计”技能）。

4. 与AI编码助手深度集成配置详解

4.1 在Cursor（Claude Code）中配置技能上下文

Cursor是目前集成AI编码能力非常流畅的编辑器，其内置的Claude Code模型能很好地利用上下文文件。配置过程的核心是告诉Cursor去哪里寻找这些技能文件。

方法一：通过项目设置文件（推荐）许多AI助手支持项目级的配置文件。对于Cursor，你可以在项目根目录创建一个名为.cursor/rules/的目录（如果不存在则创建），然后将整个.taste-skills目录链接或复制到其中。更通用的方法是，在项目根目录创建一个.cursorrules文件（注意前面有点），并在其中通过相对路径引用技能目录。

// .cursorrules 文件内容 // 加载所有Taste-Skills作为设计审查规则 @include ./.taste-skills/**/*.md

这种方法的优点是配置一次，对整个项目生效。当你启动Cursor并打开该项目时，它会自动将这些规则加载到上下文中。

方法二：在聊天或编辑会话中手动附加在进行具体的代码生成或审查任务时，你可以在Chat输入框中通过指令手动引入。例如，当你需要AI生成一个React组件时，可以这样输入：

请参考项目 .taste-skills 目录下的设计技能（特别是 hierarchy-principles 和 spatial-rhythm）来生成这个用户个人资料页面的组件代码。确保视觉层次清晰，间距有节奏感。

虽然这种方式更灵活，但需要每次手动提醒，适合在探索阶段或针对特定任务使用。

方法三：配置Agent的System Prompt如果你使用Cursor的“Agent”模式（在设置中开启），你可以在Agent的系统提示词配置区域，添加指向技能目录的指令。例如，在Agent的初始化设置中加入：“你是一位精通视觉设计的前端专家。请始终应用位于[你的项目绝对路径]/.taste-skills/目录下的设计原则来审查和生成所有界面代码。” 这样，所有由该Agent发起的交互都会默认带上这些设计约束。

注意事项：路径一定要正确。如果技能安装在自定义目录，务必在配置中使用对应的路径。一个检查方法是，在终端中cat ./your-custom-dir/hierarchy-principles/SKILL.md，如果能正常输出文件内容，则路径有效。

4.2 在Windsurf、Continue等VS Code扩展中的配置

对于Windsurf、Continue.dev这类VS Code扩展，集成原理类似，都是通过将技能文件的内容注入到AI模型的系统提示词或上下文窗口中。

Windsurf：Windsurf通常使用一个名为windsurf.json的配置文件。你可以在该文件的context或prompt部分添加引用。

{ "context": [ { "type": "file", "path": "./.taste-skills/hierarchy-principles/SKILL.md", "description": "视觉层次设计原则" }, { "type": "file", "path": "./.taste-skills/color-systems/SKILL.md", "description": "色彩系统与语义化颜色使用规则" } // ... 添加其他所需技能 ] }

你也可以使用通配符来加载整个目录，但请注意这可能很快消耗大量上下文令牌（tokens）。更好的做法是根据当前开发任务，动态调整加载的技能组合。

Continue.dev：Continue使用config.json和context_providers进行配置。你可以在config.json中定义一个文件系统上下文提供者，指向你的技能目录。

{ "context_providers": [ { "name": "taste-skills", "type": "file", "params": { "path": "/absolute/path/to/your/project/.taste-skills", "pattern": "**/*.md" } } ] }

配置完成后，在Continue的聊天界面，你可以通过输入/并选择@taste-skills来将相关技能文件带入当前会话的上下文。

通用技巧：管理上下文长度设计原则的描述可能很详细，加载全部技能很容易超出AI模型的上下文窗口限制（如128K）。因此，按需加载是关键策略。不要试图一次性加载所有技能。我的经验是：

1. 按模块加载：开发登录页面时，加载hierarchy-principles,spatial-rhythm,color-systems。
2. 按任务类型加载：进行代码审查时，加载visual-audit,critique-vocabulary,quality-checklist。
3. 创建预设：在编辑器的代码片段或自定义命令功能中，创建几个预设命令，分别对应“生成基础UI组件”、“进行设计审查”、“优化交互细节”等场景，每个预设关联不同的技能组合。

5. 核心技能深度解析与应用场景

5.1 视觉语言类技能：从原则到像素

这类技能是直接影响代码生成质量的“硬技能”，它们提供了最具体的视觉约束。

hierarchy-principles（层次原则）：这个技能文件里不会只是空洞地说“要有层次感”。它会具体到：

• 视觉权重规则：通过字体大小、粗细、颜色、留白来建立明确的阅读顺序。例如，它可能建议主标题的字体大小是正文的2-2.5倍，并且使用font-weight: 700或更高的权重。
• 注意力引导：描述如何通过布局、对比和间距将用户的视线引导至关键操作区域（如主要按钮、关键信息）。
• 分组与关联：利用“亲密性原则”（Proximity），通过间距将相关元素组织在一起，与不相关元素分离。在代码层面，这会转化为对margin、padding和容器div的合理运用。

实战应用：当你让AI生成一个仪表盘页面时，加载此技能。AI生成的代码会更倾向于使用清晰的标题层级（h1,h2,h3），为关键指标卡片添加视觉突出（比如阴影或边框），并通过合理的间距区分不同的数据模块，而不是把所有内容平铺在一个拥挤的空间里。

spatial-rhythm（空间节奏）：这是实现“精致感”的关键。糟糕的间距让界面看起来业余，而有节奏的间距则带来秩序和专业。

• 基准间距单位：技能会建议建立一个基准单位（如8px或1rem），所有间距（margin,padding,gap）都应是这个单位的整数倍（如8px, 16px, 24px, 32px...）。这能带来视觉上的统一性。
• 垂直节奏：特别关注行高（line-height）与段落间距的协调。例如，正文line-height设为1.6，段落之间的margin-bottom可能是1.5em，形成一个舒适的阅读流。
• 密度控制：区分“紧凑型”（数据表格、工具类应用）和“呼吸型”（营销页面、阅读类应用）界面的不同间距策略。

实战应用：在开发一个设置页面时，此技能能确保表单标签和输入框之间的间距一致，复选框列表的行高均匀，各个设置区块之间的分隔清晰，整个页面呈现出一种和谐的节奏感，而不是这里挤一点、那里空一块。

color-systems（色彩系统）：这个技能旨在避免随机、装饰性的颜色使用，推动建立语义化的色彩体系。

• 角色定义：明确颜色在UI中的角色——主色（Primary）、成功（Success）、警告（Warning）、错误（Error）、信息（Info）、中性色（Neutral）。每个角色对应一组具体的色值。
• 克制与一致性：限制界面中使用的颜色数量（例如，除中性灰外，主要颜色不超过3种）。确保相同语义的元素使用相同的颜色（例如，所有成功状态的提示都用同一种绿色）。
• 无障碍对比度：隐含或明确要求颜色组合需要满足WCAG AA级对比度标准，这对可访问性至关重要。

实战应用：AI在生成一个按钮组件时，会基于此技能，不仅生成primary、secondary等变体，还会自动为这些变体配上具有合适对比度的文本颜色和边框颜色，并可能生成对应的:hover、:active状态样式，确保色彩系统的完整性。

5.2 分析与评判类技能：培养AI的设计思维

这类技能不直接生成代码，而是提升AI在审查、分析和决策时的思考深度。

visual-audit（10秒视觉审计）：这是一个高效的快速检查清单。它训练AI（和开发者）在极短时间内抓住核心问题。其检查点可能包括：

• 第一眼看到的是什么？这是否是页面想强调的？
• 信息是否被清晰地分组？
• 是否存在明显的对齐错误？
• 颜色使用是否混乱或令人分心？
• 主要的行动号召（Call to Action）是否突出？

使用场景：在完成一个页面的初稿后，你可以将截图或代码交给AI，并指令：“请运用visual-audit技能对此设计进行10秒快速审计，列出最突出的3个问题。” AI会给出快速、直接的反馈，而不是笼统的“看起来不错”。

tradeoff-assessment（权衡评估）：任何设计都是权衡的结果。这个技能引导AI识别并评价这些权衡。

• 识别优先级：这个设计明显优先考虑了哪些方面？（是加载速度、信息密度、还是视觉冲击力？）
• 识别牺牲项：为了达成上述优先级，哪些方面被妥协了？（可能是代码复杂度、浏览器兼容性、或是某些边缘用例的体验？）
• 评估合理性：在当前的产品阶段、用户目标和业务背景下，这种权衡是否合理？

使用场景：当你在两个技术方案或UI方案之间犹豫时，可以让AI基于此技能进行分析。例如：“方案A使用了大量CSS Grid实现复杂布局，方案B使用更简单的Flexbox但布局略显单调。请运用tradeoff-assessment技能，结合我们这是一个需要快速迭代的内部工具的背景，分析哪个方案更优。”

taste-vs-trends（品味与潮流）：这是防止设计过时或盲从的关键技能。它帮助区分什么是扎实的设计决策，什么只是一时的流行。

• 趋势特征：识别当前流行的视觉特征（如特定的阴影样式、渐变用法、圆角大小、玻璃拟态等）。
• 品味特征：关注那些超越潮流、基于人类视觉认知和长期可用性研究的原则（如清晰的层次、合理的对比、一致性的交互反馈）。
• 结合建议：评估在具体场景中，是应该采用某个趋势来增加新鲜感，还是应该坚持经典原则以确保耐用性。

使用场景：当AI生成一个非常“时髦”的组件，使用了当前最流行的设计风格时，你可以追问：“请用taste-vs-trends技能分析一下这个按钮设计。它的哪些元素是基于潮流，哪些是基于持久的设计原则？三年后它看起来会过时吗？”

6. 实战工作流：将Taste-Skills融入日常开发

6.1 场景一：从零生成一个符合设计规范的组件

假设我们需要一个现代风格的“统计卡片”组件，用于展示关键指标。

第一步：启动与上下文设置在Cursor中新建一个React组件文件，例如MetricCard.jsx。在编辑器内唤出AI聊天面板（通常是Cmd/Ctrl + K），首先加载核心的视觉技能。

请参考项目 .taste-skills 目录下的 hierarchy-principles, spatial-rhythm, color-systems 技能，为我生成一个统计卡片组件。

这个指令为接下来的生成任务设定了设计约束的边界。

第二步：提出具体需求接着，给出更具体的需求描述。

组件名称：MetricCard Props: - title: string (卡片标题) - value: string | number (主要数值) - change: number (变化百分比，正负) - trend: 'up' | 'down' (趋势图标) - description: string (辅助描述文本) 要求： 1. 视觉层次清晰，value是视觉焦点。 2. 使用一致的间距系统（基于8px基准）。 3. 颜色语义化：上升用success色，下降用error色。 4. 整体看起来专业、清晰，有足够的留白。 请用Tailwind CSS实现。

第三步：审查与迭代AI会生成一份代码。此时，不要直接接受。运用技能进行“代码审查”。

现在，请用 visual-audit 和 craft-signals 技能，审查一下你刚刚生成的这个 MetricCard 组件代码。从视觉和代码细节两个角度，提出可以改进的具体点。

AI可能会反馈：“1.value的字体粗细可以增加到font-bold以强化焦点。2. 图标和变化百分比文本的垂直对齐可以微调，建议使用items-center。3. 卡片的border-radius建议统一为rounded-lg(0.5rem)，以符合craft-signals中关于一致圆角的原则。”

根据反馈，你可以让AI直接修改，或自己动手调整。这个过程将单向的“生成”变成了双向的“协作与精炼”。

6.2 场景二：对现有代码进行设计质量审查

你接手了一个旧项目，其中有一个UserProfile.jsx组件看起来有些凌乱，想进行优化。

第一步：定向分析将整个组件代码粘贴到AI聊天窗口，并加载分析类技能。

以下是现有的 UserProfile 组件代码。请运用 decision-tracing 和 absence-audit 技能对其进行分析。 [粘贴代码]

decision-tracing会尝试解释现有代码背后的可能意图（例如，“这里用<br>可能是想快速换行，但破坏了语义化和样式控制”）。absence-audit则会指出缺失的东西（例如，“缺少错误状态显示”、“图片加载失败时没有占位符”、“交互状态（hover）样式不完整”）。

第二步：综合评审与重构建议基于初步分析，进行更全面的评审。

很好。现在，请再结合 quality-checklist 和 hierarchy-principles 技能，给出一份结构化的重构建议清单，优先级从高到低。

AI可能会生成如下表格形式的建议：

第三步：实施重构最后，你可以要求AI根据这份清单，直接生成重构后的代码，或者分步骤指导你进行修改。这样，代码优化不再是凭感觉，而是基于一套清晰的设计原则进行的有序工程。

6.3 场景三：团队设计评审与知识沉淀

Taste-Skills同样可以赋能团队的设计协作和知识传承。

在团队评审会前：使用critique-vocabulary和written-critique技能，让AI为待评审的设计稿（或代码）生成一份结构化的评审初稿。这份初稿会使用精确的语言（如“标题和正文的对比度不足，未能建立清晰的视觉层次”，而非“字看不清楚”），并按照“观察-原则-问题-建议”的结构组织。这可以作为评审讨论的高质量起点，提升会议效率。

建立团队设计知识库：鼓励团队成员将项目中遇到的设计决策案例，结合相关的Taste-Skills原则，整理成“设计决策记录”。例如，记录下为什么某个产品的按钮圆角最终定为8px（考虑了spatial-rhythm与品牌调性），为什么主色选择了特定的蓝色阴影（考虑了color-systems中的可访问性与情感联想）。这些记录，配合principle-tagging（原则标记）技能，可以逐渐形成一个可搜索、可复用的团队内部设计模式库。

新人 onboarding：对于新加入团队的开发者，可以要求他们通过daily-routines（每日例行）技能中的练习，快速熟悉团队的设计品味和标准。例如，第一周的练习是使用visual-audit审查团队现有的三个核心页面；第二周是使用hierarchy-principles和spatial-rhythm来修改一个存在问题的旧组件。这是一种“做中学”的高效培训方式。

7. 常见问题、局限性与进阶技巧

7.1 常见问题排查

在实际使用中，你可能会遇到一些典型问题，以下是排查思路：

7.2 理解项目的局限性

Taste-Skills是一个强大的辅助工具，但必须清醒认识其边界：

1. 启发式而非真理：技能中编码的规则是基于经验总结的启发式方法（Heuristics），是“在大多数情况下有效的良好实践”，而非放之四海皆准的物理定律。对于突破常规的创新设计，这些规则可能反而成为束缚。
2. 缺乏情境感知：AI虽然加载了技能，但它对项目的具体业务目标、品牌调性、用户人群的深层理解是有限的。它无法判断“这个金融应用使用粉红色是否合适”，除非你在技能或指令中明确告知。
3. 无法替代人类判断：这是最重要的原则。AI的输出，尤其是涉及审美和复杂权衡的判断，必须经过具备专业能力的人类审查。技能只能缩小“明显糟糕”和“可能不错”之间的差距，无法替代设计师的最终决策。
4. 实验性状态：项目处于活跃开发阶段，技能的定义、CLI工具的行为都可能发生变化。不建议将其用于对稳定性要求极高的生产流水线核心环节。

7.3 进阶使用技巧与自定义

当你熟悉基础用法后，可以通过以下方式发挥其更大价值：

技能混搭与场景化配置： 不要总是加载全部技能。创建不同的“技能配方”用于不同场景。例如：

• “快速原型配方”：hierarchy-principles+spatial-rhythm+visual-audit。用于快速搭建结构清晰、比例协调的界面草稿。
• “深度审查配方”：quality-checklist+detail-observation+critique-vocabulary+tradeoff-assessment。用于对成熟方案进行走查和优化。
• “设计系统构建配方”：color-systems+type-systems+craft-signals。用于定义和维护一套一致的设计令牌（Design Tokens）和组件规范。

编辑与创建自定义技能： 这是将团队知识沉淀下来的关键。打开任何一个SKILL.md文件，你会发现它就是纯文本。你可以：

• 修改：调整其中的参数。比如你觉得默认的基准间距8px对你项目太小，可以改为6px或10px。
• 本地化：添加符合你品牌的具体规则。例如，在color-systems.md中，直接替换为你公司设计系统中的十六进制色值。
• 创建：复制一个现有技能文件，重命名并修改内容，创建一个全新的技能。比如，你可以创建一个brand-voice-typography.md技能，定义你的产品在严肃、友好、活泼等不同语气下应使用的字重、字号和行高组合。

将技能输出转化为团队流程： 将AI基于技能生成的评审意见，整合到团队的Pull Request流程中。可以设置一个Git钩子（Git Hook），当修改涉及UI组件时，自动调用脚本，用Taste-Skills的核心原则对变更进行基础检查，并将结果以评论形式附在PR中。这能将“设计品味”的检查部分自动化，成为开发流程中的一道标准工序。

经过一段时间的实践，我个人的体会是，Taste-Skills这类工具的价值，不在于提供一个“自动设计”的魔法，而在于它充当了一个永不疲倦、知识渊博的“初级设计评审员”。它强制我们在与AI协作时，用更精确的语言描述设计意图，用更结构化的方式思考视觉问题。它最大的副产品，或许是反过来训练了我们开发者自身的设计思维——当我们不断看到AI应用这些原则，并与之讨论权衡时，我们自己对什么是好的设计，也会产生更深刻、更系统的理解。最终，它模糊了“实现者”与“评判者”的界限，推动着每一个界面构建者，向兼具工程能力与设计品味的方向迈进。