企业官网建设流程全解析

Apple 风格设计系统实现指南：从 DESIGN 规范到 OpenDesign 可执行 Token 体系

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design

导读

本文以 OpenDesign 仓库内置的design-systems/apple设计系统包为主线，完整解读一套以「Apple 启发」为蓝本的 web 设计语言：从二进制章节节奏、SF Pro 排版层级、单一蓝色强调体系，到胶囊 CTA 与克制深度原则。文章不仅完整覆盖 DESIGN-id.md 的九大章节规范，还深入 tokens.css 的 token 绑定决策与 lint-artifact.ts 的审查规则，说明这套品牌语言如何被编译为 Agent 可直接粘贴执行的结构化设计 Token。读完本文，你将掌握 Apple 风格界面从「视觉意图 → 设计 Token → 组件实现 → 代码审查」的完整落地链路，并可直接在 OpenDesign 的 Design System 界面或项目创建流程中选用该包。

一、包结构与它在 OpenDesign 中的角色

在 OpenDesign 中，每个设计系统都是一个「便携式设计系统包」（portable design-system package）。据 design-systems/README.md，目前捆绑目录包含151 个包，每个捆绑包具有相同的最小机器可读结构：

design-systems/<slug>/ ├── manifest.json ├── DESIGN.md └── tokens.css

• manifest.json：稳定的发现元数据、来源与声明路径（apple 包清单）；
• DESIGN.md：面向 Agent 的规范设计散文（本项目另有 18 种语言翻译，包括本文章所依据的 DESIGN-id.md）；
• tokens.css：编译后的语义 token 样式表，是规范的机器可读形态。

Apple 包还额外声明了丰富文件：design-tokens.json、tailwind-v4.css、components.html、components.manifest.json、USAGE.md、preview/（colors、typography、spacing 三页）与source/（evidence 与 token 契约报告）。这些字段是运行时输入而非结构占位符：提示词组合会消费USAGE.md、tokens.css、组件信息、导入模式与 craft 绑定；包/静态文件 API 只暴露声明过的 preview/source 文件，不扩大文件系统边界。

manifest.json还声明了该包的 craft 绑定：

"craft": { "applies": [], "suggested": ["color", "accessibility-baseline"], "exemptions": [] }

这意味着选用 Apple 包时，系统会建议配套 color.md 与 accessibility-baseline.md 两条 craft 约束。目录扫描在每次/api/design-systems请求时执行，修改包后刷新 Design System 界面即可，无需重启 daemon。

命名规范提示：目录 slug 必须与manifest.id一致并使用规范化 ASCII；files.design固定为DESIGN.md、files.tokens固定为tokens.css；运行时 manifest 元数据优先于旧版 Markdown H1 与> Category:约定（后者仅作为旧包的兼容回退，详见 docs/design-systems.md）。

二、视觉主题与氛围：一套系统、两种齿轮

Apple 的 web 语言是一套「精确的编辑系统」，在「画廊般的宁静」与「零售密度的信息块」之间切换。视觉基调始终保持克制：宽阔的中性画布、安静的界面铬（chrome）、以及几乎承担全部表达重量的产品摄影。界面被设计为「消失」，让硬件、材质与工艺选项成为叙事的绝对前景。

文档基于五个被分析的页面（apple.com首页、Environment、Store、iPhone 购买流程与配件商店，见 DESIGN-id.md 第 2 节引用），总结出一致但非单一的节奏：

• 营销表面（首页与 Environment）使用电影化的「黑白章节」；
• 商业表面（Store 与 Shop 流程）引入更紧凑的间距、更多工具控件与更密集的卡片堆叠，但不破坏核心品牌语法。

结果是一套系统、两种齿轮：showcase（展示）模式与 transaction（交易）模式。

关键特征清单

这套「章节节奏」并非营销话术，而是被 tokens.css 显式编译成了结构化 token：--bg: #ffffff（最常见的默认页面背景）、--surface: #f5f5f7（卡片与特性带的浅灰）、以及--surface-warm: #fbfbfd（hero 与浅灰带之间的近白亮度过渡层）。文件头注释特别强调：Apple 的浅色表面阶梯真实存在三级，若把--surface-warm折叠为var(--surface)的别名，就会抹掉一个真实的品牌特征。

三、色彩体系与角色分工

3.1 主色

3.2 次要色与强调色

3.3 表面与背景

3.4 中性色与文本

3.5 语义色与强调

• 选择/焦点信号：#0071e3在营销与商业语境中共享，作为焦点与选中状态信号；
• 错误/警告/成功：文档明确记录「在提取的表面集合中未一致观察到不同的语义调色板」——这是一个诚实的已知缺口，而非缺陷。

3.6 渐变系统

提取页面以实色表面为绝对主导。视觉丰富度来自摄影与工艺渲染，而非持久性 UI 渐变。

3.7 Token 绑定中的关键决策（源码级）

tokens.css 的:root块将上述色彩翻译为 lint 强制要求的标准 token 名（--bg、--surface、--accent等），并记录了七条「非显而易见」的品牌绑定决策：

1. --surface-warm绑定真实第三级#fbfbfd，而非--surface别名；
2. --fg-2、--meta、--border-soft绑定独立值——Apple 的中性文本阶梯是著名的四级（近黑墨 → 工具深灰 → 次级中性灰 → 中等边框灰）；
3. --radius-pill绑定980px而非 9999px——Apple 招牌胶囊 CTA 在公开 CSS 中字面使用 980px，这个数字本身就是品牌可辨识细节；
4. --accent-hover使用#0077ed（变亮约 4%）而非变暗——Apple 的蓝色按钮在 hover 时提亮；--accent-active则变暗为#0066cc（即文档正文链接蓝，作为按压色调）；
5. --tracking-display为-0.015em（对应 80px hero 上的 -1.2px）；
6. --section-y-desktop为 100px（比 schema 默认 80px 更慷慨，让产品图说话）；
7. --ease-standard为cubic-bezier(0.28, 0, 0.22, 1)——Apple 过渡「急减速然后稳定，从不回弹」。

这些决策直接回应了 design-systems/_schema/AGENTS.md 中定义的 token 契约分层：A1-identity（--bg、--fg、--accent、--font-display，品牌决定、缺失即失败）、A2（品牌决定但带 schema 回退，如--motion-fast、--success）、B-slot（品牌可声明为别名或独立值，如--fg-2、--surface-warm）。语义色（--success: #16a34a、--warn: #eab308、--danger: #dc2626）因文档明确「无独立语义调色板」而继承 schema 默认值，并约定「无论何种情况占用面积不超过 5%」。

四、排版规则

4.1 字体家族与分工

• Display 家族：SF Pro Display，回退SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif；
• Text 家族：SF Pro Text，回退链同上；
• 分工：Display 家族负责 hero/产品标题与 merchandising 标题；Text 家族负责导航、控件、标签与密集商业文案。

tokens.css 将回退链完整镜像（SF Pro Icons → Helvetica Neue → Helvetica → Arial → sans-serif），保证非 macOS 客户端渲染时落到最接近的实用替代品；mono 栈则由SF Mono领衔（Apple 品牌 mono），后接 schema 回退。

4.2 层级阶梯（完整表格）

4.3 原则与字体替代

原则：

• 跨页面类型连续性：同一排版 DNA 贯穿电影化发布页与产品购买流程，防止营销/商业的品牌分裂；
• 大字号压缩：Display 层级使用紧凑 leading 与受控 tracking，呈现「机械加工感」与产品优先；
• 零售深度的可读密度：SF Pro Text 在紧凑性与足够的纵向节奏之间平衡，支撑长产品列表与选项矩阵；
• 测量过的字重阶梯：600 是主导强调字重；700 选择性出现；300 仅在较大行中用于对比。

字体替代注意事项：最接近的免费替代是Inter（文本密集实现）与Inter Tight（近似 SF Pro Display 度量用于标题）。替换时应将 body 字号行高略微上调（+0.02 至 +0.06），并降低负 tracking 强度以保持可读性。

Token 化佐证（tokens.css）：Apple 的 body 基线是17px而非 web 常见的 16px，因为 SF Pro Text 在 Retina 上按 17 度量调校；--text-base重绑为任何其他值都会破坏品牌阅读质感。display 天花板是 80px 的--text-4xl。leading 包络在顶部异常紧凑（display 尺寸处于 1.00-1.10）而 body 异常透气（--leading-body: 1.47，远超 web 默认 1.4）——两个数字都直接来自规范第 3 节。

五、组件样式

5.1 按钮

• 主填充动作：#0071e3背景、#ffffff文本、8px 半径、紧凑水平内边距（常见 8px 15px），用于决定性的购买/推进动作；
• 深色填充动作：#1d1d1f背景、#ffffff文本、8px 半径，用于浅色表面需要受控高对比主动作时；
• 药丸/胶囊动作家族：大型胶囊动作半径18px-56px，极端药丸链接980px，确立 Apple「柔和而精确」的 CTA 轮廓；
• 工具筛选/按钮外壳：浅色外壳（#fafafc或半透明白）配柔和灰边框（#d2d2d7/#86868b），用于密集配置语境；
• 按压行为：激活控件通常略微缩小或移动填充，以示物理按压确认。

5.2 卡片与容器

• 编辑/产品卡片：#f5f5f7或白色场域上的浅色卡片，极简框架、图像优先构图；
• 深色工具卡片：石墨阶梯（#272729至#2a2a2c），用于浮层、媒体控件与深色语境模块；
• 配置器面板：圆角容器（常见 12px-18px），边界定义清晰而克制；
• Carousel/Spotlight 模块：更大圆角外壳（28px-36px），用于精选内容通道。

5.3 输入与表单

• 零售输入字段：半透明或白色背景、深色文本（#1d1d1f）、边框主导的容器（#86868b）；
• 选择控件：圆形/类开关控件几何在产品选择界面频繁出现；
• 密度策略：表单字段保持视觉安静，让设备图像与定价层级保持主导。

5.4 导航

• 全球营销导航：紧凑深色半透明条 + 小号链接 + 克制图标；
• Store/子商店导航层：附加工具条、chip 与分段控件，用于类目与产品收窄；
• 链接层级：链接蓝始终是首要交互信号，中性文本支撑密集导航集。

5.5 图像处理

• 对象优先摄影：硬件与配件置于受控实色表面前景；
• 高保真工艺渲染：反射/材质细节是视觉说服的核心；
• 混合取景：full-bleed hero 场景与圆角零售卡片、紧裁 merchandising 缩略图共存。

5.6 其他特色组件

• 产品配置器矩阵：组合 chip、类 radio 控件与上下文价格/摘要块的选项堆栈；
• Carousel 控制点/箭头：柔和浮层中的圆形控件词汇；
• Environment 故事面板：编辑排版与电影化产品/环境视觉融合的叙事章节。

5.7 组件层落地方式

在包内，组件不仅停留在散文描述，还沉淀为可复用资产：components.html是独立组件夹具，components.manifest.json是由components.html+tokens.css派生的紧凑组件/token 索引（manifest.json 将其声明为运行时字段）。USAGE.md 给出的读取顺序是：先读 USAGE 理解包契约 → 读 DESIGN.md 理解视觉意图与反模式 →在写组件 CSS 前把 tokens.css 粘贴进第一个 artifact 的<style>块→ 用components.manifest.json做紧凑组件清单，涉及精确选择器或状态时打开components.html→ 需要视觉核对时检查preview/页面。

六、布局原则

6.1 间距系统

• 基础单位实际为8px，但系统支持密集微步进以实现精确对齐；
• 跨页面高频复用的间距值：2、4、6、7、8、9、10、12、14、17、20px；
• 营销与零售流程均可见的通用节奏常量：8px 单元脚手架 + 14-20px 工具间隔，用于组件内边距与列表间距。

tokens.css 采用共享 schema 的 4-8-12-16-20-24-32-48 间距刻度并继承默认值；组件内部不匹配 token 的值（如 Apple 的 14px/17px 工具间隔）保持内联于调用点，而非派生额外间距 token。

6.2 网格与容器

• 展示页：大中央列 + 宽阔水平呼吸空间 + 全宽色块章节；
• 商业页：更紧凑的多列产品/控件网格 + 频繁模块化堆叠；
• 容器行为：桌面宽度下受约束的可读核心 + 慷慨外边距。

对应 token：--container-max: 1024px（将行长保持在 SF Pro Text 舒适量度上限，约 80ch@17px，同时让章节带保持 full-bleed），gutter 阶梯 22px（桌面）/18px（平板）/16px（手机）——比默认更紧凑，以呼应「宽阔水平呼吸但列纪律化内容」的平衡。

6.3 留白哲学

• 场景节奏：主要视觉章节使用宽阔上下呼吸空间；
• 必要时压缩信息：零售页面有意压缩间距，在每个 viewport 展示更多可操作信息；
• 对比驱动的分离：章节过渡更多依赖表面变化而非装饰性分隔线。

对应 token：--section-y-desktop: 100px、--section-y-tablet: 64px、--section-y-phone: 40px（比默认 80/48/32 更宽的包络）。

6.4 圆角半径刻度

Token 化映射（tokens.css）：--radius-sm → 8px（紧凑控件与字段）、--radius-md → 12px（标准按钮、配置器 chip）、--radius-lg → 18px（卡片、模块框架、商业面板）、--radius-pill → 980px（Apple 招牌胶囊 CTA，保留字面值而非折叠为 9999px）。28-36px spotlight 层与 56px 胶囊子层是组件内部一次性值，在出现第二次使用之前不派发 token。

七、深度与层级

深度被有意克制：Apple 偏爱色调对比、表面阶梯与构图层级，而非厚重阴影堆叠。装饰性深度主要来自摄影写实与材质渲染，而非合成 UI 效果；半透明浮层与类玻璃工具条在导航与控件中提供轻微氛围分层。

Token 化佐证：三层受控层级--elev-flat: none（默认，色调对比承担工作）、--elev-ring: 0 0 0 1px var(--border)（密集零售语境中的边框主导容器）、--elev-raised: 0 12px 32px rgba(0,0,0,0.08)（Apple 柔和卡片阴影，取文档第 6 节「0.08 → 0.22」范围的下界，避免 Material 味）。没有第四层——那正是 Apple 刻意回避的 Material/neumorphism 堆栈。焦点环--focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%)比 schema 默认 3px 稍大，以呈现「刻意的 Apple 光晕」而非通用描边，且以 box-shadow 实现、不干扰布局。

八、建议与禁忌（Do's and Don'ts）

应当做

1. 使用中性三元组（#000000、#f5f5f7、#ffffff）作为结构地基；
2. 将蓝色强调保留给真实的动作与导航语义；
3. 保持排版紧凑且有意，尤其在 display 刻度上；
4. 为控件与关键动作维护胶囊/圆形几何语言；
5. 让产品图像承载视觉戏剧性，保持铬的谦逊；
6. 在密集零售语境使用边框主导的容器，而非厚重卡片装饰；
7. 保持展示模块与交易模块的清晰分离，同时共享核心 token。

切勿做

1. 不要引入与 Apple 蓝竞争的宽泛次级强调调色板；
2. 不要在核心 UI 铬中过度使用阴影、发光效果或装饰性渐变；
3. 不要混用无关字体家族或随意放松 tracking；
4. 不要把所有圆角压平为单一半径——Apple 使用有目的的半径层级；
5. 不要让商业模块被粗边框或嘈杂视觉效果压垮；
6. 不要移除深/浅章节之间的中性对比节奏；
7. 不要把营销与购买流程当作两套分离的设计系统。

这些禁令在 lint-artifact.ts 中有机器可执行的对应物：例如 P1-2raw-hex规则统计首个<style>块中:root声明之外的#xxxxxx原始十六进制数量，超过约 12 个即提示「设计 token 可能未被遵守」并建议「把每个颜色移入 :root token 块，用 var() 引用，派生色调用 color-mix()」；P1-3accent-overuse规则统计渲染 DOM（<style>之外）中的var(--accent)引用，超过 6 次即提示「单屏强调色使用不超过 2 处可见（一个 eyebrow + 一个 CTA，或一个强调卡片 + 一个标签），其余降级为 var(--fg) 或 var(--muted)」——这与文档「保持蓝色稀缺而有目的」的禁令完全一致。

九、响应式行为

9.1 断点表

9.2 触摸目标

• 主/次动作通常以可点按的药丸/按钮几何呈现；
• 圆形媒体与选择控件在移动语境中对齐最小可触摸意图；
• 密集商业 UI 使用紧凑标签，但通过周围形状内边距保持清晰命中区域。

9.3 折叠策略

• 营销 hero 排版按离散层级缩小，同时保持层级对比；
• 产品与商业网格从多列折叠为堆叠卡片，选择器可见性持续保持；
• 工具导航压缩为更简单的链接/控件分组，同时保留关键动作；
• 选项/配置簇变为垂直排序，在小屏上保持购买流程线性。

9.4 图像行为

• 产品图像跨断点保持宽高比与居中；
• hero 视觉在移动端保持主导，文本围绕媒体优先级重排；
• 零售缩略图通过更紧的裁剪逻辑与更密的卡片堆叠保持可读；
• 图像主导的模块在布局密度增加时继续锚定节奏。

十、Agent Prompt 指南（实战模板）

10.1 快速色彩参考

• 主动作蓝：苹果动作蓝（#0071e3）
• 内联链接蓝：正文链接蓝（#0066cc）
• 深色章节画布：绝对黑（#000000）
• 浅色章节画布：浅苹果灰（#f5f5f7）
• 浅底主文本：近黑墨色（#1d1d1f）
• 次级文本：次级中性灰（#6e6e73）
• 零售柔和边框：柔和边框灰（#d2d2d7）
• 零售强边框：中等边框灰（#86868b）

10.2 组件 Prompt 示例

• 「在黑画布（#000000）上设计 Apple 风格产品 hero：SF Pro Display semibold 标题（48-56px）、简洁支撑文案、两个胶囊 CTA 分别使用#0071e3与#1d1d1f。」
• 「在白底（#ffffff）上创建商业配置面板：18px 圆角卡片、#86868b边框字段、SF Pro Text 17px 正文、紧凑选项选择器。」
• 「构建交替使用#f5f5f7与白色表面的 merchandising 卡片网格：图像优先卡片、克制阴影、14-17px SF Pro Text 元数据。」
• 「生成 carousel 控件簇：圆形按钮（50% 半径）、柔和灰浮层、清晰的画廊导航激活反馈。」
• 「编排混合营销 + 零售页面节奏：深色展示章节 → 浅色特性章节 → 密集产品列表模块，同时保持蓝色强调只用于动作与链接。」

10.3 迭代指南

1. 先锁定中性地基（#000000、#f5f5f7、#ffffff），再调强调色；
2. 保持蓝色强调稀缺而有目的——如果一切皆蓝，层级就会崩塌；
3. 按此顺序调排版：display 刻度 → body 可读性 → 微标签；
4. 按组件类别匹配半径（字段、卡片、胶囊、圆形），而非一刀切圆角；
5. 从展示区转向商业区时逐步增加密度；
6. 每次修订后验证产品图像仍是最强的视觉层。

10.4 已知缺口（诚实的边界声明）

• 在提取的页面集中未一致观察到不同的语义状态色（error/warning/success）；
• 部分交互微状态因模块而异，未表示为通用系统 token；
• 少数零售模块暴露了未出现在全部五个页面中的上下文特定排版覆盖。

这些「已知缺口」在 USAGE.md 中也有镜像约束：避免在复制的:roottoken 块之外使用原始十六进制值；避免独立于tokens.css重新定义 Tailwind 或设计 token 值；避免宣称原创上游来源证据（本包基于整理的捆绑夹具）；避免添加components.html或DESIGN.md中未体现的新组件配方。

十一、从规范到执行：在 OpenDesign 中使用该包的完整链路

综合以上各节，Apple 设计系统包的端到端使用链路可以总结为：

1. 选用：在 Design System 界面或受支持的项目创建流程中选择 Apple 包，其设计上下文会被组合进 Agent 提示词（见 design-systems/README.md 顶部说明）；
2. 读取：按 USAGE.md 的读取顺序消化包契约（USAGE → DESIGN → tokens → components → preview）；
3. 粘贴：将 tokens.css 的:root块逐字粘贴到每个 artifact 的首个<style>，此后一律通过var(--name)引用——文件头注释明确说明这是 lint 强制的工作方式，因为「Agent 必须把散文式品牌名翻译成--surface、--accent这类标准 token 名，而这正是 token 误用发生的地方；本文件把品牌一次性预翻译好，Agent 复制结构而非发明结构」；
4. 实现：以 components.html 与components.manifest.json为准复用组件组，而非发明新控件；
5. 校验：借助preview/colors.html、preview/typography.html、preview/spacing.html做视觉核对，依赖 daemon 的 lint-artifact.ts 对产物做 P0（必须修复，如紫色渐变、AI 默认 indigo 强调、lorem 填充文本）/P1（应当修复，如 raw-hex 超量、accent 过度使用、外部图片 URL）/P2（锦上添花）分级审查；
6. 审计：source/目录下的evidence.md、token-contract.report.json与tokens.source.json是包内容的审计证据；design-tokens.json与tailwind-v4.css是派生产物，应据报告与 token 样式表重新生成而非手工编辑。

整套 token 契约（A1/A2/B-slot/C 扩展的四层模型、C → B-slot → A2 的晋升路径、以及「组件内部值不派发 token、一次性值不派发 token、投机值不派发 token」的克制原则）由 design-systems/_schema/AGENTS.md 固化，运行时契约的权威副本位于packages/contracts/src/design-systems/token-schema.ts，daemon 导入器与仓库守卫共享同一 schema。若你希望自行编写或修改一个设计系统包，DESIGN.md不强制九节模板，但包质量守卫要求迁移后的包至少包含七个实质性 H2 标题（不规定名称、顺序或编号），并须与tokens.css保持同步——Apple 包的九个章节（视觉主题、色彩、排版、组件、布局、深度、Do/Don'ts、响应式、Agent Prompt 指南）正是这一约定的完整示范。

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design