完整產品頁配方

同一份成員管理需求，差別不在換一套顏色。

這個頁面把使用者、資料、元件、行為、狀態、手機版、鍵盤與驗收放進同一份 UI Spec，再用實際 Demo 檢查結果。

八格 UI Spec

先把 AI 需要猜的事情寫出來。

使用者與任務

工作區管理員搜尋、篩選、檢視、調整與停用成員。

資料

固定六個欄位與五筆虛構資料，不使用真實個資。

元件

Search Field、Combobox、Data Table、Drawer、Dialog、Toast。

行為

搜尋、固定值篩選、列選取、批次停用與列操作。

狀態

Loading、Empty、Error、Success 與已停用。

響應式

360px 保留代號、狀態與操作，次要欄位另行查看。

無障礙

鍵盤可達、焦點回復、具名按鈕與非色彩狀態。

驗收

不用滑鼠也能搜尋、篩選、選取與取消危險操作。

請建立 LumenDesk 工作區成員管理頁。

使用者是工作區管理員。資料使用固定的虛構代號與六個欄位。
提供關鍵字 Search Field、只接受既有部門的 Combobox、角色與狀態篩選。
Data Table 支援排序、分頁、列選取、批次停用與每列 Overflow Menu。
詳細資料使用 Drawer；停用前開啟 Confirmation Dialog；成功後顯示 Toast。
提供 Loading、Empty、Error 與 Success；360px 保留代號、狀態與主要操作。
搜尋、篩選、表格、Drawer 與 Dialog 都能用鍵盤操作；關閉浮層後焦點回到原入口。
驗收：不用滑鼠完成搜尋、選部門、選取一列、開啟操作與取消停用。

操作驗收

完整畫面要能走完任務，也要能故意失敗。

試著搜尋、選部門、勾選成員、開啟列選單、取消停用，再切換 Loading、Empty 與 Error。

Demo 狀態

搜尋成員

部門

角色狀態

	部門	角色	狀態	最後活動
Aurora-01MBR-1042	產品組	管理員	啟用	2026-07-22 14:30
Nimbus-02MBR-1043	營運組	編輯者	啟用	2026-07-21 09:15
Solace-03MBR-1044	客服組	檢視者	已邀請	尚未啟用
Orbit-04MBR-1045	研究組	編輯者	已停用	2026-06-28 16:40
Ember-05MBR-1046	產品組	檢視者	啟用	2026-07-20 11:05

成員清單已載入，共 5 筆。

收尾流程

不知道下一個介面該怎麼說時，回到四個步驟。

找名稱、比差異、補規格、做驗收。這套流程已整理成一頁式指南。

查看 UI 工作流程 →