第一步：在项目根目录创建品牌视觉约束规范文件

建立视觉约束体系的起点，是创建一个名为 .cursorrules 的配置文件。这个文件必须精准放置在项目根目录下，并且文件名必须完全匹配——开头的英文句点是关键组成部分，不能遗漏，也不能添加任何文件扩展名。命名错误将直接导致 Cursor IDE 完全无视其中设定的所有规则。

您可以通过终端命令行进入项目根目录，执行 touch .cursorrules 指令来创建文件，随后使用任意代码编辑器打开，开始编写具体的约束条目。一份典型的品牌视觉约束模板如下所示：

# 品牌视觉设计约束规范
## 色彩系统规范
- 主色调范围严格限定为: #1A6DFF, #00B386, #FF6B35
- 禁止使用 HEX 十六进制色值以外的任何格式（包括 rgb()、hsl() 及 CSS 颜色名称）
## 字体与排版规则
- 正文字体必须调用 Inter 或 system-ui 字体栈，禁止使用泛用的 sans-serif 通配声明
- 标题层级尺寸严格对应：h1→2rem / h2→1.5rem / h3→1.25rem
## 图标与设计资源
- 所有图标必须从指定库 @icon-park/react v4.3+ 版本引入，禁止使用内联 SVG 或第三方 CDN 链接
## 响应式布局断点
- 仅允许使用以下预设断点：sm=640px、md=768px、lg=1024px、xl=1280px

这些规范看似细碎，却恰恰是 AI 代码助手极易“自由发散”的风险点。以文本形式明确界定，就如同为 AI 划定了清晰的行为边界。

第二步：将品牌规范与具体开发场景进行绑定

规则文件创建完毕后，如何将其应用到实际开发流程中？通常有两种主流集成方法。

第一种方法，是在 Cursor 的聊天窗口中，通过输入特定指令来手动触发品牌规范校验。例如，当您需要生成一个按钮组件时，可以输入：/brand-ui for Button component using Inter font and #1A6DFF primary。这条指令会驱动 Cursor 先核验您的请求是否符合 .cursorrules 文件中关于色彩和字体的约束，在确认无误后才会执行代码生成。

第二种方法更为自动化，适合希望将品牌上下文作为项目默认开发环境的团队。这需要在项目根目录下额外创建一个 .cursorconfig.json 配置文件，用于注入预设的品牌参数：

{
  "brand_context": {
    "palette": ["#1A6DFF", "#00B386", "#FF6B35"],
    "font_family": "Inter, system-ui",
    "icon_source": "@icon-park/react@4.3.0"
  }
}

这里需要明确一个关键概念：.cursorrules 与 .cursorconfig.json 两者是互补协作的关系。前者主要负责行为约束（即“禁止做什么”），后者则负责上下文参数注入（即“默认使用什么”）。二者功能不重叠，需要同时存在于项目根目录。

第三步：验证品牌约束规则是否成功生效

规则与配置设置完成后，如何验证它们已在 Cursor 中正确加载并生效？验证流程其实非常简便。

在 Cursor 中打开任意一个 TypeScript 或 React 文件（例如 .tsx），按下快捷键 Ctrl+K（Mac 系统为 Cmd+K）唤出指令面板，直接输入 /brand-check 指令并回车。

随后，请仔细观察 AI 的反馈内容。如果一切配置正确，返回信息的第一行通常会显示明确的成功标识「✅ 品牌视觉规则已成功加载」，紧接着会清晰地分条列出当前项目已加载的实际品牌参数，例如激活的色值体系、指定的字体族、图标库版本信息等。

如果反馈显示为「❌ 未检测到色彩系统约束」或参数列表为空，则表明前面的设置步骤可能存在疏漏。最常见的原因包括：.cursorrules 文件名拼写错误、文件编码格式非 UTF-8 无 BOM、或文件因 .gitignore 配置而被意外忽略。此时，您需要逐一排查这些技术细节。

成功完成以上三个步骤，品牌视觉的“质量门槛”即宣告建立完成。此后，无论是生成设计文档还是前端功能代码，Cursor 在响应前都会主动参照这些既定规范，从而确保其输出结果始终保持在品牌指南的框架之内，为团队协作的效率和产出质量提供了坚实的技术保障。