拒絕“填鴨式”教學：用 MateChat 打造“蘇格拉底式”智能陪練系統詳情 - JSON,Layout,UI,Vue.js,前端開發小雨青年博客

前言：當 AI 變成了“寫作業神器”

大家好！作為開發者，同時也可能是家長或終身學習者，大家最近有沒有一種擔憂：AI 太強大了，甚至強大到可能會“毀掉”教育。當學生把題目丟給 AI，屏幕上瞬間給出完美答案，作業雖然完成了，但學生思考的過程也被徹底剝奪了。這不叫教育，這叫“填鴨”。

真正的教育，應該是“蘇格拉底式”的——老師絕不直接給答案，而是通過不斷地反問、引導、啓發，讓學生自己去悟出真理。構建這樣一個“有耐心、懂引導”的虛擬老師，以前很難，需要複雜的教研知識庫。但現在，藉助華為雲 DevUI MateChat 強大的交互能力和精細的 Prompt 工程，我們可以在純前端環境下，零成本“克隆”一個蘇格拉底式的智能陪練。

今天，我們就來聊聊如何打破常規，用 MateChat - 輕鬆構建你的AI應用打造這樣一個“只引導、不給答案”的教育應用。

🛠️ 代碼獲取：本文 Demo 完整代碼詳見 GitCode 倉庫 https://gitcode.com/kaminono/MatechatSocraticTutor

🚀 在線體驗：您可以通過這個 https://matechat-socratic-tutor.vercel.app/ 在配置了API Key 之後，立即體驗本文實現的效果。

一、痛點與破局：從“問答機”到“引導者”

目前市面上大多數 AI 助手，本質上都是“問答機”：你問 A，它答 B。但在教育場景下，這種模式完全失效了。比如在英語口語練習中，如果用户説了一句蹩腳的英語，普通的 AI 可能會直接把翻譯甩給你，用户看一眼覺得“原來是這樣”，轉頭就忘了，不僅沒學到東西，還產生了依賴。

而在我們的“蘇格拉底陪練”系統中，體驗截然不同。當用户犯錯時，系統會精準地指出哪裏用詞不當，比如提示應該使用過去式；緊接着，它會把用户的錯誤句子和標準句子放在一起進行高亮對比，強化記憶；最後，它絕不停留在糾錯上，而是會拋出一個啓發式的問題，引導用户思考在特定語境下如何表達得更委婉。要實現這種複雜的交互流，光有後台的大模型是不夠的，前端必須提供足夠強的 UI 承載能力。

這正是 MateChat - 輕鬆構建你的AI應用的用武之地，它不僅僅能展示文字，還能通過富媒體卡片讓教學過程徹底可視化。

在傳統的 AI 應用開發中，光是寫一個美觀、自適應的聊天窗口界面（Chat Layout）就要耗費半天時間。而在 MateChat 中，這隻需要幾行代碼。

我們需要構建一個經典的“左側導航 + 右側舞台”佈局。在本項目中，我們直接使用了 MateChat 提供的 Layout 家族組件，瞬間完成了應用骨架的搭建。

請看 Layout.vue 中的核心代碼，我們並沒有手寫複雜的 Flex 佈局來處理頭部、內容區和輸入框的定位，而是直接使用了 <McLayout> 及其子組件：

<main class="stage-area">
  <McLayout class="matechat-override">
    
    <McHeader :logo-img="currentScenario.avatar" :title="currentScenario.name">
      <template #operationArea>
        <div class="stage-status">
           <span class="status-dot" :class="{ 'typing': isTyping }"></span>
           {{ isTyping ? '導師思考中...' : '蘇格拉底模式已就緒' }}
        </div>
      </template>
    </McHeader>

    <McLayoutContent class="stage-content">
       </McLayoutContent>

    <McLayoutSender class="stage-sender">
      <McInput 
        :value="inputValue" 
        placeholder="請輸入你的回答，按 Enter 發送..." 
        @submit="onInputSubmit"
      />
    </McLayoutSender>

  </McLayout>
</main>

為什麼這很重要？

<McLayout>：自動處理了視口高度（100vh）和區域劃分。
<McHeader>：省去了寫 Flex 居中、Logo 樣式的時間，還預留了 operationArea 插槽，讓我們能輕鬆放入自定義的狀態指示燈。
<McLayoutSender> & <McInput>：直接解決了輸入框高度自適應、快捷鍵發送監聽等繁瑣的交互細節。

二、場景覆盤：一場“不説破”的代碼面試

為了驗證這套系統的教學效果，請大家看下面的實測截圖。這是我們模擬的 “算法面試官” 場景，討論經典的 Two Sum 問題。

拒絕“填鴨式”教學：用 MateChat 打造“蘇格拉底式”智能陪練系統_UI

請注意觀察對話的三個關鍵轉折點，系統是如何通過 MateChat 的組件化能力，一步步引導用户自己找到答案的：

精準的“紅筆”批註 (DiffCard)。當用户提出“寫兩個 for 循環”的暴力解法時，AI 沒有直接説“這太慢了”，而是彈出一張紅色的 DiffCard。它高亮了“兩個 for 循環”這個關鍵詞，並反問“你能分析一下時間複雜度嗎？”。這就像老師拿着紅筆在作業本上圈出了重點，強迫用户直面性能瓶頸。
認知偏差的即時矯正。緊接着，用户試圖優化，但錯誤地認為哈希表查找是 $O(n)$，導致整體評估錯誤。系統再次觸發 DiffCard，精準糾正了 $$O(n$$ $$\rightarro$$ $$O(n^2$$ 的推導邏輯。注意看截圖中間的紅色區域，這種“原文 vs 修正”的對比視圖，比單純的文字解釋要直觀得多。
適時的思維“腳手架” (HintCard)，在最後，當用户明白原理但卡在具體實現（“怎麼利用哈希表？”）時，AI 並沒有直接貼出 Python 代碼，而是切換了一張藍色的 HintCard。它給出了關鍵線索——“查找目標值與當前值的差值”，並引導用户思考“邊遍歷邊檢查”。

這就是蘇格拉底式教學的精髓：只給腳架，不給電梯。

三、核心交互：消息氣泡與自定義組件的“混合雙打”

蘇格拉底式教學的核心在於：該説話時説話，該劃重點時劃重點。

當 AI 進行普通對話時，我們需要標準的氣泡 UI。
當 AI 需要糾錯（Diff）或提示（Hint）時，我們需要渲染特殊的富媒體卡片。

MateChat 的組件設計非常靈活，允許我們在消息流中混合使用標準組件 <McBubble> 和我們自定義的業務組件。

1、混合渲染機制

在 Layout.vue 的 <McLayoutContent> 內部，我們通過簡單的 v-if 判斷，實現了不同類型消息的動態渲染：

<McLayoutContent class="stage-content">
  <div class="message-stream">
    <template v-for="msg in messages" :key="msg.id">
      
      <div v-if="msg.component === 'DiffCard'" class="custom-component-wrapper">
        <DiffCard v-bind="msg.componentProps" />
      </div>

      <div v-else-if="msg.component === 'HintCard'" class="custom-component-wrapper">
        <HintCard v-bind="msg.componentProps" />
      </div>

      <McBubble
        v-else
        :content="msg.content"
        :align="msg.role === 'user' ? 'right' : 'left'"
        :avatar-config="{ 
          imgSrc: msg.role === 'user' 
            ? 'user-avatar.svg' 
            : currentScenario.avatar 
        }"
      />
    </template>
  </div>
</McLayoutContent>

2、效果演示：精準的“紅筆”批註 (DiffCard)

當用户在英語練習中用錯了時態，或者在代碼面試中算錯了複雜度，系統會返回 JSON 指令，前端識別後渲染 <DiffCard>。

這裏我們並沒有改變 MateChat 的結構，而是利用其開放性，嵌入了一個 Vue 組件。這讓教學過程變得可視化：

拒絕“填鴨式”教學：用 MateChat 打造“蘇格拉底式”智能陪練系統_JSON_02

這就像老師拿着紅筆在作業本上圈出了重點。這種“原文 vs 修正”的對比視圖，比單純的文字解釋要直觀得多，而 <McBubble> 則負責承載普通的引導性對話。

四、注入靈魂：Prompt Engineering 與 JSON 協議

有了 MateChat 提供的完美“皮囊”（UI），還需要有趣的“靈魂”（邏輯）。

我們並沒有使用通用的系統提示詞，而是構建了一套嚴格的 JSON 通信協議。在 useTutorEngine.ts 中，我們處理了與大模型的交互。

1、設定“蘇格拉底”人設

在 prompts.ts 中，我們注入了核心指令：

export const SOCRATIC_SYSTEM_PROMPT = `
You are a Socratic Tutor.
Your goal is to guide the user to the correct answer through questioning.

### CRITICAL RULES:
1. NEVER provide the corrected sentence directly.
2. ALWAYS output response in valid JSON format.

### RESPONSE JSON SCHEMA:
// Type 1: 糾錯模式 (觸發前端渲染 DiffCard)
{
  "type": "diff",
  "data": { "original": "...", "highlight": "...", "hint": "..." }
}
// Type 2: 普通對話 (觸發前端渲染 McBubble)
{
  "type": "text",
  "content": "..."
}
`;

2、前端解析引擎

在 useTutorEngine.ts 中，我們編寫了一個解析器，將 AI 返回的 JSON 映射為 MateChat 需要的數據結構：

// useTutorEngine.ts 部分代碼
const aiMsg = {
  role: 'assistant',
  content: '',
  component: '' 
};

if (result.type === 'diff') {
  // 命中糾錯模式，指示 Layout 渲染 DiffCard
  aiMsg.component = 'DiffCard';
  aiMsg.componentProps = result.data;
} else {
  // 普通模式，內容直接填入 McBubble
  aiMsg.content = result.content;
}

五、價值總結：低成本，高效率

通過這個項目，我們不僅實現了一個智能教學助手，更驗證了一種高效的開發模式：

極速 UI 開發：利用 <McLayout>、<McHeader>、<McInput> 等 MateChat 組件，我們省去了 90% 的佈局和樣式代碼，直接獲得了企業級的視覺體驗。
靈活的擴展性：通過將 <McBubble> 與自定義業務組件（DiffCard/HintCard）結合，我們突破了傳統 Chat UI 只能發文字的限制，實現了複雜的教學交互。
專注於核心邏輯：開發者可以把精力集中在 Prompt 調優和教學邏輯上，而不用擔心“聊天氣泡怎麼對齊”、“輸入框怎麼自適應高度”這些瑣碎問題。

希望這個開源項目能成為一顆種子，激發大家探索更多 AI 與教育結合的可能性。讓我們一起，用技術讓教育迴歸本質。

附官網鏈接：

DevUI

MateChat - 輕鬆構建你的AI應用

本文Demo: https://gitcode.com/kaminono/MatechatSocraticTutor

小雨青年博客

小雨青年博客

博客 / 詳情