works自主研發・AI 系統示範

自主研發・LINE 風情境回覆示範/2026

LINE 智能回覆情境示範

三段情境自動重播,看懂 LINE 智能回覆怎麼接話

line-reply-demo.vercel.app
LINE 智能回覆情境示範 桌機版網站畫面
LINE 智能回覆情境示範 手機版網站畫面
/ system設計系統

網站色系

  • LINE 綠示意#06C755
  • 深綠#04913F
  • 暖白舞台#F6F3EC
  • 編輯金點綴#C29B4A
  • 墨色#20241F

字體樣式

LINE 智能回覆情境

Noto Serif TC標題字體

您好,請問今天有開嗎?

Noto Sans TC內文・介面文字

單檔

技術架構

18/18

規則引擎單元測試

3 段

情境自動重播

localStorage

資料只存本機

N° 01the challenge

挑戰

「LINE 智能回覆」牽涉到一個時川其他 AI 示範都沒遇過的風險:畫面本身很容易被誤會成「仿冒 LINE 官方 App」。示範必須讓潛在客戶一眼看懂自動回覆的節奏與邏輯,同時從頭到尾守住「這只是示意、不含官方商標、不冒充真實對話」的界線。

N° 02our approach

解法

畫面採 LINE 風格手機框(僅取用綠色作為品牌色示意,不含官方商標素材),以三段情境自動重播呈現:①營業時間問答-關鍵字命中即自動回覆;②訂位流程-依序追問人數與時間,逐步收斂成一筆訂位;③超綱提問-規則判斷比對不到即誠實轉真人。每則訊息前有打字指示器與擬真延遲,送達後標記已讀與時間戳,並可一鍵重播。互動加分區改採選項制「你來當客人」分支(不開放自由輸入,與客服示範的自由對話明確區隔),對話記錄存 localStorage,頁面常駐「情境示範」標籤。

N° 03what shipped

成果

示範已上線 Vercel 並掛回 shichuan.co/services/ai 作品區:三段情境重播 → 選項制互動分支全流程可玩,規則引擎 18 項單元測試全數通過,375px 手機版 LINE 風對話框無橫向溢出。

/ screens內頁實錄
進站・三段情境分頁與 LINE 風手機框
01進站・三段情境分頁與 LINE 風手機框
情境重播・訂位多輪收集(含已讀回條與店內照片卡)
02情境重播・訂位多輪收集(含已讀回條與店內照片卡)
選項制「你來當客人」・訂位分支逐步收斂
03選項制「你來當客人」・訂位分支逐步收斂

ready to build?

你的品牌 也值得一個這樣的網站