SUI
SUI
←Back to Work

在地人AI導覽系統

Client
T＋Studio
Role
Lead Design，Front-end Dev
Timeline
2025
Category
mobile app

在地人AI導覽系統是結合生成式 AI 導覽與互動體驗的Mobile APP，讓文化觀光場域能提供個人化智慧導覽，還能讓參觀者即時獲得與文化探索紀錄，延續場館的學習與文化影響力。

Sui 負責 Localite AI 導覽 App 的前端畫面設計、React Native 介面實作與使用流程落地，包含導覽首頁、地圖入口、QR 掃描、AI Guide 聊天介面、徽章系統與旅程紀錄等畫面。專案初期亦負責 Firebase 基礎串接與前端資料流程整合；後續 LLM、TTS 與部分後台／服務端整合由工程師接手調整，後台架構以團隊最終版本為準。

High Fidelity Mockup

Screenshot

App 主視覺偏向 深色沉浸 + 玻璃質感：

  • 主色：#232323（導覽、卡片標籤）
  • 認證流程：灰黑漸層 #1E1E1E → #434343
  • 聊天：深色底 + 白字 AI 訊息、淺灰 #eee 使用者氣泡
  • 玻璃效果：GlassTile 用半透明白 + 邊框模擬

Tech Stack

1. 前端 / 行動端（核心）

類別技術版本/備註
框架React Native0.81.5
UI 庫React19.1.0
跨平台殼Expo SDK~54
路由Expo Router~6（expo-router/entry，typed routes）
語言TypeScript~5.9
新架構React Native New ArchitecturenewArchEnabled: true

2. 導覽與 UI 元件

套件用途
@react-navigation/native v7底層導航（與 Expo Router 搭配）
react-native-screens原生螢幕優化
react-native-safe-area-contextSafe Area
@expo/vector-icons圖示
react-native-svgSVG / QR Code
expo-image圖片載入與快取

3. 地圖、定位與裝置能力

功能Expo / RN 模組
地圖react-native-maps + Google Maps API
定位expo-location、geolib
相機 / QRexpo-camera、react-native-qrcode-svg
相簿expo-image-picker、expo-image-manipulator
分享 / 列印react-native-share、expo-print、expo-sharing
觸覺expo-haptics

得獎紀錄

2025 Cultech 文化科技共創集智創意提案 （西門紅樓獎）

2024 數發部113年數位科技解決方案：擬世大人物入圍

2024 中華電信5G創新應用大賽入圍

2024 臺北市智慧城市青年舉政提案入圍

你可能也會喜歡

我的小星星
mobile app

Want to work with Sui?

Hire me!Contact me