前言¶
想做 Apple 官網那種頁面時，常見痛點是：配色往純黑純白里加點綴，字號忽大忽小，動效要麼沒有要麼過頭，最後看起來像“仿蘋果”，不像一套能複用的風格規範。下面介紹的 Skill 把 Apple 官網設計的幾個維度拆成可執行的規則，並附帶頁面生成器和風格檢查器，用於產出和校驗 Apple 風格 HTML。
這是什麼¶
Apple 設計風格——極致簡約的人文科技 是 SkillHub 上的一個社區 Skill，座標 @user_2af611f4/apple-design-style，版本 1.2.0，分類 design-media，來源 community，發佈者 user_2af611f4，標籤 requires_api_key=false。官方頁面顯示評分 100000，下載 1310，安裝 0。
它解決的問題是：把 Apple 官網在配色、排版、佈局、交互、影像、文案上的做法整理成一套可複用的 Skill，並提供兩個工具——頁面生成器（輸入產品信息產出 Apple 風格 HTML）和風格檢查器（給現有頁面打分）。觸發詞包括「Apple 風格」「蘋果設計」「極簡科技感」「Keynote 風格」。
核心功能¶
Skill 覆蓋的設計維度如下：
- 配色：黑白灰爲主，配少量高飽和點綴。
- 排版：SF Pro Display / Text，超大字重標題。
- 佈局：垂直卡片流，配合粘性滾動。
- 交互：漸進式動畫，配合視差滾動。
- 影像：3D 產品渲染，極簡場景。
- 文案：短句，留白呼吸。
內置工具有兩個：
- 頁面生成器：輸入產品信息，一鍵產出 Apple 風格 HTML。
- 風格檢查器：讀取現有頁面，給出風格打分。
v1.2 相比之前新增：
examples/下 3 個可直接打開的示例頁。- 增強版生成模板：包含規格參數表、滾動漸顯、小屏適配。
38項腳本測試。
安裝與啓用¶
Skill 基於通用 SKILL.md 格式，可在支持該格式的 Agent 客戶端中加載。官方地址：
https://api.skillhub.cn/user_2af611f4/apple-design-style
SkillHub 頁面地址：
https://www.skillhub.cn/skills/user_2af611f4/apple-design-style
添加方式以 SkillHub 頁面說明爲準。已抓取資料裏沒有給出 Cursor、Codex CLI、Claude Code 各自的獨立安裝命令，這裏不補寫。該 Skill 標籤爲 requires_api_key=false，按資料無需額外 API key。
典型用法¶
- 先看示例頁。打開
examples/下的 3 個示例頁，確認整體版式、配色比例和滾動效果，作爲產出基線。 - 生成頁面。向頁面生成器提供產品信息，例如產品名、核心賣點、規格參數，得到一份 Apple 風格 HTML。增強版模板已內置規格參數表、滾動漸顯和小屏適配。
- 校驗現有頁面。把已有 HTML 交給風格檢查器，得到打分和風格偏離點，再按配色、排版、佈局、交互、文案逐項調整。
- 複用規則。PPT 排版和品牌視覺策劃時，可按同一套維度取色、取字重、控制留白，不必重新發明規範。
適用場景與注意¶
適合需要復刻 Apple 官網風格的頁面設計、PPT 排版和品牌視覺策劃。
需要注意：
- 它是風格規範和生成工具，不是 Apple 官方素材庫。商標、產品圖、受版權保護的圖片仍需自行確認授權。
- 生成結果要人工覈對：小屏適配、滾動漸顯、粘性滾動在不同瀏覽器上可能表現不同，38 項腳本測試覆蓋的是腳本行爲，不等於全瀏覽器兼容。
- 風格檢查器的打分用於定位偏離點，最終仍要由人判斷視覺取捨，例如高飽和點綴的使用比例。
結尾¶
這個 Skill 的價值在於把“Apple 風格”從感覺變成可執行的維度和可校驗的工具：配色、排版、佈局、交互、影像、文案有明確規則，頁面生成器負責產出，風格檢查器負責驗收。需要時從這裏開始：
https://api.skillhub.cn/user_2af611f4/apple-design-style
