必须明确声明状态类型、初始值及切换逻辑，用具体动词描述操作链或状态机表格，强制每个状态有JSX渲染锚点，并提供带状态绑定的HTML样例。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要让Claude准确生成带完整交互状态的前端组件代码，必须在提示词中明确声明状态类型、触发条件和UI响应逻辑，不能只写“点击后变色”这种模糊描述。
明确声明组件的初始状态和可变状态
在提示词开头就用清晰列表写出所有状态字段及其初始值。例如：“状态包括：isSubmitting（false）、isSuccess（false）、error（null）、formData（{name: '', email: ''}）”。这一步漏掉任意一个状态，Claude大概率会忽略对应分支逻辑。
不要用“可能有错误状态”这类模糊表达，必须写成“error字段为字符串时显示红色提示文字，为空时不渲染提示区域”。
用具体行为动词定义状态切换路径
方法一：按用户操作链描述
第一步：用户点击提交按钮 → 触发onSubmit → 将isSubmitting设为true → 按钮显示loading图标并禁用
第二步：API返回成功 → isSubmitting设为false → isSuccess设为true → 显示绿色成功提示
第三步：API返回400错误 → isSubmitting设为false → error设为后端返回的message字段 → 输入框下方显示该错误
立即学习“前端免费学习笔记（深入）”；
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
方法二：用状态机表格替代文字（Claude对表格理解稳定）
当前状态｜触发动作｜下一个状态｜UI变化
idle｜点击提交｜submitting｜按钮文字变为“提交中…”+禁用+加载动画
submitting｜收到200响应｜success｜隐藏表单+显示“提交成功”toast
强制要求每个状态都有对应的UI锚点
在提示词末尾加一句硬性指令：“每个状态变量必须在JSX中至少有一处显式判断和渲染，例如{isSuccess &&
【Claude常把error状态写进console.log却不渲染到界面】 所以要特别强调“所有状态变更必须驱动真实DOM变化，禁止仅做console输出或setState后无后续”。
提供带状态的视觉参考样本
直接粘贴一段你期望的最终HTML结构片段，重点标出状态绑定位置。例如：<button disabled>{isSubmitting ? '处理中...' : '立即提交'}</button> 这比描述“按钮要能加载态切换”有效十倍。
这一步操作起来很简单，直接把你要的效果代码块复制进去就行。
