必须明确区分本地状态与远程状态：本地状态仅限页面内产生、不依赖HTTP请求、关闭即丢失；远程状态须经网络请求获取、有API路径和三态处理。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要让Claude准确区分前端代码中本地状态（如表单输入、折叠展开）和远程状态（如API返回的用户列表、订单详情），提示词必须明确界定两者的边界、生命周期和典型特征，否则模型容易混淆缓存数据与实时响应数据。
定义清晰的状态分类标准
第一步：在提示词开头直接给出不可协商的判定规则——【本地状态 = 仅在当前页面/组件内产生、不依赖HTTP请求、不需服务端验证、关闭页面即丢失】；【远程状态 = 必须通过fetch/axios等发起网络请求获取、有明确API路径和响应结构、通常带loading/error/data三态、需考虑缓存策略或重试机制】。
第二步：用反例强化认知。例如“用户点击按钮后显示的toast提示是本地状态，但该按钮触发的‘提交订单’成功后刷新的订单列表是远程状态”；“搜索框的输入值是本地状态，而按下回车后展示的搜索结果列表是远程状态”。
第三步：要求Claude对每个状态变量名做二元标注，格式固定为「变量名 → [本地] 或 变量名 → [远程]」，禁止出现“可能本地”“一般远程”等模糊表述。
立即学习“前端免费学习笔记（深入）”；
提供带注释的真实代码片段作为上下文
方法一：粘贴一段含混代码，要求Claude逐行标注并修正。例如：
const [data, setData] = useState([]); // 这里data是远程状态，但变量名没体现，需重命名为userListRemote
const [isExpanded, setIsExpanded] = useState(false); // 正确命名，明确是本地UI状态
方法二：给出错误示范提示词：“请帮我管理用户数据状态”，这会导致Claude同时混写useReducer处理表单和SWR加载列表；正确写法是拆成两个独立指令：“请为用户搜索表单编写纯本地状态逻辑（不调用API）”→“请为/users/api端点设计远程状态管理方案（含loading、error、refetch）”。
约束输出结构强制分离
要求Claude按以下固定区块输出，缺一不可：
✅ 本地状态声明区（仅useState/useReducer，无await/fetch）
✅ 远程状态接入区（仅使用React Query/SWR/zustand + createAsyncThunk等专用工具，必须包含error边界处理）
✅ 状态联动说明（仅当本地状态触发远程操作时才允许写，例如“输入变化 → 防抖后调用fetchUsers”）
注意：如果Claude在“本地状态声明区”出现fetch或useQuery，在“远程状态接入区”出现直接useState赋值，说明它未理解分类标准，需退回第一步重训。
