想像一下你走進一家很喜歡的咖啡店。
桌椅的高度、菜單的字體、燈光的色溫——這些外觀讓你決定要不要坐下來。但讓你願意再來第二次的，是廚房裡你看不到的事：食材好不好、廚師動作快不快、結帳會不會慢。
網站也是一樣的兩個世界。前端是外場、後端是廚房，全端是兩邊都能下指令的老闆。
餐廳對照網站
| 餐廳 | 網站世界 | 你身為設計師熟悉的程度 |
|---|---|---|
| 內裝、桌椅、餐具、燈光 | UI 樣式、版面 | ★★★★★ Figma 早就在做 |
| 菜單字體、定價排版 | 字級、間距、按鈕 | ★★★★★ |
| 招牌、icon | logo、icon、視覺識別 | ★★★★★ |
| 點餐流程、結帳順序 | 表單流程、按鈕順序 | ★★★★ UX 流程 |
| 廚房 SOP、食材庫 | API、資料庫、伺服器 | ★ 不用會做，但要會給指令 |
| 會計系統、收銀 | 金流、會員紀錄 | ★ 不用會做，但要會給指令 |
注意最後兩列——設計師不用親自下廚，但平常你已經會做這件事：「會員登入後要不要記住偏好？」「結帳要不要寄 email？」這些都是後端決策，你早就在跟工程師討論。
那「全端」到底是學什麼？
不是學兩倍的東西
而是學「能對前後場都下需求」。
- 你不用親手寫資料庫 SQL（AI 寫）
- 你不用記住 API 是什麼語法（AI 處理）
- 你需要會的是：講清楚「這個按鈕按下去要把資料存到哪、回應什麼」——而這已經是你做需求文件的能力
為什麼設計師最吃這個比喻
因為餐廳的「外場」「廚房」分工，本來就是你工作的一部分。差別只在以前你跟工程師說、現在你跟 AI 說。AI 不會翻白眼、不會跟你討論進度，它只會立刻做出來給你看，再讓你挑毛病。
檢查
動手對照：拿你最熟的 App
挑 IG / Notion / Shopee 任一個，動手分類它的功能。
登入後可勾選保存進度。
讀取上次狀態…
反思
挑一個你最近想做的網站，列出它的「門面」和「廚房」各包含什麼。
例：作品集 → 門面（作品縮圖、自介、聯絡按鈕）；廚房（暫無，純靜態）。或：登入網站 → 門面（登入表單）；廚房（驗證密碼、發 token、記住誰登入過）。
登入後即可寫下你的反思（自動儲存）。在這個 lesson 寫下的任何文字 僅你自己看得到。
下一節我們把這套世界觀用在更實用的問題上：這個網站每個人看到的都一樣嗎？——這就是「靜態 vs 動態」。