Apple Web

建立像 apple.com 一樣的產品行銷頁面：寧靜、自信、以字型為主導，且動畫服務於產品。此技能中的每個數值都來自於從真實 apple.com 產品頁面（2026 年 11 月）量測所得，並記錄於 reference/measured-tokens.md。

這是一套風格系統，而非克隆。切勿抄襲 Apple 的文案、產品名稱、標誌、攝影作品、圖示或字型檔案。請為使用者的產品撰寫原創內容。

檔案

路徑	用途
`library/apple-web.css`	代碼記號、字型類別、版面配置、元件。請優先連結此檔案。
`library/apple-web.js`	捲動揭示、黏性導覽列狀態、捲動驅動動畫、圖庫、計數動畫。無外部相依。
`demo/index.html`	一個完整的使用所有元件的運作中頁面。將其複製為起始點。
`reference/measured-tokens.md`	原始量測數據：字型比例、色彩、圓角、緩動、斷點。
`reference/page-anatomy.md`	Apple 產品頁面的區段排列順序與結構。
`reference/anti-slop.md`	讓頁面看起來像是 AI 生成的特徵，以及 Apple 風格的修正方式。

將 library/ 資料夾複製到專案中。在 <head> 中連結 apple-web.css，並以 defer 屬性載入 apple-web.js。
從 demo/index.html 開始。遵循 reference/page-anatomy.md 中的區段順序。
先撰寫文案。標題為 2–5 個單字並以句號結尾（例如「快速。真的很快速。」）。內文為灰色，包含一個以白色標示的重點片語。
每個區段選擇一個主題：theme-dark（黑色）、theme-light（#f5f5f7）或 theme-white。在長段落中交替使用，相同主題最多連續三個區段。
在完成前執行下方的檢查清單。

字型

只使用一個字型家族。在 Apple 裝置上使用系統 SF Pro，在其他裝置上使用 Inter（CSS 中的字型堆疊會處理此問題）。不使用第二個顯示字型，也不使用襯線字型做強調。
每個標題使用字重 600。內文使用 400。絕不使用 700–900，也絕不使用 300。
字距隨尺寸變化：內文（17px → -0.022em）和主視覺（64px+ → -0.009em）為負值，19–32px 則略微正值。請使用字型類別；切勿到處設定單一 letter-spacing。
行銷區段的標題簡短且置中；與媒體並排的鎖定版面中則靠左對齊。
深色區段的內文顏色為 #86868b；使用 <strong> 強調片語（呈現為 #f5f5f7，相同字重）。內文不得使用粗體。

色彩

版面配置

動畫

UI 狀態的緩動曲線 cubic-bezier(0.4, 0, 0.6, 1)；持續時間：懸停 100ms、透明度 240ms、顏色/導覽列 320ms，捲動揭示最長可達 1 秒。
揭示效果為透明度 + 30–40px 的上升，僅在元素進入視口約 15% 時觸發一次。同層級元素錯開 80–120ms。
產品時刻使用捲動驅動動畫（進度與滾動位置綁定），而非自動播放。
磚格懸停：媒體內容輕微縮放 1.02，絕不移動卡片陰影。
prefers-reduced-motion：所有動畫變為即時淡入。程式庫已處理此邏輯。

導覽列

44px 的全域導覽列，隨後是一個 52px 的黏性區域導覽列，左側為產品名稱，右側為連結 + 小型藍色「購買」膠囊按鈕。一旦固定，它會變成半透明（blur(20px) saturate(180%)）。

請參閱 reference/anti-slop.md 以取得完整列表與修正方式。