企业官网建设流程全解析

OpenDesign Design System 2.0 包使用指南：以 Runway 为例的 Agent 设计系统接入规范

【免费下载链接】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 仓库内置的runwayml（Runway 风格）设计系统包为实例，系统讲解 Design System 2.0 包的完整使用契约：从阅读顺序、核心设计语言、tokens.css语义化令牌体系，到 Do / Avoid 约束、组件清单与派生产物。读完本文，你将掌握如何让 Agent 与设计评审者以标准流程消费一个设计系统包，以及如何在落地实现中严格复用令牌而不再发明样式。

一、包结构与阅读顺序：Agent 使用设计系统的标准姿势

design-systems/runwayml/是 OpenDesign 内置的便携式设计系统包（Bundled Package），其入口文档 USAGE.md 定义了给 OpenDesign Agent 与设计评审者使用的包契约。按包内推荐的阅读顺序，可以最高效地建立对该系统的完整认知：

1. 先读 USAGE.md，理解整个包的使用契约与边界；
2. 再读 DESIGN.md，掌握视觉意图、约束与反模式（anti-patterns）；
3. 将 tokens.css 粘贴到产物第一个<style>块中，再开始编写组件样式——这是"令牌先行"的工作流；
4. 用 components.manifest.json 获取紧凑的组件清单；当需要精确选择器或状态时，打开 components.html；
5. 需要视觉核对时，查阅 preview/ 下的预览页（colors.html、typography.html、spacing.html）。

这一阅读顺序的背后是 OpenDesign Design System 2.0 的包规范：每个包至少包含manifest.json（稳定发现元数据与来源声明）、DESIGN.md（面向 Agent 的设计散文）与tokens.css（编译后的语义令牌样式表），详见 design-systems/README.md 与 docs/design-systems.md。runwayml包在三个必需文件之上，还补齐了components.html、components.manifest.json、design-tokens.json、tailwind-v4.css、preview/与source/等"富包文件"（rich package files），这些字段都是运行时的实际输入，而不是结构占位符。

二、设计亮点：电影级媒体主导的"隐形界面"

USAGE.md 用四个特征概括 Runway 风格系统的设计亮点，它们也是后续所有令牌与组件的设计依据：

• 电影级全幅摄影与视频是主要 UI 元素：界面本身退居幕后，视觉内容（AI 生成/增强的影像）才是设计本体；
• 单一字体系统：abcNormal从 48px 展示标题到 11px 微标签一以贯之，层级靠字号、大小写与字距而非切换字体实现；
• 暗色主导、冷调中性色：辅助文本统一使用带蓝灰冷调的中性色（#767d88、#7d848e），绝不用暖灰；
• 零阴影、极简边框：界面"刻意不可见"，深度来自明暗分区交替与摄影内容的景深，而非 CSS 阴影。

在 DESIGN.md 中，这四条亮点被进一步拆解为可执行的特征清单：展示级排版行高 1.0 + 负字距（-0.9px 至 -1.2px）、大写标签配合正字距（0.35px）构建导航结构、微标签使用罕见的 450 字重（介于 regular 400 与 medium 500 之间）体现"精确工艺"、杂志式混合尺寸图片栅格排版。其中"单一字体 + 大小写/字距驱动层级"与"零阴影"两条，是与其他设计系统区分度最高的识别特征。

三、Do：Agent 落地的四条铁律

USAGE.md 的 Do 清单定义了落地实现时必须遵守的行为：

1. 保留 schema 令牌名原样，保证跨品牌切换可靠。这是 Design System 2.0 的核心机制：OpenDesign 的 151 个内置包（见 design-systems/README.md）共享同一套语义化 TOKEN_SCHEMA，--bg、--surface、--muted等令牌名在各品牌包之间保持一致，只是值不同。改动令牌名会破坏跨品牌组合（cross-brand switching）的可靠性。

2. 用--accent表示主操作、链接、焦点态与唯一焦点元素。在 Runway 包中，--accent被绑定为纯白#ffffff（见 tokens.css 第 88 行）——该系统没有任何装饰性强调色，白色就是最高信号表面，用于 CTA 填充与焦点环；hover/active 状态向冷银中性色变暗（--accent-hover: #e9ecf2、--accent-active: #c9ccd1）而不是混入色相。这意味着"强调"是一种克制的高对比手法，而非彩色点缀。

3. 从 components.manifest.json 复用组件组，而不是发明新控件。清单将 65 个选择器、35 个类、25 个元素归纳为 9 个组件组：buttons、inputs、cards、badges、links、keyboard、icons、typography、layout，并为每个组列出所引用的令牌（tokenReferences）。例如 buttons 组引用--accent、--accent-active、--accent-on、--radius-sm、--text-sm等 10 个令牌；cards 组引用--surface-warm、--text-xs、--space-4等。新增控件前应先确认清单中是否已有等价物。

4. 将 source/ 下的文件视为打包 fixture 回填（backfill）的审计证据。evidence.md 明确声明：该包基于 OpenDesign 策展的捆绑 fixture 派生，不主张对上游品牌仓库或网站的重新抓取证据；token-contract.report.json将每个 TOKEN_SCHEMA 绑定映射回已提交的tokens.css声明行；tokens.source.json保存源令牌。派生文件（design-tokens.json、tailwind-v4.css）应从此报告与令牌样式表重新生成，而不是手工编辑。

四、Avoid：四条硬性反模式

同样来自 USAGE.md 的 Avoid 清单，是对 Do 的镜像约束：

• 避免在拷贝的:root令牌块之外使用原始十六进制值：所有颜色必须走令牌变量，防止散落的硬编码色值破坏品牌一致性；
• 避免脱离 tokens.css 独立重定义 Tailwind 或设计令牌值：tailwind-v4.css是tokens.css的派生映射（首行即注明 "Derived from tokens.css. Keep tokens.css as the source of truth."），唯一事实源是tokens.css；
• 避免声称存在原始上游来源证据：如第五节所述，本包基于策展捆绑 fixture，不应编造溯源；
• 避免添加 components.html 与 DESIGN.md 中未体现的新组件配方：组件配方必须"有据可依"，新增配方会破坏清单与 fixture 的同步校验。

五、令牌体系深读：tokens.css 的语义化设计决策

tokens.css 是整个包的技术核心，文件头部的注释区块逐条记录了 schema 决策与 DESIGN.md 章节的映射关系。以下是关键设计决策：

Surface（三级表面，暗色主导）

• --bg: #000000（Runway Black）——主画布，纯黑；
• --surface: #1a1a1a（Dark Surface）——卡片/抬升容器；
• --surface-warm: #030303（Deep Black）——schema 的 B 槽位：Runway 没有"暖"色调，因此这个第三层级暗色被绑定为"更深的平行冷调面板"。

Foreground（四级前景）

• --fg: #ffffff（Pure White）——主文本与品牌标识；
• --fg-2: #e9ecf2（Cool Cloud）——备用标题色调；
• --muted: #767d88（Cool Slate）——次要正文，品牌签名冷蓝灰；
• --meta: #7d848e（Mid Slate）——三级文本、元数据。

Border（两级边框）

• --border: #27272a（Border Dark）——唯一暗色模式边框，"勉强可见的容器边界"；
• --border-soft: #1a1a1a——与卡片表面同色的内部分隔线，视觉上几乎不可见。

Accent（强调）

• --accent: #ffffff——纯白即品牌强调色；--accent-on: #000000用于白色 CTA 填充上的黑色文字；hover/active 向#e9ecf2/#c9ccd1变暗。

Typography（单字体承诺）

• --font-display与--font-body均绑定"abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, ...——外部实现可用 Inter 或 DM Sans 替代自定义字体（DESIGN.md §3 明示）；
• 字号标尺直接映射 DESIGN.md §3 层级表：--text-xs: 11px（微标签，大写，450 字重）→--text-4xl: 48px（展示/主视觉）；
• --leading-tight: 1.0（电影标题式压缩）、--leading-body: 1.4（正文带 1.30–1.50 区间的中值，保持编辑式紧凑）、--tracking-display: -0.025em（48px 主视觉下约 -1.2px）。

Elevation（零阴影的强制实现）

• --elev-flat: none、--elev-raised: none——覆盖 schema 的模糊回退，让任何引用var(--elev-raised)的组件都不产生阴影，忠实于"零阴影"品牌纪律；
• --elev-ring: 0 0 0 1px var(--border)——以 1px 发丝环替代边框，服务于文档化的"alert 容器"场景。

Layout 与 Motion

• --container-max: 1600px（影院级宽容器）、gutter 从桌面 48px 渐进收窄到手机 16px，保证全幅摄影 hero 能保持无缝；
• 分区节奏--section-y-desktop: 78px（"影院级呼吸感"）→--section-y-phone: 32px；
• 动效--motion-fast: 150ms、--motion-base: 220ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)——比 schema 默认略慢的"电影节奏"。

从 design-tokens.json 可看到机器可读的契约统计：共 56 个令牌全部由tokens.css声明支撑（source-backed 56/56），契约评分为100 分（grade: excellent），无需重建；其中 A1-identity 层 8 个、A1-structure 层 18 个、A2 层 26 个、B-slot 层 4 个。每个令牌都带confidence: high与精确的源码行引用（如tokens.css:62对应--bg）。

六、视觉意图全景：DESIGN.md 的可执行设计语言

DESIGN.md 是 Agent 的"设计散文"，与tokens.css一一对应。其九个章节覆盖了从氛围到提示词的完整链路，核心内容如下。

颜色角色：主色为 Runway Black#000000、Deep Black#030303、Dark Surface#1a1a1a、Pure White#ffffff；中性色梯度的关键是两组冷调灰（Cool Slate#767d88/ Mid Slate#7d848e）与一组暖灰之外的浅色（Cool Cloud#e9ecf2、Cool Silver#c9ccd1）。渐变系统：界面中不存在——色彩与渐变全部由摄影内容提供。

排版层级表（可直接用于提示词与样式实现）：

组件风格：按钮文本 14px/600 字重、4px 小圆角、无重填充无粗边框；卡片为透明或 Dark Surface 背景、1px solid #27272a边框、4–8px 圆角、零阴影，"图片本身就是卡片"；导航为透明叠加的极简横排。特色组件包括电影级 Hero（全视口影像 + 文本叠层）、研究文章卡片（混合尺寸杂志栅格）、信任栏（单色 Logo 横排）与使命声明区。

布局与留白哲学：8px 基准栅格（4/6/8/12/16/20/24/28/32/48/64/78px），最大容器 1600px；"图片替代留白"——其他网站用空白的地方，Runway 用摄影填充；圆角标尺为 4px（锐利/按钮）、6px（细微/链接）、8px（舒适/容器与图片）、16px（宽绰/告警容器）。

深度与层级：共四档——Flat（无阴影无边框，主导状态）、Bordered（1px solid #27272a，仅告警容器）、Dark Section、Light Section。阴影哲学在 §6 中直接点题："Runway 使用零阴影。这是电影制作层面的设计决策——电影中深度来自光影、焦点与构图，而非投影。"

响应式行为：断点为 Mobile <640px（单列、堆叠图片）、Tablet 640–768px（两列栅格起步）、Small Desktop 768–1024px、Desktop 1024–1280px、Large Desktop 1280–1600px（最大影院宽容器）；导航在移动端折叠为汉堡菜单，图片栅格按多列→两列→单列收缩。

七、Agent 提示词指南：直接可用的设计指令

DESIGN.md 第 9 节提供了可直接粘贴进 Agent 提示词的内容，与令牌体系完全同构：

快速颜色参考：Background Dark = "Runway Black (#000000)"、Primary Text Dark = "Charcoal (#404040)"、Secondary Text = "Cool Slate (#767d88)"、Muted Text = "Muted Gray (#a7a7a7)"、Light Border = "Cool Silver (#c9ccd1)"、Dark Border = "Border Dark (#27272a)"、Card Surface = "Dark Surface (#1a1a1a)"。

示例组件提示词（节选）：

• 电影级 Hero："full-bleed dark background with a cinematic image overlay. Headline at 48px abcNormal weight 400, line-height 1.0, letter-spacing -1.2px in white. Minimal text below in Cool Slate (#767d88) at 16px."
• 研究文章栅格："one large card (50% width) with a cinematic image and 24px title, next to two smaller cards stacked. All images with 8px border-radius."
• 区块标签："14px abcNormal weight 500, uppercase, letter-spacing 0.35px in Cool Slate (#767d88). No border, no background."
• 使命声明区："Runway Black background, white text at 36px abcNormal, line-height 1.0, letter-spacing -0.9px."

迭代指南（六步）：先放视觉内容（始终包含电影级摄影）→ 全程使用 abcNormal（指定字号与字重，绝不换字体）→ 保持界面隐形（无粗边框、无阴影、无亮色）→ 次要文本用冷调石板灰（#767d88、#7d848e），不用暖灰 → 大写标签必须带字距（0.35px），绝不使用紧凑大写 → 暗色区块必须真正暗（#000000或#1a1a1a），不用中灰做表面。

八、组件 Fixture 与派生产物：验证与消费闭环

components.html 是独立的组件 fixture，其<style>块内的:root令牌声明与tokens.css完全一致（声明了 56 个令牌），正文包含 65 个选择器、35 个类与 25 个元素的参考实现。该 fixture 的价值在于：任何可见值都来自tokens.css，可以作为"令牌正确性"的活体验证。

组件清单 components.manifest.json 还给出了两类审计数据：

• token 使用统计：declared 56 个、referenced 45 个、unusedDeclared 10 个（如--danger、--elev-raised、--radius-lg、--text-2xl、语义色--success/--warn等——这些"备用令牌"供 admin/utility 场景解析，但不出现在公开品牌表面，与 DESIGN.md §2 "语义色覆盖率 <5%" 的约束一致）；undeclaredReferenced 为 0，说明 fixture 没有引用未声明的令牌；
• 字面量审计：18 处颜色表达式、29 处像素值、6 处硬编码字体族——可据此排查是否混入了令牌外硬编码。

派生产物方面：tailwind-v4.css 通过@theme将全部令牌映射为 Tailwind v4 主题变量（--color-bg、--text-4xl、--shadow-raised等），使 Tailwind 用户无需改动语义化令牌即可消费品牌；design-tokens.json 则是 TOKEN_SCHEMA 契约的机器可读快照（56 令牌、评分 100）。依据 design-systems/README.md，这两个文件是缓存而非竞争性事实源，任何不一致都应回源tokens.css重新生成。

预览页 preview/colors.html 展示了这一闭环的消费方式：直接<link rel="stylesheet" href="../tokens.css">引入令牌，再以var(--bg)、var(--surface)、var(--muted)渲染色板，验证令牌在真实渲染下的效果；system/ 目录还提供了index.html、kit.html、kit.dark.html与tokens.default.json等系统级预览资产。

九、包级元数据：manifest.json 与 craft 绑定

manifest.json 遵循od-design-system-project/v1schema，记录：

• id: "runwayml"（与文件夹 slug 一致）、name: "Runway"、category: "AI & LLM"；
• source.type: "bundled"、origin: "OpenDesign curated bundled fixture"——来源为 OpenDesign 策展捆绑 fixture，而非上游抓取；
• files声明 DESIGN.md、tokens.css、design-tokens.json、tailwind-v4.css、components.html；
• importMode: "normalized"——令牌以规范化语义绑定导入；
• craft.suggested: ["color", "accessibility-baseline"]——提示词组合时建议绑定 craft/color.md 与 craft/accessibility-baseline.md 两条工艺准则；
• preview索引三个预览页，sourceFiles索引三个证据文件。

在 OpenDesign 运行时中，提示词组合会消费USAGE.md、tokens.css、组件信息、导入模式、craft 绑定与 manifest 派生的拉取索引（见 design-systems/README.md）；包质量守卫会校验声明路径、富包档案、派生文件一致性、令牌契约、组件 fixture、来源证据与预览覆盖。因此，对runwayml包的正确使用方式始终是"读 USAGE.md 建立契约认知 → 按顺序消费 DESIGN.md 与 tokens.css → 以令牌构建组件，而非发明新值"——这正是 Design System 2.0 让 Agent 产出保持品牌一致性的底层机制。

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