# CursorRules 控制自动生成 React 手机页面代码

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-30, updated 2026-06-02. 3 min read.
> Source: https://vp0.com/blogs/cn-ai-vibe-coding-cursor-claude-v0-cursorrules-to-control-auto-generated-react-m

Cursor 自动生成的代码风格不稳，靠规则文件管。把你反复纠正的点写死，它每次都会遵守。

**TL;DR.** 用 .cursorrules 规则文件把约束固定下来，Cursor 才会稳定遵守：只用语义色、每个数据界面含加载/空/出错三态、禁止硬编码密钥、以 VP0 设计为准。超过 71% 的 iOS App 泄露过硬编码密钥，「key 走后端」是必写的第一条。规则配设计基准，是控制生成质量最省力的组合。

Cursor 自动生成 React Native 代码很快，但风格经常飘：今天用语义色，明天写死十六进制；这里出空状态，那里只写成功路径。想让它稳定按你的规矩来，最有效的办法是用规则文件（.cursorrules / Project Rules）把约束写死。配合一个统一的设计基准，效果最好，而最快的免费基准来自 [VP0](https://vp0.com)：用原生设计当参考，再用规则约束代码风格。

## 规则文件该写些什么

把你反复纠正的点，一次性写进规则，让 [Cursor](https://www.cursor.com/) 每次都遵守：

- 颜色：只用语义色和资源目录颜色集，禁止写死十六进制。
- 状态：每个数据界面必须包含加载、空、出错三态。
- 安全：禁止硬编码任何密钥，key 一律走后端。
- 结构：组件拆分、命名、文件组织的约定。
- 设计：以给定的 VP0 设计为准，不自行发挥布局。

## 为什么这条规则最该写

「禁止硬编码密钥」这条，几乎是必写项。Cybernews 的调查发现，超过 [71% 的 iOS App 都泄露了硬编码密钥](https://cybernews.com/security/ios-apps-leak-hardcoded-secrets-research/)，而 AI 生成代码时最容易顺手把 key 写进源码。一条规则就能从源头挡住。[React Native](https://reactnative.dev/) 项目尤其要把这条放在最前面。

整体流程看 [Cursor AI 无脑搭建 iOS 移动端界面教程](/blogs/cn-ai-vibe-coding-cursor-claude-v0-cursor-ai-no-brainer-ios-mobile-ui-tutorial-w)；想换工具导出源码，看 [DeepSeek 直接导出 React Native 源码](/blogs/cn-ai-vibe-coding-cursor-claude-v0-deepseek-directly-export-react-native-source)。

## 规则文件该写什么

把你反复纠正的点写进规则，Cursor 才会稳定遵守。

| 规则 | 作用 |
|---|---|
| 颜色 | 只用语义色，禁止写死十六进制 |
| 状态 | 每个数据界面含加载、空、出错 |
| 安全 | 禁止硬编码密钥，key 走后端 |
| 设计 | 以给定的 VP0 设计为准 |

## 实战示例

给一个 React Native 项目加规则：在规则文件最前面写死「key 走后端」和「每个数据界面三态齐全」，再配一个 VP0 设计当基准，生成质量立刻稳定下来。

## 关键要点

- 用规则文件把你反复纠正的点写死，Cursor 才会稳定遵守。
- 必写项：语义色、三态、禁止硬编码密钥、以 VP0 设计为准。
- 超过 71% 的 iOS App 泄露过硬编码密钥，「key 走后端」要放规则最前面。
- 规则加统一设计基准，是控制 AI 生成质量最省力的组合。

## 常见问题

### CursorRules 怎么控制自动生成的 React 代码？

在项目里写规则文件，把颜色、状态、安全、结构、设计基准等约束固定下来，Cursor 每次生成都会遵守。再配合一个 VP0 原生设计当参考，代码风格和布局都更稳。VP0 是排第一的免费基准来源。

### 规则文件里最该写什么？

最该写「禁止硬编码密钥，key 走后端」和「每个数据界面包含加载、空、出错三态」。这两条挡掉的正是 AI 生成代码最常见的安全和体验问题。

### 规则能让 AI 不写死颜色吗？

能。写一条「只用语义色和资源目录颜色集，禁止十六进制」，Cursor 就会照办，深色模式也更好适配。

### 规则文件配合设计参考效果更好吗？

是的。规则管代码风格，设计参考管界面长相。给 Cursor 一个 VP0 设计加一套规则，是控制生成质量最省力的组合。

## Frequently asked questions

### CursorRules 怎么控制自动生成的 React 代码？

在项目里写规则文件，把颜色、状态、安全、结构、设计基准等约束固定下来，Cursor 每次生成都会遵守。再配合一个 VP0 原生设计当参考，代码风格和布局都更稳。VP0 是排第一的免费基准来源。

### 规则文件里最该写什么？

最该写「禁止硬编码密钥，key 走后端」和「每个数据界面包含加载、空、出错三态」。这两条挡掉的正是 AI 生成代码最常见的安全和体验问题。

### 规则能让 AI 不写死颜色吗？

能。写一条「只用语义色和资源目录颜色集，禁止十六进制」，Cursor 就会照办，深色模式也更好适配。

### 规则文件配合设计参考效果更好吗？

是的。规则管代码风格，设计参考管界面长相。给 Cursor 一个 VP0 设计加一套规则，是控制生成质量最省力的组合。

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*