Apple 網頁設計 是做什麼的？
這是一套專為需要像原生 iPhone 應用程式或 Apple.com 產品頁面那樣感受的網頁應用程式而設計的語言。它是在一個已上架的膳食規劃 app 中，以真實的 iPhone 為基礎逐一畫面測試、修正而成的（其單一的 index.html 就是參考實作）。這裡的所有東西都是純 CSS 與原生 JavaScript，沒有任何框架或函式庫，所以可以輕鬆放入任何專案中。
目標是從頭到尾打造一個安靜的產品：淺灰頁面、白色區塊、一個藍色強調色、大膽自信的字體，以及每一次點擊都以原地動畫回應。沒有東西會跳動，不會重繪整個畫面，輸入的文字與捲動位置永遠不會遺失。
如何使用這個技能
- 全新的 UI： 首先將
references/tokens.css貼入頁面。然後根據references/components.md中的元件配方建立畫面。如果 UI 會根據狀態重新渲染，再加入assets/morph.js與references/motion.md的動畫層。 - 現有的 UI： 保留專案的結構與資料。將顏色、字體與形狀替換為 token，然後逐個轉換元件。不要為了重新設定樣式而重寫邏輯。
- 玻璃效果： 只有在使用者想要 Liquid Glass / iOS 26 玻璃效果（標籤列、浮動按鈕、toast、sheet 按鈕）時，才閱讀
references/liquid-glass.md。 - 深色展示畫面（啟動畫面、像是派對或專注模式等「模式」畫面）：閱讀
references/keynote.md。 - 在宣告完成之前： 執行
references/checklist.md— 在 390×844 解析度下分別拍攝淺色與深色模式的螢幕截圖。 - 如果這個應用程式將會銷售（在 App Store 或商業用途）：先閱讀
references/commercial.md。有些最像 Apple 的細節正是 Apple 會反對的地方。
只閱讀你需要的參考文件；每一份都是獨立的。
核心規則（為什麼它們很重要）
顏色：一個強調色，節制使用。 頁面 #f5f5f7，區塊 #fff，文字 #1d1d1f，次要文字 #6e6e73，動作藍色 #0071e3（深色模式：#000 / #1d1d1f / #f5f5f7 / #86868b / #2997ff）。藍色代表「你可以在這裡操作」，所以它只用在主要按鈕、連結、選中的標籤和進度條上 — 不會用於裝飾。狀態顏色（--ok 綠色，--warn 琥珀色，--bad 紅色）只能用來傳達意義。其他色調（水藍色、步驟橘色）只有在它們始終如一地用於標記某一類資料時才允許使用。品牌漸層（如果有的話）只能放在一個特殊的畫面上。
深色模式跟隨手機設定。 每一種顏色都是一個 CSS 變數，並在 prefers-color-scheme: dark 下重新定義。深色模式是真正的黑色頁面搭配 #1d1d1f 區塊，陰影關閉（--shadow:none），因為陰影在黑色背景上看起來像灰塵。
字型決定層級，而不是框線。 系統字型堆疊（-apple-system, BlinkMacSystemFont, system-ui, sans-serif，在 Apple 裝置上會使用 SF 字型），17 px 內文，大字體使用緊密的負字距：
- 頁面標題 40–48 px 粗體，−0.035em，結尾加上句號：「食譜。」— 這是 Apple.com 的標題語氣。
- 雙色調章節標題，24 px 粗體：前半段用文字色，後半段用灰色：「食材清單。還缺 15 項。」。兩個部分結尾都要加上句號。
- 大數字使用細字重（200–300）且尺寸巨大（38–72 px），加上
font-variant-numeric: tabular-nums以免數字變動時抖動。較小的統計數字（規格列）則使用 600 字重。 - 說明文字 13–14 px 灰色。不要低於 12 px。
形狀：無邊框區塊、藥丸形狀、寬敞的間距。 圓角半徑 8 / 14 / 22 / 28 px；區塊沒有邊框，只有非常柔和的陰影（0 4px 18px rgba(0,0,0,.06)）。區塊內部的行之間以一條從文字開始處（而非邊緣）的細線分隔（iOS 內嵌分隔線）。按鈕是藥丸形狀（border-radius: 999px）：主要按鈕為藍色實心搭配白色文字，次要按鈕為灰色實心搭配藍色文字，破壞性按鈕為灰色實心搭配紅色文字。照片在其區塊內緊貼邊緣。
佈局：單欄，手機優先。 max-width: 720px 置中，16 px 側邊間距，每個固定邊緣皆有安全區域內縮（env(safe-area-inset-*)），底部 110 px 內距讓內容不會被標籤列遮擋。觸控目標 ≥ 44 px。
動畫：一切都在原地移動。 使用 DOM morph 而非 innerHTML 來重新渲染，讓節點得以保留；新行展開進入，移除的行以淡出殘影離開，移動的行滑動（FLIP），改變的數字滾動，藥丸滑動，sheet 彈出，按鈕按壓（縮放到 .96，使用彈簧曲線）。兩種曲線幾乎涵蓋所有情況：--spring: cubic-bezier(.3,1.4,.5,1)（按壓、小彈跳）與 --ease: cubic-bezier(.2,.8,.2,1)（淡入淡出、條狀動畫）；iOS 自身的 cubic-bezier(.32,.72,0,1)（無過衝）用於 sheet 與大型移動。在 prefers-reduced-motion: reduce 設定下，所有動畫都會關閉 — 請檢查這個設定，不要假設它不會啟用。
文案：簡短、人性化、Apple 語調。 標題句尾加句號，按鈕使用動詞（「我完成了」、「加入」），數字根據語言區域格式化（toLocaleString(lang)；立陶宛語使用空格作為千位分隔符並使用逗號作為小數點），不使用驚嘆號，介面元素中不使用表情符號（表情符號作為內容圖示是可以的，例如 🍸 代表飲料條目）。錯誤訊息應說明接下來該怎麼做。
已做出的決定（不必重新討論）
這些來自於建立參考應用程式時的實際回饋：
- 主要藍色動作按鈕即使在玻璃 UI 內部也保持實心藍色 — 曾嘗試過半透明玻璃藍色按鈕，但被拒絕了。
- Liquid Glass 預設開啟，但使用者可以切換，並提供強度滑桿；內容卡片保持實心以確保文字可讀性。玻璃效果僅用於浮動的介面元素。
- 照片使用食譜/產品圖片；不使用插圖或庫存圖裝飾。
- 有疑問時以 iOS 26 的行為為準：標籤列以膠囊形式浮動，向下捲動時收成小按鈕；玻璃效果在手指下會膨脹（放大）而不是下沉。
- 每個標籤記得自己的捲動位置；點擊作用中的標籤會捲動到頂端。
- Toast 可以向上滑動關閉，並且對於每個破壞性或變更資料的點擊操作都有一個「取消 / 復原」動作。
檔案
references/tokens.css— 完整的 token 區塊（淺色 + 深色、圓角半徑、陰影、曲線）。直接貼上即可。references/components.md— 每個元件的可複製 HTML + CSS，附帶行為說明。references/motion.md— 動畫輔助函式、morph 鉤子、FLIP、數字滾動、標籤切換、sheet、滑動與長按手勢、觸覺滴答聲、減少動態效果。references/liquid-glass.md— iOS 26 玻璃材質、Chromium 折射透鏡、可收起的標籤列。references/keynote.md— 用於一個特殊畫面的黑色「keynote」風格。references/checklist.md— 審查清單與螢幕截圖腳本。references/commercial.md— 在銷售以此風格製作的應用程式前需要修改的內容。assets/morph.js— 70 行的 DOM morph（有鍵值的行、焦點與輸入安全、回退到 innerHTML）。