diff --git a/Frontend/Pages/Editor.razor b/Frontend/Pages/Editor.razor
index 02aabb7..0877b9f 100644
--- a/Frontend/Pages/Editor.razor
+++ b/Frontend/Pages/Editor.razor
@@ -28,7 +28,7 @@
                             </Button>
                         </Tooltip>
                     </SpaceItem>
-                    
+
                     <SpaceItem>
                         <Tooltip Placement="@Placement.Bottom"
                                  Title="清除浏览器缓存中的文法">
@@ -37,6 +37,12 @@
                             </Button>
                         </Tooltip>
                     </SpaceItem>
+
+                    <SpaceItem>
+                        <Button Type="@ButtonType.Text" @onclick="HelpButtonClicked">
+                            帮助
+                        </Button>
+                    </SpaceItem>
                 </Space>
             </div>
 
@@ -54,9 +60,12 @@
     </Content>
 </Layout>
 
+<GrammarHelp @ref="@_grammarHelp"/>
+
 @code {
     private StandaloneCodeEditor _editor = null!;
     private AntList<string> _logList = null!;
+    private GrammarHelp _grammarHelp = null!;
 
     private readonly List<string> _logs = new();
 
@@ -65,6 +74,7 @@
         Log("编辑器加载完成");
         if (await GrammarStorage.RestoreGrammar())
         {
+            await _editor.SetValue(RobotFactory.GrammarText);
             Log("从浏览器中恢复成功");
         }
         else
@@ -111,6 +121,11 @@
         Log("清除浏览器中的语法成功");
     }
 
+    private void HelpButtonClicked()
+    {
+        _grammarHelp.Show();
+    }
+
     private void Log(string message)
     {
         _logs.Add($"{DateTime.Now:HH:mm:ss} {message}");
diff --git a/Frontend/Pages/Editor.razor.css b/Frontend/Pages/Editor.razor.css
index 449bbd8..b2bc49f 100644
--- a/Frontend/Pages/Editor.razor.css
+++ b/Frontend/Pages/Editor.razor.css
@@ -3,7 +3,6 @@
 }
 
 .control-zone {
-    height: 5%;
     padding: 2px;
 }
 
diff --git a/Frontend/Shared/ChatZone.razor b/Frontend/Shared/ChatZone.razor
index ca9dbe8..f24d539 100644
--- a/Frontend/Shared/ChatZone.razor
+++ b/Frontend/Shared/ChatZone.razor
@@ -127,6 +127,6 @@
 
     private void SetUsernameCancelClicked()
     {
-        _setUsernameVisible = false;
+        MessageService.Warning("呃呃呃呃，没设置用户名就想走？");
     }
 }
\ No newline at end of file
diff --git a/Frontend/Shared/GrammarHelp.razor b/Frontend/Shared/GrammarHelp.razor
new file mode 100644
index 0000000..e683297
--- /dev/null
+++ b/Frontend/Shared/GrammarHelp.razor
@@ -0,0 +1,84 @@
+<Modal Title="DSL语法说明"
+       Visible="@_helpVisible"
+       OnOk="@(() => _helpVisible = false)"
+       OnCancel="@(() => _helpVisible = false)">
+    <div>
+        <Title Level="3">语法说明</Title>
+        <Paragraph>
+            凯瑟琳DSL使用和<Text Code>YAML</Text>类似的语法来编写逻辑。语法通过规定机器人的多个阶段和在阶段之间的
+            迁移关系来描述聊天机器人的聊天过程。机器人在启动时处在一个特定的阶段，通过正则表达式匹配用户的输入迁移到下一个阶段
+            并输出对应的内容。
+        </Paragraph>
+
+        <Paragraph>
+            文法拥有三个顶级属性：
+
+            <ul>
+                <li>
+                    <Text Code>robotName</Text> 字符串类型，规定了机器人的名称；
+                </li>
+
+                <li>
+                    <Text Code>stages</Text> Stage类型的数组，规定了机器人的各个阶段；
+                </li>
+
+                <li>
+                    <Text Code>beginStageName</Text> 字符串类型，规定了机器人初始阶段，会自动输出该阶段的输出内容。
+                </li>
+            </ul>
+        </Paragraph>
+
+        <Paragraph>
+            Stage类型拥有三个属性：
+
+            <ul>
+                <li>
+                    <Text Code>name</Text> 阶段的名称，是阶段<b>唯一的标识符</b>；
+                </li>
+                <li>
+                    <Text Code>transformers</Text> Transformer类型的数组，指定该阶段的迁移规则；
+                </li>
+                <li>
+                    <Text Code>answer</Text> 该阶段的输出内容。
+                </li>
+            </ul>
+        </Paragraph>
+
+        <Paragraph>
+            Transformer类型拥有两个属性：
+
+            <ul>
+                <li>
+                    <Text Code>pattern</Text> 匹配用户输入的正则表达式；
+                </li>
+                <li>
+                    <Text Code>nextStageName</Text> 匹配成功之后需要迁移到的阶段名。
+                </li>
+            </ul>
+        </Paragraph>
+
+        <Paragraph>
+            在编译阶段编译器会执行如下检查：
+
+            <ul>
+                <li>
+                    <Text Code>transformers</Text> 中的 <Text Code>nextStageName</Text>指定的阶段是否定义；
+                </li>
+
+                <li>
+                    <Text Code>beginStageName</Text> 指定的阶段是否定义。
+                </li>
+            </ul>
+        </Paragraph>
+    </div>
+</Modal>
+
+@code {
+    private bool _helpVisible;
+
+    public void Show()
+    {
+        _helpVisible = true;
+        StateHasChanged();
+    }
+}
\ No newline at end of file