第五章

學會描述你看到的東西

這是整本指南最有「字典」功能的一章。你在網頁上看到的每一個元件、每一個行為，都有名字。學會這些名字，你就能用一句話讓 AI 精準理解你要什麼。

A. 網頁結構（骨架）

一個網頁就像一棟房子，有屋頂、牆壁、地板、房間。每個部位都有專門的名字。你不會跟裝潢師傅說「那個上面的東西」，你會說「天花板」。

術語 白話 在哪裡 你可以這樣跟 Claude 說
Header 頁首，最上面那一條 網頁最頂部，通常放 Logo 和導覽列 「Header 的背景色改成深藍色」
Footer 頁尾，最下面那一條 網頁最底部，通常放版權、聯絡資訊 「Footer 加一個 Email 聯絡連結」
Hero 首頁最大的那塊區域 進入網站第一眼看到的大圖+大標題 「Hero 的標題改成『歡迎光臨』」
Section 一個區塊 頁面中的每個主題段落 「在『功能介紹』section 下面加一個新的 section」
Sidebar 側邊欄 頁面左側或右側的窄欄 「Sidebar 要固定不動，不跟著滾」
Modal 彈出視窗 畫面中間跳出的白色方塊，背後變暗 「按『刪除』的時候要彈一個 Modal 確認」
Navbar 導覽列 Header 裡面那排連結按鈕 「Navbar 多加一個『部落格』的連結」
Card 卡片 一個有邊框的小區塊，裡面放圖+文字 「商品列表用 Card 排列，一排三張」
Button 按鈕 你可以點擊的那個東西 「『送出』Button 改成綠色，hover 時變深綠」
Form 表單 讓你填資料的區域（輸入框+按鈕） 「聯絡 Form 加一個『手機號碼』欄位」
記憶技巧
Header / Footer = 頭 / 腳
Hero = 英雄（首頁最醒目的那一塊，像英雄一樣站 C 位）
Modal = 「強制對話框」（你不處理它，後面的東西都按不到）
Card = 卡片（想像 Pinterest 或 IG 的方塊排列）

B. UI 元件（互動元件圖鑑）

這些是你天天在用但可能叫不出名字的東西。學會這些名字，你就能精準地告訴 AI「我要的是哪種東西」。

你看到的 術語 白話 你可以這樣跟 Claude 說
三條橫線 Hamburger Menu（漢堡選單） 手機版的選單按鈕，按了會展開完整選單 「手機版加一個 Hamburger Menu，點開後顯示所有連結」
按了往下展開的選單 Dropdown 下拉選單，點一下展開選項 「用 Dropdown 讓使用者選縣市」
左右切換的小開關 Toggle / Switch 開/關切換器，像電燈開關 「Dark Mode 用一個 Toggle 切換」
一排可以點的標籤 Tab 頁籤 同一個區域切換不同內容 「商品頁用 Tab 分『規格』和『評價』」
FAQ 展開收合的區塊 Accordion（手風琴） 點標題展開內容，再點收回去 「FAQ 用 Accordion，預設全部收合」
自動左右滑動的圖片 Carousel / Slider（輪播） 圖片或內容像跑馬燈一樣輪流顯示 「首頁 Banner 用 Carousel，3 秒換一張」
滑鼠移上去出現的小提示 Tooltip（提示框） 像便利貼一樣的小說明 「Icon 旁邊加 Tooltip 解釋功能」
右下角的圓形聊天按鈕 Chat Widget / FAB 浮動在右下角的圓形按鈕（FAB = Floating Action Button） 「右下角加一個 FAB，點了打開客服聊天室」
上方或下方滑出的通知條 Banner / Toast Banner = 固定在最上面的通知條
Toast = 短暫出現幾秒後消失的提示		 「存檔成功後顯示一個綠色 Toast」
轉圈圈的讀取動畫 Spinner / Loading 「等一下，東西還在載入」的視覺提示 「API 載入時顯示 Spinner，載完再顯示資料」
滑到底自動載入更多 Infinite Scroll（無限滾動） 滑到底部自動載入下一批內容（像 FB 動態牆） 「文章列表用 Infinite Scroll 取代分頁」
底部的 1 2 3 ... 下一頁 Pagination（分頁） 把內容分成多頁，底部有頁碼可以跳 「搜尋結果用 Pagination，每頁 20 筆」
方框打勾 / 圓形選一個 Checkbox / Radio Button Checkbox = 可以多選（方框）
Radio = 只能選一個（圓形）		 「興趣欄位用 Checkbox（可多選），性別用 Radio」
拖拉橫桿調整數值 Slider / Range 用拖拉的方式選數值範圍（像音量條） 「價格篩選用 Slider，範圍 0 到 10000」
「確定要刪除嗎？」的彈窗 Dialog / Modal 強制你回應的彈出視窗 「刪除前彈一個確認 Dialog」
從側邊滑出的面板 Drawer（抽屜） 從螢幕左邊或右邊滑出來的面板 「購物車用 Drawer，從右邊滑出」

容器與佈局元件

術語 白話 用在哪
Container 容器，限制內容寬度的外框 頁面中間那個有邊界的區塊
Wrapper 包裹器，把一組東西包在一起 把好幾張卡片包成一組
Grid 網格排版 商品列表的棋盤式排列
Flexbox 彈性排版 一排按鈕自動均分空間
Icon 小圖示 選單旁邊的小符號（齒輪、放大鏡、鈴鐺）
Avatar 頭像 使用者大頭照的圓形小圖
Badge 徽章/數字標記 購物車上面的紅色數字「3」
Breadcrumb 麵包屑導航 首頁 > 商品 > 手機 > iPhone
Skeleton 骨架屏 載入中時的灰色佔位區塊
Divider 分隔線 段落之間的一條橫線
Modal vs Drawer vs Toast 的差別
Modal = 畫面正中間彈出，背後變暗，你必須處理它。
Drawer = 從旁邊滑出來，可以半覆蓋畫面。
Toast = 角落短暫出現幾秒就自己消失，不需要你做任何動作。

干擾程度：Modal > Drawer > Toast

C. 網頁行為（動態表現）

這些不是「東西」，而是網頁的「行為」。它們描述的是「頁面會怎麼動」。

現象（你看到的） 術語 白話 你可以這樣跟 Claude 說
手機和電腦看到的排版不同 RWD（Responsive Web Design） 響應式設計——同一個網頁在不同螢幕大小自動調整排版 「這個頁面要做 RWD，手機版一欄、桌機版三欄」
選單一直釘在最上面不動 Sticky Header 網頁往下滾，Header 固定不動一直在最上面 「Header 做成 Sticky，滾動時固定在頂部」
往下滾時，東西慢慢飛進來 Scroll Animation 滾動到某個位置時，元件播放進場動畫 「Card 區塊加 Scroll Animation，滾到時淡入」
點連結後滑順地滾到那個位置 Smooth Scroll 點了錨點連結後，頁面順滑地滾動（不是瞬移） 「目錄的連結用 Smooth Scroll 跳到對應段落」
背景和前景滾動速度不一樣 Parallax（視差效果） 前景滾快、背景滾慢，產生立體感 「Hero 區域加 Parallax，背景圖滾動速度減半」
整個網站變黑底白字 Dark Mode 深色模式，保護眼睛（晚上看比較舒服） 「加一個 Dark Mode Toggle，切換深色/淺色」
第一次用時一步一步的教學引導 Onboarding 新手引導——用彈窗或高亮一步步教你怎麼用 「新使用者第一次登入時跑一個 Onboarding 流程」
可以用滑鼠拖拉移動東西 Drag & Drop 拖放操作——用滑鼠抓起一個東西拖到另一個位置 「任務清單支援 Drag & Drop 重新排序」

D. CSS 最低限度知識

你不需要會寫 CSS，但你要能精準描述。

這就像你不需要會裁縫，但你去量身訂做西裝時，你要能說「袖子短一公分」而不是「那邊改一下」。

CSS 負責的事：顏色、大小、間距、排版、動畫、響應式。
你只要學會「怎麼用中文精準描述這些東西」。

不要這樣說 vs 要這樣說

不要這樣說
「那個按鈕太醜了」
要這樣說
「『送出』按鈕的圓角太大，
改成 8px；背景色太亮，
改成 #2563eb；hover 時
加 0.1 秒的過渡效果」
不要這樣說
「字跟旁邊的東西太近了」
要這樣說
「Card 的 padding 太小，
內容跟邊框太擠，
改成 padding: 24px」
不要這樣說
「手機上看起來怪怪的」
要這樣說
「手機版（< 768px）的
grid 從三欄改成一欄，
字體從 16px 改成 14px」
不要這樣說
「顏色不好看」
要這樣說
「主色改成 #d4845a（暖橘），
背景用 #0f0f0f（深黑），
文字用 #e0e0e0（淺灰）」

常用 CSS 描述詞彙

你想表達的 CSS 術語 白話
東西跟邊框的距離 padding 「內距」——內容跟自己邊框的距離
這個東西跟隔壁的距離 margin 「外距」——這個元件跟旁邊東西的距離
圓角 border-radius 角落圓不圓——0px 是直角，50% 是圓形
陰影 box-shadow 讓元件看起來浮起來的陰影效果
滑鼠移上去 hover 滑鼠游標移到上面時的變化
透明度 opacity 0 = 完全透明，1 = 完全不透明
排版方式 flexbox / grid Flex = 一條線排列；Grid = 像表格一樣排
固定不動 position: fixed / sticky Fixed = 永遠釘在螢幕某處；Sticky = 滾到它時才釘住
動畫過渡 transition 「從 A 狀態變到 B 狀態要花多久」——讓變化不要太突兀
超出範圍怎麼辦 overflow 內容太多塞不下時——hidden 裁掉 / scroll 加捲軸 / auto 自動判斷

Global CSS vs !important

Global CSS = 社區公約
「全社區的房子統一用白色外牆」——這是全域的 CSS 規則，所有元件都遵守。

!important = 法院強制執行令
「不管社區公約說什麼，這面牆必須是紅色」——!important 會覆蓋所有其他規則，強制套用。

濫用 !important 就像什麼事都告上法院——系統會亂掉。正常情況下，靠更精確的選擇器（selector）就能解決。
跟 Claude 說的時候
如果你改了樣式但沒有效果，可以跟 Claude 說：
「這個按鈕的顏色改不動，可能是被 global CSS 或 !important 覆蓋了，幫我查一下 CSS 優先級。」
跨瀏覽器相容性
不同瀏覽器（Chrome / Safari / Firefox）對 CSS 的渲染可能有微小差異。如果你發現「在我電腦上好好的，別人的卻跑版」，通常是瀏覽器相容性問題。這時候跟 Claude 說「請加上 -webkit- 前綴」或「請確認跨瀏覽器相容性」就好。

E. 瀏覽器三劍客

在 AI 工具生態裡，有三種不同的「看網頁」方式，搞清楚它們的差別很重要。

工具 比喻 你在哪 適合做什麼
Chrome DevTools 自己拿放大鏡檢查 你親手操作你自己的瀏覽器 看 CSS、查元素、看 Network 請求、Debug
Playwright 請機器人開一台新車去跑 一個全新的瀏覽器（不是你的），自動化操作 自動測試、截圖、批量操作、E2E 測試
Claude in Chrome 你坐副駕，Claude 幫你開你的車 你的瀏覽器，Claude 用 MCP 控制它 看到你看到的畫面、幫你操作你的瀏覽器
常見搞混
「幫我用 Playwright 打開我的 Gmail」

不行。Playwright 開的是全新瀏覽器，
你沒有登入，看不到你的 Gmail。
它適合「測試公開網頁」，
不適合「操作你已登入的東西」。
正確用法
要操作你已登入的網站
→ 用 Claude in Chrome

要自動測試公開頁面
→ 用 Playwright

要自己手動查問題
→ 用 Chrome DevTools

「右鍵 → 檢查」——非技術人員最該學的一招

這一招的價值超過你想像。

在任何網頁上按「右鍵 → 檢查」（或按 F12），你會看到 Chrome DevTools。
不用害怕，你不需要看懂所有東西。你只需要會做一件事：

用「選取元素」工具（左上角的游標圖示），點一下畫面上的任何東西，
就能看到它的 HTML 標籤名稱和 CSS 樣式。

為什麼這很重要？因為你可以這樣跟 Claude 說：

不會用 DevTools 的人
「那個按鈕的顏色不對」
「第三排的圖片跑掉了」
「有一塊不知道為什麼空白」
會用 DevTools 的人
「class 叫 .btn-primary 的按鈕
背景色是 #ccc，應該改成 #2563eb」

「#product-grid 的第三個 .card
圖片 width 超出容器了」

「.hero 下面有個 margin-bottom: 80px
造成太大的空白」
實作練習
現在就試試看：
1. 在這個頁面按「右鍵 → 檢查」
2. 點左上角的游標圖示（Select Element）
3. 把滑鼠移到這個綠色框框上
4. 你會看到它的 class 是 box box-tip

恭喜你，你學會了非技術人員最強大的偵查技能。

F12 開發者模式：你最該學的一招

步驟超簡單，照做就好：

1. 在任何網頁上按 F12（Mac 用 Cmd + Option + I）
2. 點左上角的「箭頭圖示」（Select Element）
3. 滑鼠移到你想改的東西上面，點一下
4. 右邊會顯示這個元素的 HTML 和 CSS
5. 你就知道它叫什麼 class、用了什麼樣式
學會這招的威力
學會這招之後，你再也不用跟 LLM 說「那個藍色的上面的東西」。你可以直接說「class 叫 .hero-title 的 h1，font-size 改成 36px」。精準度提升 10 倍。

如果你在 DevTools 裡看不懂那些 CSS，沒關係。把你在 DevTools 看到的 HTML 結構直接複製，貼給 Claude，說「幫我改這個元素的樣式」。Claude 看到 HTML 就知道要改什麼了。

F. 怎麼跟 LLM 精準描述

以上學的所有術語，最終目的只有一個：讓你用一句話就講清楚，省掉三輪來回。

不要這樣說
「那個圖片太大了」
要這樣說
「Hero 區塊的背景圖在手機版
超出容器（overflow），
請加 object-fit: cover
並設 max-height: 300px」
不要這樣說
「按鈕按了沒反應」
要這樣說
「.submit-btn 的 click event listener
沒有綁定，或是被 z-index 較高的
overlay 擋住了，請檢查 DOM 層級」
不要這樣說
「手機版跑版了」
要這樣說
「在 viewport width 375px 時，
Navbar 的 flex-wrap 沒設定，
導致選單項目溢出。請加
@media (max-width: 768px) 的 RWD 樣式」
不要這樣說
「字跟字太擠了」
要這樣說
「.card-body 裡的 p 標籤
line-height 只有 1.2，請改成 1.6，
然後段落之間加 margin-bottom: 16px」

描述公式

哪個元件 + 什麼屬性 + 改成什麼 + 什麼時候

範例：「.btn-primary 按鈕的 background-color 改成 #2563eb，hover 時改成 #1d4ed8」

四個資訊一次到位，AI 一輪就能做。

各場景描述範例

你想做的事 精準的說法
改按鈕顏色 「把 .btn-primary 的 background-color 從 #ccc 改成 #2563eb」
加一個彈窗確認 「按『刪除』時彈一個 Modal，有『確定』和『取消』兩個按鈕」
改手機版排版 「螢幕寬度 < 768px 時，Card Grid 從三欄改成一欄」
選單固定在上面 「Navbar 做成 Sticky Header，background 加 blur 效果」
加一個聊天按鈕 「右下角加一個 FAB（圓形按鈕），點了打開一個 Drawer 顯示聊天室」
通知使用者操作成功 「表單送出成功後，右上角顯示一個綠色 Toast，3 秒後自動消失」
FAQ 區塊 「FAQ 用 Accordion 排列，預設全部收合，點標題展開答案」
圖片輪播 「Banner 區域做一個 Carousel，自動播放，底部加圓點指示器」
表格太多資料 「資料列表加 Pagination，每頁 20 筆，底部顯示頁碼」
篩選用拖拉桿 「價格篩選改成 Range Slider，最小值 0 最大值 50000」
新手引導 「新使用者首次登入時跑 Onboarding Tour，用 Tooltip 高亮每個功能區」
暗色模式 「Header 右上加 Dark Mode Toggle，用 CSS Variables 切換色彩主題」

進階技巧：截圖 + 標註

最強描述法
當文字描述不夠的時候，截圖 + 用紅框圈起來 + 文字標註是最快的。

你可以這樣跟 Claude 說：
「看這張截圖，紅框圈起來的 Card 區塊，padding 太小，文字跟邊框太擠。幫我改成 padding: 24px，然後加 border-radius: 12px 和 box-shadow。」

一張圖 + 一句話，抵過十輪對話。

本章術語總表

類別 術語 一句話解釋
網頁結構 Header 頁面最上面那一條
Footer頁面最下面那一條
Hero首頁最大最醒目的那塊
Section頁面中的一個主題區塊
Sidebar側邊窄欄
Modal正中間彈出的對話框
Navbar導覽列（選單連結那一排）
Card卡片式的小區塊
Button可以按的按鈕
Form填資料的表單
UI 元件 Hamburger Menu 三條線的手機版選單按鈕
Dropdown往下展開的選單
Toggle / Switch開/關切換器
Tab頁籤，同區域切換內容
Accordion展開/收合的區塊
Carousel / Slider輪播（自動左右滑）
Tooltip滑鼠移上去的小提示
FAB / Chat Widget右下角浮動圓形按鈕
Banner / Toast通知條 / 短暫提示
Spinner / Loading轉圈圈載入動畫
Infinite Scroll滑到底自動載入更多
Pagination分頁（1, 2, 3... 下一頁）
Checkbox / Radio多選框 / 單選框
Range Slider拖拉橫桿選數值
Dialog確認對話框
Drawer從側邊滑出的面板
網頁行為 RWD 響應式設計，不同螢幕自動排版
Sticky Header滾動時固定在頂部的 Header
Scroll Animation滾到時播放進場動畫
Smooth Scroll點連結後平滑滾動
Parallax背景和前景滾動速度不同的視差效果
Dark Mode深色模式
Onboarding新手引導教學
Drag & Drop拖拉放置操作
瀏覽器工具 Chrome DevTools 自己拿放大鏡看（右鍵 → 檢查）
Playwright機器人開新瀏覽器自動測試
Claude in ChromeClaude 幫你操作你的瀏覽器
本章重點
看到 → 認出名字 → 精準描述 → AI 一次到位。

你不需要會做這些東西，但你需要會「指」。
就像你去餐廳不需要會做菜，但你要會看菜單——
「松露奶油燉飯」跟「那個白白的飯」，出來的東西完全不同。