# 创建一条正则

如何快速创建一条正则并测试，以实现一个**场景数据**的美化为例。

#### 步骤1: 准备文本

准备AI输出的结构，和美化代码

首先，可以在开场白编写一个AI输出格式，可以是状态栏，场景数据等。

这里以<环境数据>为例

现在需要一个美化组件，包含**时间数据，天气数据，环境描述**。

**所以我可以这样准备AI输出结构**（[推荐使用官方输出模版](/documentation/zheng-ze-xiang-qing/chuang-jian-zheng-ze-tiao-mu/shi-yong-dai-ma-zu-jian.md#guan-fang-zhi-chi-mo-ban)）**：**

```xml
<环境数据>
    <时间>13:37:33</时间>
    <天气>多云转小雨</天气>
    <环境>空气中飘着柳絮伴随着樱花香，春天到了</环境>
</环境数据>
```

接下来，可以为这些数据跑一套美化代码

<details>

<summary>点击 展开/收起 代码块 </summary>

````html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midnight Gummy Ultra Panel</title>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Quicksand:wght@500;700&family=Noto+Sans+SC:wght@300;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --accent-pink: #ff9eaf;
            --accent-purple: #bb9af7;
            --accent-blue: #7dcfff;
            --text-main: #c0caf5;
            --text-dim: #565f89;
            --glass-bg: rgba(26, 27, 38, 0.6);
            --radius-main: 10px;
            --font-cute: 'Quicksand', 'Noto Sans SC', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
        }

        body {
            background: transparent;
            margin: 0;
        }

        /* 整体容器 */
        .ultra-panel {
            font-family: var(--font-cute);
            display: flex;
            flex-direction: column;
            gap: 12px;
            width:100%;
            max-width: 500px;
            user-select: none;
            position: relative;
        }

        .panel-row {
            display: flex;
            gap: 12px;
            width: 100%;
        }

        /* 基础项：玻璃拟态 + 复合阴影 */
        .data-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-top: 1px solid rgba(255, 255, 255, 0.15); /* 顶部高光边 */
            border-radius: var(--radius-main);
            padding: 10px 14px;
            box-shadow: 
                4px 4px 0px rgba(0, 0, 0, 0.3),
                inset 0 1px 1px rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* 扫描线背景效果 */
        .data-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                        linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
            background-size: 100% 2px, 3px 100%;
            pointer-events: none;
            opacity: 0.3;
        }

        .data-card:hover {
            transform: translateY(-3px);
            background: rgba(30, 33, 48, 0.8);
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* 装饰支架 */
        .corner-deco {
            position: absolute;
            width: 6px;
            height: 6px;
            border: 1px solid currentColor;
            opacity: 0.4;
        }
        .lt { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
        .rb { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

        /* 内容布局 */
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
        }

        .label {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-dim);
        }

        .icon-svg {
            width: 12px;
            height: 12px;
            margin-right: 6px;
            fill: currentColor;
            filter: drop-shadow(0 0 3px currentColor);
        }

        .value {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-main);
            display: flex;
            align-items: baseline;
        }

        /* 特殊样式 */
        .item-time { flex: 1.3; border-bottom: 2px solid var(--accent-purple); color: var(--accent-purple); }
        .item-weather { flex: 1; border-bottom: 2px solid var(--accent-blue); color: var(--accent-blue); }
        .item-env { width: 100%; border-bottom: 2px solid var(--accent-pink); color: var(--accent-pink); }

        /* 时间数值：等宽字体 */
        #current-time {
            font-family: var(--font-mono);
            font-size: 15px;
            letter-spacing: -0.5px;
        }

        /* 环境描述：稍微缩小 */
        .env-text {
            font-size: 11px;
            line-height: 1.4;
            opacity: 0.85;
        }

        /* 呼吸灯 */
        .status-dot {
            width: 3px;
            height: 3px;
            background: currentColor;
            border-radius: 50%;
            margin-left: auto;
            box-shadow: 0 0 6px currentColor;
            animation: blink 2s infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.3; transform: scale(0.8); }
        }
    </style>
</head>
<body>

    <div class="ultra-panel">
        <!-- 第一行 -->
        <div class="panel-row">
            <!-- 时间卡片 -->
            <div class="data-card item-time">
                <div class="corner-deco lt"></div>
                <div class="corner-deco rb"></div>
                <div class="card-header">
                    <svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.1.8-1.2-4.5-2.7V7z"/></svg>
                    <span class="label">Chrono</span>
                    <div class="status-dot"></div>
                </div>
                <div class="value">
                    <span id="current-time">时间部分</span>
                </div>
            </div>

            <!-- 天气卡片 -->
            <div class="data-card item-weather">
                <div class="corner-deco lt"></div>
                <div class="corner-deco rb"></div>
                <div class="card-header">
                    <svg class="icon-svg" viewBox="0 0 24 24"><path d="M6.7 14.7c0-3.1 2.5-5.7 5.7-5.7.3 0 .5 0 .8.1C14.1 6.8 16.4 5 19 5c3.3 0 6 2.7 6 6 0 .5-.1 1-.2 1.4 1.4.9 2.2 2.4 2.2 4.1 0 2.8-2.2 5-5 5h-13c-4 0-7.3-3.3-7.3-7.3 0-3.5 2.5-6.4 5.8-7.1.1-.1.2-.1.2-.4z"/></svg>
                    <span class="label">Sky</span>
                </div>
                <div class="value">
                    <span>今日天气</span>
                </div>
            </div>
        </div>

        <!-- 第二行 -->
        <div class="panel-row">
            <!-- 环境描述卡片 -->
            <div class="data-card item-env">
                <div class="corner-deco lt"></div>
                <div class="corner-deco rb"></div>
                <div class="card-header">
                    <svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 3L2 12h3v8h14v-8h3L12 3zm0 14.5c-1.4 0-2.5-1.1-2.5-2.5s2.5-4.5 2.5-4.5 2.5 3.1 2.5 4.5-1.1 2.5-2.5 2.5z"/></svg>
                    <span class="label">Atmosphere</span>
                    <div class="status-dot"></div>
                </div>
                <div class="value env-text">
                    环境描述内容
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```
````

</details>

#### 步骤2: 开始创建

在建卡页面底部，高级功能，找到正则创建。

<figure><img src="/files/q6mtCmmYpU0wUlAn5BjV" alt=""><figcaption></figcaption></figure>

进入【正则创建】，点击新建正则，进入正则创建页面

<figure><img src="https://cdn.mufy.ai/images/586dccca-4616-42e8-8c58-639a01a88700/public" alt=""><figcaption></figcaption></figure>

在默认选择的【工具模式/代码组件】模式下，填写[正则基本信息](/documentation/li-ji-kai-shi/publish-your-docs.md)

将 **步骤1** 准备好的AI输出结构，填&#x5165;**“目标字符”**

<figure><img src="https://cdn.mufy.ai/images/c4a8ede6-8461-4c3e-07d3-4ae35fb26200/public" alt=""><figcaption></figcaption></figure>

#### 步骤3: 生成正则

在完成了步骤2后，可以看到系统自动帮助生成了[正则表达式](/documentation/zheng-ze-xiang-qing/chuang-jian-zheng-ze-tiao-mu/shi-yong-dai-ma-zu-jian.md#zheng-ze-biao-da-shi-shi-shen-me)

系统也按照顺序提取出了[关键信息](/documentation/zheng-ze-xiang-qing/chuang-jian-zheng-ze-tiao-mu/shi-yong-dai-ma-zu-jian.md#bu-huo-bian-liang-bing-hui-tian)

<figure><img src="https://cdn.mufy.ai/images/92e060ab-03ba-42b4-3fe1-6bd811328800/public" alt=""><figcaption></figcaption></figure>

#### 步骤4: 填写美化代码

将准备好的美化代码，填写入"**替换字符串**"中

<figure><img src="https://cdn.mufy.ai/images/282c155e-e92b-4685-03a8-03ff9e1b2a00/public" alt=""><figcaption></figcaption></figure>

接下来，我们需要让替换的美化代码，跟随着AI输出变动。

将正则提取出的：时间数据，天气数据，环境描述，回填到美化代码中应该展示的位置。

点击“正则提取出结果”中的映射,即可实现快速替换回填

`$1` ➡️ `13:37:33`&#x20;

`$2` ➡️ `多云转小雨`

`$3` ➡️ `空气中飘着柳絮伴随着樱花香，春天到了`

<figure><img src="https://cdn.mufy.ai/images/4c05ca4d-3501-4291-e6a7-1e0195bc6d00/public" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
这一步很关键，否则当AI 输出不同内容，代码中的信息无法跟着改变。
{% endhint %}

#### 步骤5: 初步测试

完成上述步骤后，基本完成一条正则的配置。

接下来，可以展开测试面板(移动端右上角/电脑端右侧)进行测试。

**测试字符**（模拟AI输出的内容），**效果预览**（展示替换后的效果）

更换结构中的关键信息，查看有没有变化，测试一下是否生效吧。

<figure><img src="https://cdn.mufy.ai/images/69626d95-0852-4a1d-e445-52eb57cf3300/public" alt=""><figcaption></figcaption></figure>

#### 步骤6: 教会AI输出

首先，在开场白部分填写好AI输出结构，查看是否替换成功：

```xml
<环境数据>
    <时间>13:37:33</时间>
    <天气>多云转小雨</天气>
    <环境>空气中飘着柳絮伴随着樱花香，春天到了</环境>
</环境数据>
```

成功后，打开**高级设置**，在输出设定处，编写该**何时/怎样**输出该正则组件。

<figure><img src="https://cdn.mufy.ai/images/c62a4854-ff90-4ceb-1b78-cede771a2500/public" alt=""><figcaption></figcaption></figure>

<figure><img src="https://cdn.mufy.ai/images/8bd11b30-5aed-45bb-9f72-329ad510b200/public" alt=""><figcaption></figcaption></figure>

可以参照以下的编写格式，【**何时该输出**】、【**输出的要求是什么**】

```
在每次对话开头时输出<环境数据></环境数据>组件：
<环境数据>
    <时间>填写当前的剧情时间</时间>
    <天气>填写当前的天气</天气>
    <环境>填写当前剧情的环境氛围</环境>
</环境数据>
```

[如何让AI稳定输出正则？](#bu-zhou-6-jiao-hui-ai-shu-chu)

***

完成以上步骤，就可以创建一条代码组件正则，并完成AI稳定输出啦。

<figure><img src="https://cdn.mufy.ai/images/c9bf1aa1-8d85-408f-c70f-df2c03b19500/public" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mufy.ai/documentation/li-ji-kai-shi/publish-your-docs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
