像素辦公室：SavingsAI 虛擬總部的設計哲學

大多數金融網站的問題

大多數金融比較網站看起來都大同小異：英雄橫幅配上某人對著筆記本電腦微笑的庫存照片，下方是一張數字表格，頁腳塞滿免責聲明。數字會更新——但您永遠不知道更新的時間、方式，或背後是否真的有事情在發生。網站像一張靜態快照，卻假裝是即時的。

SavingsAI 是真正即時的。利率每日核查，新聞每隔數小時處理一次，AI 模型持續在後台進行分析。但靜態網頁本身無法自動傳達這一切。您可以在頁腳寫上「每日更新」，但那不過是文字——沒有任何感受。

像素辦公室正是解決這個問題的方案。它讓隱形的工作變得可見。當您打開主頁，您看到的不是宣傳冊——而是透過一扇窗，望進一間正在發生事情的辦公室。而辦公室裡發生的事，正好對應數據管道中正在發生的事。

概念：六個智能體，六種職責

辦公室有六個像素角色，各自代表 SavingsAI 日常運作中的不同職能。他們有桌子、顯示器、名牌，以及接近真實工作節奏的作息。每個智能體的顯示器以其專屬顏色發光——從辦公室的任何角落都清晰可見。

畫布下方的智能體狀態標籤以文字顯示每個智能體的當前狀態——● 運行中或○ 空閒——即使您不想觀看動畫，資訊也一目了然。

即時像素辦公室——全部六個智能體正在工作，公告板追蹤今日新聞及社交帖子數量，兩扇窗口分別顯示倫敦與香港的即時天色。

核心哲學：誠實的動畫

像素辦公室最重要的設計原則是：動畫絕不能撒謊。只有當智能體對應的真實後台流程確實活躍時，才會顯示其坐在桌前打字、頭上有動畫對話框。當一篇英國新聞文章到達時，英國財經智能體會從辦公室地板上的任何位置走向桌子、坐下、開始打字。當文章管道趨於平靜，他們就會起身漫步。

這與網絡上大多數「即時」視覺指示器的做法完全相反。慣常做法是一個始終閃爍的綠點，或無論是否有事情發生都按計時器循環播放的動畫。那些是戲劇。像素辦公室是儀表板。

AI 引擎智能體是例外——它從不離開桌子。這反映了 SavingsAI 基礎架構的真實情況：後台 AI 核實與處理確實持續運行，沒有空閒期。紫色顯示器的光芒全天候亮著。

城市窗口：倫敦與香港，即時呈現

辦公室後牆上，兩扇窗口分別望向兩座城市。左窗框出西敏寺：大笨鐘、泰晤士河、議會大廈。右窗框出香港：獅子山山脊、港灣旁密密麻麻的燈火高樓。

兩扇窗口均呈現各自時區的當前真實天色。天空狀態分四個階段過渡：

• 黎明（當地時間早上6–9時）：暖橙紅色漸層，建築物環境光線偏低
• 白天（早上9時至下午5時）：藍灰色天空，建築物燈光極少
• 黃昏（下午5–8時）：深琥珀紅色漸層，建築物開始亮燈
• 夜晚（下午8時至早上6時）：接近全黑的天空，繁星點點，建築物窗戶約85%機率亮起暖金色燈光

香港建築物窗戶採用確定性雜湊函數而非隨機亮燈——每個像素座標始終對應相同的亮/暗狀態。這確保建築立面在重繪時保持一致而不閃爍，同時在人眼看來仍顯得自然隨機。

兩扇窗口之間設有兩個類比時鐘——一個顯示 UTC，一個顯示香港時間，指針實時轉動。塔樓上的大笨鐘錶面靜態顯示在標誌性的10:10位置，向製錶師和攝影師使用這個角度對稱展示錶面的傳統致意。

第六個智能體：社交中心

社交中心智能體於2026年3月加入，代表一個已成為日常管道重要組成部分的職能：社交媒體發佈。SavingsAI 每天向 Facebook、Threads 和 X 發佈約15則更新——利率變動、新聞摘要及市場評論，全部由 n8n 工作流程自動生成並發佈。

社交中心智能體呈琥珀色，坐在最右側的桌子。每當任何平台發出帖子，一個 webhook 就會將事件記錄寫入伺服器上的滾動日誌文件。像素辦公室每60秒輪詢一次該文件。如果有任何條目的時間戳在最近20分鐘內，社交中心智能體就會走向桌子並開始打字。其對話框會顯示平台縮寫——FB、TH或X——取決於帖子發佈的平台。

公告板：一目了然的即時計數

辦公室後牆上，兩扇城市窗口之間，一塊像素藝術公告板顯示兩組即時計數。左欄「今日新聞」顯示今日各類別發佈的文章數量：英國財經、港股市場及 AI 科技。右欄「今日社交」顯示各平台今日的帖子數量：Facebook、Threads 及 X。

兩欄均以每個數字旁的小型填充條呈現，讓您無需閱讀數字即可一眼看出相對數量。公告板與智能體觸發同步，採用60秒週期刷新——始終在一分鐘內保持最新狀態。

社交中心智能體坐在桌前（最右側，琥珀色顯示器），顯示「FB」對話框——一篇 Facebook 帖子剛剛發佈。英國財經與 AI 引擎同樣處於活躍狀態。公告板顯示今日已發佈的新聞及社交帖子數量。

狀態機：每個智能體實際在做什麼

每個智能體運行一個簡單的三狀態機。在任何時刻，他們要麼處於打字（在桌前處理任務）、行走（向目標移動）或等待（站立空閒，倒數至下次隨機漫步）。

當智能體的觸發條件變為活躍——新聞文章到達、利率窗口開啟——他們立即收到「前往桌子」的指令。智能體轉身面向桌子並向其走去。到達後，進入打字狀態：顯示器光芒增強，帶有動畫彩色圓點的對話框出現在頭頂。當觸發條件消失，他們站起並恢復漫步。

隨機漫步的作用不僅是讓場景視覺上保持活躍。它代表 AI 工作負載的非確定性本質——一個未在處理特定任務的系統仍然可用，隨時可被重新調配。站在飲水機旁的智能體並非閒置，他們處於就緒狀態，等待隨時響應。

流暢度背後的技術決策

基於時間的移動，而非基於幀

智能體以每毫秒0.072像素的固定速度移動——相當於60fps下每幀1.2像素。但在120Hz顯示器、受限的瀏覽器標籤，或低功耗移動設備上，幀率各不相同。基於幀的移動（每幀移動X像素）會在不同設備上產生不一致的速度。基於時間的移動（每毫秒移動X像素，以時間差縮放）確保智能體在相同的實際時間內走過相同的距離，無論瀏覽器繪製幀的頻率如何。

行走週期閃爍修復

像素藝術精靈圖通常每行有三列：幀0（站立姿勢）、幀1（左步中）、幀2（右步中）。簡單的行走動畫循環0→1→2→0→1→2，在快速顯示器上會短暫閃現站立姿勢——一個難看的瑕疵。像素辦公室使用 [1, 2, 1, 2] 的行走週期，移動過程中從不觸及幀0。幀0專門保留給靜止狀態，徹底消除了閃爍。

深度排序

智能體按其Y位置（距畫布頂部的距離）順序繪製。螢幕上位置較低的智能體——在類等距視角中距觀看者較近——在螢幕上位置較高的智能體之後繪製，因此顯示在其前方。這防止了角色看起來走到本應在其前面的桌子後面的視覺荒謬。

離屏暫停

動畫循環使用 IntersectionObserver 偵測畫布何時完全滾出視野。當滾出視野時，渲染停止——requestAnimationFrame 回調仍然觸發以保持循環活躍，但不進行任何繪製。這意味著當用戶滾動過像素辦公室後，其 GPU 消耗為零——在電池和散熱空間受限的移動設備上尤為重要。當畫布滾回視野時，動畫即時恢復。

為何選擇像素藝術？

選擇像素藝術美學是深思熟慮的結果，並非單純的懷舊情懷。像素藝術有一種向量插畫和攝影所欠缺的特質：它是可見的構建。每個像素都是一個決定。觀看者直覺地理解，他們看到的是一種表達——某物的模型，而非照片。這正是金融數據工具應有的表達方式。

SavingsAI 不是銀行，它不持有您的資金。它是儲蓄市場的模型——每日核實更新、為您呈現的市場表達。像素辦公室誠實地傳遞這一點。它說：這是我們工作方式的一個簡化的、精心構建的模型。簡化本身就是重點。一個伺服器機房的寫實渲染會聲稱比實際更多的真實性。像素辦公室不作此類聲稱。

此外，溫度感也很重要。金融數據是抽象的，往往令人焦慮，呈現方式幾乎總是冷漠而制度化的。一個有六個角色在不需要時漫步到沙發、輪班工作、代表世界不同地區的小辦公室——這為一個本質上幫助人們為儲蓄做出更好決策的工具提供了人性化的框架。