登录表单状态图已生成：statediagram-v2\n\"空闲\" --> \"提交中\": 点击登录\n\"提交中\" --> \"首页\": 后端成功\n\"提交中\" --> \"凭证失效\": 返回401\n\"凭证失效\" --> \"空闲\": 点击重新登录
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让豆包AI先识别用户操作意图、再生成对应的状态图代码，而不是直接画图或自由发挥。这要求提示词必须强制AI完成“判断→建模→输出”三阶段逻辑，缺一不可。
明确指令结构：角色+任务+约束三重锁定
在豆包AI对话框中输入以下完整提示词：
你是一位前端状态建模专家，擅长将UI交互行为精准映射为Mermaid状态图。请严格按三步执行：①先分析我描述的组件交互逻辑，指出所有用户动作（如点击、悬停、输入）、系统响应（如弹窗出现、按钮禁用、跳转）及触发条件（如验证失败、网络超时）；②基于分析结果，用Mermaid语法绘制状态图，只保留state定义和transition箭头，不加注释、不解释、不换行；③输出前检查：是否每个状态名都用双引号包裹？是否所有transition都含动作标签？是否无中文字符？
现在处理这个需求：“一个登录表单，初始状态为‘空闲’；用户点击‘登录’按钮后进入‘提交中’状态，同时按钮变灰；若后端返回成功，则跳转首页；若返回401错误，则进入‘凭证失效’状态并显示重登提示；用户点击提示中的‘重新登录’按钮后回到‘空闲’状态。”
防错校验：用追加指令清除干扰内容
发送后若AI回复中混有中文说明、步骤编号或```包裹，立即追加一句：
Doubao-Seedream-5.0-lite是字节跳动发布的最新图像创作模型。该模型首次搭载联网检索功能，能融合实时网络信息，提升生图时效性。同时，模型的聪明度进一步升级，能够精准解析复杂指令和视觉内容。此外，模型在世界知识广度、参考一致性及专业场景生成质量上均有增强，可更好地满足企业级视觉创作需求。
删除所有非Mermaid代码内容，只保留从“stateDiagram-v2”开始到结尾大括号的完整代码段，不得添加任何空行、标点、反引号或文字说明。
【这一步必须做】否则VS Code或Typora无法解析渲染，Mermaid Live Editor会报“Syntax error in graph definition”。
验证与粘贴：确认格式后再进渲染环境
第一步：复制AI最终输出的纯代码，粘贴到Mermaid Live Editor网页中；
第二步：观察右侧面板是否实时渲染出带圆角矩形和箭头的状态图；
第三步：若出现红色报错，说明AI未严格执行“双引号包裹状态名”或漏写了transition标签——此时不要修改代码，而是把报错信息连同原需求一起发回豆包，追加指令：“修正语法错误，确保所有state名加双引号，每个箭头都有动作标签，不输出任何解释。”
