自定义标签

自定义标签是更高级的玩法。除了系统内置的预设标签，你还可以自己发明新的标签格式，打造完全属于你的游戏风格。

比如你想让 AI 在输出手机界面时用 [PHONE]...[/PHONE] 包裹内容，就可以在正则美化编辑器中添加一条自定义规则，告诉系统「遇到这个格式就转换成手机样式」。同样可以搭配全局 CSS 来调整最终的视觉效果。

不会写？让 AI 帮你写

你完全不需要自己写正则表达式！ 只要把你想要的输出格式告诉 AI（比如 ChatGPT、Claude），它就能帮你生成对应的正则和 HTML 模板，甚至连 CSS 样式也能一起生成。

下面模拟一段和 AI 的对话，展示具体怎么操作：

示例：让 AI 帮你生成手机界面的正则规则

你发送给 AI：

我在 Storvia 平台做一个文字游戏，需要用到「正则美化」功能。我想在游戏中展示一个手机聊天界面。

我定义的 AI 输出格式如下：

[PHONE]
[SCREEN app="微信"]
[MSG from="张三" time="14:23"]你好啊[/MSG]
[MSG from="me" time="14:25"]在的[/MSG]
[/SCREEN]
[/PHONE]

请帮我生成 Storvia 正则美化所需的规则。要求：

1. 每条规则包含：正则表达式、标志位、HTML 替换模板
2. 同时生成配套的全局 CSS 样式，要求黑色外壳、圆角屏幕、模拟微信聊天的效果
3. 「me」发出的消息靠右显示，绿色背景

AI 会回复你类似这样的内容：

你需要 3 条规则，从外到内依次处理：

规则 1 — 手机外壳

• 正则：\[PHONE\]([\s\S]*?)\[\/PHONE\]
• 标志：g
• 替换：<div class="phone-shell">$1</div>

规则 2 — 屏幕

• 正则：\[SCREEN app="(.+?)"\]([\s\S]*?)\[\/SCREEN\]
• 标志：g
• 替换：<div class="phone-screen"><div class="phone-header">$1</div><div class="phone-body">$2</div></div>

规则 3 — 聊天气泡

• 正则：\[MSG from="(.+?)" time="(.+?)"\]([\s\S]*?)\[\/MSG\]
• 标志：g
• 替换：<div class="msg-item msg-item-$1"><span class="msg-meta">$1 $2</span><div class="msg-text">$3</div></div>

CSS 样式如下：（略）

你只需要把 AI 给的正则、替换模板和 CSS 分别复制到创作台的「正则美化」和「全局 CSS 样式」中就行了。

实战案例：做一个手机界面

下面用一个完整的「小手机」例子，展示从定义格式到配置规则的全过程。

假设你想让游戏里出现一个手机界面，显示微信聊天记录。

第一步：定义 AI 的输出格式

先想好你要让 AI 按什么格式输出。比如这样：

[PHONE]
[SCREEN app="微信"]
[MSG from="张三" time="14:23"]你好啊[/MSG]
[MSG from="me" time="14:25"]在的[/MSG]
[/SCREEN]
[/PHONE]

把这个格式写进你的游戏设定里，告诉 AI「展示手机界面时请按此格式输出」。

第二步：让 AI 帮你写正则

把上面的格式发给 AI，请它帮你生成 Storvia 正则美化规则。AI 会告诉你需要 3 条规则，从外到内依次处理：

规则 1 — 手机外壳（把 [PHONE]...[/PHONE] 变成手机外框）

正则：\[PHONE\]([\s\S]*?)\[\/PHONE\]
标志：g
替换：<div class="phone-shell">$1</div>

规则 2 — 屏幕（把 [SCREEN app="微信"]...[/SCREEN] 变成屏幕，顶部显示 App 名称）

正则：\[SCREEN app="(.+?)"\]([\s\S]*?)\[\/SCREEN\]
标志：g
替换：<div class="phone-screen"><div class="phone-header">$1</div><div class="phone-body">$2</div></div>

这里用了两个括号：$1 是 App 名称（微信），$2 是屏幕里的内容。

规则 3 — 聊天气泡（把每条 [MSG]...[/MSG] 变成聊天消息）

正则：\[MSG from="(.+?)" time="(.+?)"\]([\s\S]*?)\[\/MSG\]
标志：g
替换：<div class="msg-item msg-item-$1"><span class="msg-meta">$1 $2</span><div class="msg-text">$3</div></div>

这里用了三个括号：$1 是发送者，$2 是时间，$3 是消息内容。

第三步：用全局 CSS 设置样式

规则只负责生成 HTML 结构，好不好看还需要 CSS。把下面的样式粘贴到全局 CSS 样式中：

.phone-shell {
    width: 320px;
    background: #111;
    border: 8px solid #222;
    border-radius: 32px;
    padding: 16px 8px;
    margin: 16px auto;
}

.phone-screen {
    background: #f5f5f5;
    border-radius: 20px;
    overflow: hidden;
    color: #333;
}

.phone-header {
    background: #ededed;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.phone-body {
    padding: 12px;
}

.msg-item {
    margin-bottom: 10px;
    max-width: 75%;
}

.msg-item-me {
    margin-left: auto;
}

.msg-meta {
    display: block;
    font-size: 11px;
    color: #999;
    margin-bottom: 3px;
    padding: 0 6px;
}

.msg-text {
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.msg-item-me .msg-text {
    background: #95ec69;
}

总结一下

这个手机界面总共用了 3 条正则规则 + 1 段全局 CSS：

思路就是：从大到小、从外到内，每一层用一条规则。