產品原型 · 2026-07-16

四個改版方向,十五份原型,並排比較。

A=Mintlify 密集資料面;B=AI 營運儀表板;C=Mintlify 配色搭主從式版型;D=Airbnb 配色搭路線圖版型。四方向皆含 LIFF 手機端現場回報。程式碼與資料皆未更動。

方向 A · Mintlify 產品介面

密集資料面,黑 pill 與薄荷綠強調

依你 design.md 的 Mintlify 規範:每個平台一份代表畫面,涵蓋最能展現設計方向的核心模組。

方向 B · 參考圖延伸

AI 營運儀表板,光暗雙模式

自你提供的參考圖提取配色、字階與版面節奏:AI 摘要卡、KPI 迷你趨勢、事件時間軸與 AI 助理側軌。圖表色盤已通過色覺缺陷(CVD)與對比驗證,未複製參考品牌資產。

方向 C · Mintlify 配色 × 主從式版型

參考圖版型,換上你的品牌語彙

沿用 Mintlify 配色(白畫布、黑 pill、綠色僅限強調、Inter+Geist Mono、full-pill 圓角),套上參考圖的桌面主從式版型:深色 pill 導覽、KPI 卡列、pill 篩選、清單+深色強調詳情面板。現場回報改為後台的「回報審核台」(LIFF 手機端保留在方向 A/B)。

方向 D · Airbnb 配色 × 路線圖版型

進度路線圖,換上 Airbnb 語彙

沿用參考圖的版型:深色圓角 app 外框、頂部 icon 導覽、左工具列+虛線串接的進度路線圖、右事件軌、底部浮動圓形工具塢。配色綁 Airbnb 設計系統(Rausch 珊瑚紅單一強調、Ink Black、Canvas White、Hairline 邊、圓形圖示鈕、Cereal 字體);參考圖的多彩收斂為 Soft Cloud 與語意色低量分類,珊瑚僅點重點卡。三個模組映射為路線圖:專案施工進度、租戶上線導引、現場回報總覽。

方向 A · 設計語言

沿用你 design.md 的 Mintlify 規範

原型直接綁定既有 token:黑色主按鈕主導、薄荷綠僅保留給選中與強調狀態、Inter 搭配 Geist Mono、細線分隔的密集資料面。

Ink
#0a0a0a
Mint
#00d4a4
Surface
#f7f7f7
Tag
#3772cf
Warn
#c37d0d
Error
#d45656
啟用中 試用中 待開通 已停用 軟刪
名錄管理
Inter · 頁面標題 · 26–34px / 600
達鋼模板工程行
Inter · 列表主體 · 14–15px / 500–600
V-0231 · 120 m² · $1,840
Geist Mono · 代碼/數值/金額 · tabular
資料主檔
Inter · 分區標題 · 11px / 600 · uppercase
載入中 · skeleton 直到內容落地,尊重減少動態偏好
尚無廠商資料
空狀態給出下一步,不留白牆。
ERP 連線失敗
錯誤具名、可重試 — 現場連不上為常態。

開發進度對照

原型對應的模組現況

M2–M8 共 7 個模組已開發完成並通過測試,目前皆等待人工審核合併。原型即依這些模組的功能範圍繪製。

M2
名錄(四主檔 CRUD、帳號開通、協力人員)
租戶後台待合併
M3
專案(建立管理 + 區域樹編輯)
租戶後台待合併
M4
合約讀取(列表/詳情/對帳/回報檢視)
租戶後台待合併
M5
ERP 同步(連線設定、觸發、歷史與變更軌跡)
租戶後台待合併
M6
LLM + 儲存設定(供應商、金鑰/憑證)
租戶後台待合併
M7
平台管理補齊(授權、角色目錄、租戶生命週期、稽核)
超管平台待合併
M8
LIFF 現場回報(批次提交、兩段式照片、歷史)
LIFF待合併