企业官网建设流程全解析

用 OpenDesign 复刻 Apple 式设计系统：双模式排版、单蓝强调与 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/DESIGN.md 为骨架，结合 design-systems/apple/tokens.css 等机器可读资产，完整讲解 Apple 风格设计系统的视觉语法、token 绑定与 Agent 提示词工程。读完你可以直接用这套规范生成"展示模式 + 交易模式"双节奏的高保真页面，并在 OpenDesign 的 Design System 工作流中通过 CSS 变量复用它。

Apple 的设计语言是"消隐"的艺术：界面退到幕后，让产品影像成为叙事主角。OpenDesign 将这套语法提炼为一个可移植的设计系统包（design-systems/apple/），既有人类可读的规范文档，也有 Agent 可直接粘贴的语义化 token 样式表。本文从视觉哲学讲到源码级 token 绑定，给出可复制、可运行的完整方案。

1. 包结构：一个设计系统包的完整形态

在 OpenDesign 中，每个设计系统包都遵循manifest.json + DESIGN.md + tokens.css的最小契约（见 design-systems/README.md）。Apple 包在此基础上提供了更丰富的派生资产：

design-systems/apple/ ├── manifest.json # 发现元数据与文件声明 ├── DESIGN.md # Agent 使用的规范文档（含多语言版本） ├── DESIGN-zh.md # 本文对应中文版 ├── USAGE.md # Agent 阅读顺序与使用指南 ├── tokens.css # 编译后的语义 token 样式表（事实源头） ├── design-tokens.json # 派生：设计 token JSON ├── tailwind-v4.css # 派生：Tailwind v4 映射 ├── components.html # 独立组件夹具 ├── components.manifest.json # 派生：组件/token 索引 ├── preview/ # 索引预览页（colors/typography/spacing） ├── source/ # 导入证据、token 契约报告 └── system/ # 系统级展示页

manifest.json声明了包的身份：category: "Media & Consumer"，importMode: "normalized"，并建议绑定color与accessibility-baseline两条 craft 规则。关键点是 tokens.css 是唯一事实源头——design-tokens.json、tailwind-v4.css都是它的派生缓存，不应手工编辑。

2. 视觉主题与氛围：一套系统，两个挡位

Apple 的网页语言是一套精密的编辑式系统，在画廊般的静谧与零售密度信息块之间交替切换。视觉基调始终克制：宽阔的中性画布、安静的界面金属质感，几乎把全部表现力都交给产品影像。

从源码结构看，这种"双模式"不是两套体系，而是一套系统、两个挡位：

核心特征（Key Characteristics）：

• 二元式分区节奏：深黑场景（#000000）与浅中性色块（#f5f5f7）交替出现
• 单一蓝色强调色族承载操作与链接语义（#0071e3、#0066cc、#2997ff）
• 高度依赖影像与材质表面工艺；UI 界面元素在视觉上保持纤薄
• 紧凑的标题度量（SF Pro Display，semibold）搭配紧凑的正文/链接排版（SF Pro Text）
• 以胶囊与圆角矩形几何作为标志性的操作语言（18px到980px及圆形控件）
• 克制地使用景深；对比与表面分隔承担了大部分分层工作
• 多页面色块节奏：黑色主视觉章节 → 浅中性营销色块 → 功能性白色零售页面 → 用于控件的深色微表面

这套双挡位节奏在 tokens.css 中被固化为三层表面系统（--bg/--surface/--surface-warm）和三级章节留白（--section-y-desktop: 100px等），下文逐一展开。

3. 配色方案与角色

Apple 包的色彩证据来自对 apple.com 首页、Environment、Store、购买流程与配件页五类页面的提取（原文档 Source Pages 所列页面集合）。整张色板的核心纪律是：中性色做结构，单一蓝色做语义，其余全部让位给影像。

Primary 主色

• 绝对黑（#000000）：沉浸式主视觉画布、高戏剧张力的产品章节、深色 UI 锚点
• 苹果浅灰（#f5f5f7）：功能展示带、对比块和编辑式过渡的主浅色表面
• 近黑墨色（#1d1d1f）：浅色画布上的主文本与深填充控件颜色

Secondary & Accent 次色与强调色

• 苹果操作蓝（#0071e3）：主操作填充色与传达焦点的品牌强调色
• 正文链接蓝（#0066cc）：为长文可读性优化的行内链接颜色
• 高亮度链接蓝（#2997ff）：在需要更强对比的深色场景中使用的明亮链接处理色

Surface & Background 表面与背景

• 纯白画布（#ffffff）：零售/产品列表背景与密集交易区块
• 石墨表面 A（#272729）：深色卡片与媒体控件上下文层
• 石墨表面 B（#262629）：用于控件分组的稍深一级的深色功能层
• 石墨表面 C（#28282b）：抬升的深色辅助表面
• 石墨表面 D（#2a2a2c）：用于在更丰富的深色场景中做分隔的最深抬升层级

Neutrals & Text 中性色与文本

• 次级中性灰（#6e6e73）：正文次级文案、辅助说明、第三级元数据
• 柔和边框灰（#d2d2d7）：分隔线、细微轮廓和低调的功能性容器
• 中等边框灰（#86868b）：产品配置与筛选场景中更强的字段轮廓
• 功能深灰（#424245）：商店场景中深中性文本/表面的过渡色

Semantic 语义色

• 选中/焦点信号（#0071e3）：贯穿营销与商务场景的共享焦点与选中状态信号
• 错误/警告/成功：在所提取的页面集合中未一致出现独立的语义配色

渐变体系

所提取的页面绝大多数由纯色表面驱动。视觉丰富度来自摄影与表面工艺渲染，而非持续存在的 UI 渐变。

源码级证据：色板如何绑定为 token

tokens.css 把上述色板翻译成 lint 强制执行的语义 token 名（--surface、--accent、--fg……），并记录了几个非显而易见的绑定决策：

• --surface-warm: #fbfbfd绑定为真实中间层级而非--surface的别名——Apple 的浅色表面阶梯确实有三档（纯白零售画布、近白提亮带、浅灰功能带），折叠它会抹掉真实的品牌特征；
• --fg/--fg-2/--muted/--meta四个前景层独立取值，对应四档中性文本阶梯（近黑墨色 → 功能深灰 → 次级中性灰 → 中等边框灰）；
• --border: #d2d2d7之外另有--border-soft: #e8e8ed，用于密集零售表格内部的行分隔，避免发丝线跟选项标签抢视觉；
• 注意：正文层级没有用纯黑——#000000只保留给主视觉画布与深色章节，白底正文用带轻微暖感的#1d1d1f，这才是 Apple 的阅读质感；
• 语义色（--success/--warn/--danger）直接继承 schema 默认值，因为 Apple 包明确记录"未一致出现独立语义配色"，同时注释要求任何语义色占用面积不超过 5%。

4. 排版规则

排版是 Apple 体系的稳定器。SF Pro Display以紧凑的行高和受控的字距承载主视觉与营销层级，SF Pro Text负责产品元数据、导航、筛选器以及密集的选择型 UI。字号跨度足够宽，既能支撑广告牌式的主视觉，也能承载微型功能标签。

字体族（Font Family）

• Display Family：SF Pro Display，回退字体SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• Text Family：SF Pro Text，回退字体SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• 用途划分：Display 字族负责主视觉/产品标题与营销标题；Text 字族负责导航、控件、标签以及密集的商务文案

在 token 层面，--font-display与--font-body完整镜像了公开发布的 fallback 链，保证非 macOS 客户端渲染时能落到最接近的替代字体；--font-mono则以SF Mono领衔品牌等宽字体栈（SF Mono, ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace）。

层级表（Hierarchy）

排版原则（Principles）

• 跨页面类型的连续性：同一套排版 DNA 贯穿电影级发布与产品购买流程，避免营销与商务之间出现品牌割裂
• 大尺度下的压缩：Display 层级使用紧凑的行距与受控的字距，带来机械精密、产品优先的质感
• 零售深度下的可读密度：SF Pro Text 在紧凑性与足够的垂直节奏之间取得平衡，适应长产品列表与选项矩阵
• 有节制的字重阶梯：600 是主导的强调字重；700 选择性出现；300 在较大行中谨慎使用以形成对比

源码级证据：度量如何进 token

tokens.css 把层级表压缩为--text-xs（12px）到--text-4xl（80px）八级阶梯，并记录了几个关键决策：

• 正文字号锚定 17px（--text-base）而非 Web 常见的 16px——SF Pro Text 在 Retina 上按 17px 度量调校，改掉它就会破坏品牌阅读质感；
• 行高信封两端都"出格"：display 顶部极紧（--leading-tight: 1.05），正文极松（--leading-body: 1.47，高于 Web 默认 1.4）；
• display 字距统一为--tracking-display: -0.015em：对应 80px Hero 上的 -1.2px（≈ -0.015em）。用单一 em 值绑定，同一规则可跨所有 display 层级生效；比它更紧在小字号下会碎，比它更松就失去 Apple 的机械感。正文的字距（0 / -0.374px）留给组件级规则，避免损害可读性。

免费替代字体说明

• 最接近的可免费获取替代字体：文本密集型实现使用Inter，标题部分用Inter Tight近似逼近SF Pro Display-like的度量
• 替换时，将正文字号的行高略微增大（+0.02 到 +0.06），并降低负字距的强度以保持可读性

5. 组件样式

按钮（Buttons）

• 主填充操作：#0071e3背景，#ffffff文本，8px 圆角，紧凑的水平内边距（通常为 8px 15px）。用于决断性的购买/推进操作
• 深填充操作：#1d1d1f背景，#ffffff文本，8px 圆角。当浅色表面需要一个克制的高对比主操作时使用
• 胶囊操作族：大型胶囊操作圆角为18px-56px，极端胶囊链接圆角为980px。确立了 Apple 柔和而精准的行动号召轮廓
• 功能性筛选/按钮外壳：浅色外壳（#fafafc或半透明白色）配以细微的灰色边框（#d2d2d7/#86868b），用于密集配置场景
• 按压行为：激活控件通常会略微缩小尺度或微调填充色，以提示物理按压确认

从 components.manifest.json 看，buttons 组件组覆盖.btn、.btn-primary、.btn-secondary、.btn-pill、.btn-pill-secondary及其:hover/:active/:focus-visible全套状态，token 引用集中在--accent、--accent-hover、--accent-active、--accent-on、--focus-ring、--surface、--meta。

卡片与容器（Cards & Containers）

• 编辑式/产品卡片：在#f5f5f7或白色色块上的浅色卡片，框架极简、影像优先的构图
• 深色功能卡片：石墨层级（#272729到#2a2a2c），用于覆盖层、媒体控件和深色场景模块
• 配置器面板：圆角容器（通常 12px-18px），边框定义清晰而克制
• 轮播/聚焦模块：较大的圆角外壳（28px-36px），用于精选内容通道

输入与表单（Inputs & Forms）

• 零售输入框：半透明或白色背景，深色文本（#1d1d1f），以边框主导容器（#86868b）
• 选择控件：圆形/切换式控件几何在产品选择界面中频繁出现
• 密度策略：表单字段在视觉上保持安静，让设备影像与价格层级占据主导

导航（Navigation）

• 全局营销导航：紧凑的深色半透明栏，配以小字号链接和克制的图标
• 商店/子商店导航层：额外的功能性栏、chips 与分段控件，用于类目与产品收窄
• 链接层级：链接蓝仍是主要的交互信号，中性文本则支撑密集的导航集合

影像处理（Image Treatment）

• 物体优先摄影：硬件与配件在受控的纯色表面上被置于前景
• 高保真表面工艺渲染：反射/材质细节是视觉说服力的核心
• 混合取景：全出血主视觉场景与圆角零售卡片、紧密裁切的营销缩略图并存

其他标志性组件

• 产品配置器矩阵：选项堆叠与选择器，结合 chips、radio 式控件以及上下文相关的价格/汇总块
• 轮播控制圆点/箭头：在低调覆盖层中以圆形控件词汇用于画廊推进
• Environment 故事面板：将编辑式排版与电影级产品/环境视觉融合的叙事章节

6. 布局原则

间距系统（Spacing System）

• 基础单位实际上是8px，但系统支持密集的微步进以实现精密对齐
• 各页面频繁复用的间距值：2、4、6、7、8、9、10、12、14、17、20px
• 在营销与零售流程中通用的节奏常量：8px单位脚手架，配以14-20px的功能性间隔用于组件内边距与列表间距

token 层面，--space-1（4px）到--space-12（48px）继承共享 schema 的 4-8-12-16-20-24-32-48 刻度；像 14px、17px 这类组件内部工具间隔不单独建 token，而是留在调用点内联，避免 token 爆炸。

网格与容器（Grid & Container）

• 展示页面：大型中央列，配以宽阔的水平呼吸空间和通栏色块章节
• 商务页面：更紧凑的多列产品与控件网格，频繁采用模块化堆叠
• 容器行为：受约束的可读核心区，在桌面宽度下保留充裕的外侧边距

源码证据：--container-max: 1024px保证 17px 正文行宽落在约 80ch 的舒适度量上限内，同时让章节色带全出血；gutter 按 22 / 18 / 16px 在桌面/平板/手机递减，比 schema 默认略紧，以呼应 Apple"横向宽呼吸、内容列自律"的平衡。

留白哲学（Whitespace Philosophy）

• 场景节奏：主要视觉章节使用宽阔的上/下呼吸空间
• 必要处的信息压缩：零售页面刻意压缩间距，以在每个视口中暴露更多可操作信息
• 对比主导的分隔：区块过渡更多依赖表面变化而非装饰性分隔符

圆角刻度（Border Radius Scale）

• 5px：微型功能链接/标签和次要小外壳
• 8px-12px：标准控件与紧凑字段
• 16px-18px：卡片、模块框架与商务面板
• 28px-36px：较大的模块与聚焦容器
• 56px / 100px / 980px：胶囊、大型胶囊以及标志性的细长 CTA 形态
• 50%：圆形媒体与选择控件

token 化映射（见 tokens.css）：--radius-sm: 8px（紧凑控件与字段）、--radius-md: 12px（标准按钮、配置器 chips）、--radius-lg: 18px（卡片、模块框架、商务面板）、--radius-pill: 980px。980px 是刻意保留的字面值而非 9999px——这个数字本身就是 Apple 公开发布 CSS 中可识别的品牌细节。28-36px 聚光层和 56px 胶囊子层是组件内部一次性值，暂不升格为 token。

7. 景深与抬升

景深被刻意克制。Apple 偏好色调对比、表面阶梯和构图层级，而非厚重的阴影堆叠。

装饰性景深

• 装饰性景深主要由摄影写实感与材质渲染创造，而非合成的 UI 效果
• 半透明覆盖层与玻璃感功能栏在导航与控件中提供轻微的氛围分层

源码级证据：三档抬升与焦点环

token 只定义了三个受认可的抬升层级，没有第四层（第四层就是 Apple 有意回避的 Material/拟物堆栈）：

• --elev-flat: none——默认扁平，色调对比负责分层
• --elev-ring: 0 0 0 1px var(--border)——边框主导的容纳，用于密集零售场景
• --elev-raised: 0 12px 32px rgba(0, 0, 0, 0.08)——苹果式柔和卡片阴影，取 DESIGN.md §6 所述 0.08 下限，避免 Material 味

焦点信号--focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%)用 4px 环（比 schema 默认 3px 稍大）以 box-shadow 形式叠加在元素外部、不影响布局，形成"刻意的 Apple 光晕"而非通用描边。

8. 该做与不该做

Do 该做

• 以中性三色（#000000、#f5f5f7、#ffffff）作为结构基础
• 将蓝色强调色保留给真正的操作与导航语义
• 保持排版紧凑而克制，尤其是在 display 尺度上
• 为控件与关键操作维持胶囊/圆形几何语言
• 让产品影像承载视觉张力；界面元素保持低调
• 在密集零售场景中使用边框主导的容器，而非厚重的卡片装饰
• 在共享核心 token 的同时，保持展示模块与交易模块之间清晰的分隔

Don't 不该做

• 不要引入与苹果蓝竞争的宽泛次级强调配色
• 不要在核心 UI 界面元素中过度使用阴影、发光效果或装饰性渐变
• 不要混用不相关的字族，或不加区分地放松字距
• 不要把所有圆角拍平为单一半径；Apple 使用有目的的半径层级
• 不要用厚重边框或喧闹的视觉效果给商务模块加负荷
• 不要移除深色与浅色章节之间的中性对比节奏
• 不要把营销流程与购买流程当作两套独立的设计系统

这套约束在 USAGE.md 中进一步落为操作纪律：不要在拷贝的:roottoken 块之外使用裸 hex 值；不要脱离tokens.css单独重定义 Tailwind 或 design-token 值；不要新增components.html或DESIGN.md中未出现的组件配方。lint 侧对应规则可见apps/daemon/src/lint-artifact.ts（裸 hex 超过 12 处触发 P1，非 token 强调色触发 P0）。

9. 响应式行为

断点（Breakpoints）

触控目标（Touch Targets）

• 主操作与次操作通常以便于点按的胶囊/按钮几何呈现
• 圆形媒体与选择控件在移动场景中符合最小可点按意图
• 密集商务 UI 使用紧凑标签，但通过周围的形状内边距维持清晰的命中区域

折叠策略（Collapsing Strategy）

• 营销主视觉排版以离散层级缩小，同时保留层级对比
• 产品与商务网格从多列折叠为堆叠卡片，并持续保持选择器可见
• 功能性导航压缩为更简单的链接/控件分组，同时保留关键操作
• 选项/配置集群变为纵向排序，以在小屏幕上保持购买流程的线性

影像行为（Image Behavior）

• 产品影像在各断点间保持比例与中心性
• 主视觉在移动端仍占主导，文本围绕媒体优先级重新定位
• 零售缩略图通过更紧的裁切逻辑与更密的卡片堆叠保持清晰可读
• 随着布局密度增加，影像主导的模块继续锚定节奏

响应式节拍同样有 token 支撑：章节留白按 100 / 64 / 40px 在桌面/平板/手机三档递减（--section-y-desktop/--section-y-tablet/--section-y-phone），比 schema 默认 80/48/32 略宽，这正是 Apple"广告牌章节靠呼吸空间让影像说话"的量化形式。

10. Agent 提示词指南

这是 OpenDesign 面向生成式 Agent 的"施工图"部分——把整套视觉语法压缩成可直接喂给编码 Agent 的提示词。

快速取色参考（Quick Color Reference）

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

示例组件提示词（Example Component Prompts）

• "在黑色画布（#000000）上设计一个 Apple 风格的产品主视觉，使用 SF Pro Display semibold 标题（48-56px）、简洁的辅助文案，以及两个分别使用#0071e3和#1d1d1f的胶囊 CTA。"
• "在白色（#ffffff）上创建一个商务配置面板，使用 18px 圆角卡片、#86868b边框字段、SF Pro Text 17px 正文文案，以及紧凑的选项选择器。"
• "构建一个营销卡片网格，交替使用#f5f5f7与白色表面，配以影像优先的卡片、克制的阴影，以及 14-17px 的 SF Pro Text 元数据。"
• "生成一个轮播控件集群，使用圆形按钮（50% 圆角）、低调的灰色覆盖层，以及用于画廊导航的清晰激活反馈。"
• "组合一种营销 + 零售混合的页面节奏：深色展示章节 → 浅色功能章节 → 密集产品列表模块，同时让蓝色强调色仅用于操作与链接。"

迭代指南（Iteration Guide）

1. 先锁定中性基础（#000000、#f5f5f7、#ffffff），再调整强调色
2. 让蓝色强调色稀少且有目的；如果一切都是蓝色，层级就会崩塌
3. 按此顺序调整排版：display 尺度、正文可读性，最后是微型标签
4. 按组件类别（字段、卡片、胶囊、圆形）匹配圆角，而非一刀切的统一圆角
5. 从展示区块转向商务区块时，逐步增加密度
6. 每次修订后都要验证产品影像仍是最强的视觉层

已知缺口（Known Gaps）

• 在所提取的页面集合中，未一致出现独立的语义状态色（错误/警告/成功）
• 部分交互微状态因模块而异，未表现为通用的系统 token
• 少数零售模块暴露出特定上下文的排版覆盖，并未贯穿全部五个页面

11. 从提示词到生产：运动、焦点与派生资产

除了 DESIGN.md 明文内容，tokens.css 还固化了文档未展开、但对生成品质至关重要的三类参数：

运动曲线。Apple 的过渡"急减速后静置，从不回弹"。--ease-standard: cubic-bezier(0.28, 0, 0.22, 1)是 apple.com 悬停与章节浮现使用的曲线，覆盖 schema 默认缓动；--motion-base从 200ms 提到 220ms 以承载更电影化的微交互，--motion-fast: 150ms留给真正的微状态（悬停染色、焦点、按键反馈）。

强调色状态机。Apple 的主按钮悬停变亮、按下变暗，与 schema 默认"向黑混色"的公式相反，因此两个方向都手工指定：--accent-hover: #0077ed（比--accent亮约 4%）、--accent-active: #0066cc（正好是文档记录的行内链接蓝，按下态与阅读链接色调对齐）。

派生资产链。使用该包时，Agent 按 USAGE.md 的阅读顺序操作：先读本文件理解契约 → 读 DESIGN.md 掌握视觉意图 → 把tokens.css的:root块逐字粘贴进第一个 artifact 的<style>→ 用 components.manifest.json 做组件清单速查，需要精确选择器或状态时再打开 components.html → 需要目检时查看preview/页面。若项目使用 Tailwind v4，可引入 tailwind-v4.css，它把每个 token 映射为@theme变量（如--color-accent、--font-display、--spacing-section-desktop、--shadow-raised），实现bg-accent、text-muted等原子类；design-tokens.json 则给出 56 个 token 的契约报告，得分 100、评级 excellent，全部声明均能回溯到tokens.css的声明行。

整个 Apple 包的本质，是把一份"消隐的艺术"转译成 lint 可强制、Agent 可粘贴、跨品牌可切换的语义 token 契约——你不需要记住每一个 hex 值，只需要把:root块粘进页面，然后用var(--accent)、var(--surface)、var(--radius-pill)说话。

【免费下载链接】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