1做一个___题材的视觉小说游戏。
2
3交互模式
4• 点击屏幕推进文本/图片（同一节点内可有多张图）
5• 如果场景中包含对话，则对话者的设定头像需要左右交替出现，营造对话感
6• 出现分支选项时，点击选项进入对应分支
7• 玩法循环必须是细致、逐步推进、流程较长的连续体验，不能把一个阶段压缩成一句概述或一次选择
8
9玩法循环
10• 不能用概述代替场景
11• 情绪或场景转折需要感官铺垫，不能硬切
12• 需要场景与场景之间的自然过渡
13• 新段落/新场景中立即建立阅读兴趣点
14• 每个叙事段落需有信息增量或情绪变化，不能原地重复
15
16UI 设计哲学
17• 插图是视觉重心，UI 是画框。每个节点的插图是全屏视觉内容，文本面板仅作为底部字幕层叠加
18• 节点内图片切换：同一节点多张插图按顺序推进，玩家点击切换下一张图/下一段文本，节点内最后一张图之后出现选项或跳转下一节点
19• 世界观契合：UI 的材质语言、配色、字体情绪与故事世界一致。古风不用科技面板，科幻不用毛笔字体
20• 克制与隐形：默认只展示插图 + 文本 + 选项。不做大面积常驻面板。界面越隐形，沉浸感越强
21• 层级：插图层（全屏）→ 文本面板层（底部，不超过屏高 25%，半透明深色底）
22• DOM 渲染文本，不用 Canvas：保证文字清晰、可选中、无障碍可访问
23• 动效克制：仅在节点切换、选项出现、结局到达时使用有意义过渡。不做持续微动画
24
25必须避免
26• 通用 App 控制面板风格（圆角白卡片、系统默认字体）
27• 文本面板遮挡插图中角色的脸、手部动作或画面关键构图区域
28• 所有功能在首屏全部展开
29• Canvas 渲染文本
30• 显式暴露设计意图（比如为了开头埋钩子，直接告诉玩家「这里异常了」）

1当使用 React + DOM 实现逐字打字机效果时，必须遵守以下三条铁律，否则文本前几个字会被吞掉：
2
31. 切换文本时，绝对不要依赖 useEffect cleanup 来 setText('') 做软重置。
4   React 的异步调度会让旧 effect cleanup 与新 effect setup 重叠，导致前几个字符被覆盖。
5   正确做法：给打字机组件一个唯一 key，让 React 完全卸载旧实例、挂载新实例。
6
72. 点击交互分两层
8   - 文字正在打印时点击 → 仅跳过动画，立刻显示该句完整文本 setIsSkipping(true)
9   - 文字已完整显示时点击 → 推进到下一句 advanceText()
10   严禁在跳过动画的同时触发 advanceText()，否则状态重叠。
11
123. useEffect 依赖保持纯粹
13   打字机的 useEffect 只依赖 text 和 isSkipping。
14   textIndex、nodeId 不得放进依赖数组，它们的存在意义仅在于作为外层传入的 key。