works自主研發・AI 系統示範

自主研發・自然語言預約互動示範/2026

AI 預約系統示範

一句中文,AI 幫你把時段亮出來

ai-booking-demo-six.vercel.app
AI 預約系統示範 桌機版網站畫面
AI 預約系統示範 手機版網站畫面
/ system設計系統

網站色系

  • 墨綠主色#2E5E4E
  • 深墨#1E2B27
  • 暖紙白#F6F3EC
  • 暖金點綴#C29B4A
  • 灰綠輔助#66706B

字體樣式

時光髮藝 AI 預約小助理

Noto Serif TC標題字體

好的,為您找到 5 個可預約時段

Noto Sans TC內文・介面文字

單檔

技術架構

24/24

解析器單元測試

8 類

中文日期詞解析

localStorage

資料只存本機

N° 01the challenge

挑戰

時川 AI 服務頁的「AI 預約系統」原本只有靜態示意圖——潛在客戶看得到介面長相,卻摸不到「自然語言變成一筆預約」的核心體驗。要補一個點進去就能玩的證明,同時不架後端、不假裝有真實店家、不寫任何未證實數字。

N° 02our approach

解法

規則式中文解析引擎涵蓋 5 種服務、8 類日期詞(今天/下週三/7月20日等,含跨週跨年換算)與早午晚時段詞;解析不到的欄位由助理誠實追問,不亂猜。週曆以種子資料模擬已被預約的時段,命中條件的空檔金色高亮;確認後寫入 localStorage,可取消、可一鍵重置。頁首常駐「DEMO 示範環境」標籤並明示店家為虛構。

N° 03what shipped

成果

示範已上線 Vercel 並掛回 shichuan.co/services/ai 作品區:對話 → 解析 → 高亮 → 確認 → 我的預約全流程可玩,解析器 24 項單元測試全數通過,桌機雙欄、375px 手機單欄皆無橫向溢出。

/ screens內頁實錄
進站・AI 助理與本店行事曆
01進站・AI 助理與本店行事曆
「下週三下午想剪髮」・命中時段金色高亮
02「下週三下午想剪髮」・命中時段金色高亮
點選時段・確認預約卡
03點選時段・確認預約卡

ready to build?

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