想要让Gemini将一段组件交互逻辑（例如“点击按钮→弹出模态框→用户输入→提交成功→关闭弹窗”）准确转换为状态图描述？常见难题是输出过长、结构松散、字段不一致，或混杂大量解释性文字。这往往意味着提示词中缺少两个关键要素：明确的篇幅限制和严格的格式契约。

用四要素模型锁定输出长度与结构

第一步：在提示词开头明确设定角色与任务，例如：“你是一位前端架构师，专为React组件编写UML状态图DSL（Statechart JSON Schema格式）”。

第二步：明确指定输出必须严格遵循下面这个JSON Schema，禁止任何额外字段、注释、说明文字或Markdown格式：

{"type":"object","properties":{"initial":{"type":"string"},"states":{"type":"array","items":{"type":"object","properties":{"id":{"type":"string"},"on":{"type":"object","additionalProperties":{"type":"string"}},"onEntry":{"type":"array","items":{"type":"string"}}},"required":["id"]}}},"required":["initial","states"]}

第三步：强制设定字数上限，要求“整个JSON字符串长度不得超过800字符”，并补充“若逻辑超限，请合并相似状态（如将‘加载中’与‘提交中’视为同一状态），不得拆分输出或添加省略说明”。

用Few-shot示例压住格式毛边

方法一：提供一个紧凑型示例（包含输入和合规输出）

输入：“搜索框获得焦点→显示清空按钮→用户点击清空→恢复默认状态”

输出：{"initial":"idle","states":[{"id":"idle","on":{"FOCUS":"showing-clear"}},{"id":"showing-clear","on":{"CLEAR":"idle","BLUR":"idle"}}]}

方法二：再提供一个边界样例，专门演示如何裁剪冗余

输入：“用户拖拽滑块→实时更新数值→松手后触发动画→动画结束触发回调”

输出：{"initial":"idle","states":[{"id":"idle","on":{"DRAG_START":"dragging"}},{"id":"dragging","on":{"DRAG_END":"animating"}},{"id":"animating","onEntry":["runCallback"],"on":{"ANIMATION_END":"idle"}}]}

注意：第二个样例中，“实时更新数值”并未单独建立状态，而是作为DRAG_START的隐含行为；“动画结束触发回调”被压缩进了onEntry字段——这正是需要Gemini学会的裁剪逻辑。

用分步指令防止内容溢出

第一步：首先提取所有可观测的用户操作与系统响应事件，仅列出动词短语，每行一个，禁止使用从句。例如：FOCUS、BLUR、CLICK_CLEAR、SUBMIT_SUCCESS、CLOSE_MODAL。

第二步：将上述事件聚类成不超过4个核心状态，每个状态名称使用小写字母加下划线命名（snake_case），禁止空格或驼峰。例如：idle、submitting、success、error。

第三步：为每个状态编写on字段映射表，仅保留直接触发状态跳转的事件，忽略中间渲染、日志打印、副作用函数调用等非状态变更行为。

第四步：按照Statechart JSON Schema组装最终对象，确保无缩进、无换行、无多余空格（即minified JSON），并实时计数验证总字符数。