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定律解析费茨定律这是一个关于点击效率的物理模型。定律指出点击一个目标所需的时间与目标距离当前位置的距离成正比与目标的大小成反比。在规则中这会转化为具体的指令比如“主要按钮的最小点击区域应为44x44ptiOS 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建立一个基于色相、明度、饱和度的系统化调色板。定义基础色通常是一个品牌主色以及其衍生出的浅色、深色变体。建立中性色阶从纯白到纯黑之间定义8-10个阶梯的灰色用于文字、背景、边框。系统语义色定义成功绿、警告黄、错误红、信息蓝等状态色。强制对比度检查根据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、后台管理系统、官网配置不同的规则侧重点。操作步骤获取规则文件通过Git克隆或直接下载ZIP包的方式将saralobo/design-bible仓库获取到本地。git clone https://github.com/saralobo/design-bible.git定位目标项目打开你正在进行的软件项目根目录。集成规则在项目根目录下创建.cursor文件夹如果不存在然后在其内部创建rules文件夹。将设计圣经仓库中.cursor/rules/目录下的所有.mdc文件复制到你的项目的.cursor/rules/路径下。验证与使用用 Cursor IDE 重新打开你的项目。现在当你使用 Cursor 的 AI 功能如通过CmdK打开 AI 指令框请求设计相关任务时例如“为这个登录页面生成Figma代码”或“设计一个用户个人资料卡片”AI 在生成回复前会首先读取并应用这些规则。项目级集成的优势可定制化你可以根据当前项目需求修改或注释掉某些规则。例如一个面向儿童的教育App你可能需要更宽松的点击区域和更鲜艳的色彩你可以调整06-buttons.mdc和05-colors.mdc中的参数。团队协作将包含规则的项目仓库推送到Git团队所有成员都能共享同一套设计标准确保AI辅助产出的一致性。环境隔离不会影响你在其他项目中使用不同的规则集或默认设置。3.2 方式二全局级集成如果你希望在所有项目中都默认使用这套设计规范可以采用全局集成。操作步骤找到全局规则目录在操作系统用户主目录下找到 Cursor 的全局配置文件夹。通常路径为macOS/Linux:~/.cursor/rules/Windows:C:\Users\[你的用户名]\.cursor\rules\如果rules文件夹不存在则手动创建它。复制规则文件将设计圣经中的所有.mdc文件复制到上述全局rules文件夹中。生效完成复制后在任何使用 Cursor 打开的项目中AI 都将默认遵循这套设计圣经的指导。注意事项全局集成虽然方便但缺乏灵活性。当你需要为一个风格迥异的特殊项目比如一个复古游戏界面进行设计时这些通用规则可能会成为阻碍。此时你需要在项目本地创建同名规则文件进行覆盖或者临时禁用全局规则操作上反而更麻烦。因此对于多数有多个不同风格项目的开发者我更推荐项目级集成。3.3 方式三作为人工设计检查清单即使不依赖AI这套规则本身也是一个极其出色的设计自查清单。你可以手动打开这些.mdc文件在完成设计稿后逐项核对。使用场景示例当你自己设计完一个页面后打开16-anti-patterns.mdc反模式清单检查是否有“使用红色表示成功操作”、“模态框没有明确的关闭方式”、“文字对比度不足”等常见错误。或者打开14-nielsen-heuristics.mdc尼尔森十大可用性原则逐一评估你的设计在“系统状态可见性”、“匹配系统与真实世界”、“用户控制与自由”等方面的表现。这种方式能将感性的设计评审转变为客观、系统的质量检测特别适合个人开发者或缺乏专业设计评审的团队。4. 高级技巧与自定义规则拓展掌握了基本用法后你可以更进一步让这套设计圣经完全贴合你的个人习惯和项目需求。4.1 规则文件的语法与自定义.mdc文件本质是MarkdownCursor的AI会识别其中的特定结构。理解其语法你就能自己编写或修改规则。基本结构# 规则模块标题 这是一个关于XX的规则描述。 ## 具体规则条目1 - **规则**按钮的圆角半径应与其高度相关联。 - **指令**当创建按钮时如果按钮高度为H则圆角半径应设置为 H/2圆形按钮或 H/6 到 H/4 之间圆角矩形按钮。 - **理由**统一的圆角比例能建立视觉和谐感并与现代设计趋势相符。 - **示例**一个高48px的按钮圆形按钮半径为24px圆角矩形按钮半径可在8px-12px之间。 ## 具体规则条目2 - **规则**避免在非超链接文本下使用下划线。 - **指令**除非元素是明确的导航链接否则不要对其文本应用下划线样式。 - **理由**下划线在数字界面中已被用户普遍理解为超链接的视觉约定。滥用会导致混淆。你可以参照现有文件的格式新增你自己的规则。例如为你公司的品牌色、特有的组件库如特殊的数据图表或业务逻辑如购物车的特殊状态创建专属规则文件。4.2 与Figma社区资源的联动设计圣经提供了设计原则但具体的视觉灵感或组件参考可以从Figma社区获取。你可以将两者结合。操作流程AI生成基础框架利用集成了规则的Cursor AI生成一个符合UX规范、布局合理的页面基础代码或结构描述。Figma社区寻找UI Kit前往Figma社区搜索与你项目风格匹配的成熟UI Kit如“iOS 17 UI Kit”、“Material Design 3 Kit”或某个特定行业的Kit。融合与调整将AI生成的结构与UI Kit中的精美视觉组件相结合。用UI Kit的配色、图标、组件样式替换掉AI生成的“基础款”快速获得既专业又美观的设计稿。反向补充规则如果你发现某个UI Kit中的设计模式特别好比如一种新颖的卡片切换动效你可以将其总结成规则补充到你本地的11-motion-transitions.mdc或12-micro-interactions.mdc文件中让AI下次能直接应用。4.3 应对复杂与模糊的设计场景规则是清晰的但设计需求往往是复杂和模糊的。这时需要你作为“指挥官”来引导AI。场景一在“一致性”和“突出性”之间权衡。规则要求相似操作使用相同样式的按钮一致性但产品经理要求必须突出“立即购买”按钮。你的指令“遵循设计规则为这个商品页面生成布局。其中‘加入购物车’使用次要按钮样式‘立即购买’使用主要按钮样式。请确保两个按钮在尺寸和间距上遵循8px网格系统并通过填充色和阴影的对比使‘立即购买’按钮的视觉权重显著高于‘加入购物车’按钮。”背后的思考你通过指令明确了例外情况并给出了解决方案使用同一层级体系下的不同级别既满足了业务需求又让AI的产出保持在规范的框架内。场景二处理规则未覆盖的新组件。你需要设计一个“语音消息波形图”组件这在现有规则中没有。你的指令“我需要设计一个展示语音消息的波形图组件。目前规则中没有相关定义。请首先遵循核心的格式塔原则特别是相似性和连续性和色彩系统来创建。波形应以连续的曲线表示播放部分用主色未播放部分用中性色。同时确保可点击区域符合费茨定律最小44pt。生成后我将把此组件规范补充到本地规则文件中。”背后的思考你引导AI从更高维度的基础原则出发推导出新组件的设计并主动规划了规则的迭代。5. 常见问题、排查与效能提升实录在实际使用中你可能会遇到一些困惑或效果不理想的情况。以下是我在长期使用中总结的一些典型问题及解决方案。5.1 AI似乎“无视”了某些规则这是最常见的问题。通常不是规则失效而是你的指令与规则发生了冲突或者AI在复杂指令中优先满足了其他约束。排查步骤检查规则文件路径和格式确认.mdc文件是否放在了正确的.cursor/rules/目录下并且文件编码为UTF-8语法无错误。审查你的指令你的指令是否过于模糊或包含了与规则矛盾的要求例如你要求“做一个非常炫酷的闪烁按钮”这可能与11-motion-transitions.mdc中“动效应克制有用”的规则以及16-anti-patterns.mdc中“避免使用闪烁元素引起不适”的规则直接冲突。AI会陷入两难。简化并分步指令不要在一个指令中要求AI完成整个页面的所有细节。尝试分步进行“第一步遵循布局规则用网格系统搭建这个仪表盘的三栏布局框架。第二步在左侧栏遵循卡片和列表规则生成一个用户信息卡片...”在指令中明确引用规则你可以直接说“请严格按照05-colors.mdc中定义的对比度规则为这段文字选择合适的背景色。” 这能显著提高AI对特定规则的注意力。5.2 生成的设计看起来“呆板”或“缺乏创意”这是对规则作用的误解。设计圣经的目标是确保可用性底线和一致性基础而不是提供天马行空的创意。它产出的是“设计原型”而非“最终稿”。解决方案明确期望你应该将AI视为一个高效的“初级设计师”或“设计系统执行者”。它负责把功能、布局、交互逻辑用专业、规范的方式呈现出来省去你从零画框、对齐、配色的基础工作。创意在于你在AI生成的规范原型基础上由你来注入品牌个性、情感化设计、独特的视觉风格和微交互。比如调整圆角的弧度曲线、使用自定义的插图、设计独特的加载动画。迭代优化对AI说“这个列表的布局很好符合规则。现在请为每个列表项添加一个更生动的图标并从我们的品牌渐变色彩系统中选取颜色让整体感觉更活泼一些。”5.3 如何衡量这套规则带来的实际价值无法精确量化但可以从几个维度感知效能的提升效率提升对比表任务无规则AI辅助使用设计圣经规则后效率提升点生成一个登录页产出结果随机按钮大小不一颜色对比度可能有问题需要大量手动调整。产出即具备一致的间距、规范的按钮层级、达标的色彩对比度。节省约70%的“纠错”和“规范化”时间。设计一个表单可能缺少标签、错误状态不明确、布局混乱。自动包含浮动标签、实时验证提示、清晰的错误状态、符合8px网格的布局。节省约60%的UX细节考量时间避免可用性硬伤。保持多页面一致性每个页面都需要重新描述设计规范结果仍可能不一致。所有页面基于同一套规则生成间距、色彩、组件样式天然保持一致。节省约50%的沟通和复审成本确保设计系统统一。团队协作每个成员依赖个人经验产出风格不一合并困难。所有成员使用同一套规则基准AI产出风格统一降低合并冲突。大幅提升团队协作流畅度和设计交付物质量下限。长期价值最大的价值在于知识沉淀。你将团队或个人的设计经验固化成了可复用、可迭代的规则资产。新成员加入通过规则能快速上手设计决策有了客观依据减少了无谓争论。5.4 规则冲突或过时了怎么办设计趋势和最佳实践在不断演进规则也需要更新。更新策略订阅源头关注规则文件中引用的权威来源如 Material Design、Apple HIG、WCAG 的官方更新。实践反馈在项目实践中如果发现某条规则导致的设计效果不佳不要盲目遵循。分析原因是规则本身有问题还是应用场景特殊记录下来。分支与实验在本地项目规则中创建一条实验性规则或修改现有规则测试其效果。贡献回馈如果经过验证你的修改是普适性的改进可以向原saralobo/design-bible仓库提交 Pull Request或者在你团队内部维护的规则库中更新版本。这本身就是一种极佳的知识管理。这套设计规则圣经不是一个静态的、束缚创造力的枷锁而是一个动态的、可生长的“设计伙伴”的培训手册。它的终极目的是让你从重复、繁琐、易错的设计基础劳动中解放出来让你能更专注于真正创造价值的部分——理解用户、定义问题、构思创新解决方案。当你熟练驾驭它之后你会发现你和AI的协作不再是“它画我看我改它猜”而是你作为设计指挥官清晰地下达战略指令而AI作为训练有素的副官高效、精准地执行战术细节。这种工作模式的转变才是生产力质的飞跃。