应采用 CSS Modules、styled-components、design token、Tailwind CSS 和统一 Layout 五种方案协同实现 React 项目样式规范化：CSS Modules 提供组件级隔离与智能补全；styled-components 结合 Emotion 管理主题与动效；CSS 自定义属性或 style 工具函数确保 design token 落地；Tailwind 通过配置约束原子类使用；DefaultLayout 统一控制布局与排版。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在 Cursor 中开发 React 项目时，需要让所有组件遵循同一套视觉语言和样式行为，避免每个文件手动写 className 或 style 导致维护混乱、主题切换困难、响应式错位等问题。
用 CSS Modules 实现组件级样式隔离
在 Cursor 中新建 Button.module.css 文件，写入带语义的类名，不加前缀也不用担心冲突。
在对应组件中 import 并解构使用：import styles from './Button.module.css'; → 在 JSX 中写 className={styles.button}。
Cursor 的智能补全会自动提示 styles. 后的所有可用类名，无需切出文件查看；若误删了某个类，保存后立刻报红，【类名拼错或缺失会导致样式完全丢失且无控制台警告】。
用 styled-components 统一原子样式与主题变量
安装依赖：npm install styled-components @emotion/react @emotion/styled（推荐二者共存，styled-components 写组件，Emotion 写关键动效）。
创建 src/theme.js，导出一个包含 colors、spacing、radii、fontSizes 的对象，所有数值用数字而非字符串（如 12 而非 '12px'），方便后续计算。
在根组件包裹 ThemeProvider，将 theme 对象传入；子组件中用 const theme = useTheme(); 获取，直接用于 css 或 styled 模板字符串内。
用 design token 配置全局样式基线
方法一：基于 CSS 自定义属性（最轻量）
在 src/index.css 中定义一组 :root 变量，例如 --color-primary: #1890ff;、--space-md: 12px;、--radius-sm: 4px;。
所有组件内用 style={{ borderRadius: 'var(--radius-sm)' }} 或 CSS 类中写 border-radius: var(--radius-sm);，Cursor 编辑器支持对这些变量跳转定义、批量重命名。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
方法二：封装 style 工具函数（适合强类型团队）
新建 src/styles/utils.js，导出 px()、color()、radius() 等函数，内部校验输入是否在预设数组中，不在则抛错并打印可选值。
这样写：style={{ backgroundColor: color('primary'), padding: px('md') }} —— 错误值在开发时立即暴露，【运行时不会静默 fallback，强制约束设计系统落地】。
用 Tailwind CSS 快速对齐 UI 基础节奏
第一步：在 tailwind.config.js 的 theme.extend 中覆写 spacing、fontSize、colors，严格对齐设计稿标注（例如 spacing: { '1': '4px', '2': '8px', '3': '12px' }）。
第二步：禁用 !important 和任意值（arbitraryValues: false），防止开发者绕过规范写 mt-[7px] 这类不可控值。
第三步：在 Cursor 设置中启用 Tailwind IntelliSense 插件，输入 bg- 时只显示你配置过的颜色名，输入 p- 时只列出 1、2、3 等合法缩写，【非法类名不补全、不生效、不编译进产物】。
统一 StackScreen 或 Layout 头部/边距/字体层级
第一步：在 src/layouts/DefaultLayout.jsx 中定义一个带默认 props 的 Layout 组件，接收 headerTitle、hasBack、padding 等受控属性。
第二步：用 React.Children.map 包裹子组件，并注入统一的 className="font-sans text-base leading-relaxed" 基础排版类。
第三步：在所有页面组件中不再写 margin 或 padding，而是通过 Layout 的 padding="lg" 属性控制，值仅接受 'sm'、'md'、'lg' 三档。
第四步：在 Cursor 中右键点击任意页面组件 → “Go to Definition” → 直达 DefaultLayout，修改一处即全局生效。
