以 OpenDesign 设计系统包还原 Apple 风格界面：DESIGN.md 全量解读与 tokens.css 落地实战

以 OpenDesign 设计系统包还原 Apple 风格界面：DESIGN.md 全量解读与 tokens.css 落地实战

【免费下载链接】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-pt-br.md）为核心，系统拆解 Apple 风格的视觉语言：二元章节节奏、单色强调体系、SF Pro 排版尺度与胶囊 CTA 几何，并展示如何通过 tokens.css 语义令牌、components.html 组件夹具与 USAGE.md 使用约定，让编码 Agent 在生成原型、落地页、营销页或电商配置页时稳定复现这套「精密编辑式」设计语言。读完你将掌握：该包的全部设计决策、逐档色板与字号参数、组件与响应式规则，以及把设计散文翻译成可被 Lint 校验的 CSS 变量的完整方法。

1. 包结构：一份可被 Agent 消费的便携设计系统

在设计系统 2.0 体系中，每个子目录都是一份「便携设计系统包」，选定后其设计上下文会被注入 Agent 提示词。design-systems/README.md 规定每个包至少具备三个机器可读文件：

design-systems/<slug>/ ├── manifest.json # 发现元数据、来源与声明路径 ├── DESIGN.md # Agent 可读的设计散文（规范主体） └── tokens.css # 编译后的语义令牌样式表

Apple 包在此基础上进一步声明了丰富文件，见 manifest.json：USAGE.md（Agent 阅读顺序）、components.html（独立组件夹具）、components.manifest.json（派生组件/令牌索引）、design-tokens.json、tailwind-v4.css（Tailwind v4 映射）、preview/（colors、typography、spacing 三个预览页）与source/（导入证据与令牌契约报告）。该包归属Media & Consumer类目，importMode为normalized，并建议绑定color与accessibility-baseline两个 craft 约束。

USAGE.md 给出了明确的阅读顺序：先读 USAGE.md 理解包契约 → 读 DESIGN.md 掌握视觉意图与反模式 → 将tokens.css的:root块原样粘贴进首个产物的<style>→ 依据components.manifest.json复用组件 → 必要时用preview/页面做视觉核验。

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

Apple 的 Web 语言是一套「精度编辑式」系统，在画廊般的宁静与零售密度的信息块之间切换。界面被设计为退隐，让硬件、材质与工艺选项成为叙事主角。对五个被分析页面（首页、Environment、Store、iPhone 购买流、配件商店）的节奏总结为：

• 二元章节节奏：深黑场景（#000000）与浅中性场（#f5f5f7）交替；
• 单一蓝色强调族承担动作与链接语义（#0071e3、#0066cc、#2997ff）；
• 双挡位操作模式：电影感橱窗模块与密集电商配置器并存——营销面用黑与光的电影式编排，商务面引入更紧的间距、更多工具性控件与更密的卡片栈，但不断裂品牌核心语法；
• 排版是稳定器：SF Pro Display 承载 hero 与 merchandising 层级，SF Pro Text 处理产品元数据、导航、过滤器与密集选择 UI；
• 胶囊/圆点几何（18px到980px及圆形控件）是标志性动作语言；
• 深度使用克制，层叠主要靠对比度与表面分离完成；
• 跨页面存在颜色块节奏：黑色 hero 章节 → 浅中性 merchandising 场 → 白色工具性零售面 → 控制用微型深色面。

3. 色彩系统：色板、角色与语义

3.1 主色

3.2 次色与强调

3.3 表面与背景

3.4 中性色与文本

3.5 语义色与渐变

• 焦点/选中信号：共享#0071e3，在营销与商务上下文中一致；
• 错误/警告/成功：在提取的表面集中没有一致的独立语义色板——这是文档明确记录的已知缺口，因此 tokens.css 选择继承 schema 默认值；
• 渐变系统：提取页面绝大多数由纯色表面驱动，视觉丰富性来自摄影与工艺渲染而非 UI 渐变。

4. 排版系统：双家族与完整层级表

4.1 字体家族

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

4.2 层级刻度（完整继承）

4.3 原则与替代字体

• 跨页面连续性：同一排版 DNA 贯穿电影式发布与购买流程，避免营销/商务的品牌割裂；
• 尺度压缩：display 层使用紧凑行高与受控 tracking，呈现「机加工感」；
• 零售深度中的可读密度：SF Pro Text 在紧凑性与充足垂直节奏之间平衡；
• 字重阶梯：600 是主导强调字重，700 选择性出现，300 少量用于大号行对比。

免费替代方案：正文优先用Inter，标题可用Inter Tight近似 SF Pro Display 度量。替换时需将正文行高提升 +0.02 至 +0.06，并降低负 tracking 强度以保可读性。

5. 组件样式

5.1 按钮

• 主填充动作：背景#0071e3、文本#ffffff、圆角 8px、紧凑水平 padding（常见 8px 15px），用于决定性购买/推进动作；
• 深色填充动作：背景#1d1d1f、文本#ffffff、圆角 8px，用于浅表面上需要高对比的受限主按钮；
• 胶囊/药丸动作族：18px–56px 大胶囊动作，以及 980px 的极端药丸链接，构成 Apple 柔和而精准的 CTA 剪影；
• 过滤器壳/工具按钮：浅色壳（#fafafc或半透明白）+ 柔和灰边框（#d2d2d7/#86868b），用于密集配置上下文；
• 按压行为：激活控件常见缩小或轻微位移，模拟物理触摸确认。

5.2 卡片与容器

• 编辑/产品卡片：#f5f5f7场或白色上的浅卡片，最小边框、图像居中构图；
• 深色工具卡片：石墨阶梯（#272729→#2a2a2c）用于 overlay、媒体控件与深色上下文模块；
• 配置器面板：圆角容器（常 12–18px），边界清晰而克制；
• 轮播/焦点模块：更大圆角壳（28–36px）。

5.3 输入与表单

• 零售输入字段：半透明或白底、深色文本（#1d1d1f）、边界导向容纳（#86868b）；
• 选择控件：圆形/开关式几何频繁出现于产品选择界面；
• 密度策略：表单字段保持视觉低调，让设备图像与价格层级保持主导。

5.4 导航

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

5.5 图像与标志性组件

• 对象中心摄影、高保真工艺渲染、混合取景（full-bleed hero 与圆角零售卡片、精准裁切的 merchandising 缩略图并存）；
• 产品配置器矩阵（chips + radio 式控件 + 价格/摘要块）、轮播圆点/箭头、Environment 故事面板（编辑排版 × 电影化视觉）。

6. 布局原则

• 间距系统：基础单元为8px，支持 2、4、6、7、8、9、10、12、14、17、20px 的密集微台阶；通用节奏常量为 8px 脚手架 + 14–20px 工具性间隔；
• 网格与容器：橱窗页用宽中央列 + 大横向呼吸空间 + 全宽颜色章节；商务页用多列更紧的产品/控件网格 + 频繁模块堆叠；桌面端容器保持可读核心 + 宽裕外距；
• 留白哲学：主要视觉章节有宽裕上下呼吸；零售页刻意压缩间距以暴露更多可操作信息；章节过渡依赖表面变化而非装饰性分隔符；
• 圆角刻度：5px（小标签/工具壳）→ 8–12px（标准控件与紧凑字段）→ 16–18px（卡片、模块框、商务面板）→ 28–36px（大模块/焦点容器）→ 56px/100px/980px（胶囊与 CTA 特征形）→ 50%（媒体与选择圆形控件）。

7. 深度与层级

深度被刻意克制：Apple 偏好色调对比、表面阶梯与构图层级，而非厚重阴影堆叠。装饰性深度主要来自照片写实与材质渲染；半透明 overlay 与玻璃式工具条提供轻微氛围层。

8. 响应式行为

触控目标：主/次动作普遍以触控友好的药丸/按钮几何呈现；圆形媒体与选择控件贴合移动端最小触控意图；密集商务 UI 用紧凑标签但通过形状 padding 保持清晰命中区。折叠策略：hero 排版按离散级别降阶但保留层级对比；产品网格从多列塌缩为堆叠卡片并保持选择器可见；工具性导航压缩为更简单的链接/控件分组；配置选项簇垂直排序以保持小屏线性购买流。图像行为：产品图像跨断点保持比例与居中；hero 视觉在移动端保持主导，文本围绕媒体优先级重排。

9. 从设计散文到语义令牌：tokens.css 的源码级决策

design-systems/apple/tokens.css 是上述散文的机器可读形态。它的存在理由很明确：DESIGN.md 告诉人类 Apple 用「浅灰#f5f5f7主表面」与「动作蓝#0071e3强调」，但 Agent 必须把散文名翻译成 Lint 强制执行的令牌名（--surface、--accent）——翻译步骤正是令牌误用的高发区。因此该文件把品牌一次性预翻译好，Agent 只需复制结构而非发明结构。

文件头部注释记录了七条非显而易见的品牌级绑定决策，值得任何子品牌作者借鉴：

1. --surface-warm绑定真实中间层#fbfbfd，而非--surface的别名——Apple 表面阶梯确实有三档浅色台阶（纯白零售画布、近白亮度偏移带、浅灰特性场），折叠会抹掉真实品牌特征；
2. --fg-2、--meta、--border-soft独立取值——Apple 中性文本坡道是四档（近黑墨色 → 工具深灰 → 次级中性灰 → 中等边框灰），schema 的 B 槽可干净映射；
3. --radius-pill绑定980px而非9999px——Apple 的胶囊 CTA 在公开 CSS 中字面使用 980px，这个数字本身就是品牌可识别细节；
4. --accent-hover提亮（#0077ed）而非压暗——Apple 的实心蓝按钮 hover 时略微增亮而非混黑；--accent-active压暗到#0066cc，即文档记载的正文链接蓝，使按下态与阅读链接色调对齐；
5. --tracking-display为-0.015em——80px hero 的 -1.2px 恰约等于 -0.015em；更紧在小号 display 会破碎，更松则失去机加工感；
6. --section-y-desktop为 100px——比 schema 默认 80px 更宽裕，呼吸空间正是产品图像「替界面说话」的关键；
7. --ease-standard为cubic-bezier(0.28, 0, 0.22, 1)——Apple 的减速缓动，硬减速后稳定落定、绝不回弹。

完整的:root块（约 60 个令牌）包括：三档表面（--bg: #ffffff、--surface: #f5f5f7、--surface-warm: #fbfbfd）；四档前景（--fg: #1d1d1f、--fg-2: #424245、--muted: #6e6e73、--meta: #86868b）；两档边框（--border: #d2d2d7、--border-soft: #e8e8ed）；强调与其状态（--accent、--accent-on、--accent-hover、--accent-active）；语义色继承 schema 默认（#16a34a、#eab308、#dc2626，且任何表面占用控制在 5% 以下）；三组字体（Display/Text/Mono，Mono 以 SF Mono 领衔）；从 12px 到 80px 的八档字号（正文基线刻意 17px——SF Pro Text 在 Retina 上按 17 度量调校，改绑会塌掉阅读质感）；行高 1.47/1.05；-0.015em的 display tracking；8px 基底的间距阶梯；章节节奏 100/64/40px；圆角阶梯与980px药丸；三档抬升（flat/ring/raised，其中 raised 取0 12px 32px rgba(0,0,0,0.08)，即文档 0.08→0.22 区间的下界，避免 Material 味）；4px 蓝色焦点环（color-mix(in oklab, var(--accent), transparent 65%)）；150ms/220ms 动效与上述缓动曲线；1024px 容器与 22/18/16px 阶梯槽距。

令牌契约的两端：标准令牌名定义于 design-systems/_schema/tokens.schema.ts（TOKEN_SCHEMA），A2 回退值在 _schema/defaults.css，而 Lint 执行则在 apps/daemon/src/lint-artifact.ts：:root外超过 12 个原始 hex 触发 P1，非令牌强调触发 P0——默认 LLM 强调色（如 Tailwind indigo）是「AI 设计 tell」头号重灾区，P0 会直接拦截。文件头部还强调「保持增量」：永远不要发明 DESIGN.md 与共享 schema 未记载的令牌名；克隆此模板的子品牌应改值而非改名。

10. 组件夹具与派生产物

components.html 是独立组件夹具，其:root粘贴块与 tokens.css 逐字同步，正文遵循同一套编辑规则：浅灰特性阶梯置于白色之上、单强调色每屏 ≤2 处可见使用、SF Pro display 压缩 tracking、980px 胶囊 CTA。components.manifest.json 由 components.html 与 tokens.css 派生：共 70 个选择器、35 个类、29 个元素，undeclaredReferenced为空（所有引用令牌都已声明），未用声明仅--danger、--elev-flat、--space-1、--text-4xl、--warn。组件按九组组织：buttons（--accent族 + 焦点环）、inputs（边界导向字段）、cards（仅依赖--elev-raised）、badges（--radius-pill药丸）、links、keyboard、icons、typography、layout（容器/导航/堆叠原语）。

派生产物均为缓存而非竞争性真源：components.manifest.json派生自 components.html 与 tokens.css；design-tokens.json派生自令牌契约报告且必须与 tokens.css 一致；tailwind-v4.css派生自 tokens.css。tailwind-v4.css 通过@theme把全部 CSS 变量映射为 Tailwind 命名空间（--color-accent、--font-display、--spacing-*、--radius-pill、--shadow-raised、--duration-base、--ease-standard、--container-max等），让偏好 Tailwind 的 Agent 同样消费同一份令牌。source/evidence.md明确声明：本包基于 OpenDesign 策展的捆绑夹具，不声称对上游品牌网站做了全新爬取——所有色值与规则以本仓库提交内容为准。

11. Agent Prompt 指南

11.1 颜色速查

• 主动作蓝：#0071e3；内联链接蓝：#0066cc；
• 深色章节画布：#000000；浅色章节画布：#f5f5f7；
• 浅色主文本：#1d1d1f；次级文本：#6e6e73；
• 柔和零售边框：#d2d2d7；强零售边框：#86868b。

11.2 组件 Prompt 示例（原文直用）

• 「在黑屏（#000000）上设计 Apple 风格产品 hero：SF Pro Display semibold 48–56px 大标题、简洁支持文本、两个胶囊 CTA（#0071e3与#1d1d1f）。」
• 「在白色（#ffffff）上创建商务配置面板：18px 圆角卡片、#86868b边框字段、SF Pro Text 17px 正文、紧凑选项选择器。」
• 「构建交替#f5f5f7与白色表面的 merchandising 卡片网格：图像居中、克制阴影、SF Pro Text 14–17px 元数据。」
• 「生成轮播控件簇：圆形按钮（50% 半径）、克制的灰色 overlay、清晰的激活反馈。」
• 「编排营销+零售混合页面节奏：深色橱窗章节 → 浅色特性章节 → 密集产品列表模块，蓝色强调仅用于动作与链接。」

11.3 迭代指南

1. 先固定中性基座（#000000、#f5f5f7、#ffffff），再调强调；
2. 蓝色强调保持稀少而刻意——如果全是蓝，层级就塌了；
3. 排版按此顺序调整：display 刻度 → 正文可读性 → 微标签；
4. 圆角按组件类别配对（字段/卡片/胶囊/圆形），而非全用同一圆角；
5. 从橱窗到商务逐段提升密度；
6. 每次修订后校验产品图像仍是视觉最强层。

11.4 已知缺口

• 语义状态色（错误/警告/成功）在提取页面中未一致可见；
• 部分交互微状态因模块而异，未抽象为通用令牌；
• 部分零售模块存在未覆盖全部五个页面的上下文特定排版替换。

12. 使用该包的完整流程与校验

按 USAGE.md 与 design-systems/README.md 的规定，落地流程为：

1. 先读 USAGE.md 理解包契约，再读 DESIGN.md 掌握视觉意图与反模式；
2. 把tokens.css的:root块作为产物首个<style>的第一段内容原样粘贴，此后一律通过var(--name)引用，:root之外不得出现裸 hex；
3. 复用components.manifest.json中的组件组，勿自造新控件；组件级一次性数值（如 14px、17px 工具间隔、28–36px 焦点层、56px 胶囊子层）留在调用点内联，不派生额外令牌；
4. 需要视觉核验时打开 preview/colors.html、preview/typography.html、preview/spacing.html；
5. 修改包内容后运行pnpm guard与pnpm typecheck（见 design-systems/README.md），完整审校清单见 docs/design-systems.md；运行时清单在每次/api/design-systems请求时重扫，无需重启守护进程。

13. Do & Don't 速查

Do：用中性三件套（#000000、#f5f5f7、#ffffff）作结构基座；把蓝色强调留给真正的动作与导航语义；保持排版紧凑而刻意（尤其 display 刻度）；用胶囊/圆形几何语言承载关键控件与动作；让产品图像承载视觉戏剧性、界面镀铬保持纤细；在密集零售上下文用边界导向容纳而非重卡片装饰；保持橱窗模块与事务模块的清晰分离，同时共享核心令牌；原样保留 schema 令牌名以保证跨品牌切换可靠；优先复用components.manifest.json中的组件组；把source/文件视为夹具回填的审计证据。

Don't：不要引入与 Apple 蓝竞争的宽泛次强调色板；不要过度使用阴影、发光或装饰性渐变于核心 UI 镀铬；不要混入无关字体家族或随意放宽 tracking；不要把所有角压平为单一圆角——Apple 使用有目的的圆角层级；不要用粗边框或花哨视觉效果压垮商务模块；不要移除深色与浅色章节间的中性对比节奏；不要把营销与购买流程当作两套独立设计系统；不要在复制的:root块之外使用裸 hex；不要独立于 tokens.css 重定义 Tailwind 或设计令牌值；不要声称拥有上游原始站点证据——本包基于策展捆绑夹具；不要添加 components.html 或 DESIGN.md 未代表的组件配方。

以这份 DESIGN-pt-br.md（及同目录的 DESIGN-zh.md、DESIGN.md 等 20 个语言版本）为规范、tokens.css 为执行层，OpenDesign 的 Agent 可以稳定输出「一屏之内、一眼 Apple」的精密编辑式界面——从#000000的 hero 开场，到#f5f5f7的特性场，再到#ffffff的密集零售面板，蓝色只出现在该出现的地方。

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