Cursor品牌视觉提示词怎么设置门槛
第一步:在项目根目录创建品牌约束规则文件
一切约束的起点,是一个名为 .cursorrules 的纯文本文件。这个文件必须创建在项目根目录下,且文件名必须一字不差——开头的英文句点不能少,也不能有任何额外的扩展名。命名错误会直接导致Cursor完全忽略其中的所有规则。
通过终端进入项目根目录,执行 touch .cursorrules 创建文件,然后用你顺手的编辑器打开,填入具体的约束内容。比如,你可以这么定义:
# 品牌视觉约束 ## 色彩系统 - 主色仅限: #1A6DFF, #00B386, #FF6B35 - 禁用HEX以外的色值写法(如rgb()、hsl()、named colors) ## 字体与排版 - 正文字体必须为 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戴上了紧箍咒。
第二步:绑定品牌视觉提示词到具体操作场景
规则文件写好,怎么用起来?有两种主流方法。
第一种,是直接在Chat窗口里,通过特定的指令手动触发品牌校验。例如,当你需要生成一个按钮组件时,可以输入:/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中打开任意一个 TypeScript 或 React 文件(例如 .tsx),按下 Ctrl+K(或 Cmd+K)调出指令面板,直接输入 /brand-check 并回车。
接下来,观察AI的反馈。如果一切设置正确,返回内容的第一行应该是明确的成功标识「✅ 品牌视觉规则已加载」,紧接着会清晰地列出当前项目实际加载的品牌参数,比如启用的色值、指定的字体、图标库版本等。
如果看到的是「❌ 未检测到.color-system约束」或者参数列表为空,那就说明前面的步骤可能出了问题。最常见的原因包括:.cursorrules 文件名有误、文件编码不是UTF-8无BOM格式,或者文件被项目的 .gitignore 意外屏蔽了。这时候,就需要回头仔细检查这些技术细节了。
完成这三步,品牌视觉的“门槛”就算立起来了。后续无论是生成设计说明还是前端代码,Cursor都会先“看一眼”这些规矩,确保输出结果不会在视觉规范上跑偏,从而让团队协作的效率和质量都有了基础保障。