本篇階段：實作挑戰
使用介面：claude.ai（對話產生 HTML，Artifacts 即時預覽）
前三天都在做同一件事：把指令寫好，交給別人執行，然後檢查產出對不對。 (Gemini 要加油啊...)
今天換一個完全不同的用法。不生文字，改生一個可以打開來玩的網頁。
起心動念很平常 (?) 也是在工作時很常需要用到的。跟人解釋一件有結構的事情時，講到一半通常會卡在同一個地方：對方聽得懂每一句話，但拼不起來，或是無法想像整個面貌與執行的過程或結果。從我的經驗來說好了，飛機從起飛到落地經過哪些階段、注意力實驗到底在測什麼、大腦的預設模式網路是什麼意思，這幾件事我都試過只用嘴巴解釋，效果都很有限。畫在白板上好一點，但白板不會動 (而且我不是畫家)，講到一半還是只能用手比，比完也不知道自己在比什麼。
所以今天的題目是：同一個概念，做成一個單檔 HTML，打開就能操作，看能不能比講的有效。
三個題目剛好也是三種不同的角度。
投影片跟靜態圖有一個共同的限制，它們只能呈現「作者選定的那幾個時間點」。飛機起飛與降落的過程畫成一張圖，就是一條高度曲線，看得到形狀，看不到那條曲線上任何一點的空速、俯仰角、起落架收了沒有。
網頁可以讓看的人自己選時間點，這個差別在解釋「過程」的時候特別明顯，因為過程的重點往往不在某個瞬間，而在兩個瞬間之間發生了什麼。
另外還有兩個很現實的理由。
這裡指的不是「做一個網站」，是做一個只解釋一件事的單頁，做完就丟也沒關係。
挑題目的時候刻意讓三個題目落在不同的位置。
| 題目 | 要解釋的東西 | 資料從哪來 | |
|---|---|---|---|
| DEMO 1 | 飛機起飛與降落 | 一個連續過程有哪些階段 | 公開常識性的飛行程序 |
| DEMO 2 | 注意力測驗組 | 一個實驗派典在測什麼 | 認知心理學經典文獻 |
| DEMO 3 | 預設模式網路玻璃腦 | 一組空間結構與它的變化 | 腦影像文獻的座標與趨勢 |
差別在於「看的人要做什麼」。第一個只要看，第二個要親自做一遍，第三個要自己去點、去比較。
下面會分別提供網址供參考，密碼均為 alexyu_iThome2026_Day05
提示詞：
用 HTML 製作一個飛機模擬飛行。
下方有時間軸，從滑行起飛、起飛往巡航階段、巡航階段、巡航與準備降落階段、降落階段、降落後滑行。
網頁連結：飛機起飛與降落模擬
第一個題目最單純：一趟航班從推出到停機坪，中間到底發生了什麼。
畫面分成三層。上面是一個會動的側視畫面，飛機固定在畫面中央，背景的天空顏色、雲層高度、地面紋理跟著高度變；下面是六格讀數（垂直速度、馬赫數、俯仰角、N1、地速、累積距離）；再下面是一條垂直剖面時間軸，可以直接拖曳跳到任何一個時間點。
實際做出來之後的設計說明如下。
時間軸可以拖曳，這是整個 DEMO 最有用的一個互動。 解釋「下降頂點」的時候，直接把游標拖到那個轉折點前後來回拉，讓對方自己看到油門收掉、俯仰角轉負、高度開始掉。
階段被切成六塊，各自有自己的顏色與文字說明： 滑行與起飛、爬升、巡航、下降準備、降落、落地後滑行。點任何一塊就跳到那一段的開頭，下面的說明文字同時換掉。這解決了「聽得懂每一句但拼不起來」的問題，結構被畫出來了，不用在腦袋裡自己組。
狀態用標籤而不是用數字。 起落架、襟翼、擾流板、自動駕駛四個標籤在畫面左下角，該亮的時候亮，比在讀數列多塞四個數字好懂太多，尤其是給沒有背景的人看的時候。
它的底子其實很陽春：30 個關鍵點（時間、高度、空速、俯仰角、N1、起落架、襟翼），中間用平滑內插補起來，事件呼叫（V1、ROTATE、GEAR UP、TOP OF DESCENT⋯⋯）是照時間表硬寫的 23 條。沒有任何空氣動力學，沒有推力阻力平衡，沒有風。
而它完全夠用。 因為要解釋的是「階段的順序與相對關係」，不是「這架飛機在這個重量下爬升率是多少」。這件事我覺得是今天最有價值的一條：教學用的模擬，不用把全部細節都呈現。 這條界線畫清楚，做起來會快非常多，也不會有人被誤導。
不過界線畫清楚的前提是講出來。所以頁尾直接寫死一段話，說明這是簡化模型、忽略了什麼、時間軸 1 秒對應實際 10 秒。這段話比模擬本身還重要。
啊那個落地後要滑很久也算是真實呈現 xD
提示詞：
幫我製作一個心理學的注意力遊戲，用html來做。
網頁連結：注意力測驗組
第二個題目換了一種關係，這個是用來做的。
四個經典派典各做成一個作業：色字干擾（Stroop）、側翼干擾（Flanker）、空間線索（Posner）、視覺搜尋（Treisman）。每個作業先跑練習（有對錯回饋），再跑正式（沒有回饋），結束後算出對應的行為指標。
為什麼要做成親手做一遍？因為這四個效應有一個共同特性：知道原理不等於感覺得到。 Stroop 效應寫在教科書上是一句話，「唸字的自動化歷程會干擾顏色命名」，看過就過去了。實際按 F G H J 按到手忙腳亂、看著自己不一致條件慢了一百多毫秒，是另一回事。
這個 DEMO 有幾個地方我覺得做得還不錯。
施測時整個畫面被接管。 按下開始之後，若在全螢幕模式下變成深色，只剩刺激跟反應鍵，上面一條進度條，右上角是作業代號。這不只是好看，是因為注意力作業對干擾很敏感，旁邊留著說明文字跟按鈕會直接影響反應時間。
有一條施測記錄帶。 頁面上方一條橫向的記錄帶，每一個試次畫一根直條，高度是反應時間，藍色代表正確、紅色代表錯誤。做完一輪回頭看那條記錄帶，看得到自己的節奏：前面幾試比較慢、中間穩下來、快結束的時候開始出錯。這是我覺得很棒的一個設計，因為它把「一堆數字」變成「一個可以一眼看完的數據圖」。
結果區給的是指標，不是原始數據。 干擾量、側翼效應、線索效益、搜尋斜率，每個項目都附一句解讀，並且寫出成人的典型範圍。做完看到「干擾量 143 ms」(我的實測資料) 而旁邊寫著「成人典型值約 60–200 ms」，那個瞬間比讀十頁課本有感覺。
它老實承認自己不準。 反應時間只取正確反應，並且剔除 200 ms 以下與 2500 ms 以上的極端值；頁尾寫明計時受瀏覽器與螢幕更新率影響，不等同實驗室級軟體的毫秒精度；資料只存在分頁記憶體裡，關掉就沒了。
這幾句話同樣是刻意留的，一個看起來很專業的介面，最容易讓人以為數字可以拿去用。
提示詞：
建立一個HTML模擬大腦腦迴路的「預設模式網路」（Default Mode Network, DMN），並分成正常人、憂鬱症、思覺失調症在這個迴路上的迥異，該迴路的腦區呈現採用MNI152模板
網頁連結：預設模式網路玻璃腦
第三個題目最難，也最能看出這個做法的上限在哪。
預設模式網路（Default Mode Network，DMN）是大腦在「沒有在做外部作業」的時候反而活躍的一組區域。它牽涉到自我參照、回憶、想像未來，而且在憂鬱症與思覺失調症的研究裡都有相當一致的異常型態。
這個東西用講的幾乎不可能講清楚，因為它同時有三個維度要交代：這些區域在腦袋的哪裡、它們彼此怎麼連、換一個族群之後連法怎麼變。
做出來的版本是這樣的：21 個節點，每個都掛著真實的 MNI152 標準空間座標，投影到矢狀、冠狀、軸狀三個平面上。滑到任何一個節點，三個視圖同時打上十字準線，右側面板讀出該點的座標、所屬子系統與功能說明。30 條連結按強度決定粗細，反相關畫成虛線。上方三個按鈕切換正常對照、重鬱症、思覺失調症三組。
幾個具體的收穫。
三視圖同步準線，解決了「這到底在哪」的問題。 單看一張矢狀面，永遠說不清楚左右。三個平面一起打準線之後，位置這件事就不用再解釋了。
「與對照組差異模式」這個開關是整個 DEMO 的重點。 打開之後，連結不再按絕對強度上色，改成按「相對於對照組是高還是低」上色，高的紅、低的藍。切到重鬱症組，畫面上立刻看到膝下前扣帶那三條線變成粗紅色；切到思覺失調症組，內側顳葉那一片變成藍色。原本要看半天數字表才看得出來的事，變成一眼。
下面那條模擬 BOLD 訊號有點超出必要，但它撐起了另一半的故事。 兩條時間序列（DMN 與任務正向網路），灰色區塊標示外部作業區段。健康腦在作業區段會看到明顯的向下凹陷，兩個疾病組凹陷都變淺。這件事是連結圖畫不出來的，因為它是時間上的，不是空間上的。
然後是這個 DEMO 最重要的部分：頁尾那三段。 座標來源寫清楚出處，渲染方式說明這是玻璃腦最大密度投影的示意畫法、腦輪廓是描繪的剖影曲線而非解剖影像，臨床註記直接寫「連結強度為依文獻方向性彙整的示意值，非任一資料集的實測值」，並且點出這個領域的異質性很高，樣本、用藥、頭動校正、全腦訊號回歸都會改變方向。
這三段是這個 DEMO 能不能拿出去的分界線。 沒有這三段，它就是一個長得很像研究結果、但數字是編的東西。有了這三段，它是一個示意圖。差別非常大。
做完三個之後，回頭看，難度不是來自「畫面多複雜」，而是來自資料有多少是可以被查證的。
| 資料的性質 | 出錯的代價 | 需要的免責程度 | |
|---|---|---|---|
| 飛機起飛與降落模擬 | 順序是公開常識，數值是編的形狀 | 低，看的人知道那是模擬 | 一段頁尾說明 |
| 注意力測驗 | 派典是文獻定義的，資料是 Claude 跑出來的 | 中，數字是真的，但精度不是 | 說明計時限制與資料去向 |
| 玻璃腦 | 座標是真的，連結強度是編的 | 高，長得太像研究結果 | 三段，逐項拆開講 |
規律很清楚：畫面越像專業工具，免責就要寫得越用力。 因為介面本身在對看的人做出承諾，而那個承諾是視覺做的，不是文字做的。
這跟 Day 03、Day 04 的教訓其實是同一件事的兩面。前幾天談的是模型會在無法查證的欄位上瞎填；今天談的是，同樣一批填出來的東西，包裝得越精緻，越沒有人會去質疑它。
三個檔案是分開的對話產生的，但收斂出來的規格幾乎一樣，直接整理成下次可以重用的清單。
單一檔案，不准有第二個檔案。 CSS 寫在 <style>、JS 寫在 <script>，沒有 build、沒有打包工具、沒有本機圖檔。唯一的外部依賴是 Google Fonts，兩行 preconnect 加一行 css2。這一條是所有規格裡最重要的，因為它決定了這個東西能不能用「傳一個檔案」的方式交出去。
<html lang="zh-Hant">，中英雙語標題。 三個檔案的 <title> 都是「中文名 — English Name」的格式。中文給看的人，英文給搜尋跟辨識。
深色或淺色都行，但顏色要收在 :root 的變數裡。 飛機起飛與降落是深藍儀表板、玻璃腦是深底加螢光節點、注意力測驗刻意做成淺灰的紙面實驗室風。三個風格完全不同，但改色都只要動最上面那十幾行。
互動元素要能用鍵盤操作，而且 :focus-visible 要看得見。 三個檔案都寫了。這件事在示範的時候很有感，因為投影的時候滑鼠游標常常小到看不到。
prefers-reduced-motion 一律關掉動畫。 一行 media query 的事。
頁尾一定要有免責段落。 見上一節。
三個 DEMO 一開始丟給 claude.ai 的提示詞，其實都很短。
DEMO 1、DEMO 3 的提示詞其實已經把骨架講完了，六個飛行階段、三組族群、MNI152 座標系統都寫進了那一句話裡，模型要做的是把骨架填成畫面。DEMO 2 落差最大，「心理學的注意力遊戲」這句話完全沒提到 Stroop、Flanker、Posner、Treisman 這幾個名詞，四個經典派典是 Claude 自己選出來、自己配上對應的行為指標公式的。
順帶一提，這也是把 DEMO 做成單一檔案的回報之一。上傳 GitHub Pages 就是把一個 .html 丟進 repo，不用管相對路徑、不用管資源有沒有跟著搬、不用設 base URL。如果當初讓它拆成 index.html 加三個 .js 加兩張圖，這一步會麻煩很多。
認知心理學
腦科學
工具
註一：三個 DEMO 都是教學與示意用途的簡化模型。飛機起飛與降落以關鍵點內插產生，忽略風、重量變化與推力阻力平衡，不可用於任何飛行相關判斷。
註二：注意力測驗的反應時間受瀏覽器與螢幕更新率影響，不等同實驗室級軟體（E-Prime／PsychoPy）的毫秒精度，測得的數值僅供自我體驗，不能作為認知功能評估。
註三：玻璃腦的節點座標取自公開文獻，連結強度為依文獻方向性彙整的示意值，非任一資料集的實測值。憂鬱症與思覺失調症的靜息態連結研究異質性高，本文所有內容不構成任何醫療診斷或治療建議，身心不適請諮詢專業醫療人員。
註四：本文對 claude.ai 與 Artifacts 的功能描述以 2026 年 8 月 19 日的產品行為為準。
註五：本文提供的做法供參考，若有其他的看法或建議歡迎留言。
iThome鐵人賽
看影片追技術