Sam Wong.黃力桐

工具與工作流程

由白紙一張到遊戲大廳：一款 2001 年遊戲的畫面，令我願意打開自己的 ADHD 待辦工具

發佈日期：

我為了應對自己的 ADHD，開發了 Calendar for Real ADHD：一個頁面、一個 LOG 按鈕，並根據截止日期的緊急程度來區分卡片的顏色。它管用。只是它的樣子像一張草圖，是 Excalidraw／Canva 風格：白色的頁面、黑色的輪廓線，帶點紅色。它很實用，但也很容易被忽略掉。

於是我請 Ada（我在 Claude Code 裏運行的 AI 幕僚長），把這個畫布換上 Survival Project 的樣子。那是一款 2001 年的韓國網上遊戲，我很喜歡它的視覺設計。現在，同一批卡片放進了一個陽光明媚的遊戲大廳。我想分享的，就是由簡約風格走到這種視覺風格的過程，因為它真的幫我投入。

同一組範例卡片的前後對比：左邊是 classic 外觀，白色頁面加黑色細框；右邊是 arcade 外觀，有天空、山丘、金色標題和加框卡片的遊戲大廳。
同一個畫布，同一組卡片。左：原本 Excalidraw／Canva 風格的頁面。右：遊戲風格。

之前：白紙上的草圖

原本的設計刻意低調。每張卡片都是一個帶有文字和日期的細線框。當日期臨近時，卡片會變成紅色，這是頁面上主要的提示。它看起來就像白板上的手繪圖：清晰、冷靜且容易被忽略。

對於我的大腦來說，這正是陷阱。一個容易被忽略的頁面，就是我會一拖再拖、遲遲不打開的頁面；而如果我不打開待辦畫布，它就毫無作用。

之後：遊戲大廳

arcade skin（外觀主題）保留了所有的卡片和按鈕。改變的是表面。頁面背景出現了藍天與綠色山丘。一個金色的房間標題 "~ EvenT ~"，以及一條顯示 "6 CARDS · 3 THIS WEEK" 的橫條。一個閃亮的黃色 LOG 按鈕。卡片被設計成遊戲卡片的樣式：本週為金色，本月為藍色，之後的日期為銀色，逾期的則發紅光，並配有倒數牌（D-3、TODAY、2D LATE）和等級方塊（SS、S、A、B）。對話框則變成了遊戲的藍色聊天面板。

切換 skin、頁面標籤、新增卡片以及將一張卡片放置在另一張卡片上的操作，於 2026 年 10 月 2 日使用範例資料錄製。
arcade skin 中的 LOG 對話框：一個標題為「~ LoG ~」的藍色面板，內含文字框、日期及綠色的 Add 按鈕。
對話框變成了遊戲中的藍色聊天面板。

為甚麼遊戲風格能幫我投入

我沒有具體的數據，這只是我個人的經驗。大廳的設計讓這個畫布感覺像一個我想待着的地方。我打開它，看到哪張卡片在發光，然後就去處理它，而不是逃避這個頁面。

兩個細節對我來說最重要。緊急的卡片不僅變紅，還會發光，並帶有最高等級，這樣我就能第一時間看到它。而且，這個頁面給人的感覺像是「遊戲」，而玩，正是我開始做事的方式。

在 Agent 頁面上的 arcade 外觀主題，包含範例卡片：一個標記為 SS 等級的紅色 "2D LATE" 卡片、本週的金色卡片以及本月稍後的藍色卡片。
帶有範例卡片的 arcade skin。逾期卡片會發出紅光並排在最高等級。

Ada 怎樣由一個外觀走到另一個

這個方法一個屏幕就寫得完，而且不僅適用於遊戲，任何重新設計都能奏效：

  1. 研究參考對象。 Survival Project（서바이벌 프로젝트）是由 I.O. Entertainment 開發並由 HanbitSoft 發行的。封閉測試於 2001 年 11 月開始，2003 年 2 月 17 日正式推出，韓國伺服器於 2013 年 2 月關閉。
  2. 細看真實截圖。 Ada 研究了來自 MMOHuts 評論圖庫的三個畫面：大廳、角色選擇房間以及卡片選擇頁面。這些是別人的截圖，所以我只附上連結，不轉載。
  3. 寫下設計規則。 每一個畫面背景都有天空和草地；金色輪廓標題且最後一個字母大寫（"~ LobbY ~"）；藍色托盤上的閃亮膠囊按鈕以及小按鍵牌；頂部的分頁；卡片上有數字牌、S 或 SS 等級和等級牌；按元素用顏色區分；藍色聊天面板。
  4. 將每個部分對應到我 App 中的功能。 即下表所示。
  5. 用 CSS 製作，然後把每個頁面截圖。 沒有使用任何遊戲美術素材。
遊戲裏 我的畫布
房間標題、"~ 11th RooM ~" 頁面標題、"~ EvenT ~"
藍色托盤上的閃亮膠囊按鈕 LOG 作為黃色 READY 按鈕；SAVE 帶有 ⌘S 標籤；CLOCK 和 FLOAT 在藍色托盤上
ME / GAME / GUILD / FRIENDS 標籤 TO-DO / EVENT / REMIND / AGENT 標籤，帶有 0 到 3 的按鍵牌
卡片上的元素顏色 緊急程度框架：今日或逾期發紅光，本週為金色，本月為藍色，稍後為銀色，待辦事項為粉紅色
數字牌和 S/SS 等級 倒數牌與等級方塊
藍色聊天面板 標題為 "~ LoG ~" 的對話框

截圖檢查沒有白做。它發現了一個在換新外觀前就存在的 Bug：原本讓卡片避開按鈕的程式碼只避開了 LOG。它根據 offsetParent 過濾元素，而具有 position: fixed 的按鈕沒有此屬性，因此卡片可能會落在 SAVE、CLOCK 或標籤上。Ada 把判斷改為 getClientRects()。

換成你自己的風格：skins

當我看到結果時，我不想把自己的品味強加給每個使用這個 App 的人。因此 Ada 將外觀轉換為一個 skin 系統，現在已在公開的 main 分支（commit 48731a4）上：

製作你自己的外觀只需兩個步驟，參考 skins README：

  1. 將 classic.css 複製到 skins/<name>.css。
  2. 在 index.html 的 <head> 中，在其他連結下方添加一行：
<link rel="stylesheet" href="skins/<name>.css" data-skin="<name>" data-label="Your Name">

重新載入頁面，按 SKIN 直到出現你的外觀。卡片寬度大致保持不變，已儲存的佈局才放得下；文字要一眼看得清；不用任何外部圖片。

還有一項變化：卡片現在可以重疊。將一張卡片拖到另一張上，你碰到哪一張，哪一張就移到最前面。新卡片仍會自動錯開排列，且卡片仍會避開按鈕。

可以直接複製的指示範本

將括號替換為你自己的應用程式和參考對象。任何能讀取你的程式碼並截圖的 coding agent，都可以按這份指示工作。

目標：為 [我的應用程式] 提供一個受 [遊戲 / 產品 / 時期] 啟發的新外觀。
不要更改應用程式的功能。

先做研究：誰製作了 [參考對象]、何時發行，以及哪些畫面定義了其外觀。引用來源。

設計規則：研究 [3] 張 [參考對象] 的真實截圖。列出設計規則：背景、標題、按鈕、分頁、卡片、顏色編碼、面板。

對照：將每個規則對應到我應用程式中的一個功能，以表格形式呈現：
[參考元素] -> [我的元素]。說明你將不使用的部分。

製作：只用 CSS，寫成獨立的 skin 檔案。目前的樣式保持為預設。不使用來自 [參考對象] 的任何美術素材或圖片。

檢查：截取每個頁面和對話框的畫面。報告看起來有問題的地方，包括在新外觀出現前就存在的 Bug。

常見問題

趣味設計對 ADHD 有幫助嗎？

對我來說是的，雖然我沒有數據支持，只有我自己的使用經驗。遊戲大廳的外觀讓我想打開我的待辦畫布並處理那張發光的卡片，而原本的純白版本很容易被忽略。你可以嘗試換一個 skin，看看是否會改變你打開頁面的頻率。

AI agent 可以參考遊戲截圖重新設計 App 介面嗎？

可以，只要你給它一個方法而非僅是一張圖片。我的 agent 研究了這款遊戲、分析了三張真實截圖、寫下了設計規則，並將每一項對應到我應用程式的一部分，最後用 CSS 做出來。接著它還截取了每個頁面的畫面來檢查結果。

模仿遊戲介面合法嗎？

我沒有抄襲。沒有使用來自該遊戲的任何美術素材、圖片或檔案；外觀是根據金色標題、膠囊按鈕和顏色編碼卡片等設計清單，用 CSS 從頭寫出來的。參考截圖僅作為連結，並未重新發布。

Calendar for Real ADHD 是甚麼？

這是我為自己的 ADHD 開發的一個開源待辦畫布：一個頁面、一個 LOG 按鈕，卡片根據緊急程度著色，且它們會輕微漂移而非堆疊在列表裡。它在本地運行，並以 MIT 授權在 GitHub 公開。

如何製作我自己的 skin？

將 skins/classic.css 複製成 skins/ 中的一個新檔案，在 index.html 的 <head> 中添加一行 <link>，重新載入頁面並按 SKIN。skins README 列出了你可以調整的所有項目。