从空白开始，完成《闭馆后的来信》

用时： 约 15 分钟。开始前准备： 使用桌面浏览器打开编辑器；账号已有可用的模型配置；下载本页提供的 3 个媒体文件。页面代码可以在对应步骤展开并整段复制，不要求你自己编写。你会做出： 一篇最简单的 AI 互动剧本。《闭馆后的来信》从一段写好的悬疑序章开始。玩家可以追问信件，也可以追问沈砚；AI 会根据这次选择实时生成后续剧情和新的选项。玩家继续选择，剧情就会继续生成。

下载美术馆夜景

1920 × 1080，开始页和剧情页共用。

下载沈砚_平静

透明底男性半身立绘。

下载沈砚_认真

与平静立绘使用相同画布和人物位置。

先看懂这篇作品怎样运转

玩家打开《闭馆后的来信》后，会先看到开始页。点击“开始故事”，她会读到你写好的相遇：闭馆后的美术馆、第一次见面的策展人沈砚，以及一封日期写在明天的信。序章结束时，她决定先调查信件，或先试探沈砚。玩家做出选择后，AI 会结合被点击的选项、世界设定和已有剧情生成后续内容，并在结尾提供新的行动。玩家选择下一步，AI 再生成一轮。编辑器用下面几部分完成这段体验：

玩家看到的结果	编辑器中负责这件事的部分
标题、背景、立绘、台词和选项怎样显示	模板负责页面的外观和交互。成品只需要“开始页”和“剧情页”两个模板
序章按画面逐步播放	帧把一段内容分成多次画面变化；每帧可以填写“台词”或“选项”等指令
开始页、固定序章和两条 AI 路线依次出现	页面节点代表流程中的一个具体页面；流程蓝图决定点击后进入哪个页面
固定序章每次内容相同，后续剧情每次按选择生成	页面节点的内容模式决定它使用“预设内容”还是“AI 生成”
点击按钮后翻到下一帧、跳转页面或请求 AI	触发器规则识别点击或指令，并执行对应动作

“固定序章”和两个“AI 续写”页面节点都会使用“剧情页”模板，所以它们拥有相同的画面和操作方式。区别只在内容来源：

“固定序章”使用你写在页面节点里的预设内容，玩家每次看到相同的五帧。
两个“AI 续写”页面节点使用AI 生成。AI 参照“剧情页”模板中的内容示例和格式提示，生成同样结构的新帧。

模板中的“内容示例”不是固定序章。它负责预览模板，也向 AI 展示合法的内容结构；页面节点中的“预设内容”才是玩家会读到的固定剧情。

1. 创建空白作品

“流程蓝图”展示玩家会经过哪些页面。新作品中的开始节点只负责标记入口，之后需要把它连到真正的开始页。在“我的作品”中点击“创建新作品”，填写：

字段	值
作品名称	`闭馆后的来信｜101 教程示例`
作品简介	`闭馆后的美术馆里，一封日期写在明天的信正在等你拆开。`

进入编辑器后，保留流程蓝图中的开始节点。 检查： 编辑器顶部显示作品名称，流程蓝图中有一个绿色开始节点。

2. 上传 3 个媒体素材

素材库保存作品会使用的文件。上传完成只代表编辑器可以找到这些文件；第 6 步会把背景和立绘绑定到页面读取的 Frame 变量，它们才会出现在预览中。打开顶部“素材库”，按下面的位置上传文件。素材名称与文件名保持一致，不要修改下划线。

文件	素材库分类	素材 ID（界面显示为素材名称）
`美术馆夜景.png`	背景图片	`美术馆夜景`
`沈砚_平静.png`	角色头像	`沈砚_平静`
`沈砚_认真.png`	角色头像	`沈砚_认真`

MoMo：素材 ID 必须与指令中的取值一致。两个位置只要相差一个字，预览就无法找到图片。

检查： “背景图片”中有 1 张横图，“角色头像”中有 2 张透明底半身立绘。

3. 添加 State 变量和世界设定

玩家在序章结尾选择调查方向后，State 变量会在页面节点之间保留这个值。世界设定向 AI 提供沈砚、来信和美术馆中不能随意改变的事实。

添加 State 变量

打开顶部“变量配置”，在 State 变量中添加：

字段	值
变量名	`selected_route`
类型	字符串
默认值	`尚未选择`
描述	`记录玩家在固定序章末尾选择的调查方向。`

第 9 步会在玩家点击选项时把它更新为“信件”或“沈砚”。下面的“叙事边界”会引用这个变量，让 AI 看到当前调查方向。

添加 4 条世界设定

打开顶部“世界设定”，创建以下条目。正文可以直接复制。

角色设定｜沈砚

沈砚，男性，昭宁美术馆策展人。外表冷静，观察细致，说话简短，不主动建立亲密关系。故事开始时，他与玩家是第一次见面。

概念物品｜日期写在明天的信

信封未拆。收件人与落款都是玩家的名字，日期写在明天。信封会出现与旧库区有关的新标记，但每轮生成最多确认一个关键事实。

场景描述｜闭馆后的昭宁美术馆

时间为 21:40。美术馆已闭馆，前厅和旧库区仍可进入。监控记录存在七分钟缺口，旧库区有一个已注销的 B-17 档案位。

规则设定｜叙事边界

使用第二人称“你”。玩家没有立绘。不要替玩家描述外貌、内心想法、台词或未选择的行动。沈砚与玩家从陌生关系开始，不突然告白、占有或建立亲密关系。

在“规则设定｜叙事边界”的正文末尾追加这一行：

当前调查方向：{{state.selected_route}}。

检查： State 变量中出现 selected_route；世界设定中有 4 条新条目。

4. 创建“开始页”模板

模板决定同一种页面怎样显示内容、能接收哪些内容、点击后能做什么。开始页只需要背景、标题和一个按钮，因此它与后面的剧情页使用不同模板。打开左侧“模板库”，点击“新建模板”：

字段	值
名称	`开始页`
描述	`显示作品标题、简介和开始按钮。`

在“指令注册表”添加“封面”

指令定义作者或 AI 可以向一帧填写哪些内容。“封面”只需要一个“背景”参数，稍后开始界面的预设内容会填写具体素材名。在右侧“指令注册表”中点击“添加指令”：

字段	值
指令名	`封面`
说明	`设置开始页使用的背景。`
单行参数	`背景`
“背景”的取值约束	`美术馆夜景`
跨行参数	无

在左侧“内容示例”的第 1 帧添加“封面”，背景选择“美术馆夜景”。

添加“读取封面背景”触发器规则

指令中的背景素材 ID 不会自行出现在页面上。下面这条规则会在读取“封面”时，把“背景”参数写入 frame.cover_background；开始页代码再读取这个 Frame 变量并显示对应图片。在右侧“触发器规则”中新建规则组 开始页默认规则，再点击“添加规则”：选择“解析指令”后，界面会把参数“背景”列为 $背景。这里选择“动态表达式”，表示把这个参数的原值直接交给 Frame 字段。

配置	值
规则名称	`读取封面背景`
触发时机	解析指令
指令名	封面
动作	更新变量
变量名	`frame.cover_background`
操作	set
类型	动态表达式
值	`$背景`

粘贴开始页的页面代码

页面代码负责排版和视觉效果。打开模板中间区域的“代码”，删除原内容，再展开并复制下面代码块的全部内容：

展开并复制开始页代码

点击代码块右上角的复制按钮，把全部内容粘贴到“开始页”的代码编辑区。

start-view.tsx

interface StartViewProps {
  frame?: {
    cover_background?: string
  }
}

export default function StartView({ frame = {} }: StartViewProps) {
  const coverBackgroundUrl = frame.cover_background
    ? media_url(frame.cover_background)
    : ""

  return (
    <main className="start-root">
      {coverBackgroundUrl ? (
        <img className="start-background" src={coverBackgroundUrl} alt="" />
      ) : null}
      <div className="start-shade" />

      <section className="start-card" aria-label="作品开始页">
        <p className="start-kicker">MOYO · 互动短篇</p>
        <h1>闭馆后的来信</h1>
        <p className="start-subtitle">一封日期写在明天的信，正在等你拆开。</p>
        <button className="start-button" type="button">
          开始故事
        </button>
      </section>

      <style>{`
        * { box-sizing: border-box; }
        button { font: inherit; }
        .start-root {
          position: relative;
          width: 100%;
          height: 100%;
          min-width: 0;
          min-height: 0;
          overflow: hidden;
          display: grid;
          place-items: center;
          padding: clamp(20px, 5vw, 72px);
          color: #f7f1e7;
          background:
            radial-gradient(circle at 72% 24%, rgba(190, 155, 102, .18), transparent 34%),
            linear-gradient(135deg, #11161f 0%, #1c2531 52%, #0c1016 100%);
          font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        .start-background {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .start-shade {
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, rgba(8, 12, 18, .86), rgba(8, 12, 18, .34) 68%, rgba(8, 12, 18, .58));
        }
        .start-card {
          position: relative;
          z-index: 1;
          width: min(88vw, 760px);
          padding: clamp(28px, 6vw, 64px);
          border: 1px solid rgba(242, 222, 186, .26);
          background: rgba(12, 17, 24, .68);
          box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
          backdrop-filter: blur(10px);
          text-align: center;
        }
        .start-kicker {
          margin: 0 0 18px;
          color: #cdb68e;
          font-size: clamp(11px, 1.6vw, 14px);
          letter-spacing: .28em;
        }
        h1 {
          margin: 0;
          font-family: "Songti SC", STSong, serif;
          font-size: clamp(36px, 8vw, 78px);
          font-weight: 500;
          letter-spacing: .12em;
        }
        .start-subtitle {
          margin: 20px auto 34px;
          max-width: 30rem;
          color: rgba(247, 241, 231, .74);
          font-size: clamp(14px, 2vw, 18px);
          line-height: 1.8;
        }
        .start-button {
          min-width: 168px;
          min-height: 48px;
          padding: 13px 28px;
          border: 1px solid #d5bd93;
          border-radius: 999px;
          color: #16130f;
          background: #d5bd93;
          cursor: pointer;
          font-weight: 700;
          letter-spacing: .12em;
          transition: transform .16s ease, background .16s ease;
        }
        .start-button:hover { transform: translateY(-2px); background: #ead8b8; }
        .start-button:focus-visible { outline: 3px solid rgba(234, 216, 184, .45); outline-offset: 4px; }
        @media (prefers-reduced-motion: reduce) {
          .start-button { transition: none; }
        }
      `}</style>
    </main>
  )
}

代码直接读取 frame.cover_background。media_url(frame.cover_background) 再把这个 Frame 字段中的素材 ID 转成图片地址。等待编译完成。预览应显示标题和“开始故事”按钮。背景素材会在第 6 步完成绑定后出现。

检查： 右侧“指令注册表”有“封面”，“触发器规则”有“读取封面背景”；预览中能看到标题和按钮。

5. 创建“剧情页”模板

固定序章和 AI 续写都会显示背景、沈砚的半身立绘、台词和选项。它们共用一个“剧情页”模板，画面保持一致，页面节点只需要提供不同内容。在“模板库”中再创建一个空白模板：

字段	值
名称	`剧情页`
描述	`逐帧显示背景、半身立绘、台词和选项。`

在“指令注册表”添加“台词”和“选项”

“台词”规定一帧文字需要角色、背景、立绘和正文；“选项”规定一个按钮需要显示文字、路线标记和交给 AI 的提示。作者填写预设内容时使用它们，AI 生成新剧情时也使用同一套指令。 “台词”填写：

字段	值
指令名	`台词`
说明	`在当前帧显示一段旁白或角色台词。`
单行参数	`角色`、`背景`、`立绘`
“角色”的取值约束	`旁白`、`沈砚`
“背景”的取值约束	`美术馆夜景`
“立绘”的取值约束	`无`、`沈砚_平静`、`沈砚_认真`
跨行参数	`内容`

“选项”填写：

字段	值
指令名	`选项`
说明	`在当前帧追加一个可点击选项。`
单行参数	`文本`、`路线`、`提示`
“路线”的取值约束	`letter`、`curator`、`continue`
跨行参数	无

MoMo：触发器规则会按参数名取值。参数名不要改字。

创建 15 帧内容示例

“内容示例”让你用具体内容检查模板，也让 AI 看见一次合格回复的结构。这里用 15 帧示范一轮剧情：前 14 帧推进调查，第 15 帧给出两种行动。后面会在“格式提示”中允许 AI 按剧情需要生成 15—20 帧。一帧对应玩家看到的一次完整画面状态。背景、立绘、台词或可选操作发生变化时，再进入下一帧。创建 15 帧：前 14 帧各放 1 条“台词”，第 15 帧只放 2 条“选项”。前 14 帧的背景都选择“美术馆夜景”：

帧	角色	立绘	内容
1	旁白	无	`沈砚把信封移到台灯下。封口仍旧完整，雨声隔着玻璃变得很轻。`
2	沈砚	沈砚_平静	`“先看落款。”他把信转过来，“别拆。”`
3	旁白	沈砚_平静	`你的名字下方，多出一行刚才没有的细字：B-17。`
4	沈砚	沈砚_认真	`“我拿到它时，那里是空白。”`
5	旁白	沈砚_认真	`沈砚调出二十分钟前拍下的登记照片。屏幕上的信封没有任何编号。`
6	沈砚	沈砚_认真	`“不是我们漏看。它确实刚刚出现。”`
7	旁白	沈砚_认真	`他戴上薄手套，只改变信封朝向，没有碰触封口。`
8	沈砚	沈砚_认真	`“看字的边缘。”`
9	旁白	沈砚_认真	`灯光偏转后，B-17 的笔画从灰色变成了很淡的银色。`
10	沈砚	沈砚_认真	`“它反射光，但没有墨迹的凸起。”`
11	旁白	沈砚_认真	`沈砚在馆藏目录中输入编号。检索条停顿了两秒。`
12	沈砚	沈砚_认真	`“B-17 是旧库区的档案位。”`
13	旁白	沈砚_认真	`目录只留下一个灰色条目，状态写着“已注销”。`
14	沈砚	沈砚_认真	`“我们可以去库位，也可以先确认编号是什么时候出现的。”`

第 15 帧添加两个“选项”：

文本	路线	提示
`去 B-17 库位`	`continue`	`我决定和沈砚去 B-17 库位。请写抵达后的观察与一个具体新线索。`
`先比对旧照片`	`continue`	`我决定先比对信封的旧照片。请写比对过程与一个具体新线索。`

使用“复制帧”可以减少重复填写。复制后只修改角色、立绘和内容。

MoMo：背景、立绘、文字和可选操作都没有变化时，不需要创建新帧。

填写格式提示

把下面内容粘贴到左侧“格式提示”：

每次按本轮剧情节奏生成 15—20 帧，具体帧数由内容决定，不要固定成同一个数字。
前 14—19 帧每帧只使用一条「台词」，每帧完成一个清楚的微小推进；不要把同一句话拆成多帧，也不要用空泛反应凑帧数。
最后一帧只放两条「选项」，不放「台词」。一轮内最多揭示一个关键事实，其余帧用于铺垫、观察、对话、行动后果与关系变化。
第一帧直接承接玩家刚才的选择，不复述固定序章。
AI 生成的「选项」中，「路线」固定填写 continue，「提示」写成可直接用于下一次续写的玩家行动。
使用第二人称“你”。不要替玩家描述外貌、内心想法、台词或未选择的行动。
沈砚与玩家初次见面。保持克制，不要突然告白、占有或建立亲密关系。

内容示例给 AI 一份完整样本，格式提示补充样本无法表达的要求，例如帧数范围、最后一帧只放选项、不要替玩家行动。两者会一起进入 AI 的输出要求。

添加 4 条基础触发器规则

剧情页还不能把“台词”和“选项”显示出来。前三条规则会把指令参数写入 Frame 变量，页面代码再从这些变量取出背景、立绘和文字；第四条规则让玩家点击后进入下一帧。新建规则组 剧情页默认规则，按顺序添加：下面的 $角色、$背景、$立绘 和 $内容 都来自当前正在解析的指令。“动态表达式”可以直接返回字符串、数组或对象；“宏嵌入文本”只用于固定文字或空字符串。完整区别见规则值、表达式与输入。

表达式和 Element Selector 中的标点必须使用英文半角字符。教程提供的技术值请直接复制，不要用中文输入法重新输入括号、引号或冒号。

规则 1｜进入新帧时清空文本和选项

触发时机：进入帧。
添加 1 个“更新变量”动作，在同一动作中加入 3 行：

变量名	操作	类型	值
`frame.speaker`	set	宏嵌入文本	留空
`frame.text`	set	宏嵌入文本	留空
`frame.choices`	set	动态表达式	`[]`

规则 2｜把台词写入当前帧

触发时机：解析指令。
指令名：台词。
添加 1 个“更新变量”动作，在同一动作中加入 4 行：

变量名	操作	类型	值
`frame.speaker`	set	动态表达式	`$角色`
`frame.background`	set	动态表达式	`$背景`
`frame.portrait`	set	动态表达式	`$立绘`
`frame.text`	set	动态表达式	`$内容`

页面代码会把“旁白”显示为旁白样式，并在立绘值为“无”时隐藏图片。规则只需要原样写入参数。

规则 3｜把选项追加到当前帧

触发时机：解析指令。
指令名：选项。
添加 1 个“更新变量”动作：

变量名	操作	类型	值
`frame.choices`	append	动态表达式	`({ text: $文本, route: $路线, prompt: $提示 })`

规则 4｜显示下一帧

配置	值
触发时机	用户交互
事件类型	click — 点击
Element Selector	`.story-next`
动作	切换帧
移动帧数	`1`

完成这四条规则后，系统会按下面的顺序把一条“台词”显示成画面：

粘贴剧情页的页面代码

打开“代码”，删除原内容，再展开并复制下面代码块的全部内容：

展开并复制剧情页代码

点击代码块右上角的复制按钮，把全部内容粘贴到“剧情页”的代码编辑区。

story-view.tsx

interface StoryChoice {
  text: string
  route?: string
  prompt?: string
}

interface StoryFrame {
  background?: string
  portrait?: string
  speaker?: string
  text?: string
  choices?: StoryChoice[]
}

interface StoryViewProps {
  frame?: StoryFrame
  playback?: {
    cursor?: number
    frameCount?: number
  }
}

export default function StoryView({ frame = {}, playback = {} }: StoryViewProps) {
  const backgroundUrl = frame.background ? media_url(frame.background) : ""
  const portraitUrl = frame.portrait && frame.portrait !== "无"
    ? media_url(frame.portrait)
    : ""
  const speaker = frame.speaker === "旁白" ? "" : frame.speaker || ""
  const choices = Array.isArray(frame.choices) ? frame.choices : []
  const cursor = Number.isInteger(playback.cursor) ? Number(playback.cursor) : 0
  const frameCount = Number.isInteger(playback.frameCount) ? Number(playback.frameCount) : 1
  const canAdvance = cursor < frameCount - 1 && choices.length === 0

  return (
    <main className="story-root">
      {backgroundUrl ? (
        <img className="scene-background" src={backgroundUrl} alt="" />
      ) : null}
      <div className="scene-shade" />
      {portraitUrl ? (
        <img className="character-portrait" src={portraitUrl} alt="" />
      ) : null}

      <div className="frame-counter" aria-label={`第 ${cursor + 1} 帧，共 ${frameCount} 帧`}>
        {String(cursor + 1).padStart(2, "0")} / {String(frameCount).padStart(2, "0")}
      </div>

      <section className="dialogue-area" aria-live="polite">
        {choices.length > 0 ? (
          <div className="choice-list" aria-label="选择接下来的行动">
            {choices.map((choice, index) => (
              <button
                className="story-choice"
                type="button"
                data-route={choice.route || "continue"}
                data-prompt={choice.prompt || choice.text}
                key={`${choice.route || "choice"}-${index}`}
              >
                <span>{String(index + 1).padStart(2, "0")}</span>
                {choice.text}
              </button>
            ))}
          </div>
        ) : (
          <div className="dialogue-panel">
            {speaker ? <p className="speaker">{speaker}</p> : <p className="speaker narrator">旁白</p>}
            <p className="dialogue-text">{frame.text || " "}</p>
            {canAdvance ? (
              <button className="story-next" type="button" aria-label="下一帧">
                继续
              </button>
            ) : null}
          </div>
        )}
      </section>

      <style>{`
        * { box-sizing: border-box; }
        button { font: inherit; }
        .story-root {
          position: relative;
          width: 100%;
          height: 100%;
          min-width: 0;
          min-height: 0;
          overflow: hidden;
          color: #f8f4ed;
          background:
            radial-gradient(circle at 70% 28%, rgba(186, 149, 100, .18), transparent 36%),
            linear-gradient(135deg, #171b22, #242d37 60%, #101319);
          font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        .scene-background {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .scene-shade {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(180deg, rgba(5, 8, 12, .12) 0%, rgba(5, 8, 12, .16) 48%, rgba(5, 8, 12, .72) 100%),
            linear-gradient(90deg, rgba(5, 8, 12, .24), transparent 54%);
        }
        .character-portrait {
          position: absolute;
          z-index: 1;
          right: clamp(-5%, 1vw, 3%);
          bottom: 0;
          width: min(48vw, 620px);
          height: min(92%, 920px);
          object-fit: contain;
          object-position: bottom right;
          filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .38));
        }
        .frame-counter {
          position: absolute;
          z-index: 3;
          top: clamp(14px, 3vh, 28px);
          left: clamp(16px, 3vw, 36px);
          padding: 7px 12px;
          border: 1px solid rgba(244, 231, 207, .28);
          border-radius: 999px;
          background: rgba(10, 14, 20, .48);
          color: rgba(244, 231, 207, .76);
          font-size: 12px;
          letter-spacing: .16em;
          backdrop-filter: blur(8px);
        }
        .dialogue-area {
          position: absolute;
          z-index: 4;
          left: clamp(16px, 5vw, 72px);
          right: clamp(16px, 5vw, 72px);
          bottom: clamp(16px, 4vh, 44px);
        }
        .dialogue-panel {
          position: relative;
          width: min(72%, 880px);
          min-height: 150px;
          padding: clamp(22px, 3.2vw, 38px) clamp(24px, 4vw, 48px);
          border: 1px solid rgba(238, 220, 190, .28);
          background: rgba(11, 15, 21, .78);
          box-shadow: 0 18px 60px rgba(0, 0, 0, .36);
          backdrop-filter: blur(12px);
        }
        .speaker {
          margin: 0 0 10px;
          color: #d7bd91;
          font-family: "Songti SC", STSong, serif;
          font-size: clamp(17px, 2vw, 22px);
          letter-spacing: .12em;
        }
        .speaker.narrator {
          color: rgba(248, 244, 237, .5);
          font-family: inherit;
          font-size: 12px;
          letter-spacing: .2em;
        }
        .dialogue-text {
          margin: 0;
          max-width: 42rem;
          color: rgba(248, 244, 237, .94);
          font-size: clamp(15px, 1.8vw, 19px);
          line-height: 1.9;
        }
        .story-next {
          position: absolute;
          right: 20px;
          bottom: 18px;
          border: 0;
          color: #d7bd91;
          background: transparent;
          cursor: pointer;
          font-size: 13px;
          letter-spacing: .12em;
        }
        .story-next::after { content: "  →"; }
        .choice-list {
          width: min(64%, 720px);
          display: grid;
          gap: 12px;
        }
        .story-choice {
          width: 100%;
          min-height: 56px;
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 14px 20px;
          border: 1px solid rgba(238, 220, 190, .3);
          color: #f8f4ed;
          background: rgba(11, 15, 21, .82);
          cursor: pointer;
          text-align: left;
          line-height: 1.55;
          backdrop-filter: blur(12px);
          transition: transform .16s ease, border-color .16s ease, background .16s ease;
        }
        .story-choice span {
          color: #c9ad7c;
          font-size: 11px;
          letter-spacing: .12em;
        }
        .story-choice:hover {
          transform: translateX(5px);
          border-color: rgba(221, 192, 143, .74);
          background: rgba(26, 31, 38, .92);
        }
        .story-choice:focus-visible,
        .story-next:focus-visible {
          outline: 3px solid rgba(221, 192, 143, .38);
          outline-offset: 3px;
        }
        @media (max-width: 720px) {
          .character-portrait {
            right: -18%;
            width: min(78vw, 480px);
            height: 78%;
            opacity: .9;
          }
          .dialogue-panel, .choice-list { width: 100%; }
          .dialogue-panel { min-height: 170px; padding-bottom: 48px; }
          .dialogue-area { left: 12px; right: 12px; bottom: 12px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .story-choice { transition: none; }
        }
      `}</style>
    </main>
  )
}

代码用 frame.speaker、frame.text 和 frame.choices 直接读取普通数据；media_url(frame.background) 与 media_url(frame.portrait) 把已绑定的素材 ID 转成图片地址。按钮上的 data-route 和 data-prompt 会在第 9 步交给点击规则。等待编译完成，点击左侧不同帧，确认计数、文本和选项会变化。背景和立绘会在第 6 步完成绑定后出现。 检查： 左侧“内容示例”有 15 帧；不同帧会显示不同文字，第 15 帧显示两个选项。点击顶部“保存作品”，等待两个模板都保存完成。新模板第一次保存后，变量配置才能为它的 Frame 变量建立素材绑定。

6. 把 Frame 变量绑定到素材库

指令和触发器规则写入的是“美术馆夜景”“沈砚_平静”这样的素材 ID。编辑器界面把这种可读 ID 显示为“素材名称”。素材绑定规定每个 Frame 字段允许使用哪些素材 ID；页面代码再通过 media_url(frame.x) 把当前 ID 解析成浏览器可以加载的 URL。

上传素材不会自动建立绑定。下面三项全部显示“已联动素材库”后，背景和立绘才会出现在模板预览与运行预览中。

打开顶部“变量配置”。右侧的 Frame 变量按模板分组显示。在“开始页”分组中：

找到 frame.cover_background，点击“联动素材库”。
勾选“美术馆夜景”。
点击素材卡片上的星标，把它设为默认素材，然后确认。

在“剧情页”分组中：

为 frame.background 勾选“美术馆夜景”，并设为默认素材。
为 frame.portrait 同时勾选“沈砚_平静”和“沈砚_认真”。
把“沈砚_平静”设为默认素材，然后确认。

最终绑定应为：

Frame 变量	绑定素材	默认素材
`frame.cover_background`	美术馆夜景	美术馆夜景
`frame.background`	美术馆夜景	美术馆夜景
`frame.portrait`	沈砚_平静、沈砚_认真	沈砚_平静

只给保存素材 ID 的变量建立素材映射。frame.speaker、frame.text 和 frame.choices 保存文字或选项数据，不需要绑定素材。

MoMo：绑定后仍要点击“保存作品”。未保存的映射不会进入运行预览。

回到“开始页”和“剧情页”模板，重新点击对应内容示例帧。 检查： 3 个媒体变量都显示“已联动素材库”；开始页出现美术馆背景，剧情页第 2 帧显示“沈砚_平静”，第 4 帧切换为“沈砚_认真”。

7. 创建 4 个页面节点并连接流程

模板定义页面的共同行为，页面节点负责把一次具体内容放进故事流程。因此，这篇作品有 4 个页面节点，却只需要 2 个模板：开始界面使用“开始页”，其余 3 个页面节点共用“剧情页”。回到“流程蓝图”，从“模板库”创建以下页面节点：

页面节点名称	使用的模板	内容模式	规则组
`开始界面`	开始页	预设内容	开始页默认规则
`固定序章`	剧情页	预设内容	剧情页默认规则
`AI 续写｜追问信件`	剧情页	AI 生成	剧情页默认规则
`AI 续写｜追问沈砚`	剧情页	AI 生成	剧情页默认规则

拖动节点边缘的圆点，建立 4 条连接：

开始节点 → 开始界面
开始界面 → 固定序章
固定序章 → AI 续写｜追问信件
固定序章 → AI 续写｜追问沈砚

“开始界面”和“固定序章”选择“预设内容”，它们会播放你填写的固定内容。后两个页面节点选择“AI 生成”，进入时才请求模型续写。

把世界设定加入两个 AI 页面节点

分别打开“AI 续写｜追问信件”和“AI 续写｜追问沈砚”：

在右侧“上下文配置”中点击“配置”。
在左侧“世界设定树”勾选第 3 步创建的 4 条世界设定。
保持“无条件”，点击“确认”。

两个 AI 页面节点都使用这 4 条世界设定。第 9 步会为两个分支发送不同的选项内容。 检查： 蓝图中有 1 个开始节点、2 个“预设内容”页面节点和 2 个“AI 生成”页面节点。

8. 在两个页面节点中填写预设内容

现在把玩家一定会看到的内容写入两个“预设内容”页面节点。这里填写的是作品正文，不是模板中的“内容示例”：开始界面只出现一帧封面，固定序章播放五帧剧情。

开始界面

打开“开始界面”。确认内容模式为“预设内容”，在第 1 帧添加：

指令	参数
封面	背景：`美术馆夜景`

固定序章

打开“固定序章”。确认内容模式为“预设内容”，创建 5 帧。前 4 帧各放 1 条“台词”，背景都选择“美术馆夜景”：

帧	角色	立绘	内容
1	旁白	无	`21:40。闭馆后的昭宁美术馆只亮着前厅的灯。你按一封署名“沈砚”的邀请，从侧门走了进来。`
2	沈砚	沈砚_平静	`“你晚了七分钟。”展厅尽头的男人合上怀表，“不过，还来得及。”`
3	旁白	沈砚_平静	`他把一只未拆封的信封放到桌上。收件人和落款都是你的名字；日期却写着明天。`
4	沈砚	沈砚_认真	`“我是沈砚，这里的策展人。”他看向信封，“拆开以前，你可以先问我一个问题。”`

第 5 帧只放 2 条“选项”：

文本	路线	提示
`这封信为什么是我的笔迹？`	`letter`	`我先追问信件：这封信为什么是我的笔迹？请从信件来源切入，只揭示一个具体新线索。`
`你为什么知道我会来？`	`curator`	`我先追问沈砚：你为什么知道我今晚会来？请从沈砚掌握的信息切入，只揭示一个具体新线索。`

检查： 固定序章左侧“预设内容”中有 5 帧；第 5 帧显示 2 条“选项”指令。

9. 添加跳转和 AI 生成规则

流程蓝图只表示页面节点之间允许存在的路线。真正决定“玩家点击哪个按钮后发生什么”的是触发器规则。开始按钮只需要跳转；固定序章的两个选项需要先记录调查方向、进入对应页面节点，再请求 AI。

开始页：进入固定序章

回到“开始页”的 开始页默认规则，添加：

配置	值
规则名称	`进入固定序章`
触发时机	用户交互
事件类型	click — 点击
Element Selector	`.start-button`
动作	跳转界面 → 固定序章

这条规则不添加“触发 AI 回复”。开始页只负责进入你写好的固定序章。

剧情页：两个固定分支

回到“剧情页”的 剧情页默认规则。添加 从信件线索开始 AI 续写：

配置	值
触发时机	用户交互
事件类型	click — 点击
Element Selector	`.story-choice[data-route=letter]`
动作 1	更新 `state.selected_route`，set，宏嵌入文本 `信件`
动作 2	跳转界面 → AI 续写｜追问信件
动作 3	触发 AI 回复；勾选“使用自定义模板格式化用户输入”；填写 `{{:attr(data-prompt)}}`

添加 从沈砚掌握的信息开始 AI 续写：

配置	值
触发时机	用户交互
事件类型	click — 点击
Element Selector	`.story-choice[data-route=curator]`
动作 1	更新 `state.selected_route`，set，宏嵌入文本 `沈砚`
动作 2	跳转界面 → AI 续写｜追问沈砚
动作 3	触发 AI 回复；勾选“使用自定义模板格式化用户输入”；填写 `{{:attr(data-prompt)}}`

MoMo：把“触发 AI 回复”放在最后。AI 请求发出前，先更新 State 变量并进入目标页面节点。

剧情页：根据 AI 选项继续生成

AI 生成的选项使用 continue 路线。玩家点击后不跳转到其他页面节点，而是在当前 AI 页面节点继续生成。再添加一条规则：

配置	值
规则名称	`根据 AI 选项继续生成`
触发时机	用户交互
事件类型	click — 点击
Element Selector	`.story-choice[data-route=continue]`
动作	触发 AI 回复
自定义用户输入	勾选，并填写 `{{:attr(data-prompt)}}`

保存模板和作品。重新打开流程蓝图后，3 条跳转连线应显示对应的规则名称。

检查： 开始页规则组有 2 条规则；剧情页规则组有 7 条规则；两个固定分支各有 3 个动作，顺序为“更新变量 → 跳转界面 → 触发 AI 回复”。

10. 运行作品

点击右上角“保存作品”，等待保存完成，再前往检查并运行《闭馆后的来信》。

MoMo：模板预览只检查当前模板。页面节点之间的跳转需要在“运行预览”中检查。

从这里开始

101｜完成第一篇作品

编辑器详细文档

从空白开始，完成《闭馆后的来信》

下载美术馆夜景

下载沈砚_平静

下载沈砚_认真

先看懂这篇作品怎样运转

1. 创建空白作品

2. 上传 3 个媒体素材

3. 添加 State 变量和世界设定

添加 State 变量

添加 4 条世界设定

4. 创建“开始页”模板

在“指令注册表”添加“封面”

添加“读取封面背景”触发器规则

粘贴开始页的页面代码

5. 创建“剧情页”模板

在“指令注册表”添加“台词”和“选项”

创建 15 帧内容示例

填写格式提示

添加 4 条基础触发器规则

规则 1｜进入新帧时清空文本和选项

规则 2｜把台词写入当前帧

规则 3｜把选项追加到当前帧

规则 4｜显示下一帧

粘贴剧情页的页面代码

6. 把 Frame 变量绑定到素材库

7. 创建 4 个页面节点并连接流程

把世界设定加入两个 AI 页面节点

8. 在两个页面节点中填写预设内容

开始界面

固定序章

9. 添加跳转和 AI 生成规则

开始页：进入固定序章

剧情页：两个固定分支

剧情页：根据 AI 选项继续生成

10. 运行作品

下载美术馆夜景

下载沈砚_平静

下载沈砚_认真

​先看懂这篇作品怎样运转

​1. 创建空白作品

​2. 上传 3 个媒体素材

​3. 添加 State 变量和世界设定

​添加 State 变量

​添加 4 条世界设定

​4. 创建“开始页”模板

​在“指令注册表”添加“封面”

​添加“读取封面背景”触发器规则

​粘贴开始页的页面代码

​5. 创建“剧情页”模板

​在“指令注册表”添加“台词”和“选项”

​创建 15 帧内容示例

​填写格式提示

​添加 4 条基础触发器规则

​规则 1｜进入新帧时清空文本和选项

​规则 2｜把台词写入当前帧

​规则 3｜把选项追加到当前帧

​规则 4｜显示下一帧

​粘贴剧情页的页面代码

​6. 把 Frame 变量绑定到素材库

​7. 创建 4 个页面节点并连接流程

​把世界设定加入两个 AI 页面节点

​8. 在两个页面节点中填写预设内容

​开始界面

​固定序章

​9. 添加跳转和 AI 生成规则

​开始页：进入固定序章

​剧情页：两个固定分支

​剧情页：根据 AI 选项继续生成

​10. 运行作品

先看懂这篇作品怎样运转

1. 创建空白作品

2. 上传 3 个媒体素材

3. 添加 State 变量和世界设定

添加 State 变量

添加 4 条世界设定

4. 创建“开始页”模板

在“指令注册表”添加“封面”

添加“读取封面背景”触发器规则

粘贴开始页的页面代码

5. 创建“剧情页”模板

在“指令注册表”添加“台词”和“选项”

创建 15 帧内容示例

填写格式提示

添加 4 条基础触发器规则

规则 1｜进入新帧时清空文本和选项

规则 2｜把台词写入当前帧

规则 3｜把选项追加到当前帧

规则 4｜显示下一帧

粘贴剧情页的页面代码

6. 把 Frame 变量绑定到素材库

7. 创建 4 个页面节点并连接流程

把世界设定加入两个 AI 页面节点

8. 在两个页面节点中填写预设内容

开始界面

固定序章

9. 添加跳转和 AI 生成规则

开始页：进入固定序章

剧情页：两个固定分支

剧情页：根据 AI 选项继续生成

10. 运行作品