安安～我是ChiYu～
昨天留下來的後台有一個很麻煩的問題。
我知道搜尋沒反應、手機版壞掉，停用按鈕也像裝飾品；真的要叫 AI 修改時，我卻只說得出：「那個東西幫我改一下。」
既然叫不出名字，我乾脆先請 AI 幫忙點名。還是同一張 LumenDesk 成員管理後台，這次先不看紅框，也不看昨天整理的答案：
圖 1：先不要往下找答案。你會把這張畫面裡的哪些東西叫作「元件」？
我只給 AI 一句：
分析這張管理後台畫面有哪些元件。
AI 很快列出 Sidebar、搜尋欄、篩選按鈕、摘要卡、Data Table、Status Badge 和分頁。看到這裡都還算合理，接著它又把整張成員管理頁、版面配置，甚至顏色和間距一起放進「元件」清單。
每個詞單獨看都跟 UI 有關，排在同一層就開始不對勁了。這很像點名時把學生、分組活動、座位配置和整間教室全部算成同學。名單很完整，接下來卻不知道要叫誰上台。
我先不研究定義，直接拿這份清單寫下一輪需求：
把成員管理元件改得更清楚。
調整搜尋區塊。
手機版把側邊欄收起來。
三句都像人話，也都不夠準。
第一句的「成員管理元件」可能是整頁、Data Table，或其中一張成員卡。第二句的「搜尋區塊」可能只改 Search Field，也可能連部門條件、結果數量、無結果和 Reset 一起改。
第三句更麻煩。「把 Sidebar 收起來」只描述眼前的東西消失了，沒有交代手機上的完整導覽要搬去哪裡。照字面實作，AI 很可能真的把它藏起來，然後恭喜我們得到一個沒有導覽的手機版。
三句話都還沒送出，我已經無法替它們畫出修改範圍。問題不是英文背得太少，而是我把不同責任全塞進同一個「元件」抽屜，現在連抽屜都快關不起來了。
| AI 列出的項目 | 它真正負責的事 | 混在一起會發生什麼 |
|---|---|---|
| Status Badge | 顯示一筆帳號目前是啟用或停用 | 可能只改了顏色，卻沒有補狀態語意。 |
| 搜尋、篩選和結果清單 | 合作完成「找到成員」這項任務 | 可能只做出搜尋框，沒有 Reset、無結果與錯誤處理。 |
| Sidebar 和內容區 | 決定整張頁面的版面關係 | 可能在修改一個欄位時，把手機導覽也一起改掉。 |
| 成員管理頁 | 同類管理頁可以共用的內容骨架 | 可能把整頁誤認成一顆可以到處搬動的元件。 |
| 藍色、間距和圓角 | 讓多個畫面共用一致的設計值 | 可能以為換一組 Token 就能解決操作流程。 |
這些項目都和 UI 有關，只是工作的尺度完全不同。Vibe Coding 時如果不先拆開，AI 每次修改都像拿著一張「整間都可以動」的施工許可。
圖 2：左邊只說要改得更清楚；右邊先指出資料表、搜尋流程與手機版各自屬於哪一層。
我不打算替所有設計系統重新發身分證。這篇只需要一組後面 28 天都能使用的共同座標。
先抓四個會直接改變修改範圍的層級：
| 名稱 | 在 LumenDesk 裡的例子 | 描述需求時要說什麼 |
|---|---|---|
| Component（元件） | Button、Search Field、Status Badge、Data Table | 這個控制或資訊單位負責什麼、有哪些狀態、操作後發生什麼。 |
| Pattern（操作方式） | 輸入關鍵字、加入部門條件、查看結果、清除條件 | 使用者怎麼完成一段任務，失敗後又從哪裡接回來。 |
| Layout（版面） | 左側導覽加右側內容區 | 各區域如何排列，以及桌面與 360px 手機版怎麼轉換。 |
| Page Template（頁面骨架） | 標題、篩選區、主要資料區與新增操作 | 同類頁面要共用哪些結構，哪些內容可以替換。 |
圖 3：畫面上的虛線不是幾塊互不相干的區域。Search Field 是 Component，也會參與更大的搜尋組合與操作 Pattern。
這四個層級不是按照大小把畫面切成四塊，而是在回答四種問題。
Component 是能單獨指出責任的控制或資訊單位。Button 觸發動作，Status Badge 顯示狀態，Search Field 接收搜尋文字。
元件不一定只由一個 HTML 標籤組成。只要它對外有清楚責任，內部可以再包含圖示、文字與狀態；我們真正需要的是能說清楚「這次只改哪個控制」。
有些團隊會把 Search Field、部門條件和 Reset 這種共用狀態的一組控制叫 Compound Component。這個名稱可以用，但它仍屬於元件組合，不代表整段搜尋任務已經完成。
Pattern 描述的是使用者完成事情的方法，不一定有一條剛剛好的框線可以圈起來。
搜尋欄是一個 Component；輸入關鍵字、加入部門條件、查看結果、遇到無結果，再清除條件，合起來才是一段搜尋與篩選 Pattern。
AI 只做出一顆有放大鏡的輸入框，頂多算道具到齊，流程還沒開演。
Layout 負責區域的位置與空間關係。昨天 360px 的問題就在這一層：Sidebar 沒有重新安排，只是照著桌面寬度站在原地，把主要內容擠到畫面外。
所以「手機版把 Sidebar 縮小」不是完整策略。我們還要決定導覽入口搬去哪裡、主要內容保留哪些資訊，以及使用者能不能回到其他頁面。
成員、專案與活動紀錄頁，都可能保留頁面標題、篩選區、主要資料區和新增操作。資料換了，這組結構仍然存在，這就是 Page Template 在處理的範圍。
如果我只是要調整成員資料表，卻叫 AI「重做成員管理頁」，它很可能連 Header、篩選區和其他同類頁面的骨架一起動。指出 Template，就是在告訴它哪些共同結構這次不要碰。
顏色、間距、圓角和字級通常會透過 Design Token 跨元件共用。把停用按鈕套上 color.danger，可以讓危險操作看起來一致。
不過紅色只負責提醒風險，不會自動長出 Confirmation Dialog，也不會替我們決定停用成功或失敗時要顯示什麼。看到 Danger Token 就以為危險操作已經完成，差不多像貼完警告貼紙就宣布消防驗收通過。
Token 很重要，只是它回答的是「共用什麼設計值」，不是「使用者如何完成工作」。Design System 的範圍又更大，還會包含元件、Token、互動規則、內容寫法與使用說明。這些概念可以晚一點再展開，今天先別把它們全部塞回「元件」清單。
不同團隊對 Component、Pattern 或 Template 的邊界可能不完全一樣。這篇採用的分層是後續溝通的共用座標，不是唯一標準。團隊有自己的叫法沒問題，只要名稱對得上責任與修改範圍。
分完層後，我回頭重寫剛才那三句：
| 原本的說法 | 補上責任與邊界後 |
|---|---|
| 把成員管理元件改得更清楚 | 只調整 Data Table 的成員、部門、角色與狀態欄；Header、Sidebar 和整頁 Template 都不要改。 |
| 調整搜尋區塊 | 調整「搜尋與篩選 Pattern」：包含 Search Field、部門條件、結果數量、無結果與 Reset。 |
| 手機版把側邊欄收起來 | 重新設計 360px Layout：桌面 Sidebar 不保留在畫面上，完整導覽改由 Header 的選單入口開啟。 |
現在我可以在 AI 開始前先說「這次只動哪裡」，也能直接列出「哪些地方不要碰」。這才是分類真正帶來的好處。
英文名稱的用途是指出責任，不是增加 Prompt 的專業濃度。只把「那個東西」換成 Component，修改範圍仍然說不清楚，頂多是把模糊需求翻成英文。
如果你拿到一張參考圖，可以先忍住「照這張做」的衝動，請 AI 把畫面拆開：
請先分析這張成員管理頁，不要直接修改畫面。
請分開列出：
- Component：可單獨辨識的控制或資訊單位。
- Pattern：使用者完成搜尋、篩選或管理任務的操作流程。
- Layout：側欄與內容區的版面關係，以及 360px 時的轉換。
- Page Template：同類管理頁會保留的共同骨架。
若多個 Component 共用同一批狀態，請另外標記為元件組合。
若顏色、間距或圓角屬於共用設計值，請標記為 Design Token，不要拿它代替互動規則。
請用表格列出畫面項目、分類理由和目前仍缺少的規格。
先不要修改畫面，也不要把所有東西統稱為 Component。
拿到分類結果後，我會先檢查四件事：
其中一項混在一起，後面的修改範圍就還有洞。先在分析階段抓出來，總比 AI 改完整頁後，再玩「大家來找碴」省事。
今天我已經能說：「只改搜尋與篩選 Pattern，不動 Sidebar 和 Page Template。」
比昨天的「那個東西改好一點」準確多了。
但還不能直接叫 AI 開工。
這句話沒有說搜尋哪些欄位、輸入後何時更新、沒有結果怎麼辦，也沒寫清楚鍵盤和手機版要怎麼驗收。名稱替修改範圍畫出邊界，邊界裡要發生什麼，依然是一大片空白。
明天，我們再把這片空白填成 AI 能執行、我也能驗收的 UI Spec。
iThome鐵人賽
看影片追技術