先看一張昨天留下來的畫面。
圖 1：請先不要往下看答案。你會把這張畫面裡的哪些東西叫做「元件」？
我把這張圖交給 AI，只說：
分析這張管理後台畫面有哪些元件。
得到的整理大致上會有 Sidebar、搜尋欄、篩選按鈕、摘要卡、Data Table、Status Badge、分頁，甚至連整張成員管理後台也一起被放進「元件」清單。
單看每個名稱，好像都說得通。我真正卡住的地方是：如果我下一句說「把成員管理元件改好一點」，AI 到底會改搜尋欄、整張資料表，還是連左側導覽一起重做？
我沒有立刻重做畫面，而是拿 AI 整理出的名稱，試著寫下一輪需求：
把成員管理元件改得更清楚。
調整搜尋區塊。
手機版把側邊欄收起來。
三句都像人話，也都不夠準。
「成員管理元件」可能指整頁、資料表或一張成員卡；「搜尋區塊」可能只改 Search Field，也可能連篩選、結果數量與 Reset 一起改；「收起側邊欄」則沒有說明手機上的完整導覽要搬去哪裡。
我甚至還沒把需求交給 AI，就無法替這三句畫出修改邊界。這表示問題不只是名詞不專業，而是不同責任被排在同一層。
我把三句重新寫成：
| 原本的說法 | 補上責任後 |
|---|---|
| 把成員管理元件改得更清楚 | 只調整 Data Table 的成員、部門、角色與狀態欄；不要更動全站導覽與頁面版型。 |
| 調整搜尋區塊 | 調整「搜尋與篩選 Pattern」：包含 Search Field、部門條件、結果數量、無結果與 Reset。 |
| 手機版把側邊欄收起來 | 重新設計 360px Layout：桌面 Sidebar 不保留在畫面上，完整導覽改由 Header 的選單入口開啟。 |
修改範圍終於能被指出來。接下來我再回頭看 AI 的分類結果，哪些名稱混在一起也變得很明顯。
| AI 列出的項目 | 它真正負責的事 | 混在一起會發生什麼 |
|---|---|---|
| Status Badge | 顯示一筆帳號目前是啟用或停用 | 可能只改了顏色，卻沒有補狀態語意。 |
| 搜尋、篩選和結果清單 | 合作完成「找到成員」這項任務 | 可能只做出搜尋框，沒有 Reset、無結果與錯誤處理。 |
| Sidebar 和內容區 | 決定整張頁面的版面關係 | 可能在修改一個欄位時，把手機導覽也一起改掉。 |
| 成員管理頁 | 一類管理頁共用的內容骨架 | 可能把整頁誤認為一顆可以到處搬動的元件。 |
| 藍色、間距和圓角 | 讓多個畫面共用一致的設計值 | 可能以為換 Token 就能解決操作流程。 |
這些項目都和 UI 有關，但它們不是同一種東西。Vibe Coding 時把責任層級說清楚，AI 才知道這次可以動到哪裡，哪些地方先不要碰。
圖 2：左邊的要求沒有修改邊界；右邊先把畫面分層，才能逐項確認 AI 打算改什麼。
回到 LumenDesk，我把能直接標在畫面上的內容分成五層：
| 名稱 | 在這張畫面裡的例子 | 描述需求時要補什麼 |
|---|---|---|
| Component（元件） | Button、Search Field、Status Badge、Data Table | 元件用途、資料、狀態和操作結果。 |
| Compound Component（一組元件） | 搜尋欄、部門篩選與 Reset 的固定組合 | 這幾個控制如何合作，以及共用什麼狀態。 |
| Pattern（操作方式） | 輸入關鍵字、加入條件、查看結果、清除條件 | 使用者完成任務的順序與失敗後的下一步。 |
| Layout（版面） | 左側導覽加右側內容區 | 桌面與手機如何重新排列、收合或保留。 |
| Design Token（設計值） | 主操作色、危險色、間距、圓角 | 哪些值要跨元件共用，以及它們代表什麼。 |
圖 3：五種虛線不是五個互斥區塊。同一個搜尋欄可以是 Component，也可以參與更大的 Compound Component 和搜尋 Pattern。
這裡最容易誤會的是 Pattern。它描述使用者完成事情的方法，不對應畫面上的單一框線。搜尋欄是一個元件；從輸入、篩選、查看結果到清除條件，才是一段完整的搜尋與篩選 Pattern。
Token 則更底層。把停用按鈕套上 color.danger 可以統一危險操作的視覺，但它不會自動產生確認 Dialog，也不會替你決定停用成功後怎麼回饋。
Page Template 是同類頁面共用的骨架。例如成員、專案與活動紀錄頁，都可能有頁面標題、篩選區、主要資料區和新增操作；換了一批資料，骨架仍然存在。
Design System 的範圍更大。它會整理元件、Token、互動規則、內容寫法與使用說明。它不是另一顆超級元件，也不是加上一套色票後就自動成立。
我沒有把這兩個名詞塞進圖 3 的瀏覽器框線，因為那樣反而會讓圖更亂。Template 要跨頁比較，Design System 要看整套產品，單看一張頁面只能看到它們留下的部分結果。
我重新檢查剛才三句需求：
這次我可以在 AI 開始前先說「不要動什麼」，也能在完成後分別驗收資料表、搜尋流程與手機導覽。分層帶來的結果很實際：少改錯地方。若只把英文名稱背起來，卻仍然說不出修改邊界，分類就沒有幫上忙。
如果你拿到一張參考圖，不必第一句就叫 AI 照著做。先讓它把畫面拆開：
請先分析這張成員管理頁，不要直接改畫面。
請分開列出：
- Component：可單獨辨識與重用的控制或資訊單位。
- Compound Component：必須一起合作的一組元件。
- Pattern：使用者完成搜尋、篩選或管理任務的操作流程。
- Layout：側欄與內容區的版面關係，以及 360px 時的轉換。
- Page Template：同類管理頁會保留的骨架。
- Design Token：跨元件共用的顏色、間距與圓角決策。
請用表格列出畫面項目、分類理由和目前還缺的規格。
一個項目若同時參與多個層次，可以重複出現，但要說明責任差異。
先不要修改畫面，也不要把所有東西統稱為 Component。
我實際檢查分類結果時，會特別看四件事：整張頁面有沒有被誤叫成單一 Component、Pattern 是否交代完整任務、Layout 是否提到手機轉換、Token 是否被拿來代替行為。只要其中一項混在一起，後面的修改範圍就仍然不清楚。
Day 2 不要求你背名詞。真正有用的是能指出：這次要調整一顆元件、一組合作的控制、一段操作流程，還是整張頁面的版面。
名稱替修改範圍畫出邊界。邊界清楚後，AI 少猜一點，你也比較知道該檢查哪裡。
iThome鐵人賽
看影片追技術