企业官网建设流程全解析

OpenDesign PlayStation 设计系统包使用指南：从 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 中为编码 Agent 与设计评审者搭建 PlayStation 风格界面的读者，完整讲解design-systems/playstation这个 Design System 2.0 包的使用契约：如何按读取顺序消费包内文档、如何将tokens.css语义 token 注入产物、如何在保证跨品牌切换可靠性的前提下落地「三面体通道布局」「SST 300 静默权威排版」「1.2× 青蓝悬停放大」等核心特征，并给出 Agent 提示词模板与迭代审计清单。读完本文，你将能够独立把该包当作可移植设计上下文，正确组装出符合 PlayStation 品牌语言且可被 OpenDesign 审查体系校验的页面。

一、包结构总览：Design System 2.0 的机器可读契约

design-systems/playstation/是一个完整的便携设计系统包（portable design-system package）。在 OpenDesign 中，从 Design System 界面选择一个包，或通过受支持的项目创建流程选择时，该包的设计上下文会被组合进 Agent 提示词。包内文件遵循 Design System 2.0 的统一结构，核心三元组为manifest.json、DESIGN.md、tokens.css，本包还进一步提供了更丰富的派生文件（详见 design-systems/README.md）：

design-systems/playstation/ ├── manifest.json # 稳定发现元数据、来源与声明路径 ├── USAGE.md # Agent 使用指南（本文主题） ├── DESIGN.md # 视觉意图、约束与反模式（9 个实质性 H2 章节） ├── tokens.css # 编译后的语义 token 样式表（唯一 token 真相源） ├── design-tokens.json # 由 token 契约报告派生的 Design Tokens JSON ├── tailwind-v4.css # 由 tokens.css 派生的 Tailwind v4 映射 ├── components.html # 独立组件夹具（63 个选择器、28 个类、25 个元素） ├── components.manifest.json # 派生的组件/ token 索引 ├── preview/ # colors.html / typography.html / spacing.html 预览页 └── source/ # evidence.md、tokens.source.json、token-contract.report.json

从 manifest.json 可以看到本包的元数据契约：

• schemaVersion为od-design-system-project/v1，id为playstation，类别为Media & Consumer；
• source.type为bundled，来源声明为 "OpenDesign curated bundled fixture"——即本包基于仓库内精心整理的打包夹具，并非对上游官网的重新爬取（见 source/evidence.md）；
• files声明了五个规范文件：DESIGN.md、tokens.css、design-tokens.json、tailwind-v4.css、components.html；
• usage指向USAGE.md，componentsManifest指向components.manifest.json；
• craft.suggested建议叠加color与accessibility-baseline两条 craft 规范；
• preview.pages注册了三个可索引预览页。

需要特别说明的是包内文件的主次关系：tokens.css是唯一的 token 真相源；design-tokens.json、tailwind-v4.css、components.manifest.json都是派生缓存，必须与tokens.css保持一致，而不是竞争性的第二真相源（design-systems/README.md 中有明确的派生关系说明）。

二、推荐的包消费顺序：五步读取契约

USAGE.md规定了一套明确的读取顺序，它决定了 Agent 与评审者应以何种次序消化包内信息，避免在缺少视觉意图或 token 约束的情况下贸然编写组件样式：

1. 先读本文（USAGE.md），理解包的总体契约与使用边界；
2. 再读DESIGN.md，掌握视觉意图、约束与反模式——这是后续所有实现的语义依据；
3. 将tokens.css粘贴到第一个产物（artifact）的<style>块中，在编写任何组件 CSS 之前先建立 token 层；
4. 使用components.manifest.json获取紧凑的组件清单；当需要精确的选择器或状态（如 hover / focus / active）时，打开components.html核对；
5. 需要视觉抽查时检查preview/页面（颜色、排版、间距三个维度）。

这套顺序的背后逻辑是「先契约、后意图、再 token、然后组件、最后视觉验证」——从 components.manifest.json 的fixture字段可见，组件夹具包含styleBlockCount: 1、selectorCount: 63、classCount: 28、elementCount: 25，并在groups中划分了 buttons、inputs、cards、badges、links、keyboard、icons、typography、layout 九大组件组，每个组都列出了自己的 token 引用（例如 buttons 组引用--accent、--accent-on、--surface），这份索引可以让 Agent 在动手前就明确「我要复用的组件到底依赖哪些 token」。

三、包内文件的功能定位与使用边界

3.1manifest.json：发现与来源

manifest.json是包的「身份卡」。它保证包的可发现性与来源可追溯性，也是 OpenDesign 在运行时扫描目录（每次/api/design-systems请求都会重新扫描）时读取的首要元数据。包内所有声明的路径都必须是安全、相对且真实存在的。

3.2DESIGN.md：Agent 的规范设计散文

DESIGN.md是本包的规范设计散文，共九个实质性 H2 章节：视觉主题与氛围、色板与角色、排版规则、组件样式、布局原则、深度与层级、Do/Don't、响应式行为、Agent 提示词指南。它完整描述了 PlayStation 的三个核心设计特征：

• 三面体通道布局：近黑 masthead/hero → 纸白编辑面板序列 → 深钴蓝 footer，三种表面交替出现、从不混合；
• SST 300 显示字体：22–54px 范围内使用 SST 字重 300，形成「静默权威」的标题气质；
• 1.2× 青蓝悬停：每个主要按钮悬停时都执行「青蓝填充 + 2px 白边框 + 2px 蓝色外环 + scale(1.2)」的「开机」动画。

3.3tokens.css：唯一的 token 真相源

tokens.css是编译后的语义 token 样式表，也是 USAGE.md 规定必须粘贴到产物<style>块的第一份内容。它把 DESIGN.md 中所有设计决策编码为 56 个语义 token（design-tokens.json的summary显示totalTokens: 56、score: 100、grade: "excellent"），并在文件头注释中明确记录了关键品牌决策。

3.4 派生文件：缓存而非竞争真相源

• components.html是独立的组件夹具，包含完整可渲染的按钮、表单、卡片、徽章、pill、链接等组件，以及实现它们的 CSS（含全部 hover/focus/active 状态）；
• components.manifest.json是派生的组件/ token 索引（见上节）；
• design-tokens.json由 token 契约报告派生，必须与tokens.css一致；
• tailwind-v4.css由tokens.css派生，把每个 CSS 变量映射为 Tailwind v4 的@theme令牌（如--color-accent、--text-4xl、--radius-pill、--shadow-raised），文件头部明确写着 "Derived from tokens.css. Keep tokens.css as the source of truth."；
• preview/提供colors.html、typography.html、spacing.html三个视觉抽查页。

四、token 层精读：56 个语义 token 与核心设计决策

tokens.css是理解整套系统的钥匙。它的:root块完整编码了品牌决策，以下是按语义分组的关键 token（注释与取值均来自 tokens.css）：

4.1 Surface：三面体通道的表面体系

4.2 Foreground 与 Border

• --fg为#ffffff（Inverse White，深色画布上的主文本），--muted为#cccccc（Mute Gray，深色背景上的三级标签）；
• --border为#cccccc（对应 DESIGN.md §Inputs 的输入框描边），--border-soft为#f3f3f3（Divider Tint 分隔线）。

4.3 Accent：品牌锚点与「青色只存在于运动中」

这一组 token 把「青色永不作为静止背景出现」的规则直接编码进 token 层：--accent-hover是青色唯一的容身之处。

4.4 Typography：字重语音在组件层，尺寸在 token 层

字体族 token 为--font-display/--font-body："SST", "Playstation SST", Arial, Helvetica, sans-serif（SST 为索尼专有字体，回退链到 Arial/Helvetica）。字号 token 覆盖 54px hero 到 12px 法律微文案：

辅助排版 token：--leading-body: 1.5、--leading-tight: 1.25、--tracking-display: -0.1px（54px hero 上几乎不可察觉的字距收紧）。正如 tokens.css 注释所强调的：字重 300 的「语音」由组件层强制执行，token 层只承载尺寸。

4.5 Spacing、Radius、Elevation 与 Motion

• 间距：8px 基准单位，--space-1（4px）到--space-12（48px），另有画廊节奏的--section-y-desktop: 96px/--section-y-tablet: 64px/--section-y-phone: 48px；
• 圆角：11 值系统折叠到 schema 主干上的 4 个 token——--radius-sm: 6px（紧凑按钮/内联图片）、--radius-md: 12px（标准游戏封面与媒体）、--radius-lg: 24px（hero 卡片/特性帧）、--radius-pill: 999px（全 pill 主按钮）；输入框在组件层用自己的 3px 覆盖--radius-sm；
• 层级：--elev-flat: none、--elev-ring、--elev-raised: rgba(0, 0, 0, 0.08) 0 5px 9px 0（网格瓦片的标准「羽毛」投影）；
• 焦点环：--focus-ring: 0 0 0 2px #0070cc——2px PlayStation Blue 环，与 DESIGN.md §Inputs/§Buttons 的规范一致；
• 动效：--motion-fast: 180ms（规范交互窗口）、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)。

4.6 Layout：面向 4K 电视浏览的容器

• --container-max: 1600px；
• 外槽距：--container-gutter-desktop: 64px/--container-gutter-tablet: 32px/--container-gutter-phone: 16px。

五、从 token 到组件：核心组件的实现与状态

将 tokens.css 粘贴进<style>块后，即可按 components.html 的夹具实现组件。该夹具只有 1 个<style>块，用 token 变量组织全部样式，以下是核心组件的实现要点（选择器与属性均来自components.html）。

5.1 按钮：全 pill + 1.2× 青蓝「开机」悬停

基础.btn定义预留了 2px 透明边框槽位（border: 2px solid transparent），这样 hover 时出现白边框不会引起布局位移，并把 background、color、border-color、box-shadow、transform 五个属性统一设置为 180ms 的标准缓动过渡：

.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 24px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; letter-spacing: 0.4px; line-height: 1.25; border: 2px solid transparent; /* 预留槽位，hover 白边框不引起位移 */ transform-origin: center; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } .btn:active { opacity: 0.6; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

主按钮.btn-primary静止态是 PlayStation Blue 填充，悬停时执行完整的「开机」签名——青蓝填充、白边框、2px 蓝外环（0 0 0 2px var(--accent)）、整体放大 1.2×：

.btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); color: var(--accent-on); border-color: #ffffff; box-shadow: 0 0 0 2px var(--accent); transform: scale(1.2); }

次级按钮.btn-secondary在深色画布上是白底蓝字；在.panel-light（纸白面板）上则反转为透明底 + 蓝色描边的 outline 形态，悬停同样走青蓝填充 + 1.2× 缩放的统一签名。

5.2 输入框：3px 圆角 + 2px 蓝色焦点环

输入框是全系统唯一真正「紧凑」的地方：border-radius: 3px（刻意比系统其他部位更紧，对应 DESIGN.md §Inputs），焦点态不改变边框颜色，而是由焦点环完成全部工作：

.field input { padding: 12px 14px; border-radius: 3px; border: 1px solid var(--border); background: #ffffff; color: #1f1f1f; font-size: var(--text-base); outline: none; transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); } .field input:focus-visible { box-shadow: var(--focus-ring); /* 环完成全部工作——无边框色变化 */ } .field input::placeholder { color: rgba(0, 0, 0, 0.6); } /* 占位符 60% 黑 */

5.3 卡片、徽章与平台 pill

• .card：Paper White 背景、--radius-lg（24px）、--space-8（32px）内边距、--elev-raised羽毛投影 +--border-soft细边框，卡片内链接 hover 用#1883fd（Link Hover Blue）；
• .badge：pill 圆角、12px 字号、600 字重，成功徽章用color-mix(in oklab, var(--success), transparent 86%)生成浅色底；
• .pill：游戏商店的「平台标签」（PS5 / PS4 / PSVR2），白底黑字、--radius-pill、14px / 500，紧贴封面图标注平台。

5.4 布局辅助类

• .container：max-width: var(--container-max)居中，槽距按 1023px / 639px 两个断点从 64px → 32px → 16px 收窄；
• section：垂直内边距 96px → 64px → 48px 的「画廊节奏」；
• .panel-light：纸白表面切换，正文用 Deep Charcoal#1f1f1f，标题用 Display Ink#000000，次级文本用 Body Gray#6b6b6b——三面体通道中的白色段落层；
• .hero-grid：1.5fr 1fr双列，1023px 以下坍缩为单列；.hero-meta使用rgba(255, 255, 255, 0.06)背景 +backdrop-filter: blur(8px)，是全站唯一的「玻璃拟态」时刻（对应 DESIGN.md 中的 Filter Mist）；
• .features-grid：3 列 → 2 列 → 1 列的响应式网格。

六、三种消费方式：纯 CSS、Tailwind v4 与设计 token JSON

包内的派生文件为不同技术栈提供了落地通道：

方式一：纯 CSS（最直接）。把 tokens.css 整个:root块粘贴进产物的<style>块，然后按 USAGE.md 的约束使用var(--xxx)引用 token——这正是 USAGE.md 规定的标准路径。

方式二：Tailwind v4。tailwind-v4.css 将每个 CSS 变量映射为 Tailwind@theme令牌：--color-accent→bg-accent/text-accent、--text-4xl→text-4xl、--radius-pill→rounded-pill、--shadow-raised→shadow-raised、--duration-fast→duration-fast等。该文件以@import "tailwindcss"与@import "./tokens.css"开头，明确声明tokens.css是唯一真相源，Tailwind 侧只是派生映射。

方式三：设计 token JSON。design-tokens.json 是od-design-tokens/v1格式的机器可读清单，每个 token 都带有type（color / spacing / ...）、layer（A1-identity / B-slot / A2 / A1-structure 分层）、confidence与sources（指向tokens.css的声明行号）。其summary显示：56 个 token 全部声明且有源支撑，score: 100、grade: "excellent"、recommendRebuild: false——意味着包内 token 契约是完整且自洽的。

七、Do / Avoid：使用该包时的硬性规则

USAGE.md 明确列出四条 Do 与四条 Avoid，它们是 Agent 使用本包的合规边界，也是评审者的检查项：

Do（应当遵守）：

• 保留 schema token 名称原样，确保跨品牌切换时 token 契约可靠（OpenDesign 的跨品牌机制依赖 token 名的稳定）；
• 使用--accent承载主要动作、链接、焦点态，以及页面上唯一一个清晰的焦点元素；
• 优先复用components.manifest.json中的组件组，而不是自行发明新控件；
• 把source/文件视为打包夹具回填（bundled fixture backfill）的审计证据。

Avoid（应当避免）：

• 避免在复制的:roottoken 块之外使用裸十六进制颜色值；
• 避免脱离tokens.css单独重定义 Tailwind 或 design-token 值；
• 避免声称存在原始上游来源证据——本包基于仓库精心整理的打包夹具（见 source/evidence.md）；
• 避免添加components.html或DESIGN.md中不存在的新组件配方。

八、Agent 提示词模板：把 DESIGN.md 的语音翻译成可执行指令

DESIGN.md 第 9 节提供了开箱即用的提示词模板，可以直接用于生成界面。以下为精选示例（摘录并略作组织，均来自 DESIGN.md §Agent Prompt Guide）：

1. 主 CTA 按钮：「创建主 CTA 按钮：#0070ccPlayStation Blue 填充、白色文本 SST 18px / 500 / 0.4px 字距、999px 圆角、12px × 24px 内边距。悬停时背景过渡到#1eaedbPlayStation Cyan，出现 2px#ffffff边框，通过 box-shadow 绽放 2px#0070cc外环，整个按钮放大 1.2×——全部在 180ms ease 过渡中完成。」

2. Hero 面板：「在#000000Console Black 画布上设计 hero 面板：54px SST 字重 300 标题、#ffffff文本、-0.1px 字距、1.25 行高。下方放置一个主 CTA，使用标准 PlayStation 悬停处理。任何地方都不要出现全大写标签。」

3. 游戏封面瓦片：「构建游戏封面瓦片：3:4 宽高比图片、12px 圆角、羽毛级rgba(0, 0, 0, 0.08) 0 5px 9px 0投影、下方 14px SST 700 标题、12px SST 500 平台标签、以及 PlayStation Blue 的迷你 14px / 700 / 0.324px 字距主 CTA。」

4. 电商 pill 按钮：「创建 PlayStation Store 购买用的电商 pill 按钮：#d53b00Commerce Orange 填充、#ffffff文本 SST 18px / 700 / 0.45px 字距、999px 圆角、12px × 28px 内边距。按下态变暗为#aa2f00。悬停遵循标准青蓝反转 + 1.2× 缩放。」

5. 白色内容面板：「设计介于深色 hero 区段之间的白色内容面板：#ffffff背景叠加微妙的#ffffff → #f5f7fa浅色区段渐变、24px 圆角、48px 内边距、羽毛级rgba(0, 0, 0, 0.06) 0 5px 9px 0层级、35px SST 300 标题、18px 正文段落、以及单个主 CTA。」

九、迭代审计清单：八步校验生成的界面

DESIGN.md 第 9 节的 Iteration Guide 给出了八步审计法，用于精修已生成界面，确保不偏离品牌语音：

1. 审计显示字重：22px 及以上所有标题必须是 SST 字重 300；若 hero 尺度出现 500/700 字重，就已丢失 PlayStation 语音；
2. 审计悬停处理：每个主按钮悬停必须同时具备 1.2× 缩放 + 青蓝填充 + 白边框 + 蓝环四要素，缺一即破坏交互签名；
3. 审计圆角：所有容器与按钮应落在 2 / 3 / 6 / 12 / 13 / 19 / 20 / 24 / 36 / 48 / 999px 或 100% 之一，直角破坏语音；
4. 审计颜色蔓延：chrome 中只允许 PlayStation Blue（#0070cc）、Cyan（#1eaedb）、Commerce Orange（#d53b00）以及声明的灰/黑/白色，出现其他色相即纠正；
5. 审计表面交替：页面应交替 深色 hero → 白色内容 → 深色 hero → 白色内容 → 蓝色 footer；两个同表面面板相邻时插入过渡；
6. 审计大小写：仅限 sentence case 与 title case，禁止全大写标签、按钮或 kicker；
7. 审计阴影权重：阴影不透明度必须落在 0.06 / 0.08 / 0.16 / 0.8，禁止 0.1 / 0.2 / 0.3 / 0.5 等中间值，修正到最近声明的层级；
8. 审计留白：两个模块若显得「互相争抢注意力」，增加 48–96px 垂直呼吸空间——PlayStation 的「画廊节奏」不可妥协。

十、背后的工程约束：为什么「契约优先」是 OpenDesign 的核心原则

结合仓库更广的上下文（design-systems/README.md）可以更完整地理解 USAGE.md 规则的工程动机：

• 派生文件是缓存而非真相源：components.manifest.json由components.html+tokens.css派生，design-tokens.json由 token 契约报告派生，tailwind-v4.css由tokens.css派生。因此 USAGE.md 要求「保留 token 名称原样」「不要脱离 tokens.css 单独重定义 Tailwind/design-token 值」，本质是防止派生层与真相源脱钩；
• 打包夹具是来源边界：manifest 的source.type: "bundled"与source/evidence.md明确划定了证据边界——本包是美学灵感包，不冒充对上游品牌的官方抓取；
• 包的组合机制：在 OpenDesign 中选择设计系统包或走受支持的项目创建流程时，包的设计上下文会被组合进 Agent 提示词；craft.suggested字段进一步建议叠加color与accessibility-baseline两条 craft 规范。包质量守卫（package-quality guards）会校验声明的路径、富文件档案、派生文件一致性、token 契约、组件夹具、来源证据与预览覆盖。

十一、FAQ 与常见坑位

Q1：tokens.css与design-tokens.json以谁为准？以tokens.css为准。design-tokens.json是派生输出，任何手动编辑都应避免；需要变更时应从tokens.css出发并重新生成派生文件。

Q2：可以直接使用 DESIGN.md 中的裸十六进制值吗？不建议。USAGE.md 明确「避免在复制的:roottoken 块之外使用裸十六进制颜色值」——所有颜色都应通过var(--accent)、var(--surface)这类 token 引用，这也是跨品牌切换可靠性的前提。

Q3：为什么强调「PlayStation Cyan 只存在于运动中」？--accent-hover: #1eaedb是青色唯一的 token 容身之处。DESIGN.md 将青色定义为交互色，只允许出现在 hover / focus / active 状态，绝不允许作为静止背景或静止文本色。

Q4：hover 的 scale(1.2) 会引发布局抖动吗？不会。.btn预先声明border: 2px solid transparent预留了 hover 白边框的槽位，同时transform-origin: center保证放大围绕中心进行，五个属性统一在 180ms 内完成过渡。

Q5：本包可以声称是 PlayStation 官方设计系统吗？不可以。包内 manifest 与 evidence 均声明其为 "bundled" 夹具来源的美学灵感包，design-systems/README.md也明确「引用品牌的包是美学灵感，而非所引用品牌的官方资产」。SST 字体同样为索尼专有，使用时依赖 Arial/Helvetica 回退链。

十二、快速上手清单

要把design-systems/playstation正确用起来，最终只需五步：

1. 阅读本包 USAGE.md 与 DESIGN.md，明确视觉意图与反模式；
2. 将 tokens.css 的:root块粘贴到产物<style>块；
3. 从 components.manifest.json 挑选组件组，需要精确状态时查阅 components.html；
4. 需要视觉抽查时打开preview/下的colors.html、typography.html、spacing.html；
5. 按八步审计清单校验字重、悬停、圆角、色彩、表面交替、大小写、阴影与留白，再交付评审。

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