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

> 從簡約的 Excalidraw 風格頁面到 2001 年遊戲大廳的視覺轉變：我怎樣用 AI agent 重新設計我的開源 ADHD 待辦 App。為甚麼趣味介面幫我投入、具體製作方法（截圖、設計規則、對照、CSS、截圖檢查）以及如何自製 skin。

- URL: https://hyperfocusam.com/blog/ai-redesign-app-ui-from-game-tc/
- Language: zh-Hant
- Author: Sam Wong (黃力桐), https://hyperfocusam.com/
- English edition: https://hyperfocusam.com/blog/ai-redesign-app-ui-from-game/ (Markdown: https://hyperfocusam.com/blog/ai-redesign-app-ui-from-game/index.md)
- Published: 2026-10-02; revised 2026-10-02

---

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

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

## 之前：白紙上的草圖

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

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

## 之後：遊戲大廳

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

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

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

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

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

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

1. **研究參考對象。** Survival Project（서바이벌 프로젝트）是由 I.O. Entertainment 開發並由 HanbitSoft 發行的。封閉測試於 2001 年 11 月開始，2003 年 2 月 17 日正式推出，韓國伺服器於 2013 年 2 月關閉。
2. **細看真實截圖。** Ada 研究了來自 [MMOHuts 評論圖庫](https://mmohuts.com/review/survival-project)的三個畫面：大廳、角色選擇房間以及卡片選擇頁面。這些是別人的截圖，所以我只附上連結，不轉載。
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/` 資料夾中的一個 CSS 檔案。`classic` 是原本的白色頁面，仍作為預設。`arcade` 是遊戲外觀。
- SKIN 按鈕可以切換它們，且應用程式會記住你的選擇。
- 單一檔案的獨立版本包含所有外觀。

製作你自己的外觀只需兩個步驟，參考 [skins README](https://github.com/HyperfocuSam/calendar-for-real-adhd/blob/main/skins/README.md)：

1. 將 `classic.css` 複製到 `skins/<name>.css`。
2. 在 `index.html` 的 `<head>` 中，在其他連結下方添加一行：

```html
<link rel="stylesheet" href="skins/<name>.css" data-skin="<name>" data-label="Your Name">
```

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

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

## 可以直接複製的指示範本

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

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

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

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

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

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

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

## 常見問題

### 趣味設計對 ADHD 有幫助嗎？

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

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

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

### 模仿遊戲介面合法嗎？

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

### Calendar for Real ADHD 是甚麼？

這是我為自己的 ADHD 開發的一個開源待辦畫布：一個頁面、一個 LOG 按鈕，卡片根據緊急程度著色，且它們會輕微漂移而非堆疊在列表裡。它在本地運行，並以 MIT 授權在 [GitHub](https://github.com/HyperfocuSam/calendar-for-real-adhd) 公開。

### 如何製作我自己的 skin？

將 `skins/classic.css` 複製成 `skins/` 中的一個新檔案，在 `index.html` 的 `<head>` 中添加一行 `<link>`，重新載入頁面並按 SKIN。[skins README](https://github.com/HyperfocuSam/calendar-for-real-adhd/blob/main/skins/README.md) 列出了你可以調整的所有項目。