AI设计圣经：用规则引擎提升UI/UX设计效率与一致性

1. 项目概述：为AI设计助手打造的UI/UX设计规则圣经

如果你和我一样，既是开发者，又经常需要和设计师协作，或者干脆自己上手用Figma画界面，那你肯定遇到过这样的场景：脑子里有个不错的想法，打开Figma，面对空白画布，却不知道从何下手。颜色怎么配？按钮放多大？间距用多少？这些看似基础的问题，往往最能消耗时间和灵感。更别提现在AI工具越来越强大，像Cursor这样的IDE内置的AI助手已经能直接生成Figma代码了，但生成出来的东西，经常是“形似而神不似”——按钮可能是椭圆的，颜色对比度不够，布局乱七八糟，完全不符合基本的UI/UX设计规范。

saralobo/rules-design-bible这个项目，就是为了解决这个痛点而生的。你可以把它理解为一本给AI设计助手看的“设计圣经”或“设计规范手册”。它不是一个具体的软件或插件，而是一套用Markdown格式编写的、系统化的UI/UX设计规则集合。这套规则的核心用途，是让Cursor IDE中的AI助手在为你生成Figma界面代码之前，先“学习”并严格遵守这些经过验证的设计原则。这样一来，AI产出的设计稿就不再是随机的、混乱的草图，而是具备了专业设计基础、符合人机交互常识的、可直接用于进一步打磨的高质量起点。

简单来说，它把设计师多年积累的隐性知识——那些关于对比、对齐、亲密性、费茨定律的“感觉”——转化成了AI可以明确理解和执行的“显性规则”。无论你是独立开发者、产品经理，还是希望提升设计输出一致性的团队，这套规则都能让你和AI的协作效率提升好几个档次，确保产出的设计至少是“专业及格线”以上的水平。

2. 核心设计规则模块深度解析

这套设计圣经由17个独立的.mdc规则文件组成，覆盖了从核心原则到具体组件的方方面面。.mdc是Cursor Rules的专用格式，本质上就是Markdown文件，但会被Cursor的AI优先读取并作为生成依据。下面我们来深入拆解几个最关键模块的内涵和实际应用价值。

2.1 核心原则与UX定律：设计的“第一性原理”

00-core-principles.mdc和01-ux-laws.mdc是整个体系的基石。它们不教你怎么画一个具体的按钮，而是告诉你“为什么”按钮应该这么设计。

四大设计支柱：这个模块通常会强调四个核心：清晰（Clarity）、高效（Efficiency）、一致（Consistency）、美观（Aesthetics）。AI在生成界面时，会以这四个标准来权衡每一个决策。例如，为了“清晰”，AI会优先确保最重要的信息（如主要操作按钮）具有最高的视觉权重；为了“高效”，它会参考费茨定律，将常用按钮放在更容易点击的屏幕底部区域。

关键UX定律解析：

• 费茨定律：这是一个关于点击效率的物理模型。定律指出，点击一个目标所需的时间，与目标距离当前位置的距离成正比，与目标的大小成反比。在规则中，这会转化为具体的指令，比如：“主要按钮的最小点击区域应为44x44pt（iOS HIG标准）”，“将高频操作（如‘发布’、‘购买’）放置在拇指易于触及的屏幕下半部分”。
• 希克定律：决策时间随选项数量增加而增加。这直接指导了导航和菜单的设计。规则会要求AI：“下拉菜单的选项建议不超过7个”，“复杂的设置项应进行分组或分步展示”。
• 米勒定律：人类短期记忆只能容纳7±2个信息块。这影响了信息架构，规则会建议：“主导航标签不超过5个”，“卡片上展示的关键信息点控制在5个以内”。

实操心得：不要把这些定律当成死板的教条。规则文件的作用是让AI有一个科学的起点。在实际项目中，你可能会为了品牌个性使用一个略小于44pt的按钮，或者在特定场景下提供更多选项。这时，你可以临时调整或覆盖规则。理解定律背后的原理，能让你更好地驾驭AI，而不是被规则束缚。

2.2 视觉基础：格式塔、布局与色彩系统

02-gestalt.mdc、03-layout-spacing.mdc和05-colors.mdc这三个模块，共同构成了界面的视觉骨架和皮肤。

格式塔原则的应用：这是心理学原理在视觉设计中的直接体现。规则会命令AI利用这些原则自动组织元素。

• 接近性原则：相关元素应彼此靠近。AI在生成一个表单时，会自动将标签和其对应的输入框间距设置得比与下一个标签的间距更小。
• 相似性原则：功能相同的元素应看起来相似。所有次级按钮会被赋予相同的颜色、边框样式，从而在视觉上形成一组。
• 闭合原则：人们会自觉补全不完整的图形。这指导着图标设计，规则会建议使用简洁的线形图标，用户的大脑会自动补全形状。

8px网格系统：这是现代UI设计的基石。规则会强制AI将所有间距、尺寸与8px的倍数对齐（如8, 16, 24, 32, 48…）。这么做的原因有三：1)视觉和谐：倍数关系创造韵律感；2)开发高效：工程师换算方便，减少奇数像素；3)响应式灵活：缩放时比例更易协调。AI会依据这个系统来设置容器内边距（Padding）、元素间距（Gap）和组件尺寸。

色彩系统构建：规则不会让AI随机选色。它会引导AI建立一个基于色相、明度、饱和度的系统化调色板。

1. 定义基础色：通常是一个品牌主色，以及其衍生出的浅色、深色变体。
2. 建立中性色阶：从纯白到纯黑之间，定义8-10个阶梯的灰色，用于文字、背景、边框。
3. 系统语义色：定义成功（绿）、警告（黄）、错误（红）、信息（蓝）等状态色。
4. 强制对比度检查：根据13-accessibility.mdc中的WCAG标准，规则会计算前景色（如文字）和背景色的对比度，确保达到AA级（4.5:1）或AAA级（7:1）标准，不合格的颜色组合会被AI拒绝使用。

2.3 组件与交互规范：从按钮到动效

06-buttons-cta.mdc、07-forms-inputs.mdc、10-feedback-states.mdc和11-motion-transitions.mdc等模块，将原则落地为具体的、可执行的组件规范。

按钮的设计逻辑：规则会定义一套按钮层级体系。

• 主要按钮：高对比度填充色，用于一个界面中最核心、唯一的操作（如“保存”、“下单”）。一个界面通常只有一个。
• 次要按钮：描边样式或低饱和度填充色，用于重要但不核心的操作（如“取消”、“返回”）。
• 三级按钮/文字按钮：无背景，仅以文字或图标呈现，用于不那么重要或破坏性较小的操作（如“删除”）。 规则会详细规定每种按钮在不同状态（默认、悬停、点击、禁用）下的样式变化，确保交互反馈清晰。

表单的体验保障：这是易用性的重灾区。规则会为AI设定一系列“军规”：

• 标签必须清晰：使用内联标签或浮动标签，避免占位符文本作为唯一标签。
• 提供实时验证：在用户输入后即时给出反馈（如密码强度提示、邮箱格式错误），而不是等到提交时才报错。
• 合理利用输入类型：为邮箱、电话、密码字段设置正确的HTML5type属性，以触发合适的移动端键盘。
• 错误状态明确：不仅输入框变红，还要在附近提供明确、友善的错误说明文字。

动效的克制与效用：动效不是为了炫技。规则会基于 Material Design 或 Apple 的动效指南，约束AI的动效生成。

• 持续时间：大多数过渡动画应在200-300毫秒之间。太慢会让人感到拖沓，太快则无法被感知。
• 缓动函数：使用标准的ease-in-out而非线性动画，模拟真实物体的运动，使其更自然。
• 用途明确：动效应服务于以下目的：引导用户注意力（如新增项目时的微动效）、建立空间关系（页面过渡）、提供状态反馈（加载旋转）。规则会禁止AI添加无意义的装饰性动画。

3. 如何部署与应用这套设计规则

拥有这套规则文件只是第一步，关键在于如何将其集成到你的工作流中，让AI真正变成你的“设计副驾”。以下是几种主流的应用方式及其详细步骤。

3.1 方式一：项目级集成（推荐）

这是最灵活、最常用的方式。将规则绑定到特定项目，可以为不同的项目（如电商App、后台管理系统、官网）配置不同的规则侧重点。

操作步骤：

1. 获取规则文件：通过Git克隆或直接下载ZIP包的方式，将saralobo/design-bible仓库获取到本地。

   git clone https://github.com/saralobo/design-bible.git

2. 定位目标项目：打开你正在进行的软件项目根目录。
3. 集成规则：在项目根目录下，创建.cursor文件夹（如果不存在），然后在其内部创建rules文件夹。将设计圣经仓库中.cursor/rules/目录下的所有.mdc文件复制到你的项目的.cursor/rules/路径下。
4. 验证与使用：用 Cursor IDE 重新打开你的项目。现在，当你使用 Cursor 的 AI 功能（如通过Cmd+K打开 AI 指令框）请求设计相关任务时，例如：“为这个登录页面生成Figma代码”或“设计一个用户个人资料卡片”，AI 在生成回复前，会首先读取并应用这些规则。

项目级集成的优势：

• 可定制化：你可以根据当前项目需求，修改或注释掉某些规则。例如，一个面向儿童的教育App，你可能需要更宽松的点击区域和更鲜艳的色彩，你可以调整06-buttons.mdc和05-colors.mdc中的参数。
• 团队协作：将包含规则的项目仓库推送到Git，团队所有成员都能共享同一套设计标准，确保AI辅助产出的一致性。
• 环境隔离：不会影响你在其他项目中使用不同的规则集或默认设置。

3.2 方式二：全局级集成

如果你希望在所有项目中都默认使用这套设计规范，可以采用全局集成。

操作步骤：

1. 找到全局规则目录：在操作系统用户主目录下，找到 Cursor 的全局配置文件夹。通常路径为：
   • macOS/Linux:~/.cursor/rules/
   • Windows:C:\Users\[你的用户名]\.cursor\rules\（如果rules文件夹不存在，则手动创建它。）
2. 复制规则文件：将设计圣经中的所有.mdc文件复制到上述全局rules文件夹中。
3. 生效：完成复制后，在任何使用 Cursor 打开的项目中，AI 都将默认遵循这套设计圣经的指导。

注意事项：全局集成虽然方便，但缺乏灵活性。当你需要为一个风格迥异的特殊项目（比如一个复古游戏界面）进行设计时，这些通用规则可能会成为阻碍。此时，你需要在项目本地创建同名规则文件进行覆盖，或者临时禁用全局规则，操作上反而更麻烦。因此，对于多数有多个不同风格项目的开发者，我更推荐项目级集成。

3.3 方式三：作为人工设计检查清单

即使不依赖AI，这套规则本身也是一个极其出色的设计自查清单。你可以手动打开这些.mdc文件，在完成设计稿后逐项核对。

使用场景示例：当你自己设计完一个页面后，打开16-anti-patterns.mdc（反模式清单），检查是否有“使用红色表示成功操作”、“模态框没有明确的关闭方式”、“文字对比度不足”等常见错误。或者打开14-nielsen-heuristics.mdc（尼尔森十大可用性原则），逐一评估你的设计在“系统状态可见性”、“匹配系统与真实世界”、“用户控制与自由”等方面的表现。

这种方式能将感性的设计评审，转变为客观、系统的质量检测，特别适合个人开发者或缺乏专业设计评审的团队。

4. 高级技巧与自定义规则拓展

掌握了基本用法后，你可以更进一步，让这套设计圣经完全贴合你的个人习惯和项目需求。

4.1 规则文件的语法与自定义

.mdc文件本质是Markdown，Cursor的AI会识别其中的特定结构。理解其语法，你就能自己编写或修改规则。

基本结构：

# 规则模块标题 这是一个关于XX的规则描述。 ## 具体规则条目1 - **规则**：按钮的圆角半径应与其高度相关联。 - **指令**：当创建按钮时，如果按钮高度为H，则圆角半径应设置为 `H/2`（圆形按钮）或 `H/6` 到 `H/4` 之间（圆角矩形按钮）。 - **理由**：统一的圆角比例能建立视觉和谐感，并与现代设计趋势相符。 - **示例**：一个高48px的按钮，圆形按钮半径为24px，圆角矩形按钮半径可在8px-12px之间。 ## 具体规则条目2 - **规则**：避免在非超链接文本下使用下划线。 - **指令**：除非元素是明确的导航链接，否则不要对其文本应用下划线样式。 - **理由**：下划线在数字界面中已被用户普遍理解为超链接的视觉约定。滥用会导致混淆。

你可以参照现有文件的格式，新增你自己的规则。例如，为你公司的品牌色、特有的组件库（如特殊的数据图表）或业务逻辑（如购物车的特殊状态）创建专属规则文件。

4.2 与Figma社区资源的联动

设计圣经提供了设计原则，但具体的视觉灵感或组件参考可以从Figma社区获取。你可以将两者结合。

操作流程：

1. AI生成基础框架：利用集成了规则的Cursor AI，生成一个符合UX规范、布局合理的页面基础代码或结构描述。
2. Figma社区寻找UI Kit：前往Figma社区，搜索与你项目风格匹配的成熟UI Kit（如“iOS 17 UI Kit”、“Material Design 3 Kit”或某个特定行业的Kit）。
3. 融合与调整：将AI生成的结构与UI Kit中的精美视觉组件相结合。用UI Kit的配色、图标、组件样式，替换掉AI生成的“基础款”，快速获得既专业又美观的设计稿。
4. 反向补充规则：如果你发现某个UI Kit中的设计模式特别好（比如一种新颖的卡片切换动效），你可以将其总结成规则，补充到你本地的11-motion-transitions.mdc或12-micro-interactions.mdc文件中，让AI下次能直接应用。

4.3 应对复杂与模糊的设计场景

规则是清晰的，但设计需求往往是复杂和模糊的。这时需要你作为“指挥官”来引导AI。

场景一：在“一致性”和“突出性”之间权衡。规则要求相似操作使用相同样式的按钮（一致性），但产品经理要求必须突出“立即购买”按钮。

• 你的指令：“遵循设计规则，为这个商品页面生成布局。其中，‘加入购物车’使用次要按钮样式，‘立即购买’使用主要按钮样式。请确保两个按钮在尺寸和间距上遵循8px网格系统，并通过填充色和阴影的对比，使‘立即购买’按钮的视觉权重显著高于‘加入购物车’按钮。”
• 背后的思考：你通过指令明确了例外情况，并给出了解决方案（使用同一层级体系下的不同级别），既满足了业务需求，又让AI的产出保持在规范的框架内。

场景二：处理规则未覆盖的新组件。你需要设计一个“语音消息波形图”组件，这在现有规则中没有。

• 你的指令：“我需要设计一个展示语音消息的波形图组件。目前规则中没有相关定义。请首先遵循核心的格式塔原则（特别是相似性和连续性）和色彩系统来创建。波形应以连续的曲线表示，播放部分用主色，未播放部分用中性色。同时，确保可点击区域符合费茨定律（最小44pt）。生成后，我将把此组件规范补充到本地规则文件中。”
• 背后的思考：你引导AI从更高维度的基础原则出发，推导出新组件的设计，并主动规划了规则的迭代。

5. 常见问题、排查与效能提升实录

在实际使用中，你可能会遇到一些困惑或效果不理想的情况。以下是我在长期使用中总结的一些典型问题及解决方案。

5.1 AI似乎“无视”了某些规则？

这是最常见的问题。通常不是规则失效，而是你的指令与规则发生了冲突，或者AI在复杂指令中优先满足了其他约束。

排查步骤：

1. 检查规则文件路径和格式：确认.mdc文件是否放在了正确的.cursor/rules/目录下，并且文件编码为UTF-8，语法无错误。
2. 审查你的指令：你的指令是否过于模糊或包含了与规则矛盾的要求？例如，你要求“做一个非常炫酷的闪烁按钮”，这可能与11-motion-transitions.mdc中“动效应克制有用”的规则，以及16-anti-patterns.mdc中“避免使用闪烁元素引起不适”的规则直接冲突。AI会陷入两难。
3. 简化并分步指令：不要在一个指令中要求AI完成整个页面的所有细节。尝试分步进行：“第一步，遵循布局规则，用网格系统搭建这个仪表盘的三栏布局框架。第二步，在左侧栏，遵循卡片和列表规则，生成一个用户信息卡片...”
4. 在指令中明确引用规则：你可以直接说：“请严格按照05-colors.mdc中定义的对比度规则，为这段文字选择合适的背景色。” 这能显著提高AI对特定规则的注意力。

5.2 生成的设计看起来“呆板”或“缺乏创意”

这是对规则作用的误解。设计圣经的目标是确保可用性底线和一致性基础，而不是提供天马行空的创意。它产出的是“设计原型”，而非“最终稿”。

解决方案：

• 明确期望：你应该将AI视为一个高效的“初级设计师”或“设计系统执行者”。它负责把功能、布局、交互逻辑用专业、规范的方式呈现出来，省去你从零画框、对齐、配色的基础工作。
• 创意在于你：在AI生成的规范原型基础上，由你来注入品牌个性、情感化设计、独特的视觉风格和微交互。比如，调整圆角的弧度曲线、使用自定义的插图、设计独特的加载动画。
• 迭代优化：对AI说：“这个列表的布局很好，符合规则。现在，请为每个列表项添加一个更生动的图标，并从我们的品牌渐变色彩系统中选取颜色，让整体感觉更活泼一些。”

5.3 如何衡量这套规则带来的实际价值？

无法精确量化，但可以从几个维度感知效能的提升：

效率提升对比表：

长期价值：最大的价值在于知识沉淀。你将团队或个人的设计经验固化成了可复用、可迭代的规则资产。新成员加入，通过规则能快速上手；设计决策有了客观依据，减少了无谓争论。

5.4 规则冲突或过时了怎么办？

设计趋势和最佳实践在不断演进，规则也需要更新。

更新策略：

1. 订阅源头：关注规则文件中引用的权威来源，如 Material Design、Apple HIG、WCAG 的官方更新。
2. 实践反馈：在项目实践中，如果发现某条规则导致的设计效果不佳，不要盲目遵循。分析原因：是规则本身有问题，还是应用场景特殊？记录下来。
3. 分支与实验：在本地项目规则中，创建一条实验性规则或修改现有规则，测试其效果。
4. 贡献回馈：如果经过验证你的修改是普适性的改进，可以向原saralobo/design-bible仓库提交 Pull Request，或者在你团队内部维护的规则库中更新版本。这本身就是一种极佳的知识管理。

这套设计规则圣经不是一个静态的、束缚创造力的枷锁，而是一个动态的、可生长的“设计伙伴”的培训手册。它的终极目的，是让你从重复、繁琐、易错的设计基础劳动中解放出来，让你能更专注于真正创造价值的部分——理解用户、定义问题、构思创新解决方案。当你熟练驾驭它之后，你会发现，你和AI的协作不再是“它画我看，我改它猜”，而是你作为设计指挥官，清晰地下达战略指令，而AI作为训练有素的副官，高效、精准地执行战术细节。这种工作模式的转变，才是生产力质的飞跃。