醫療品質專案管理儀表板

醫院品質管理工作的特性是「專案多、時程長、利害關係人多」。同一位品管同仁手上同時要顧醫院評鑑、JCI（Joint Commission International，美國醫療機構評鑑聯合會的國際版，全球最知名的醫院品質金牌）國際醫療品質認證、多種疾病別認證、QCC（Quality Control Circle，品管圈，由 5 - 10 位同仁組成的小組共同改善一項流程）品管圈競賽、醫策會（醫療品質策進會，台灣推動醫療品質的中央級組織）競賽，加上臨時被指派的各式品質專案。每件案子有不同的截止日、不同的審查方，進度紀錄常常散在 Excel、紙本、共用資料夾、LINE 群組。

這個儀表板要解決的就是這個「多軌專案同時跑、進度全靠人腦記」的痛點。功能是把所有品質專案集中在一處，每天打開儀表板就知道哪些任務逾期、哪些即將到期、本週要交什麼。

5 個具體痛點

這個案例沒有「從頭到尾用一家 AI」，而是讓不同 AI 各做擅長的事，接力產出。整個流程約 5-7 天課餘時間，核心是「先把 SPEC（Specification，需求規格書，把要做什麼、長什麼樣、用什麼技術通通寫清楚的文件）寫好，再進入實作」。

從整段開發歷程中挑出 5 段對話，代表 Vibe Coding 過程中最關鍵的判斷點。

指令 2 · 階段 2 Claude

請 Claude 用「方案 A vs B vs C vs D」格式給 UI 建議

這是反覆精修的關鍵手法，不要問「你建議怎麼設計」，要問「給我 2-3 個方案，各自優缺點」。實際操作中，Claude 主動擴充給了 4 個方案，讓決策依據更完整。

儀表板首頁要呈現 4 個關鍵指標（總進度、逾期任務、本月完成、即將到期）。 我想讓使用者能快速看懂每個指標背後的計算邏輯，但又不想畫面太擠。 請給我 2-3 個方案，各自說明： - 設計做法 - 適合情境 - 缺點 / 限制 - 觸控裝置（平板）上是否還能用 不要直接給我「建議方案」，我要看選項對照後自己決定。

關鍵心法：「給我 2-3 個方案做對照」比「給我最好的方案」有用十倍，你會從對照中學到設計權衡。實作上 Claude 還會主動補方案、標推薦，並引用業界設計準則（這裡是 Apple HIG 蘋果官方介面設計準則，「每個 cell 都該是 actionable 的」意思是「每一個格子都該能點、能做事」）當作依據，比直接給結論更可信。

指令 3 · 階段 2 Claude

用「請扮演挑剔的評審」逼出更深入的建議

想要 Glassmorphism（玻璃擬態）風格，先問風格適不適合自己的應用，而不是直接套用。

我考慮用 Glassmorphism（玻璃擬態）風格做這個儀表板的卡片。 請你扮演一位「挑剔的 UI 設計師」，從下面三個角度評估這個風格適合度： 1. 醫療專業環境（對比度、字體易讀性） 2. 高頻使用情境（每天打開、視覺疲勞） 3. 跨裝置體驗（老舊電腦能不能跑、平板上手感） 如果評估後不適合，請給我 3 個替代風格，並說明為什麼更合適。

關鍵心法：「請扮演挑剔的評審」這個 prompt 模式，能讓 AI 跳脫「給使用者想要的答案」，真正提出反對意見。

指令 4 · 階段 3 Claude

用「視覺對照表」一次比較多種設計風格

選風格時最容易陷入「文字描述聽起來都不錯」的困境。請 Claude 直接畫出 4 種風格的縮圖對照。

幫我為「乳癌診療品質認證 2026」這張專案卡片， 畫出 4 種不同風格的設計縮圖，並列出： - 風格名稱（英文） - 參考的設計系統（例如 Material 3、Apple HIG） - 主要色調（用色票呈現） - 適合什麼情境 用左右對照的方式呈現，讓我能一眼比較。

關鍵心法：選風格用「視覺縮圖對照」比文字描述快十倍。Claude 能直接畫出 HTML / CSS 渲染的縮圖，看完當場決定。

儀表板已部署到 GitHub Pages，任何人開瀏覽器就能用。資料儲存在使用者本機的 IndexedDB，不會上傳到伺服器，符合醫療資料隱私要求。

成品畫面

把這次協作的關鍵心得整理成 5 條，給想做類似專案的讀者參考。即使你不是醫療同仁，同樣的方法論也適用於學校行政、研究計畫管理、社團專案。