Checklist Design(checklist.design)是一個介面設計檢查清單網站:它把設計頁面、元件或完整流程時容易遺漏的細節整理成清單,讓設計師在交付前逐項核對,而不是仰賴記憶。截至 2026-09-21,站內收錄 129 份清單,分為 Website、Web App、Design System、Mobile、Flows 五個分類,全部免費閱讀、無需註冊。除網頁版外,同一套清單也透過 Figma 外掛(含 AI 評審)以及以 MIT 授權開源的 AI Agent Skill 提供。

Checklist Design 首頁,依 Mobile app、Web app、Website、Design system、Flows 五個分類展示清單入口

站點速覽

  • 網址:https://www.checklist.design/
  • 類型:設計檢查清單庫 / 設計參考
  • 費用:網頁清單免費、無付費牆;Figma 外掛的 AI 評審有免費額度,超出後需購買 credit pack
  • 註冊要求:瀏覽與勾選清單無需帳號;勾選進度僅儲存在瀏覽器本機
  • 介面語言:僅英文
  • 內容規模:129 份清單、5 個分類(截至 2026-09-21,見 Browse 頁分類計數)

站點背景

Checklist Design 由設計師 George Hatzis 建立——網站頁尾標註「Created by George Hatzis」並連結到他的個人網站,其 LinkedIn 資料顯示他為獨立產品設計負責人,先前任職於澳洲健康科技公司 Eucalyptus。

他在站內 About 頁自述了起源:在不同專案間切換時,他總會漏掉一些自己其實知道的體驗細節,於是把每個畫面最關鍵的要點寫成清單、每次重訪時逐項勾選,確認有效後便做出更多並公開分享。這篇自述引用了 Atul Gawande《清單宣言》(The Checklist Manifesto)中「好清單只提醒最關鍵、連高手也可能漏掉的步驟」的觀點;同一故事也被 Smashing Magazine 2022 年 9 月的 UX 清單綜述轉載。需要注意的是,該 About 頁現已下架(截至 2026-09-21 回傳 404,上述內容取自快取版本)。根據隱私政策,網站目前的營運主體是在澳洲註冊的 Checklist Design Pty Ltd。

清單內容與使用方式

Browse 頁面依分類列出全部清單,標籤顯示各分類數量

五個分類的清單數量為:Web App 32、Design System 32、Website 27、Mobile 25、Flows 13(截至 2026-09-21)。涵蓋對象非常具體,例如 Website 分類下有 Login、Pricing、404、FAQ、Footer 等頁面清單,Design System 分類下有 Button、Modal、Color System、Accessibility 等元件與規範清單,Flows 分類則涵蓋「取消訂閱」「重設密碼」「提交表單」等完整流程。

每份清單由若干檢查項目組成:項目名稱、一句說明,部分項目附帶補充提示(如 Login 清單建議在密碼輸入框附近放重設密碼連結),有的清單還區分必查項與 Optional 可選項。頁面頂部顯示「N out of M」進度與 Reset 按鈕;實測勾選狀態寫入瀏覽器 localStorage,不會上傳伺服器,因此換瀏覽器或裝置後進度不會保留。

Accessibility 清單詳情頁:左側為可勾選的檢查項目,右側提供 Related 推薦、純文字與依工具複製入口

清單的落地方式考慮了協作情境:每份清單都能「Copy as plain text」,或依目標工具格式化複製——Confluence、Notion、Linear、GitHub、Jira、Google Docs、Asana、ClickUp 等,貼上後即成為對應工具中的任務列表。詳情頁側欄的「Suggest a checklist」按鈕會開啟「Request a checklist」表單(清單名稱、選填描述、選填的通知信箱),讀者可以據此向作者提議新清單;網站更新動態則透過郵件訂閱與 X 帳號 @george_hatzis 發布。

Figma 外掛與 AI 評審

首頁主推的 Figma 外掛把清單變成「AI 設計評審」:選取任意 Figma 畫面,外掛會對照清單給出「哪些做得好、缺什麼、可以改什麼」的分析。隱私政策揭露了關鍵實作細節:免費額度以雜湊後的 Figma 使用者識別碼統計每月次數;畫面截圖僅暫時傳輸到伺服器並送往 Anthropic Claude API 分析,請求完成後圖像與分析結果均不在伺服器留存;超出免費額度需透過支付服務商 Polar 購買 credit pack;外掛帳號採用信箱 magic link 登入,不設密碼。作者 2026 年在 LinkedIn 宣布外掛安裝量已超過 3,600(此數字來自作者自述,本文未能獨立核實)。

開源 Agent Skill 與 Figma Skill

Agent Skill 介紹頁:一條指令安裝後,AI 工具可自動調用清單評審設計

2026 年 7 月起,作者把整套清單以 Agent Skills 開放標準打包開源在 GitHub(Checklist-Design/skills,MIT 授權)。據倉庫 README,112 份已發布清單作為本機引用檔打包進 skill,匹配清單與讀取項目皆為本機檔案讀取,不依賴網路或 API;skill 提供 audit(逐項核對,標註「存在/部分存在/缺失/不適用」)與 critique(整體點評)兩種模式,給一張截圖即可自動選擇。安裝只需一條指令 npx skills add checklist-design/skills,支援 Claude Code、Cursor、OpenAI Codex、GitHub Copilot、Gemini CLI、Windsurf 等約二十種工具;Claude Code 另有附觸發 hook 的完整外掛。倉庫透過排程 GitHub Action 每天從官網重建清單 bundle,內容有變化才提交並發新版(截至 2026-09-21,最新版本為 2026-09-07 發布的 v3.2.4,倉庫約 52 stars)。Figma 社群另收錄同名 Figma Skill,供 Figma 的 AI agent 調用。

隱私與內容政策

Checklist Design 不是使用者生成內容平台:全部清單由作者本人策劃撰寫,讀者能提交的只有「Request a checklist」建議表單與郵件訂閱。隱私政策承諾遵守 Australian Privacy Principles、GDPR 與 CCPA,列明子處理方為 Supabase(資料庫)、Anthropic(AI 分析)、Polar(支付)與 Resend(郵件),網站使用 Google Analytics(歐盟、英國與瑞士使用者會看到非必要 Cookie 的同意請求),並聲明不出售使用者資料、不將資料用於廣告。

內容版權方面需要區分:網站本身未對清單文本標註任何開放內容授權,引用時應按一般受版權保護內容對待;MIT 授權僅適用於 GitHub 上的 skill 倉庫及其打包的清單檔案。

費用與商業模式

網頁清單完全免費,沒有付費牆或帳號等級。目前可見的收入來源有兩類:Figma 外掛 AI 評審的 credit pack 付費,以及頁尾標註的贊助商(設計素材庫 Mobbin 與設計直播社群 Rectangles)。

適用場景

  • 設計交付前的細節自查,尤其是登入、定價、結帳這類「每個專案都要重做一次」的介面;
  • 新手設計師了解一個頁面或元件通常由哪些要素構成,建立檢查習慣;
  • 團隊把某份清單複製到 Notion、Linear 或 GitHub,作為評審或驗收的共同基準;
  • 使用 AI 編程或設計工具時,透過開源 skill 讓 AI agent 按清單評審介面,而不是只得到籠統的「看起來不錯」。

局限

  • 只有英文:清單與介面均無本地化,非英語團隊直接採用時需要自行翻譯。
  • 進度不跨裝置:勾選狀態只存在瀏覽器 localStorage,清除快取、換瀏覽器或換裝置都會遺失,也沒有帳號同步功能。
  • 單人維護:內容更新仰賴作者一人,節奏不透明;頁尾的 About 與 Terms 連結目前指向 404 頁面(截至 2026-09-21 實測),Privacy 頁面正常。
  • Figma 社群數據無法核實:外掛的安裝量、評分只能在 Figma 社群頁面查看,本文寫作時該頁面有存取防護,無法自動核對。
  • 通用清單的固有邊界:清單是跨專案複用的通用最佳實踐,不含針對具體產業、使用者群或合規要求的判斷,不能取代使用者研究與真實測試。

參考資料