選股頁視覺方向 24 版

資料密度已採用

data-dense · 綜合 8.04 / 10 · 排名第 1

單獨開啟這一版 ↗

視覺品質8

可用性8.1

台股使用者8

誠實層7.5

可實作性8.6

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 8

真的把它做成試算表而不是卡片：12 欄 CSS grid 表格、兩層 sticky 表頭（群組跨欄 g1/g2/g3）、zebra、chip strip 用 mask 淡出、未評分列橫跨 7 個績效欄變成證據軌。960px 以下整列用 grid-template-areas 重排成卡片，是全批最完整的 RWD 之一。資料 32 組齊。

最強的一點未評分不是留白格，是 grid-column:span 7 的「證據累積軌」——同一列同一寬度，狀態不同而已。

可用性 8.1

一組=一列的密度表，收合態一屏掃完。分節帶＋分類列取代三層巢狀框，層級靠留白與色軌。證據分段、六類篩選、年化/Sharpe 排序全是活的（417 行）。32 筆資料完整。6 處 text-overflow、4 處 min-width:0，截斷處理有做功課。

最強的一點「證據累積中」用靛藍第三種語彙＋期數進度條，不是灰掉的空格 — 讓 20 組未評分看起來是狀態不是故障

致命傷對第一次打開的新手來說像 Excel：全表密度均一、沒有任何一格在說「先看這裡」，缺一個入口

台股使用者 8

唯一「一組條件＝一列」的密度表，而且 JS 資料集是真的 32 筆完整條件（不是畫 8 張交差）。表頭做成兩層群組，直接把「今日切面股價 ▲紅漲 ▼綠跌」與「歷史績效綠＝獲利紅＝虧損」寫在群組標籤上——把兩套色的邊界畫進版面結構，而不是靠一行圖例補救。50 檔股票池代號名稱全對。麵包屑首頁/行情/市場/ETF/選股/我的腳本/快訊/看盤工具是台灣券商 App 的分頁語彙。

最強的一點用「欄位群組帶」把價格色與績效色實體隔離在版面的左右兩半，比任何 legend 都有效。

誠實層 7.5

跟 comparison 同族的解法：未評分列整個 c-metrics 區塊被單一 .pend 區塊取代（「尚未評分 · why · 先看今日名單就好」+ 進度軌 + cur/need），所以密度表裡不會出現一排破折號。32 筆資料齊全，每筆有自己的 why，展開後的「為什麼還沒有分數」段落也在。細節上連 rules 都有 fallback「條件式尚在整理／資料涵蓋確認中」，想過空值。

最強的一點密度表的 pend 區塊整段取代績效欄群——高密度版型不必為了未評分列而留六個空格。

可實作性 8.6

32 筆完整資料陣列。用 --g 這個 CSS 變數同時餵給 .thead 與 .row 的 grid-template-columns，是欄位對齊唯一正確的寫法（改 RWD 只改一處）。分節帶 grid-column:1/-1、未評分 grid-column:span 7 橫跨績效欄，層級靠留白與色軌不靠邊框。

最強的一點--g 單一變數驅動表頭與所有資料列的欄寬，RWD 只需在 media query 重設一次 --g，32 列自動跟上。

漸進揭露

progressive · 綜合 7.76 / 10 · 排名第 2

單獨開啟這一版 ↗

視覺品質7.9

可用性7.8

台股使用者6.4

誠實層8.3

可實作性8.4

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.9

唯一真正解決「32 張卡放不下」的一版：186px minmax 的 96px 磚，全部 32 組同時進視野，hover 才用 .peek 浮層補資訊，還寫了 flip-x/flip-y 邊界翻轉。L0/L1/L2 三層揭露的分寸拿捏得很好，字級節奏（19px 數字 / 14px 名稱 / 11px 單位）乾淨。

最強的一點磚本身只留 emoji＋名稱＋檔數，其餘全部推到 hover 浮層——密度與資訊量同時成立。

可用性 7.8

L0/L1/L2 三層時間軸，186px 磚 auto-fill 一屏塞得下 32 組（1400px 下約 7 欄 × 5 列），檔數分佈一眼看完。focus-visible ×5 + keydown，是少數鍵盤可達的。標題旁的「?」浮層直接解釋為什麼只有 12 組有成績單。

最強的一點L0 全收合的 186px 磚陣 — 唯一真的讓 32 組同時進入一個視窗、且看得出檔數分佈的方案

致命傷L1（說明＋前 3 檔＋證據狀態）住在 hover 裡，觸控裝置整層蒸發；而 L0 磚只有 emoji+名稱+檔數，新手不 hover 完 32 次分不出高股息和葛拉漢差在哪

台股使用者 6.4

32 筆資料完整，漸進揭露把規則條列成 PE ≤ 15 / PB ≤ 1.5 / ROE ≥ 15% 連 4 季 / 營業現金流 > 0，就是台灣選股網站的條件語法；tnum 12 處。

最強的一點每張卡把「這組條件的規則」逐條攤開——台股使用者對坊間設定的信任來自看得到規則，不是看得到分數。

誠實層 8.3

L0 磚在結構上完全不分已檢定／未評分：同樣是 emoji + mark + 名稱 + 檔數 + 檔數量表，差別只有 markHTML 裡 18px 那格是打勾還是進度環。所以在網格層級掃過去，20 張未評分磚不可能看起來壞掉——它們跟已檢定磚是同一個東西。展開層才分流，而未評分的面板放了整批最好的一個東西：可得性清單（✓今日名單照常提供／✓條件明細與參數照常提供／✓個股反查對照照常提供／—歷史績效與隨機對照，期數達標後開放）。把「沒有分數」講成一份服務契約而不是一個缺口。32 組全在 data。

最強的一點未評分面板裡的「你拿得到什麼／拿不到什麼」四行清單——三個 ✓ 一個 —，一眼就知道這不是壞掉。

可實作性 8.4

32 筆資料齊全，L0 收合磚 / L1 hover 預覽 / L2 展開三層，是真正處理掉數量的解法而非分頁逃避。15 處 minmax(0,..)、5 處 min-width:0，grid 衛生最好的幾份之一。peek 的 flip-x/flip-y 碰撞翻轉正是 Radix HoverCard 的行為，shadcn 現成有。

最強的一點hover peek 不佔版面就把「這組是什麼、選到誰、有沒有成績」講完，收合態 186px 磚一屏掃得完 32 組。

左列表右詳情

list-detail · 綜合 7.76 / 10 · 排名第 3

單獨開啟這一版 ↗

視覺品質7.6

可用性8.5

台股使用者6.5

誠實層8.2

可實作性8

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.6

master-detail 做得完整且誠實：376px 左軌、群組標題 sticky 且帶 backdrop-blur、選中列用 border-left 加底色、右側詳情有 today strip / scorecard / 隨機對照分布圖。900px 以下右欄變 position:fixed 全螢幕鑽入，body[data-view] 鎖捲動——這是真的想過手機。32 組全在軌上。

最強的一點未評分改成一整塊 .pending 面板（門檻 gauge＋刻度＋ETA），比其他版本的一行灰字有說服力得多。

可用性 8.5

結構上最誠實的答案：左 376px 索引承載全部 32 組（可搜尋、三段篩選、六類色脊、footer 即時顯示「32/32 組」），右欄給整版不折疊。32 筆資料真的寫滿（c7+v5+f6+m5+h5+d4）。新手不會迷路，因為索引永遠在原地，點錯可以馬上回頭。

最強的一點rail-foot 的「顯示 N / 32 組」即時計數 — 一行字就讓使用者知道自己篩掉了多少、還剩多少沒看

致命傷master-detail 一次只看得到一組內容，等於用「不能比較」換「不會爆版」；對「今日切面」這種要橫掃的頁面是結構性取捨

台股使用者 6.5

唯一有真實股價數列的（2330 1185 / 3008 2310 / 2454 1420 / 2887 18.9，量級全部合理），主從清單很貼合台股「先掃名單再看細節」的動線；JS 資料 32 組完整；績效走 teal/rose 與價格色分離。

最強的一點POOL 帶了真實量級的股價——是全批唯一有「價」這一欄的，其他版本的名單只有漲跌幅沒有價格。

誠實層 8.2

左欄 32 列的證據欄做到完美對位：已檢定給 sparkMini，未評分給同尺寸的 pendbar 進度條，同一個 .right 插槽、同寬，所以整條列表滾下去沒有任何一列是空的。右欄未評分詳情頁標題直接叫「為什麼這組還沒有分數」，列出三條有實質內容的門檻，其中「需要至少涵蓋一次 15% 以上的大盤回檔，否則看不出抗跌能力」是全批唯一有市場循環意識的條件；再配 0/12/24 刻度的量表、預估可評分時間、以及「到期後會自動跑一次完整檢定，通過就搬到有成績單」的承諾。連指標排行也掛誠實層（「這是排序，不是策略，因此不會有成績單」）。

最強的一點「需要涵蓋一次 15% 以上大盤回檔」這條門檻，以及自動升級的承諾——把等待變成有終點的流程。

可實作性 8

32 筆完整資料。master-detail 是唯一數量再翻倍也不會壞的版型。內部 flex + min-height:0 + overflow-y:auto 的巢狀捲動寫法完全正確（.rail/.detail 都有 min-height:0），代表作者懂 flex 捲動容器。

最強的一點.rail 與 .detail 都寫 min-height:0 才讓內部 overflow-y:auto 生效 —— 巢狀捲動最常漏的一行，他沒漏。

致命傷.workspace{height:1010px} 寫死像素高度；本專案 MainLayout 下必須是 flex-1 min-h-0，另有 id="backBtn" 重複兩次

對照表

comparison · 綜合 7.76 / 10 · 排名第 4

單獨開啟這一版 ↗

視覺品質7.4

可用性7.9

台股使用者6.2

誠實層8.5

可實作性8.8

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.4

32 組資料完整，表格工程紮實：第一欄 position:sticky:left、可排序表頭、可 pin 列（pinned tray）、best 值用 outline 標出。最好的細節是績效數字一律用 border-left:3px 的色條標記（.pv.pos/.pv.neg），從形狀上就跟報價 chip 分開，不必靠記顏色。

最強的一點績效數字掛左側細色條當「另一套色系」的形狀記號——不靠色相記憶也分得出來。

可用性 7.9

直接回答使用者的真問題「32 組哪組適合我」：單一可排序表，釘選 2-3 組逐欄對決、同欄最佳值加框。32 筆完整。未評分列改成橫跨績效欄的「13/24 期」進度軌，是明確狀態不是破格。

最強的一點釘選對決 + 同欄最佳值加框 — 把「比較」從使用者的記憶負擔變成頁面的功能

致命傷7 欄表格只有一個 820px 斷點，1024-1280 的窄桌機沒有中間態；釘選是進階操作，新手第一次打開不會發現，而這頁的價值幾乎全押在它身上

台股使用者 6.2

對決表格＋釘選比較，欄位（今日符合／證據／總報酬／年化）就是台灣選股網站比較頁的欄位；32 筆資料完整；三套色圖例講得清楚；34 組代號零錯。

最強的一點釘選 2 組以上、同欄最佳值加框——把「32 組哪一組好」變成可操作的比較動作。

誠實層 8.5

整批最聰明的單一機制：對照表裡未評分列，六個績效欄用 colspan="6" 併成一格，塞進「證據累積中 + have/need + 進度軌 + why」。比較表最容易翻車的就是 20 列破折號，它用結構把空欄消滅掉，而不是用灰字掩飾。迷你圖也想過：未評分列畫實線只到 45%（已有樣本），其後轉灰虛線，用中性 --pend 色，不假造績效曲線。展開後 KV 整組換成「已累積期數／評分門檻／預估達標／今日符合」，是另一組完整事實而非殘缺事實。32 組全在 data 裡，why 有真變化（含「換股頻率高，有效樣本不足」「快到門檻了」）。

最強的一點colspan 併欄——把 N 個空欄折成一句有內容的話。這一招可以直接搬去現在的表格。

可實作性 8.8

資料陣列剛好 32 筆（5/6/8/5/4/4 分類齊全）。單一可排序表格＝shadcn Table + TanStack 直接對接；sticky thead + sticky 首欄的 z-index 階梯（thead th.c-name z-index:7）與 border-collapse:separate 都做對了，釘選比較、展開列都是標準 table 慣用法。

最強的一點sticky 表頭 × sticky 首欄的角落格層級處理正確，這是自幹對照表最常翻車的地方，他一次寫對。

致命傷.scroller 寫 overflow-x:auto 配 overflow-y:visible —— 後者會被瀏覽器強制成 auto，sticky thead 會黏在 scroller 而不是視窗，實作時捲動行為跟 mock 不一樣

交易終端

terminal · 綜合 7.74 / 10 · 排名第 5

單獨開啟這一版 ↗

視覺品質8.2

可用性6.5

台股使用者8.5

誠實層8.6

可實作性6.9

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 8.2

風格承諾最徹底的一版：暖墨深底、全站等寬 tabular-nums、gap:1px 網格取代所有卡框（radius 僅 1 處）、tape 報價帶用 mask-image 漸隱而非硬切、分類軌用 repeating-linear-gradient 虛線引導線、空槽用 45° 斜紋填充。收合態就壓出 4 格 KPI，密度主張有兌現。

最強的一點tape 報價帶＋mask-image 漸隱：徹底終結「chip 被切一半」這個所有人都在抱怨的問題。

致命傷只鋪了約 18 組，離 32 還有距離，且沒有交代其餘怎麼收。

可用性 6.5

等寬帳本、.cell.open{grid-column:1/-1} 就地撐成整列的展開機制乾淨俐落，6 個斷點、5 個 overflow-x 容器，密度確實高。

最強的一點open 態橫跨整列的原地展開 — 不開新頁、不彈 modal、周邊卡片位置不亂跳

致命傷18 格而已；32 個 button 全是裝飾（21 行 JS）；等寬字＋SCR-DIV-01 這種內部編號，新手第一眼會覺得走錯房間

台股使用者 8.5

左欄 MARKET 面板台股語彙完整度全批第二：加權指數 23,486.12 ▲0.84%、上漲/下跌 641/288、成交金額 4,812 億、外資買賣超 +186.4 億、可選標的 1,842 檔。等寬右對齊做得最徹底（8.5–10px 全部只給拉丁與數字，中文另走 sans），報價帶 tape 橫捲不截斷。回測註記寫出「含 0.1425% 手續費與 0.3% 證交稅」——全批唯一寫對台股實際成本率的。65 組代號名稱零錯。

最強的一點tape 報價帶：把「前 5 檔 / 共 427」做成可橫捲的報價條而不是會被卡片寬度切一半的 chip，這是台股名單最該有的形態。

誠實層 8.6

.cell.pending 跟 .cell.scored 是同一個格子、同一個 min-height，.evid 區塊剛好長在 .kpi 區塊的位置，所以尚未評分的格子沒有被掏空，只是換了填充物；左側 2px 色軌 pending 用中性藍灰 --pending 而不是灰掉，狀態感而非故障感。最有說服力的一點：已檢定的卡片被允許難看——「比價值」掛著年化 −2.4%、Sharpe −0.11、隨機對照 −8.1pt 照樣列出。一個敢讓有分數的卡片拿負分的頁面，它說「沒分數不是比較差」才有人信。

最強的一點pending 區塊精準佔用 KPI 區塊的版位（同寬同高），以及讓已檢定卡片顯示負年化／負隨機對照差距——用已評分那一側的誠實去背書未評分那一側。

可實作性 6.9

gap:1px 髮絲線技巧用了 10 次（全批最多），是對「三層巢狀邊框」最徹底的反解；.cell.open 在 ≥1241px 重排成巢狀 grid 也寫得乾淨。

最強的一點整頁只有網格線沒有卡框，層級純靠底色與間距 —— 對症下藥。

致命傷只有 19 組條件；且留了 .filler 這種斜線填充格純粹為了把 mock 網格補滿，實作時必須刪掉或改成計算，是 mock-only 殘留

雜誌編輯

editorial · 綜合 7.66 / 10 · 排名第 6

單獨開啟這一版 ↗

視覺品質9

可用性7.1

台股使用者6.7

誠實層9

可實作性6.5

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 9

純字體排印的最高分。clamp(38–86px) 刊頭、standfirst 的 ::first-letter 落款大寫字、壹/貳中文編號、kicker/byline/deck/stamp 完整的階層語彙——層級全部來自字級與留白，全檔只有 6 條 border、2 個 radius、0 個 shadow。最聰明的是用「兩種排版體例」而不是兩種顏色去分「有成績單/尚未評分」：頭條吃兩欄、11 則三欄短稿、20 則走四欄名錄體，同樣的編輯尊嚴。32 組全在。

最強的一點用體例（頭條/短稿/名錄）而非灰階去表達證據強度差異——這是唯一沒有把「沒分數」畫成殘障狀態的解法。

可用性 7.1

整批唯一用原生 <details>/<summary> 做展開（免費拿到鍵盤操作與 a11y），頭條吃兩欄、其餘三欄短稿，6 個斷點。展開後有權益曲線與隨機對照虛線對照。

最強的一點<details>/<summary> — 別家全部手寫 button+class toggle，這份用原生元素，鍵盤與輔助技術直接可用

致命傷只有 12 則 details，20 組未評分沒有進到同一個流裡；篩選幾乎不存在（button 只有 2 個）

台股使用者 6.7

雜誌骨架（壹 / THE FEATURE / 本期頭條 / standfirst）把 12 組有成績單做成專題，敘事說服力全批最強；▲▼ 41 處正確、−28.4% 用 U+2212、mono 對齊、深色兩路都寫。

最強的一點把「有成績單的十二組」寫成一篇有 standfirst 的專題開場——誠實層在這裡不是免責聲明而是賣點。

誠實層 9

32 組全數上版（lead 1 + stories 11 + listing 20），是少數沒有偷懶只畫 8 張的。20 組尚未評分改走「名錄／資料附錄體例」——換一種排版身分而不是同一張卡掉東西，這是對「像壞掉嗎」最直接的回答：它根本不是同一種版型，所以不存在缺一塊。每則名錄右下都寫差在哪，而且理由分四類（期數 41 未達 60／樣本外未通過／對照未達門檻／覆蓋率不足／季節性期數 9／單一產業不對照／流動性未過濾／樣本數過少），並在區段開頭把三條評分門檻逐條列出，讀者可以自己核對每一則落在哪一條。

最強的一點先把評分門檻寫成三條硬規則放在區段抬頭，再讓每一則名錄標註它卡在哪一條——理由因此是可驗證的，不是安慰詞。

可實作性 6.5

用原生 <details>/<summary> 做展開，零 JS、可鍵盤、可 a11y，是全批最省的展開機制；float:left 做首字下沉是 float 的正確用途。29 組條件、fullBorders 僅 1，真的脫離邊框。

最強的一點<details> 展開完全不需要 state，SSR 直接可用，也不會有 32 個 useState。

致命傷股票代號、名稱、漲跌 chip 全被塞在 <summary> 內 —— 依規範點 summary 內任何東西都會觸發展開，這些代號因此永遠無法做成連到個股頁的連結，而這產品需要

暖紙編輯

warm-paper · 綜合 7.60 / 10 · 排名第 7

單獨開啟這一版 ↗

視覺品質9.2

可用性7.2

台股使用者7.5

誠實層9.3

可實作性4.8

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 9.2

整批最像「被設計過的物件」。襯線內文/無襯線眉標/等寬數字三套字體各司其職，16px×1.7 的行氣是唯一敢把字放大的一版。真的用了 column-count:3 + column-rule + break-inside:avoid 做報紙分欄，不是假排版；3px double 分隔線、SVG feTurbulence 紙纖維疊層（深色自動切 screen 混合）、.sheet 左右各一條髮絲線當書口。border-radius 與 box-shadow 各為 0——它靠留白和線分層，完全沒有偷懶用框。32 組全處理，深色 media query 與 data-theme 兩條都寫齊且 data-theme="auto" 讓 mq 真的生效。

最強的一點百分位標記 .pctl .mk::after{content:"88"} 這種等級的收尾細節，加上「分欄 + column-rule」真正解決了 32 張卡的量，而不是切成卡片矩陣。

可用性 7.2

真的用 column-count:3 + break-inside:avoid 做報紙流排，32 則條目全部寫滿（entry:32 / tally:32），border 宣告只有 9 個、border-radius 掛零 — 是少數沒有靠邊框撐版面的。三層斷點降到 2 欄再降 1 欄。

最強的一點整批唯一用 CSS 多欄流排解決密度的，而且真的把 32 則都寫了 — 證明不靠格線也能收 32 組

致命傷多欄流排的閱讀順序是「讀完第一欄再跳回頂端讀第二欄」，對要橫向比較的任務是錯的掃描路徑；篩選完全不會動，且排版均質到沒有任何一則跳出來

台股使用者 7.5

32 張條件全部鋪完（唯一做到這件事的純靜態版本），▲▼ 用了 127 次、up/dn 對應零矛盾。繁體排版最有台味：報頭、夾註、「檢」字印章、誠實層·編輯政策。三套色相分開（磚紅 #a63127 / 松綠 #1e6b46 / 橄欖·赭 health），深色兩路（media + data-theme）都完整寫了。

最強的一點「檢」字紅印章當作已檢定徽章——本地文化符號直接當狀態記號，比 L3/Verified 這種外來標籤更容易被台灣使用者秒懂。

誠實層 9.3

唯一把「沒有分數」做成一個有身分的東西。全部 32 組真的排出來（32 個 entry-head，報紙三欄流），21 條 pending 理由沒有一條重複，而且橫跨完全不同的失效類型：期數不足、產業分類改版歷史不可比、回測含大量下市股、低流動性滑價假設不可靠、預估值只覆蓋 31% 母體有偏、每期不到 5 檔分散度不足、換股成本模型待定。這種異質性是「有紀律」最難偽造的證據——它讀起來像真的有一套檢定流程在擋，不像一個 progress bar 模板。更關鍵的是它把「特寫展開態」給了尚未評分那一組：展開後保留跟已檢定完全同構的成績單帳頁（總報酬/年化/Sharpe/回撤/勝率），值填 —，但標題寫「成績單 · 證據不足，暫不出數字」，下面接 13/30 期進度、再接「13 期的年化數字，換一個起算月就可能差一倍」的說理，最後給「加入追蹤，滿期通知我」。空值被轉成產品功能。

最強的一點尚未評分也配得到 hero/展開態，而且展開的內容是「為什麼不給」而不是空白；同一張成績單骨架用 — 填值 + 標題明說不給，比隱藏欄位更有紀律。

可實作性 4.8

排版氣質最完整，fullBorders 僅 3 真的脫離邊框，29 組條件也都寫進去了，雙欄帳頁 nth-child(odd/even) 分隔線處理細膩。

最強的一點名單改成「跑文」而不是會被切掉的 chip —— 對 chip 截斷問題的解法比多數版本聰明。

致命傷32 組條目用 column-count:3 報紙分欄排版：閱讀順序是先下後右、就地展開會重排整欄讓其他條目跳動（所以展開態只好被抬出去變成另一個區塊）、break-inside:avoid 落差留大洞、每次篩選都要重新平衡整欄。對一個可篩選可展開的清單，這是選錯了排版原語，畫得出來但做不出同樣的互動

色彩編碼

color-coded · 綜合 7.54 / 10 · 排名第 8

單獨開啟這一版 ↗

視覺品質8.7

可用性6.4

台股使用者7.3

誠實層7.4

可實作性7.9

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 8.7

整批唯一有「色彩架構」而不是「色票清單」的一版：每個分類只給 --h/--s 兩個變數，卡片底、脊椎、徽章、chip、排行全部由 hsl(var(--h) var(--s) var(--l-*)) 導出，深色模式只換 --l-ink/--l-spine/--l-tint 幾個亮度 token 就整套翻轉。卡片零邊框，只有色面加 5px 脊；未評分＝同色相 filter:saturate(.72) 加虛線脊，是「另一種狀態」不是壞掉。這是一個想法貫徹到底的樣子。

最強的一點單一 hue 變數推導全套介面色，深色只換亮度層——其他 23 份都是把 4 組色硬寫兩遍。

可用性 6.4

用 --h/--s/--l 三個 HSL token 驅動六類色系＋5px 色脊，系統化程度高；未評分卡走虛線色脊＋saturate(.72) 降飽和，而不是灰掉。28 張卡，是靜態版裡覆蓋率次高的。

最強的一點未評分用「虛線色脊」而非灰化 — 同一套顏色語言的兩種狀態，比另外發明一個灰色語彙好

致命傷28/32；.grid 是 repeat(4,1fr) 沒有 minmax(0,...)，子元素撐不小會爆欄；六種帶色底的卡片同時出現，對一頁全是數字的內容是過量色度

台股使用者 7.3

28/32 張真的畫出來，六類色相分區。最好的一手是版面上那條「這頁有三套顏色，互不重疊」守則：分類色只上面/脊/標籤不表好壞、價格紅綠只出現在報價 chip、績效色只出現在展開的成績條。−24.6% 用 U+2212，深色完整。

最強的一點把「分類色不得表示數值好壞」寫成明文守則並落實到 CSS 分層——這是六色系統唯一能跟紅漲綠跌共存的方式。

誠實層 7.4

這批唯一想通「未評分不該變成灰色墳場」的：未評分卡保留所屬分類的色相，只把色脊從實心改虛線，徽章從實心改證據量表。結果 20 張未評分卡在頁面上仍然是彩色的、仍然屬於它的分類，不會塌成一區低飽和的灰。28 張卡實際畫出來，量體有交代。

最強的一點未評分沿用分類色，只改「實心脊 → 虛線脊」——狀態差異用線型表達，不用彩度表達，於是不會讀成 disabled。

可實作性 7.9

每個分類只設一個 --h 色相，其餘 --l-tint/--l-spine/--l-chip/--l-ink 全用 hsl() 推導 —— 全批最省的設計 token 系統，React 只需要一個 Card 元件加一個 style={{'--h':hue}}。真的擺脫邊框（fullBorders 僅 2），靠色面分區。28 組已渲染。

最強的一點一個色相變數推導整張卡的底色、脊條、chip、文字色；新增分類只要加一個數字，不用碰 CSS。

瑞士平面

swiss · 綜合 7.38 / 10 · 排名第 9

單獨開啟這一版 ↗

視覺品質8.5

可用性6.2

台股使用者6.6

誠實層8.1

可實作性7.5

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 8.5

網格紀律最嚴的一版：真正的 12 欄 grid + rail/body10 語意跨欄，卡片用 gap:1px 露底色構成髮絲網格（沒有任何巢狀框），border-radius 與 box-shadow 全檔為 0，display 用 clamp(46px,6.6vw,94px)，證據用 30 格刻度尺而不是進度條。每一處對齊都站得住。

最強的一點gap:1px 露底色當網格線＝零邊框零圓角零陰影，一次解掉「三層巢狀框」的病根。

致命傷只畫了 15 張卡就用一條「展開其餘 20 組 →」連結帶過——它整份論述建立在「一屏可掃 9 組」的密度上，卻沒把 32 的量真的攤開驗證。另外 <html data-theme="light"> 硬寫，讓自己 CSS 裡的 html:not([data-theme="light"]) 深色 media query 永遠不生效，只靠 JS 補救。

可用性 6.2

CSS 紀律全批最好（radius 只有 1 處、border 只有 6 處、嚴格 12 欄、三段式主題區塊寫得最標準、32 個 aria），卡片內容其實很紮實：序號／類別／emoji／說明／最大的字是今日檔數／5 檔 ticker／30 段證據刻度尺。

最強的一點30 段「證據累積刻度尺」（on / part / 空心）— 已檢定與累積中同等重量、只差記號實心與空心，是全批對誠實層最優雅的視覺化

致命傷只鋪了 14 張收合卡＋1 張展開，其餘掛「展開其餘 20 組 →」；min-width:0 用了 0 次，3 欄髮絲線格線遇到長股名會推爆；簡報自稱「一屏可掃 9 組」，但按實際卡高 32 組約 5 屏，宣稱與實作對不上

台股使用者 6.6

色彩分工的規範寫得最嚴謹（價格紅綠 / 績效青綠·深緋兩套刻意分開色相，並在展開面板放圖例），tabular-nums 宣告 14 處為全批最多。展開態把 119 期、同期大盤 +8.1%、年化波動 13.6%、69/119 期為正、第 88 百分位講得最誠實。

最強的一點展開面板那組誠實數字（同期大盤、期數為正比例、隨機對照百分位）——把「有沒有贏過運氣」講清楚，這是台股使用者最缺的資訊。

誠實層 8.1

原則講得最乾淨：已檢定與證據累積中同尺寸、同字級、同版位，唯一差別是 .mark 實心 vs .mark.hollow 空心，加上一條 30 格刻度尺。它明講「證據累積刻度尺，與已檢定同等重量、只差記號實心與空心」，而版面確實照做了——沒有灰底、沒有降低不透明度、沒有縮短卡片。24/30 那張的說明會變成「再 6 期即可評分」，其餘是「名單照給，分數等證據」，這種隨進度換句的細節很值錢。

最強的一點實心／空心記號 + 同版位刻度尺——用最小的視覺差異表達最大的語意差異，零成本可移植。

可實作性 7.5

全批最乾淨的 CSS：零 color-mix、零 mask、零 backdrop-filter、零 position:fixed，只有 3 個 media query。gap:1px + background 做髮絲線網格，Tailwind 就是 gap-px bg-border。真的拆掉邊框（fullBorders 3）。深色模式雙軌完整。

最強的一點gap:1px 配底色構成整片網格，一行 CSS 取代 32 個卡片外框 —— 對「用邊框代替層級」這個病灶的最直接解藥。

致命傷只畫了 14 張卡就用「展開其餘 20 組 →」帶過，數量問題其實沒示範；且零 minmax(0,..) 零 min-width:0 配 repeat(3,1fr)，長股名會撐爆欄位

圖表優先

chart-forward · 綜合 7.26 / 10 · 排名第 10

單獨開啟這一版 ↗

視覺品質7.1

可用性5.9

台股使用者7.8

誠實層8

可實作性7.5

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.1

卡片內容的資訊密度最高：每張卡的主體就是 SVG 權益曲線＋下方 drawdown ribbon＋ghost 對照虛線，未評分卡則換成證據累積長條圖加門檻虛線。hero 卡 span 2 放大圖表。這是全批最好的「一張卡裡面到底該放什麼」的答案。

最強的一點權益曲線下方接一條 drawdown ribbon（同一時間軸、fill 20% 透明）——一眼看見「賺多少」和「痛多久」。

致命傷整份檔案沒有 <!doctype html>、沒有 <html>/<head>，直接從 <meta> 開始——瀏覽器會進 quirks mode。24 份裡唯一一個。內容做到這個程度卻掉在第一行，是很可惜的完成度缺口。

可用性 5.9

每張卡以圖領銜、用形狀而非文字比較 32 組，對這批資料是很對的直覺；23 張卡的 SVG 都手繪。

最強的一點以「圖形形狀」作為第一比較維度 — 權益曲線的形狀比年化數字更快讓人分出哪組是穩健型哪組是暴衝型

致命傷20 組未評分根本沒有曲線可畫，這個核心點子只覆蓋得到 12/32；203KB 換 23 張卡，4 欄圖卡在 32 張規模下是視覺噪音牆

台股使用者 7.8

個股反查把現金殖利率 4.8%(92分位)、本益比 15.2x(71分位)、ROE 24.1%(88分位)、月營收年增 +12.4%(64分位)、外資持股比 73.2%(96分位) 五條分位條端出來，是全批對「台股使用者真的在看哪些指標」理解最深的。權益曲線是 220 點真實生成資料不是裝飾折線；腳本旁的日柱用 up=紅/dn=綠上色，符合台股 K 線直覺。57 組代號名稱零錯。

最強的一點個股反查的五條指標分位條——把「這檔今天為什麼會被選到」講成台股使用者熟悉的分位語言。

誠實層 8

結構上最強的等重處理：未評分卡在已檢定卡畫權益曲線的那一塊，改畫等高的「證據累積圖」（24 根月柱 + 門檻標線 + 圖例 + 期數 41/60 進度條），而且兩種卡都有第二塊「今日名單漲跌分布」。實際上未評分卡的資訊量比已評分卡還大，完全沒有掏空感。靛藍色系刻意不碰紅綠，避免被讀成好壞。

最強的一點未評分卡在圖表版位放「證據累積到哪」而不是留白——版位不空，只是換一種量測對象。

致命傷證據累積圖的柱高（34%,71%,46%,83%…）不編碼任何東西，連 .eb off 的「未來月份」都被給了高度——在一個以誠實層為主題的頁面裡放一張形狀是假的圖，是自我否定。另外 20 組只畫了 12 張，卡底仍留著一排四個 — 的 muted metrics。

可實作性 7.5

用 style="--h:58%" 這種 CSS 自訂屬性驅動每根柱子，React 就是 style={{'--h':pct}}，是綁資料最正確的寫法；.ds.up 用 linear-gradient 色標當柱高更是巧但不脆。8 處 minmax(0,..)，SVG 漸層 id 逐張唯一（fill_g2..g9）沒偷懶共用。

最強的一點1019 個 inline style 全是 --h 百分比，等於已經把「哪些數字要從 API 綁進來」標好了。

可掃視長列

scannable-rows · 綜合 7.12 / 10 · 排名第 11

單獨開啟這一版 ↗

視覺品質7.3

可用性8.7

台股使用者3

誠實層7.6

可實作性9

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.3

「成績板」是這一版的核心巧思：所有回測數字被關進一塊 .plate（有底色有邊框的實體底板），價格 chip 則永遠在板外，兩套顏色靠「物理容器」而非色相區隔。sticky thead ＋ sticky catbar，1023px 以下用 grid-template-areas 重排成四行掃視，處理得很乾淨。

最強的一點用容器（成績底板）而不是色相去隔離兩套語意色——最不需要圖例的一個做法。

致命傷只有約 25 組資料，未補完 32。整體色調偏灰，字級對比不大，掃視性有了但沒有記憶點。

可用性 8.7

唯一真正把「32」當成資料量而不是版面題來解的。7 欄對齊列（名稱+說明／符合檔數+長條／今日 5 檔 chip／迷你權益 sparkline／年化-回撤-勝率／證據徽章／›），眼睛沿直欄往下掃，不用展開任何一張就能橫向比。track/cat 篩選與排序下拉是真的會動的（246 行 render），未評分列不留空格改配 24 段樣本累積計。1279/1023 兩套 grid-template 換欄，不是硬塞。

最強的一點把「今日名單 5 檔」做成一整欄而不是塞在卡內 — chip 截斷這個全批公認的病灶，只有攤成欄位才真的消失

致命傷文案寫 32 組，DATA 只有 25 筆；.row 最小寬 ~1182px（250+84+320+96+226+118+16+72 gap），窄桌機直接換模型。說明文字靠 .row:hover .ds{white-space:normal} 才展開，觸控使用者永遠讀不到

台股使用者 3

版面思路其實是對的（一列一組、沿直欄往下掃、迷你權益圖不用展開就看得完），CSS 也乾淨。但資料層整個崩掉，而且崩在台股使用者第一眼就會看到的地方。25/32、可見靜態文字僅 764 字。

最強的一點每一列自帶迷你權益圖＋隨機對照記號，不用展開就能沿直欄比較 32 組。

致命傷代號↔名稱錯配 36 組：2603 標成華航、2610 標成廣達、2609 標成華新、2615 標成陽明、1301 標成中鋼、2002 標成南亞與台肥、2382 標成嘉澤與英業達、2059 標成可寧衛、2308 標成信邦、3443 標成台達電、2201 標成統一超、1402 標成長榮航，還有一筆代號直接寫成字串 "1webs"（崑鼎）。台股使用者掃第一行就知道這不是台灣人做的，整頁信任瞬間歸零——這比任何排版問題都致命。

誠實層 7.6

列式版型的欄位對位做得很正：已檢定的 spark 欄換成 24 格分段樣本累積計，績效板換成兩行「尚未評分／回測 N 個月，樣本不足」，證據欄換成 ◷ 累積中。每一欄都還有東西，沒有一格是空白——它自己說「不留白格」，而 rowHTML 確實做到。

最強的一點24 格分段樣本計取代迷你權益圖——同寬同位，一眼可比「誰的證據比較厚」。

致命傷頁首寫死「32 組 · 12 組已通過歷史檢定」，但 DATA 只有 25 筆（graded 11 / pending 14）——一個以誠實層為題的稿子謊報自己的計數。附帶還有髒資料（S("1webs","崑鼎") 這種代號、以及 2382 配嘉澤、3653 配川湖等代號名稱錯配）會直接渲染出來。

可實作性 9

最像已經寫好的 React 元件：DATA 陣列 + rowHTML() 模板 + {track,cat,sort} state，filter/sort 全走資料而非 DOM。CSS 只有 grid 與 1px 分隔線（fullBorders 僅 12），手機用 grid-template-areas 換版，8 處 min-width:0，chip 溢出用 mask 而非硬截。沒有任何 Tailwind 做不到的東西。

最強的一點整份是「資料 → 模板 → 狀態」三層，改成 React 幾乎是機械翻譯；桌機直欄對齊、手機 grid-template-areas 重排，同一份 markup 兩種版型。

側欄導航

sidebar-nav · 綜合 7.12 / 10 · 排名第 12

單獨開啟這一版 ↗

視覺品質7.2

可用性6.9

台股使用者7

誠實層7.2

可實作性7.3

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.2

完成度高的常規做法：左側分類軌每一項帶一條「證據配比」微條（已檢定/累積中兩段），auto-fill minmax(318px) 卡片，卡片左緣 2px 證據色標取代巢狀框，920px 以下左軌整條變橫向捲動列。token 齊、深色齊、RWD 齊。

最強的一點導覽項目上的 3px 雙色配比微條——不用點進去就知道哪一類有證據。

可用性 6.9

236px 常駐左欄（證據分段 + 六類清單，每類帶一條證據配比微條）＋右側單層三欄卡牆，密度統一、學習成本低、是最不會讓人迷路的常規解。37 個 aria 屬性，全批第二高。

最強的一點每個分類旁的「證據配比微條」— 在導航上就先告訴你這一類有幾組其實有成績單

致命傷自己在頁面上印出「顯示 16 / 32 組」和「本 mockup 共 16 / 32 組」— 誠實，但等於一半的題目沒做；36 個 button 幾乎全是死的（75 行 JS 只做主題切換）

台股使用者 7

左欄常駐分類＋每類一條「證據配比微條」，資訊架構是全批最清楚的；21 張卡；績效色註解直接寫「teal，非價格綠 / rose，非價格紅」，與價格紅綠明確分離；深色四路都寫。

最強的一點分類導覽列上的證據配比微條——一眼看出哪一類的條件普遍還沒有成績單。

誠實層 7.2

21 張卡實畫，未評分卡的「看進度」展開層有真內容：46px 進度環 + 百分比，加上兩行帶判斷的文字，例如「符合檔數超過 200 檔，代表這是一個寬濾網，適合當起點而不是終點」「本益成長比需要分析師預估以外的替代算法，資料回補中」。願意在沒有分數的地方給出質性判斷，是誠實層的正確延伸。

最強的一點未評分展開層給「這組條件的性質判斷」（寬濾網／適合當起點）——沒有績效數字時，仍然給得出可用的建議。

可實作性 7.3

236px minmax(0,1fr) 的 shell 配 .rail{position:sticky;top:14px} —— 全批少數完全不用 100vh 算式做側欄的，直接丟進 MainLayout 不會壞。36 個互動元素、有 aria-current，auto-fill 卡片牆規矩。

最強的一點側欄用 sticky 而非 fixed/vh，父層版面換了也不用改數字。

頭條制

hero-featured · 綜合 7.08 / 10 · 排名第 13

單獨開啟這一版 ↗

視覺品質8.3

可用性7.6

台股使用者4.9

誠實層6.5

可實作性8.1

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 8.3

編輯感與工具感的最佳折衷。頭條用 58px 等寬數字當視覺錨、左右分欄（規則 mono 條/報價全清單/成績單），今日名單做成完整 roster 表格而不是會被切一半的 chip。sans/mono 分工乾淨，深色寫得最細（5 個 prefers 區塊，連按鈕墨色在 light/dark 兩向都補了覆蓋）。32 組全處理。

最強的一點把「今日名單」從 chip 改成有 grid-template-columns:58px 1fr auto auto 的對齊清單——截斷問題直接消失。

可用性 7.6

唯一正面回答「新手打開會不會迷路」的：一則頭條大卡（成績單／權益曲線／完整名單／隨機對照全攤開，不用點）＋兩則次席＋其餘壓成 32px 索引行，而且把頭條的挑選規則印在旁邊（證據期數 × 7 日檔數變動）— 是編排不是黑箱推薦。13 處 min-width:0、7 處 text-overflow，全批截斷處理做得最細。

最強的一點把「為什麼今天是它上頭條」的排序依據直接印在頭條旁 — 誠實層不是靠免責聲明，是靠公開規則

致命傷DATA 只有 28 筆；索引行壓到 32px 後今日名單內容全丟失，第 4 到第 32 組退化成純目錄

台股使用者 4.9

資料 32 組齊、36 組代號零錯、績效走 teal/rose 分離、深色五路都寫，token 品質其實在中上。但整頁 cardish=0、可見靜態文字只有 2183 字，全部靠 JS 生；一張 hero 吃掉首屏、其餘 29 組壓成小條，跟「32 組要互相比較」的目的相衝；全頁只有 5 個 ▲▼，多數名單沒有漲跌記號——台股使用者看名單沒有紅綠等於沒看。

最強的一點用 ev:{t:'scored'|'watch'} 的單一欄位驅動兩種證據狀態的渲染，資料模型是全批最乾淨的。

誠實層 6.5

索引列的對位處理是對的：已檢定列顯示「期數 + 年化」，觀察中列在同一個 .ev 插槽顯示「microtrack 進度條 + 19/24 月」，28 組全數由資料渲染，量體有交代。

最強的一點索引列的證據欄同插槽互換（數字 ↔ 進度條），讓長列表不會出現空欄。

可實作性 8.1

grid 紀律全批最好：17 處 minmax(0,..)、13 處 min-width:0、23 處溢出保護，30 組條件進資料。hero 特寫 + 下方密集列表是對「32 個同權重卡片」的正面回答（給第一名版面，其餘走列）。7 欄模板全用 minmax 而非裸 fr。

最強的一點minmax(0,1fr) 用到底 —— 台股名稱長度不一時，這是 3 欄卡片牆唯一不會被撐爆的寫法。

專業金融終端

finance-pro · 綜合 6.90 / 10 · 排名第 14

單獨開啟這一版 ↗

視覺品質7.5

可用性6.7

台股使用者9

誠實層5.8

可實作性5.5

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.5

最像真的專業終端：34px 頂條跑馬燈、212/1fr/312 三欄各自 sticky 滿高、底部 24px 狀態列、LED 狀態點、指令列 caret 與 kbd 鍵帽。密度控制得很好（13px base，卡片 gap:1px）。

最強的一點底部 24px 狀態列＋頂部 34px 跑馬燈把「工具感」框起來，中間版面因此可以很安靜。

致命傷深色模式沒有任何 @media (prefers-color-scheme)——直接在 <html> 硬寫 data-theme="dark"，等於這一版沒有「跟隨系統」這件事，淺色 token 寫了卻預設看不到。另外只鋪約 17 組。

可用性 6.7

三欄工作台（左分類鍵／中密集卡陣／右指標排行常駐）＋ 6 處 sticky ＋狀態燈語彙＋密度切換，對每天開八小時的人是對的。

最強的一點右欄「指標排行」常駐不隨主區捲動 — 32 組條件之外的第二條進入路徑一直在手邊

致命傷<html data-theme="dark"> 寫死且整份沒有任何 prefers-color-scheme 區塊，完全無視觀看者的系統主題；卡片只做到約 18-20 組，剩下掛一顆「載入其餘 14 組 ↓」；跑馬燈＋kbd 提示＋SCR 代碼對新手是勸退

台股使用者 9

全批唯一把台股使用者「開頁第一眼要看的東西」端上來的：頂部常駐行情帶加權 23,418.62 +184.37 +0.79% / 櫃買 / 台指期 / 外資 +128.4 億 / 成交值 4,812 億 / 掃描池 1,842 檔。負號用 U+2212 而非 hyphen、.num 走 mono+tnum 右對齊、13px 基準密度、今日名單用對齊的 mini table 而不是會被切斷的 chip。--rise #d21f2b / --fall #0f8a53 正確，績效另走 --perf-pos 青綠 / --perf-neg 玫紅，色相刻意拉開並在 secbar 放圖例。2887 是全批唯一寫「台新新光金」（合併後正名）的，這種細節台股使用者一眼就認得出是不是自己人做的。

最強的一點頂部那條加權／櫃買／台指期／外資／成交值行情帶——這是把整頁從「外國 SaaS 儀表板」拉回「台灣看盤軟體」的單一最大槓桿，其他 23 份幾乎都沒有。

誠實層 5.8

狀態燈 + 證據累積進度條的終端語彙方向對，但落地很薄：13 張卡、3 條理由字串且全部泛用（「樣本不足」「樣本或對照未達門檻」），逐卡沒有差異，看不出背後有方法論。

最強的一點用狀態燈（LED）取代文字狀態，在高密度終端版型裡省下最多空間。

致命傷整份 CSS 沒有任何 prefers-color-scheme 區塊，深色只掛在 [data-theme="dark"] 上靠按鈕切換——系統深色的使用者會拿到整頁淺色。

可實作性 5.5

三欄專業終端的骨架方向對，色票分工（價格色 vs 績效色）也講清楚，sticky secbar 寫法沒問題。

最強的一點左欄分類導覽 + 中欄網格 + 右欄詳情，資訊密度最接近真正的看盤軟體。

致命傷min-height:calc(100vh - 78px) 與兩處 height:calc(100vh - 34px) —— 三個寫死的「視窗減掉外框」魔術數字，正是本專案已有明文規則要避免的（滿版頁應 flex-1 overflow-auto）；且只有 13 組唯一條件，全批數量處理最差

手機優先

mobile-first · 綜合 6.90 / 10 · 排名第 15

單獨開啟這一版 ↗

視覺品質6.7

可用性6.3

台股使用者7.2

誠實層6.9

可實作性7.4

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 6.7

是真的 mobile-first，不是縮小的桌面：基礎樣式全部寫 375px，min-width 只做放大；輸入框 font-size:16px 防 iOS 縮放、--tap:44px 觸控尺寸變數、env(safe-area-inset-bottom) 底部 dock、chip rail 用 scroll-snap 而不是截斷、桌面時 dock 直接搬到頂部而非另建結構。紀律很好。

最強的一點桌面版是把手機 dock「放大搬上去」而不是另做一套 topbar——同一份結構跨斷點，這是 mobile-first 真正的意思。

可用性 6.3

整批唯一真的 mobile-first（全部 min-width 查詢），黏頂分段器、可橫滑的名單軌讓 chip 永遠不被切斷 — 這正是 24 份簡報一致點名的病灶，而這份給了最乾淨的修法。

最強的一點chip 改成可橫滑軌道，切邊變成「還有更多」的正向暗示 — 截斷從 bug 變成 affordance

致命傷只有 20 張卡；桌面態只是同一張卡排 4 欄，沒有任何橫向比較手段，32 組要捲很久

台股使用者 7.2

台灣散戶主戰場在手機，這是唯一真的按 mobile 做的：sticky 篩選列、橫捲 chip rail、底部 dock、640/1100/1400 三段 grid。110 個 ▲▼ 全對，tnum 落到 .chip .pc 與排行列上。20 張卡、80 組代號只有 2887 舊名一處可挑。

最強的一點橫捲的 chiprail：手機上「今日名單前 5 檔」不被卡片寬度切斷，是台股手機看盤最實際的一個解法。

誠實層 6.9

同尺寸同排版、只換底色與徽章的宣示做到了，11 張 unscored 卡實畫；「還差什麼 ▾」這個 affordance 很聰明——它把空值變成一個可以點的問題，展開後給門檻、說明與 13/36 量表，還有「單期平均只選到 6 檔，分散度不足」這種非時間理由。

最強的一點「還差什麼」按鈕：把使用者對空值的疑問直接做成入口，而不是等他自己猜。

可實作性 7.4

全批唯一看得出「作者真的出過手機版」的 CSS：input font-size:16px 防 iOS 自動放大、--tap 觸控尺寸變數、scroll-snap 分類軌、backdrop-filter 有補 -webkit- 前綴、mobile-up 斷點寫法。

最強的一點input 明寫 16px 並註記「防 iOS 縮放」—— 這種只有踩過才知道的細節，代表其餘手機行為也可信。

致命傷只渲染 20 組且全手寫無資料陣列，32 的數量問題並沒有被解決

頂部分頁

tabs-first · 綜合 6.78 / 10 · 排名第 16

單獨開啟這一版 ↗

視覺品質7

可用性8.3

台股使用者5.1

誠實層5.2

可實作性8.3

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7

tab 列做得漂亮：每個 tab 帶計數膠囊＋一排證據小點，選中時 3px 底軌，scroll-snap 橫捲。卡片內部節奏好（38px emoji 方塊、26px 命中數、chip rail 帶 mask 漸隱、展開後 chips 改 flex-wrap 不再截斷），未評分做成 whynot 進度面板。

最強的一點tab 上的證據小點陣列——切換分類前就知道那一類有幾組拿得出成績單。

致命傷深色模式在 CSS 裡完全不存在——只有 html[data-theme="dark"] 一組 token，而 <html> 預設寫死 data-theme="light"，靠頁尾一段 JS 讀 matchMedia 再翻。系統深色的使用者會先吃一次全白閃屏，關掉 JS 就永遠是亮的。

可用性 8.3

新手導向全批最好。六個分類 tab 各自掛一句白話問句（現在誰最強？／現在買貴嗎？／公司賺不賺錢？／有人在買嗎？／誰在買？／能抱多久？），把六個行話標籤翻成六件新手真正想知道的事。32 筆全寫、每頁只剩 4-7 張卡、成績單降格成 tab 內 chip，7 個斷點是全批最細的響應式。

最強的一點tab 上的白話問句 — 這是整批 24 份裡唯一真的在替新手翻譯領域語言的設計，成本極低、可直接搬進現有版面

致命傷永遠看不到 32 組的全貌與分佈，要點滿六個 tab 才知道全局；跨類比較被結構關死

台股使用者 5.1

六分頁＋32 筆完整資料，分頁提問（現在誰最強？／現在買貴嗎？／誰在買？／能抱多久？）很白話很台，「億」用 8 次、法人語彙 9 處。但一次只看得到一類 6 組，跟「32 組要能互相比較」相衝；1605 被標成長榮鋼（1605 是華新）。

最強的一點六個分頁各配一句白話提問（誰在買？能抱多久？）——把六個抽象分類翻成使用者真的會問的句子。

致命傷--health-pos 直接等於 --fall（#12946a）、--health-neg 直接等於 --rise（#d92b2b），是全批唯一沒把兩套色分開的。同一張卡上紅色同時代表「股價上漲(好)」與「年化為負(壞)」，綠色同時代表「下跌(壞)」與「獲利(好)」；底下的 legend 只是把矛盾寫出來，救不回台股使用者的第一眼誤讀。

誠實層 5.2

資料層其實不錯（20 組 graded:false 全在，6 條 why 含「12 個月樣本，且台股分析師預期覆蓋率不足」「20 個月樣本，距離 24 期門檻還差 4 期」），pendfoot 的處理也乾淨。但把 32 組切成六個 tab，每頁只剩 4–7 張——「20 張未評分卡看起來像壞掉嗎」這個問題被結構性地繞開了，從來沒有機會被檢驗。

最強的一點tab 上用一排小點顯示該分類「幾組有成績單／幾組沒有」——在導覽層就先揭露證據分布。

致命傷深色模式是死的：CSS 寫了完整的 [data-theme="dark"] 28 個變數，卻沒有任何 prefers-color-scheme 區塊，而且 UI 上的「◐ 深／淺色」按鈕沒有接任何 handler（腳本裡完全找不到 data-theme 相關程式碼）。整套深色調色盤是無法到達的死碼。

可實作性 8.3

CARDS 陣列剛好 32 筆且每筆含 curve/ctrl/stats 完整結構。分頁＝shadcn Tabs 直接套，9 處 minmax(0,..)，scroll-snap 分類軌 + mask 漸隱，3 欄 grid 規矩不炫技。整份沒有一處需要繞過框架。

最強的一點每筆資料自帶 curve 陣列與 ctrl 隨機對照物件，資料模型已經替後端把 API 形狀定義好了。

Bento grid

bento · 綜合 6.76 / 10 · 排名第 17

單獨開啟這一版 ↗

視覺品質6.6

可用性7

台股使用者5.9

誠實層6.7

可實作性7.6

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 6.6

12 欄 bento 骨架完整（sp2–sp12 / rw1–rw5 / auto-flow dense），tile 16px 圓角＋hover translateY(-2px)＋兩級陰影，已檢定卡左緣一道漸隱琥珀邊、累積中卡是虛線節奏邊，績效數字一律裝進有底色的膠囊跟報價文字色分開。深色齊，32 組覆蓋到位。

最強的一點scored/accum 兩種 ::before 左緣（實心漸隱 vs 虛線節奏）——收合態就分得出兩個世界。

可用性 7

12 欄格線上五級磚（XL/L/M/S/微型），格子大小＝證據強度×今日檔數，是全批「一眼看出重點」機制最強的。未評分不是縮小的失敗卡，而是換形狀：冷色底＋虛線標記＋13/24 進度計。

最強的一點未評分給「另一種形狀」而不是灰化 — 微型磚＋進度計，語意是還在累積不是比較差

致命傷25/32，最後補一塊虛線「還有 7 組 →」；整份 JS 只有 8 行、button 只有 4 個，完全沒有篩選；而且大小不一的磚讓同一指標無法橫向比

台股使用者 5.9

「兩套色不共用：價格永遠是純文字＋▲▼，績效永遠裝在有底色的膠囊裡」——用形狀而不是色相去分兩套色，是全批最聰明的一招。36 塊 tile、26 組代號零錯。

最強的一點用「純文字＋箭頭 vs 有底色膠囊」的形狀差來分價格色與績效色，不必要求使用者記住色相。

誠實層 6.7

18 張 accum tile 用滿尺寸 span（sp4 rw3）而不是被縮成小磚，這點對抗「未評分被降級」的直覺很有效；量表 + 「再 8 個月可進檢定」讀起來是倒數而不是故障。

最強的一點未評分磚拿到跟已評分磚一樣大的 bento 跨格——版面尺寸本身就是一種尊嚴宣告。

可實作性 7.6

深色模式最完整（裸 :root + prefers-color-scheme + [data-theme] 三段都寫）。五級尺寸（XL/L/M/S/微型）是真的在處理 32 的數量而非迴避。12 組有成績單全畫、累積中 17 組 + 溢出磚。

最強的一點「尚未評分」不是縮小的失敗卡而是另一種形狀（冷色底 + 虛線脊 + 證據進度量表），語意處理比多數版本誠實。

致命傷grid-auto-rows:minmax(76px,auto) + 手寫 rw2..rw5 + tile{overflow:hidden}：真實資料的中文描述一長，內容不是被裁掉就是留洞，bento 排版無法自癒；另 SVG 漸層 id="g1" 重複需 useId

新粗獷

brutalist · 綜合 6.54 / 10 · 排名第 18

單獨開啟這一版 ↗

視覺品質7.8

可用性5.1

台股使用者5.5

誠實層7.1

可實作性7.2

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.8

執行力沒話說：*{border-radius:0!important} 一路貫徹、4px 邊框、7px 硬陰影、900 字重、46–58px 數字、emoji 關進 3px 方框、按鈕 :active 位移吃掉陰影。黃/藍/黑三色分工明確，深色也備齊。作為一個風格它是完成的。

最強的一點色塊 band（大數字＋標題＋註記三段式橫幅）取代白胖摺疊條，區段標題終於有重量。

致命傷方向與自己寫的診斷自相矛盾：它說現況病在「用邊框代替層級」，然後給每張卡 4px 框加硬陰影。32 張排開會是純粹的視覺噪音，而且只畫了 15 張，等於沒驗證。

可用性 5.1

頂部實心分類切換塊直觀，高對比讓標題與數字都很好讀，卡片左緣色軌分類清楚。

最強的一點分類升格成頂部一排實心切換塊 — 把摺疊抽屜換成永遠可見的座標

致命傷border 宣告 26 個（全批並列最多）而 radius 只有 1 — 一邊在簡報裡罵「用邊框代替層級」，一邊把邊框加倍；14 張卡、主題切換沒接、全份只有 2 個 aria；等重高對比色塊讓 32 張卡同樣大聲＝一樣不重要

台股使用者 5.5

粗黑框＋大寫 mono 數字，成績單框內明寫「本框內的紅綠＝績效（綠獲利／紅虧損），不是報價漲跌」，是全批最直白的防呆註記。但完全沒有任何 font-variant-numeric/tnum 宣告（只靠 .mono 撐），14/32 張，且 3653 被標成「統新」（3653 是健策）。粗框重底色的 brutalism 是純西方平面語言，台股使用者會讀成外國設計練習而非看盤工具。

最強的一點在績效框上直接寫一句「本框內的紅綠是績效不是報價」——最低成本、最有效的雙色系防呆。

誠實層 7.1

給尚未評分一個獨立身分色（藍色斜紋 rail-b）＋一條與黃色「有成績單」等重的滿版 band，明講「是另一種狀態而不是缺一塊」，版面上也確實對稱。5 條理由裡有「樣本平均每期不到 8 檔，統計不穩」這種非時間類的失效模式，比多數強。

最強的一點兩個狀態各給一條等寬 band + 各自的身分色軌——用版面對稱宣告平權，比在卡片裡加字有效。

可實作性 7.2

硬陰影 7px 7px 0、粗邊框、色塊全是 Tailwind 任意值一行搞定；用 html.dark 正好對上 Tailwind darkMode:'class'。28 組條件已渲染，數量有處理。

最強的一點html.dark + @media prefers 雙軌，選擇器命名剛好就是 Tailwind 的預設約定，接得最省。

致命傷*{border-radius:0 !important} 全域 !important 會輾過每個 shadcn 元件的 rounded-*，等於必須改 fork 主題而不是覆寫；.card.wide{span 2} 在 auto-fill 網格只靠斷點擋

徽章系統

badge-system · 綜合 6.46 / 10 · 排名第 19

單獨開啟這一版 ↗

視覺品質7.7

可用性5.3

台股使用者5.6

誠實層7

可實作性6.7

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 7.7

那枚徽章是全批工藝含量最高的單一元件：純 SVG，四個層級靠幾何區分（外環軌/弧長/實心與否/字形），色相只是加強；還附了一張 anatomy 解剖圖說明每個部件代表什麼。t3/t2/t1/t0 用四組 CSS 變數換膚，seal-lg/seal-sm 同一份標記可縮放。

最強的一點層級靠幾何（弧長/實心/字形）而非顏色區分——縮到 22px 或去色都還讀得出來。

致命傷徽章之外的頁面只是很得體的 auto-fill 卡片牆，而且只鋪了約 16 組——把力氣全押在記號上，版面本身沒有同等級的想法。

可用性 5.3

L0-L3 印記（SVG 環，arc 長度＝證據進度、pathLength=100）是整批做得最好的單一元件，也是「尚未評分不是壞掉」講得最有說服力的一個。

最強的一點環形印記把「離可評分還有多遠」畫成弧長 — 一個記號同時傳達等級與進度

致命傷只鋪了 12 張卡，是全批覆蓋率最低的；篩選 chip 存在但卡片數量根本撐不起篩選；精力全給了徽章，32 張卡怎麼排的問題沒被碰到

台股使用者 5.6

L3/L2/L1/L0 四級印記把「證據不足」做成成長環而不是灰掉，概念是全批最完整的；▲▼ 60 處正確、rise-soft/fall-soft 底色分明、深色兩路都寫。

最強的一點L0 的成長環（13/24 個月，還差 11 個月）——把「沒分數」畫成進度而不是故障。

誠實層 7

語意上最徹底的重構：把「尚未評分」變成 L0–L3 階梯上的一個位階（觀察中 L1），SVG 印章的弧長編碼證據進度、字形隨層級變（半圓 → 打勾）。印章在每張卡的同一個位置、同一個尺寸，所以沒有任何一張卡看起來少一塊。逐卡「還差 11 個月／還差 15 期／還差 27 期可評分」有變化。

最強的一點用一個固定版位的印章承載狀態，弧長=證據量、字形=層級——一個元件同時解決「有沒有」和「有多少」。

可實作性 6.7

深色有獨立 :root.dark 區塊（切換雙向都生效），auto-fill 網格、.card.exp{span 2} 有 760px 斷點保護，31 個互動元素。技術上沒有難處。

最強的一點徽章系統本身就是一個 variant prop，最容易做成 shadcn Badge 的 cva 變體。

致命傷只渲染 15 組唯一條件，是卡片牆類方向裡數量處理最弱的一份 —— 等於沒回答題目

極簡無邊框

card-minimal · 綜合 6.36 / 10 · 排名第 20

單獨開啟這一版 ↗

視覺品質6.5

可用性6

台股使用者4.5

誠實層7.8

可實作性7

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 6.5

乾淨、正確、克制：全站只有一個 --hair token（而且明說「唯一允許的線是分隔線，不是框」），卡片零邊框零陰影，只有 10px 圓角的 hover 底色，層級全交給字重階梯（名稱 650 / 檔數 25px / 說明 12.5px 弱色）。今日名單改成對齊的迷你列，永不截斷。

最強的一點證據列做成純文字（✓ 已檢定 · 119 期 / ○ 尚未評分 · 原因），完全不用 badge、不用底色。

致命傷只有 22 組（12 已檢定＋10 未評分），沒補齊 32。且全檔只有一個 font-family、沒有等寬或襯線對比，四欄排開是一片彼此難以區分的灰塊——克制到失去記憶點。

可用性 6

6px gap 的 4 欄、克制、有 line-clamp 與 focus-visible，tab 切換是真的會動的（193 行）。

最強的一點6px 的極小間距 — 證明卡片之間不需要靠留白撐開也能分得清，靠的是卡內排版

致命傷22/32；「minimal」在這裡實際上是每張卡資訊更少，於是 32 張更難互相區辨 — 跟題目的方向相反

台股使用者 4.5

零邊框 Notion 風，兩套色的規範是全批寫得最精準的一條（價格高彩度、一律帶 ▲▼；績效低彩度、只出現在展開後的指標區、一律帶標籤、不帶箭頭）。但只做 22/32，可見靜態文字僅 823 字、產品區實際渲染 0 個 ▲▼（tri=6 全在說明區），整頁靠 JS；ELLAB 大寫字標；把密度歸零的極簡生產力工具語言放在看盤情境，台股使用者的直覺反應是「這不是給我看盤的」。

最強的一點「價格帶箭頭、績效不帶箭頭」的規則——用箭頭的有無當第二個編碼維度，比只靠色相安全得多。

誠實層 7.8

單位品質最高的理由集：10 條 why 全不重複，且每條都配一條具體的 need。「回測期間橫跨的市況太單一（只有多頭）／需要涵蓋一次完整空頭」和「股權分散資料每週才更新一次，日頻回測失真／需要改用週頻重跑」是整批最有專業判斷力的兩句。pendingCard 與 scoredCard 同骨架，展開後那句「寧可空著，也不給一個會誤導人的數字」把立場講死。

最強的一點why + need 成對：不只說卡在哪，還說要補什麼才會過——把 20 張未評分卡變成 20 個可追蹤的工單。

可實作性 7

資料驅動（5 個 map），repeat(4,minmax(0,1fr)) 正確、有 line-clamp、.card.open{grid-column:1/-1} 展開單純。fullBorders 0，真的沒用邊框堆層級。可出錯的地方極少。

最強的一點展開態直接 grid-column:1/-1 佔滿整列，不需要任何 JS 量測或絕對定位。

時間感

timeline · 綜合 6.22 / 10 · 排名第 21

單獨開啟這一版 ↗

視覺品質6.8

可用性5.7

台股使用者5.8

誠實層6.8

可實作性6

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 6.8

單一想法貫徹得漂亮：日期就是主視覺（clamp(38–64px) 等寬），頂部一條交易日時序條，主幹是一條 96px 左軌加節點戳記，證據被畫成「一段年份長度」的軸（帶年刻度 tick 與端點圓帽），已檢定與累積中只差軸的顏色與長度。整體暖紙色調也舒服。

最強的一點把「證據」畫成年份軸上的一段長度，而不是一個徽章——時間量體變成可比較的圖形。

致命傷版面代價太大：node 左側吃掉 150px padding，右邊還要塞 330px 的卡片網格，時間軸和卡片矩陣在爭同一個組織角色。而且只鋪了約 12–16 組，量的問題完全沒碰。

可用性 5.7

把版面重構在重算節奏上（昨晚 05:30 先跑、今天 14:20 收盤後更新），資料新鮮度講得比誰都清楚。

最強的一點把「這份名單是什麼時候算的」升格成版面主軸 — 對誠實層是加分的敘事框

致命傷時間軸這條線對「瀏覽 32 組」完全沒有幫助，底下仍是 auto-fill minmax(330px) 的普通卡牆；15 張卡、主題切換沒接、整份只有 1 個 aria 屬性

台股使用者 5.8

交易日時序條（05:30 夜間預算 / 09:00 開盤 / 13:30 收盤 / 14:20 條件重算 / 明日 05:30）是唯一把台股交易時段畫進版面的，很在地；15 張卡、61 組代號零錯；價格色註解直接寫「台股紅／台股綠」。

最強的一點交易日時序條——把「這份名單是什麼時候算的」用台股的作息講清楚，直接回答使用者最常問的資料新鮮度問題。

誠實層 6.8

觀念討喜：所有卡片共用同一條時間軸，未評分讀起來是「資料起點比較晚」而不是「壞掉」，Tier B 直接命名為「時間還在累積」，把單一維度講明白。已檢定那側也敢掛 Sharpe −0.11、回撤 −46.2%、「贏過其中 9%」「這組的歷史成績是負的，照樣列出來」。

最強的一點共用時間軸讓未評分變成「起跑晚」而非「有缺陷」——時間是所有人都直覺接受的不可抗力。

可實作性 6

深色雙軌完整、mask 漸隱與 color-mix 用法都沒問題，卡片本身結構還算單純。

最強的一點證據長度畫成一段時間軸（.axis 上的刻度與端點），把「回測期數」視覺化成長度而非數字。

致命傷時間軸主幹是三個必須互相對齊的魔術數字（.rail::before left:96px、.node padding-left:150px、.stamp width:96px），標籤一長就散；12 處 position:absolute 為全批最多，且只渲染 16 組

玻璃擬態

glass · 綜合 6.08 / 10 · 排名第 22

單獨開啟這一版 ↗

視覺品質6.9

可用性5.5

台股使用者6.8

誠實層6.2

可實作性5

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 6.9

玻璃寫得比多數人認真：三層 glass 深度 token、::before 上緣高光漸層＋::after 一條由透明到亮再到透明的 1px 頂邊、背後四團 aurora radial-gradient 加 blur(30px)、再疊一層被 mask 收邊的 56px 網格讓模糊有參照物。深色把 glass 從 .55 白翻成 .055 白，翻得對。

最強的一點::after 那條左右淡出的 1px 上緣高光——玻璃質感真正的來源，不是 blur 而是這條邊。

致命傷36 個 border-radius＋17 個 box-shadow＋大量 backdrop-filter，正是這批人自己在檢討的「靠圓角陰影充當層級」；32 張卡疊在極光上，深色時 rgba(255,255,255,.055) 的卡面與內文對比會很吃力。而且只鋪了約 23 組。

可用性 5.5

毛玻璃層次做得完整（::before 高光 + ::after 頂緣線），hero 兩塊等重玻璃解掉了原版「一大一小」的失衡。

最強的一點hero 兩塊等重的處理 — 個股反查與我的今日名單給同樣的視覺重量

致命傷26 個 border + 36 個 border-radius + 每一面都 backdrop-filter，正是各家簡報一致診斷的「用邊框代替層級」再犯一次；20 張卡、minmax(384px) 只排得下 3 欄，32 組要 11 列；深色下小字級數字疊在半透明模糊面上是可讀性風險

台股使用者 6.8

台股語彙不錯：基準寫「加權報酬指數」（而不是加權指數，這是對的）、亞德客-KY 帶後綴、殖利率用白話解釋會變動。--health-neg 用桃紅 #e11d63 刻意避開 --rise，思路正確。tnum 宣告 9 處到位。

最強的一點績效虧損刻意用桃紅而非正紅，一個色相的位移就把「紅＝漲」跟「紅＝虧」拆開。

誠實層 6.2

「觀察中」這個詞比「尚未評分」好，SVG 進度環是真的畫了、也放在 cfoot 的固定位置。但未評分卡直接省掉 perf-strip，卡片實際變矮，一排看過去高度不齊；而且逐卡完全沒有理由文字（distinct reason = 0），只有一句共用的「證據累積 N/24 個月」。玻璃擬態的光暈與模糊是全批最裝飾的皮，跟「我們克制、不亂給數字」的訊息互相打架。

最強的一點「觀察中」的用詞——它描述我們在做什麼，而不是描述資料缺什麼。

可實作性 5

玻璃層級（glass-1/2/3）與邊緣高光的 token 拆得很有條理，深色淺色雙軌也完整，單看設計系統是專業的。

最強的一點::before 漸層高光 + ::after 上緣 1px 光線兩層疊出玻璃厚度，不靠圖片。

致命傷9 處 backdrop-filter（每張卡一次）疊在一個 inset:-20vmax、filter:blur(30px) 的 fixed 極光層上 —— backdrop-filter 是最貴的常見屬性，32 張卡同時開會在中階機器上直接產生捲動掉幀，而這效果正好是唯一無法「用 Tailwind 換個寫法就好」的部分。另 mask-image 未補 -webkit- 前綴，只渲染 16 組

霓虹深色

neon-dark · 綜合 5.78 / 10 · 排名第 23

單獨開啟這一版 ↗

視覺品質6.4

可用性4.6

台股使用者6

誠實層5.5

可實作性6.4

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 6.4

深色優先的手藝不錯：glow token 分三級（描邊光/擴散光/文字光）、64px 背景網格、accent 嚴格限制在「可操作/狀態」而資料一律中性白，light 模式把霓虹翻成「深紫油墨」並把 --glow-txt 設為 none，翻得有想法。卡片 graded::before 是一道帶光暈的 2px 左緣。

最強的一點light 模式把 --glow-txt 直接關成 none——知道霓虹在白底上是災難，而不是硬套。

致命傷只鋪了 16 組，剛好一半都不到，四欄格子的密度主張完全沒被驗證。風格上也是全批最像預設「開發者工具深色」的一版。

可用性 4.6

深底＋單一高飽和紫，accent 只出現在可操作/狀態、資料走中性白，這個紀律本身是對的。

最強的一點「accent 只給互動與狀態，資料一律中性色」的用色紀律 — 概念正確，值得抄進任何深色方案

致命傷16 張卡、min-height:212px 四欄，32 組約 8 屏；min-width:0 用 0 次、aria-* 用 0 次；霓虹紫 + 紅漲綠跌 + 績效綠紅＝近黑底上三套色系互打；而且這頁的任務是說「32 組裡有 20 組我們證據不足不敢給分」，發光的視覺語氣與這句話徹底相斥

台股使用者 6

深色霓虹，但價格色在 light/dark 兩路都正確反轉（暗 #ff4159/#1ec98a、亮 #d61c38/#0a8f61），媒體查詢用 prefers-color-scheme: light 加 :root:not([data-theme="dark"]) 守得乾淨，mono 147 處，「億」用了 6 次。

最強的一點dark-first 但把 light 這一路也完整守好——是全批深色主題寫得最正確的一份。

誠實層 5.5

「蒐證中／蒐證 13/30」是整批最好的一個詞——它描述一個正在進行的調查行為，語意上完全沒有故障感，比「尚未評分」「觀察中」都強。但也就只有這個詞：8 張 pend 卡逐卡沒有任何理由，c-foot 只是進度條，資訊量最低的一種處理。霓虹光暈的調性也和「我們保守、不亂給分」相衝。

最強的一點「蒐證」二字——把 pending 從被動缺失改寫成主動調查。

致命傷同一個網格裡單位打架——「蒐證 13/30 月」「蒐證 21/30 期」「蒐證 18/30 期」共用同一個分母 30 卻混用月與期。宣稱有門檻卻連門檻單位都不一致，直接抵銷紀律感。

可實作性 6.4

發光全部是 box-shadow / text-shadow 的 CSS 變數，沒有用圖片或濾鏡硬幹；而且淺色模式正確把 --glow-txt 設成 none，是少見的「深色優先但真的能翻成淺色」的寫法。

最強的一點--glow-txt:none 這一行 —— 深色設計最常見的失敗是淺色下發光變成髒污，他明確關掉。

致命傷只有 18 組條件；且全份零個 aria-* 屬性（全批唯一），零 min-width:0，卡片 min-height:212px 寫死

親和輕鬆

playful · 綜合 5.56 / 10 · 排名第 24

單獨開啟這一版 ↗

視覺品質6.2

可用性4.9

台股使用者4.8

誠實層6

可實作性5.9

瀏覽器擋住了本機檔案的內嵌預覽。
點上方「單獨開啟這一版 ↗」，或用 python3 -m http.server 在這個資料夾起一個本機伺服器。

視覺品質 6.2

承諾度與內部一致性其實很高：完整的 r-xs→r-xl 圓角尺標、三級 token 化陰影（含 0 4px 0 的實體按鈕壓下效果）、吉祥物與圖示各自 rotate 幾度、標題用 ::after 畫一條蜜糖底線、背景三團 blur(70px) 色團。深色整套重寫且色溫維持暖調。32 組全處理。

最強的一點0 4px 0 var(--brand-deep) 的實體按鈕＋:active 位移——這批唯一有觸感的互動細節。

致命傷純視覺上它是這批最吵的一份：54 個 border-radius、六個分類柔色再加上漲跌紅綠、績效綠紅、觀察中奶油色，一頁至少十二個色相在搶注意力，剛好把「兩套語意色不能混」這條硬約束推到最難讀的境地。虛線框＋旋轉＋大圓角疊在 32 張密集財務卡上會糊成一片糖果。

可用性 4.9

emoji 頭像＋圓角卡牌，對第一次接觸的人門檻確實低，分類 dot 的顏色系統也清楚。

最強的一點對新手的親和力是真的 — 六類的 dot 顏色 + emoji 頭像讓分類記得住

致命傷54 個 border-radius、85 顆 emoji，裝飾量壓過內容；只有 13 張卡、minmax(340px) 三欄，32 組要捲很久；更根本的是這頁的內容是回測績效與隨機對照百分位，卡牌遊戲的語彙直接削弱它要承載的誠實層

台股使用者 4.8

兩套色圖例寫得最白話（「賺綠／賠紅」「兩套是分開的，卡片上不會混在一起出現」），▲▼ 72 處全對。但 85 個 emoji、12 處 ≥16px 圓角、「☕ 今天很平靜」「🌱 資料長大中」「查一下 →」是 Duolingo/Robinhood 的語氣；台灣存股族與當沖使用者對投資介面的期待是嚴肅、密、可信，這一版最容易被當成外國消費型 App。只鋪 13 張卡，且 health-pos 綠 #2E9E63 / health-neg 紅 #D0483C 與價格紅綠色相太近。

最強的一點用「賺綠／賠紅」四個字取代 health-pos/health-neg 這種術語圖例——講人話這件事它做得最好。

誠實層 6

grow-note 內嵌在卡內（標題、說明、進度條、兩端標籤），版位不空；「🌱 資料還在長大，先不打分數／名單照常每天更新，你可以先觀察」的語氣讓人完全不會覺得壞掉，這一點做得比多數好。但只畫了約 13 張卡，理由只有 2 條，而且發芽比喻把統計不足講得太可愛——誠實層要換到的是「這家公司很嚴謹」的信任，萌化會把這份信任折價。

最強的一點「名單照常每天更新，你可以先觀察」——給等待期一個明確的使用方式。

可實作性 5.9

色票與圓角系統本身好實作，按鈕的 0 4px 0 實心陰影、:active 位移都是純 CSS。

最強的一點btn-primary 的實體按壓感（box-shadow 0 4px 0 + active translateY）不用任何 JS 或動畫庫。

致命傷.blobs 是 position:fixed 三顆約 600px 圓形各套 filter:blur(70px) —— 三層永久合成的 GPU 圖層墊在資料密集頁下面；且 fixed 在本 App 自有捲動容器內行為會跑掉。另只有 18 組條件