Claude提示词：如何列出前端交互需求的状态与边界

要引导Claude精准解析前端交互逻辑，输出结构化的状态列表与边界条件，核心不在于堆砌需求细节，而在于提示词的结构化设计——必须为模型铺设清晰的思维路径，而非放任它泛化输出“用户可能点击”这类模糊描述。

具体实现方法如下，逐层拆解。

明确要求Claude输出状态机要素

在提示词开头直接锁定输出格式：“请按以下三部分输出：①【所有可观察状态】（涵盖初始态、活跃态、禁用态、加载态、错误态等，确保不遗漏任何UI可见变化）；②【触发状态切换的用户动作或系统事件】（包括点击、输入、API响应、超时等）；③【每条状态转换的边界条件】（例如‘仅当表单所有字段非空且邮箱格式通过正则验证时，才允许从disabled切换到enabled’）。”

这条指令强制Claude放弃笼统归类，必须逐项枚举。一旦漏掉“网络断开时按钮变为灰色并显示重试文案”这类具体状态，就等同于违反格式要求——比空泛的“请详细说明”更有效。

用真实交互片段锚定分析范围

提供带有上下文的原始需求描述，例如：“用户在商品详情页点击‘加入购物车’按钮，若库存为0则弹出Toast提示‘缺货’，若库存≥1则按钮变为‘已加入’并禁用3秒，同时购物车角标数值+1。”

紧随其后追加指令：“基于以上片段，列出所有状态，不要扩展无关场景（例如‘用户未登录时’不属于本片段范围）。”

关键前提是必须包含“基于以上片段”这类限定短语，否则Claude会自动补充默认逻辑，将登录态、网络异常、多设备同步等未提及的边界全部塞入。范围一旦失控，输出便无法落地。

强制区分状态与边界的方法

方法一：用表格模板引导。在提示词中嵌入一个空表格框架：

要求Claude填满每个单元格。表格列名本身就是一种训练——不断强化Claude对“状态”（UI表现）与“边界”（条件）的区分意识。

方法二：反向验证提问。追加一句：“如果某个条件不满足，当前状态是否仍能维持？请对每个状态回答‘是/否’并说明依据。”例如针对“已加入”状态，Claude必须确认“若3秒未到但用户刷新页面，该状态是否消失”——这个追问会迫使它显式写出时间边界与持久化边界，而非模棱两可地含糊带过。

方法三：禁止使用模糊动词。在提示词末尾加上硬性约束：“禁用‘可能’‘通常’‘一般情况下’等模糊表述；所有条件必须包含可判定的主语、谓词、宾语，例如‘当localStorage.cartItems.length > 0时’，而非‘当购物车有东西时’。”

这条约束看似苛刻，实则最管用——不剔除模糊表述，所谓的“状态列表”只能停留在概念层面，根本无法落地到实际代码实现。

来源：互联网