設計系統評測

第二輪:21 題、四套設計系統

同一批 21 題,分別交給 tfds、LUMIXIS、IBM Carbon、Atlassian 四套設計系統,每套各給兩種份量的資料,共 168 份答案。每份答案的畫面、每條評分結果和稽核意見都在 評測檢視台,可以逐條留下人工判定。

怎麼跑的

題目共 21 題:D2 7 題(含第一輪的「刪除案件確認」)、D3 6 題、D4 6 題、D5 2 題。題目由 agent 從 KB 和 PRQ 寫成,再由另一個 agent 檢查有沒有洩題,共改了 36 處。

每套系統給兩組資料,第 2 組比第 1 組多了使用說明:

系統第 1 組第 2 組交件格式
tfdsT1:組件清單和屬性(2 個檔,60 KB)T2:再加每個組件的使用說明、行為規格、結構說明和設計模式規則(195 個檔,2.8 MB)畫面資料(JSON),用組件組成
LUMIXISL1:token 頁、token 原始檔、樣式表(19 個檔,404 KB)L2:整個網站 19 頁加原始檔(30 個檔,480 KB)HTML,樣式只能引用 token
CarbonC1:組件的屬性清單(2 個檔,292 KB)C2:再加各組件和設計模式的使用說明(111 個檔,1.4 MB)HTML,用 Carbon 的 Web Components
AtlassianA1:從套件型別整理出的組件屬性(2 個檔,308 KB)A2:再加 Atlassian 給 agent 讀的完整文件 llms-full.txt(5 個檔,1.0 MB)React,用 @atlaskit 套件

總表

組第 0 層 通過第 1 層 除對比外沒有問題第 1 層 有對比不足第 2 層 答「是」比例token 中位數
T12/213/2118/2184.8%91,721
T214/2116/2119/2187.9%120,307
L11/2114/2119/2188.0%109,945
L22/2115/2119/2192.7%136,055
C111/212/216/2185.5%100,321
C213/212/216/2187.0%115,895
A15/2110/211/2191.8%96,615
A214/2113/212/2191.8%105,267

讀表方式:

整體來看:

  1. 多給使用說明之後,第 0 層明顯變好的有兩套:tfds 2 → 14、Atlassian 5 → 14;Carbon 只多 2 份(11 → 13),只跑一次分不出是不是偶然。LUMIXIS 幾乎沒有變(1 → 2),因為它的主要錯誤,多給網頁也沒有補到(見 LUMIXIS 一節)。

  2. 第 2 層的進步小,0 到 5 個百分點。題目規則和文案,只給組件清單的第 1 組大多也做得到;資料多寡主要影響的是組件和 token 用得對不對。

  3. 第 2 組用掉的 token 比第 1 組多 9% 到 31%。

tfds

T1 組件清單T2 加使用說明等
第 0 層通過2/2114/21
第 1 層除對比外沒有問題3/2116/21
第 2 層 D2 / D3 / D492% / 78% / 85%91% / 85% / 88%
token 中位數91,721120,307
工具使用次數中位數616
耗時中位數2.0 分鐘3.9 分鐘
  1. 組件結構說明和使用說明讓組件用法大幅變對。 T1 最常見的錯是組件的位置放了它不接受的東西(17 份)和缺少必填的位置(7 份);T2 分別降到 5 份和 2 份。

  2. 同一件事也反映在無障礙檢查。 T1 有 17 份出現沒有名稱的按鈕、8 份出現按鈕包按鈕;T2 只剩 2 份和 1 份。T1 這 17 份裡有 10 份是對話框的關閉按鈕:tfds 的組件不帶文字,關閉按鈕的名稱要由使用的人給,對話框的使用說明有示範(aria-label="Close"),T1 沒有拿到這份說明。按鈕的使用說明也寫了只有圖示的按鈕要加 aria-label。這和第一輪 V1 的發現一致。

  3. 第 2 層總分差距小,因為兩個方向互相抵消。 「每個控制項都有螢幕閱讀器讀得到的名稱」這題,T1 只有 3/19 答「是」,T2 有 18/19;題目規則這部分反而是 T1 略高(93% 對 87%)。分等級看,差距只在 D3(一個畫面加它的各種狀態)看得到:T1 78%、T2 85%;D2 兩組幾乎一樣。

  4. tfds 自己的顏色有一個對比問題。 主要按鈕的白字配 #1877ff 底色,淺色主題對比 4.1,低於 4.5。42 份 tfds 答案中有 36 份被標出,和 agent 怎麼寫無關。同一個顏色在 LUMIXIS 是列出來的例外,tfds 沒有列。

  5. 第 0 層檢查程式修過一處。 有「值」的組件(例如驗證碼欄位、時間軸),在 Vue 裡用 modelValue 屬性綁定,組件資料也有列;檢查程式原本只認結構說明裡不分框架的名稱 value,誤判了 T2 的 9 份答案。修正後 T2 從 10/21 變成 14/21,T1 不變。結構說明的格式可以考慮直接寫出各框架用的名稱。

  6. 顯示程式畫不出提示訊息(toast)。 tfds 的提示訊息要透過程式呼叫才會出現,答案寫在畫面資料裡的提示訊息畫出來是空的。t03 的評審因此把兩份答案的兩題判成「否」,要在檢視台上人工複核。

  7. 代價。 T2 讀的資料是 T1 的 47 倍(2.8 MB 對 60 KB),token 多 31%,是四套系統裡增加最多的。

LUMIXIS

L1 token 頁L2 整個網站
第 0 層通過1/212/21
第 1 層除對比外沒有問題14/2115/21
第 2 層 D2 / D3 / D491% / 84% / 90%95% / 90% / 93%
token 中位數109,945136,055
工具使用次數中位數1214
耗時中位數4.2 分鐘5.6 分鐘
  1. 第 2 層是四套系統裡第 2 組進步最多的(88.0% → 92.7%),每個等級都變好。 多出來的是原則、無障礙、命名等頁,LUMIXIS 自己的題目有一部分就出自這些頁(原則、無障礙)。兩組差距最大的幾題是:危險按鈕用危險填色(4/9 → 7/7)、危險按鈕的焦點外框(6/9 → 7/7)、token 的用途合不合元素(7/19 → 11/19)。兩組都做不好的是「確認框除了危險動作,還有至少兩個出口」(2/5、1/5);這是 tfds 的對話框規則,LUMIXIS 自己沒有寫。

  2. 第 0 層幾乎全部不通過,主因是一條很嚴的規則。 兩組各有 19 份犯「token 用在它不該用的屬性」。最常見的是拿間距 token 當定位的位移(top、left、right、bottom)或寬高,拿尺寸 token 排格線欄寬。LUMIXIS 沒有定位用的 token,它的 Figma 設定也只寫了 token 可以綁在 Figma 的哪種欄位(間距、填色、寬高……)。哪個 CSS 屬性對應哪種 Figma 欄位,是檢查程式自己定的,作答的 agent 沒有拿到。所以多給網頁也補不到這一點。這些算不算錯,要人判斷。

  3. 沒有組件,結構問題反而少。 agent 直接寫 HTML,第 1 層除對比外 14 到 15 份沒有問題,剩下的多半是元素加了不允許的角色。

  4. 幾乎每份答案都有對比不足,且不在 LUMIXIS 列的例外裡。 最常見的是次要文字的灰 #727272 配 #eeeeee(淺色 4.14,42 份中 31 份)、成功綠 #2a9f47 配淡綠底(3.03,16 份)、#9e9e9e 配白底(2.67,11 份)。這些顏色都是 LUMIXIS 的 token 值;哪些是 token 本來就不該這樣配、哪些是 agent 配錯,要對照它的顏色頁。

  5. 評審資料中途補過一次。 判斷「用的 token 符不符合元素的用途」這題時,評審需要知道每個 token 的用途說明;這份資料在 t01 到 t03 開始評審後才加進去,這三題的評審只能從 token 名稱推測。

  6. 代價。 資料只多了 19%(480 KB 對 404 KB),token 多 24%,是四套系統裡耗時最長的。

Carbon

C1 屬性清單C2 加使用說明
第 0 層通過11/2113/21
第 1 層除對比外沒有問題2/212/21
第 2 層 D2 / D3 / D490% / 84% / 82%89% / 90% / 82%
token 中位數100,321115,895
工具使用次數中位數1115
耗時中位數3.3 分鐘3.5 分鐘
  1. 第 1 層的問題多半來自 Carbon 組件本身。 最常見的五種,都出在 Carbon 組件自己產生的結構裡:表格列的子元素、日期選擇器裡沒有名稱的隱藏連結、按鈕組、單選按鈕的屬性、切換器的按鈕。答案怎麼寫都會出現,所以兩組都只有 2/21,反映的是這個版本的 Carbon Web Components。

  2. 評審判「每個控制項都有名稱」的比例很低。 C1 7/19、C2 8/19,其他三套系統的第 2 組都有 18/19 以上。Carbon 的控制項在自己的封裝結構(shadow DOM)裡,這一項是答案真的漏了名稱,還是評審讀不到,要在檢視台上人工複核。

  3. 第 0 層的錯集中在少數答案。 「不是 Carbon 的 class」只出現在 C1 3 份、C2 5 份,但每份上百處,是答案自己寫了樣式 class。「只能用 Carbon 自己的 class」是這次評測訂的規則,Carbon 的文件沒有這樣要求。另一個常見的錯是把文字色 token 拿來當邊框或底色(C1 7 份、C2 5 份)。

  4. 確認框的標題和主要按鈕說的動作常常不一致。 Carbon 的對話框使用說明要求兩者都反映同一個動作,兩組都只有 7/11,多給使用說明也沒有改善。危險確認框和取消按鈕兩組都全對。

  5. 對話框的角色要從螢幕閱讀器的資料讀。 Carbon 把對話框的角色放在封裝結構裡,自動擷取的畫面事實讀不到;評審改讀螢幕閱讀器會拿到的資料,危險確認框在那裡是「alert」。

  6. 代價。 資料多 5 倍(292 KB 對 1.4 MB),token 多 16%。

Atlassian

A1 屬性清單A2 加 llms-full.txt
第 0 層通過5/2114/21
第 1 層除對比外沒有問題10/2113/21
第 2 層 D2 / D3 / D497% / 88% / 90%97% / 89% / 89%
token 中位數96,615105,267
工具使用次數中位數1617
耗時中位數3.4 分鐘3.5 分鐘
  1. 第 0 層的差距幾乎都來自同一個錯。 圖示的顏色要寫成 token("color.icon.subtle"),也就是把 token 名稱交給 Atlassian 的函式換成實際的值;很多答案直接寫了 token 名稱字串。這樣寫出來的顏色無效,圖示會退回文字色。兩組合計 88 處,A1 16 份答案有型別錯誤,A2 降到 7 份;llms-full.txt 裡有這種寫法的例子。

  2. 型別檢查的結果要先篩過。 答案用一般 JavaScript 寫自己的小組件時,型別檢查會要求每個參數都必填,共 111 處,這些和 Atlassian 無關,已經拿掉。另有 10 處是寫在變數裡的值被型別檢查放寬,只記為提醒。

  3. 第 1 層幾乎只剩標題層級。 除對比外的問題,幾乎都是標題層級跳級(A1 10 份、A2 7 份);對比不足只有 1 份和 2 份,是四套系統裡最少的。

  4. 第 2 層兩組一樣(91.8%)。 對話框的主要按鈕要反映標題,這題 A1 8/13、A2 10/13;對話框要有標題、一個對話框只做一件事,兩組都全對。

  5. 畫面要加上頁面底色。 第一次畫時頁面沒有底色,深色主題的淺色字落在白底上,深色檢查出 711 處對比不足。實際的 Atlassian 應用程式會用它的全域樣式設定頁面底色和文字色,重畫時比照加上,兩個主題各剩 7 處。

  6. 代價。 資料多 3 倍(308 KB 對 1.0 MB),token 只多 9%,是四套系統裡增加最少的,第 0 層的進步卻和 tfds 一樣多。

使用稽核(第 3 層)

稽核 agent 不看題目規則、不看設計系統,也不知道答案來自哪一套。它只拿到一個身分和一個用使用者的話寫的目標,依流程順序一張張看各狀態的畫面,每張說它接下來會按哪裡、哪裡讓它猶豫,最後回答做不做得完。問題分三種:卡住、拖慢、煩人。

每份答案跑兩次:一次看截圖,一次只拿螢幕閱讀器會讀到的內容和 Tab 順序。這一輪先選三題,共 48 次:

t16 的結果(括號內是卡住的問題數):

組看畫面螢幕閱讀器
T1部分做得完(1)部分做得完(1)
T2部分做得完部分做得完(1)
L1部分做得完部分做得完(1)
L2做得完做得完
C1部分做得完(1)部分做得完(1)
C2部分做得完(1)部分做得完
A1做得完部分做得完(2)
A2部分做得完部分做得完(2)
  1. t08 和 t21 分不出各組的差別。 t08 幾乎全部「做得完」,t21 全部「部分做得完」。下一輪要換題。

  2. t16 卡住的地方大多是流程接不起來。 最常見的是:存檔失敗時,訊息要使用者到 Archives 刪掉一個舊片段,但答案畫的 Archives 只有播放和下載,沒有刪除(C1、A1、A2)。其次是失敗訊息沒說原因,也沒說影像還會保留多久。這些是是非題問不到的:每個畫面各自都合規則,接起來才有問題。

  3. 螢幕閱讀器模式找到的問題多得多。 卡住的問題看畫面共 3 處,螢幕閱讀器 9 處。其中有些只有用聽的才發現得到:時間和日期欄位沒有名稱(T1、A2)、Tab 順序裡多出兩個看不到的連結(C2)、存檔後來失敗了卻沒有讀出任何提示(L1)。

  4. 稽核方法修過三次。 第一版說明沒有講「失敗的那張畫面也是測試的一部分」,稽核把強制的失敗當成目標沒達成;t16 的目標原本寫了一個題目裡沒有的攝影機名稱;截圖的視窗太矮,切掉了 T1 這種整頁高度的畫面的存檔按鈕。三處都修正並重跑受影響的部分,作廢 25 次。

  5. 同一份輸入重跑,結論不一定一樣。 T1 的螢幕閱讀器稽核重跑一次後,「卡住」的問題從「Archives 沒有刪除」換成「時分秒欄位沒有名稱」;後者上一次列為「拖慢」。單次的結果只能當線索,要多跑幾次才能算比例。

token 用量與模型

每份答案記下模型用掉的 token、工具使用次數和耗時,數字取自每個 agent 結束時的回報。

組token 中位數token 合計(21 題)工具次數中位數耗時中位數交給它的資料
T191,7211,874,25962.0 分鐘60 KB
T2120,3072,603,894163.9 分鐘2.8 MB
L1109,9452,485,948124.2 分鐘404 KB
L2136,0552,803,998145.6 分鐘480 KB
C1100,3212,353,927113.3 分鐘292 KB
C2115,8952,478,308153.5 分鐘1.4 MB
A196,6151,991,621163.4 分鐘308 KB
A2105,2672,280,392173.5 分鐘1.0 MB

等級越高,用的 token 越多。以 T2 為例,D2 中位數 105,138,D4 140,735。資料量和 token 不成比例:T2 資料是 T1 的 47 倍,token 只多 31%。從數字推測,agent 沒有整份讀完,只挑了需要的檔案。

整輪的用量:

工作次數模型token 合計
寫題目(依等級分四批)4claude-opus-5-5697,313
檢查題目洩題2claude-opus-5-5179,627
作答168claude-opus-5-518,872,347
評審,tfds 和 LUMIXIS38claude-opus-5-5沒有逐次記錄
評審,Carbon 和 Atlassian42claude-opus-5-54,431,572(中位數 90,894)
使用稽核73(有效 48)claude-sonnet-5-54,077,208

限制

待決定事項