必须用提示词严格约束Claude生成生产级前端状态管理代码：【Role】锁定架构师身份，【Deliverable】明确Zustand模块需含TS接口、JSDoc、useEffect清理及测试骨架，【ProjectContext】注入Next.js、API结构等真实上下文，并强制结构化输出格式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要让Claude生成可直接发布到生产环境的前端状态管理代码，必须切断它自由发挥的空间——它不会主动加错误边界、不会默认用immer做不可变更新、更不会检查Zustand store是否被正确卸载。你得用提示词把工程约束钉死在第一行。
明确角色与交付物形态
第一步：在提示词开头用【Role】标签锁定模型身份，例如：“【Role】你是一名专注React生态的前端架构师，过去三年主导过5个日活百万级应用的状态层重构，所有产出必须满足CI/CD自动校验通过。”
第二步：紧接着用【Deliverable】声明交付物不可妥协的属性，例如：“【Deliverable】输出一个Zustand v4.5+兼容的store模块，包含完整TypeScript接口、JSDoc注释、useEffect清理逻辑、以及配套的单元测试骨架（Jest + React Testing Library），不允许出现any、implicit any或未处理的Promise reject。”
这一步漏掉任何一项，Claude就可能返回一个只有useStore()调用、没类型定义、没错误兜底、也没测试入口的“半成品”。它不认为这些是“默认该有的”，它只执行你写进提示词里的契约。
立即学习“前端免费学习笔记（深入）”；
注入项目级上下文锚点
方法一：用【ProjectContext】包裹真实项目特征，而非模糊描述。比如：【ProjectContext】当前项目使用Next.js 14 App Router，store需支持服务端组件调用；用户权限数据来自auth/session API，响应结构为{user: {id, role, permissions[]}}；全局loading状态需与Axios拦截器联动。
方法二：提供最小可行输入输出示例。例如：“输入：{type: 'SET_USER', payload: {id: 'u123', role: 'admin'}} → 输出：store.setState({user: payload, isLoading: false, error: null})，且同步触发useEffect中对permissions的衍生计算。”
没有这个锚点，Claude会按通用模板生成——比如用localStorage做持久化，而你的项目禁用所有客户端存储；或者用createContext替代Zustand，完全违背技术栈约束。
强制结构化输出格式
① 要求所有代码块严格包裹在```ts和```之间，禁止混用Markdown说明文字；
② 接口定义必须放在文件顶部，且每个字段附带JSDoc @description；
③ 所有异步操作必须包裹在try/catch中，catch分支显式调用store.setState({error: e.message})；
④ 测试骨架必须包含三个describe块：'initial state'、'state updates'、'error handling'，每个块下至少两个it用例。
这四条缺一不可。Claude默认不写JSDoc，不写error handling测试用例，也不保证代码块语法高亮纯净——它只在你用数字序号+动词短语明确命令时才照做。
