前言¶
想做 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
