企业官网建设流程全解析

• 人工智能
• AI 应用
• 桌面应用

本篇文章以 Open CoDesign 内置的品牌设计参考文档 runwayml/DESIGN.md 为主体，系统讲解 Runway「纯黑 + 白字 + 生成视频即设计」的品牌视觉系统如何在 DESIGN.md 结构化格式中落地，并深入源码揭示其被 Agent 通过skill("brand:runwayml")加载、校验与注入到生成工作流中的完整链路。读完本文，你将掌握 Runway 风格设计令牌的完整取值、可复制的实操规则，以及这套「参考性品牌系统」与项目内DESIGN.md设计规范之间的翻译转换方法。

一、这份文档是什么：参考型品牌系统 DESIGN.md

在 Open CoDesign 中，apps/desktop/resources/templates/brand-refs/目录下存放着一批「仅供参考、不可直接作为项目文件」的品牌设计系统，每个品牌一个子目录，核心文件即DESIGN.md。manifest.json 将这些品牌注册为结构化清单，其中 Runway 的条目为：

{ "slug": "runwayml", "name": "Runway", "category": "AI", "path": "runwayml/DESIGN.md" }

而apps/desktop/resources/templates/README.md明确界定了这类资源的性质：

brand-refs/*/DESIGN.mdare reference-only brand design systems loaded withskill("brand:<slug>"). They are not project files. When a brand is adopted, translate the relevant choices into the workspaceDESIGN.md.

即：Runway 的DESIGN.md只是「风格参照物」，当 Agent 决定采用该风格时，需要把其中的设计决策翻译进工作区的DESIGN.md，而不是直接把参考文档当作项目文件。同时 README 也说明了模板树的维护纪律：私有品牌参考、工作区DESIGN.md、scaffold、frames 与 JSX 片段不会通过自动升级机制热替换，启动时的刷新只覆盖七个已知方法技能文件。

runwayml/DESIGN.md遵循 Google Labs 的 DESIGN.md alpha 规范，结构上分为两大部分：---包裹的YAML frontmatter 令牌区（颜色、字体、圆角、间距、组件令牌）与Markdown 正文区（风格叙事、Do's & Don'ts、Agent 提示指南）。这种「机器可解析令牌 + 人类可读规则」的双层结构，正是它既能被校验器严格检查、又能被 Agent 直接理解的原因。

二、令牌层：Runway 品牌系统的结构化定义

文档开头的 YAML frontmatter 是整套令牌的权威来源，值得逐字段拆解：

2.1 颜色令牌（colors）

Runway 品牌刻意不设彩色强调色（accent）——所有色彩能量都由生成式视频内容本身提供。这也是「视频即设计」理念在令牌层的直接体现：accent令牌被定义为白色而非某个品牌色。

2.2 字体令牌（typography）

• display：fontFamily: Söhne, GT America, Inter, system-ui, sans-serif，fontWeight: 500，lineHeight: 1.05，letterSpacing: -0.025em。
• body：fontFamily: Söhne, Inter, system-ui, sans-serif，fontWeight: 400，lineHeight: 1.5，letterSpacing: -0.005em。
• mono：fontFamily: Söhne Mono, JetBrains Mono, ui-monospace, monospace，fontWeight: 400。

注意字体栈中都带有system-ui/monospace兜底，意味着即使环境中没有 Söhne 等商业字体，也能退回到系统无衬线体或等宽字体——这是令牌设计可落地性的关键。

2.3 圆角令牌（rounded）

none: 0px、sm: 2px、md: 4px、lg: 8px、full: 9999px。Runway 的签名式特征正是「小圆角」：输入框 2px、按钮 4px，chrome 上最大不超过 4px；lg的 8px 仅在个别场景出现，full留给白药丸 CTA。

2.4 间距令牌（spacing）

以unit: 4为基准的 4px 网格：xs: 4px、sm: 8px、md: 12px、lg: 16px、xl: 24px、2xl: 32px、3xl: 48px、4xl: 64px、5xl: 96px、6xl: 128px。正文区提到「section padding 96–128 px」，正是5xl/6xl两个令牌的典型用途。

2.5 组件令牌（components）

frontmatter 中的components通过「令牌引用（token reference）」复用上面定义的值：

components: button-primary: backgroundColor: "{colors.primary}" # #FFFFFF textColor: "{colors.background}" # #000000 typography: "{typography.body}" rounded: "{rounded.full}" # 9999px → 白色药丸按钮 padding: "{spacing.md}" # 12px card: backgroundColor: "{colors.surface}" # #0E0E0E textColor: "{colors.text}" # #F5F5F5 rounded: "{rounded.md}" # 4px padding: "{spacing.md}"

这种{colors.primary}形式的引用让组件与基础令牌保持单一事实来源，改一处令牌即可全局生效，是 DESIGN.md 规范推荐的写法。

2.6 令牌层如何被校验

令牌并非「写了就算」，Open CoDesign 通过 packages/shared/src/design-md.ts 中的validateDesignMd()对每个内置品牌参考执行严格校验，约束包括：

• 顶层字段仅允许version、name、description、colors、typography、rounded、spacing、components，其余一律报错；
• 颜色令牌必须是 sRGB 十六进制值（#RGB或#RRGGBB）；
• 尺寸值必须带px/em/rem单位（间距额外允许纯数字）；
• 字体令牌的fontFamily为必填，未知字体属性会报错；
• 组件令牌属性限定在backgroundColor、textColor、typography、rounded、padding、size、height、width，未知属性保留为 warning 扩展；
• 正文二级标题按Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts的已知顺序检查，重复或乱序会报错。

对应的自动化测试位于 apps/desktop/src/main/brand-refs-design-md.test.ts：测试遍历brand-refs/下所有品牌目录，逐一读取DESIGN.md并断言validateDesignMd返回的 error 级发现为空数组——也就是说，runwayml/DESIGN.md当前能随包发布，本身就是通过这项校验的证据。formatDesignMdForPrompt()还会把解析后的正文按已知顺序重排、超长时截断到 2000 字符后注入提示词。

三、正文区：Runway 风格叙事的完整继承

令牌层解决「用什么值」，正文区解决「为什么这样设计、怎么用」。以下内容完整继承自原文档并做补充解读。

3.1 Overview：视频即设计

Runway 是创意工具公司，但营销表层更像一家「艺术电影制片厂」：纯黑、字排驱动、满是自动播放的生成视频片段——视频本身就是设计。Chrome 被压到近乎为零：极薄的顶部导航、白色文字、单个白色药丸 CTA。品牌气质读起来更像「MoMA 美术馆」而非「SaaS 公司」。产品编辑器同样深色，底部是横向时间线、右侧是属性面板——典型的视频剪辑器空间逻辑。

3.2 Colors：单色系统

primary（白）用于主 CTA 填充与 hero 文字；background纯黑作画布；surface用于区块带与编辑器面板；surfaceRaised用于卡片、弹窗与 hover；text是深底正文；muted作次级文案；border是发丝线。品牌刻意没有色相强调色——生成视频提供全部色彩与能量。

3.3 Typography：克制字排

Söhne（Klim Type Foundry）是品牌主字体——一款带有微妙温度的中性 grotesk。Display 字重 500（而非 700，品牌回避粗体），紧字距（-0.025em）；正文字重 400、行高 1.5。层级靠字号与字重而非颜色拉开：hero（64–96 px）→ 区块标题（32–40 px）→ 正文（16 px）→ 说明/等宽（13 px）。等宽字出现在模型名（如 "Gen-3 Alpha"）、版本串、参数等「机器文本」上。

3.4 Layout：全出血视频带 + 视频编辑器五区

营销页用全出血（full-bleed）视频带上下堆叠，中间穿插纯文字短节；文字节的 max content width 约 1200 px；区块内边距 96–128 px。编辑器采用桌面视频剪辑器布局：顶部工具栏、左侧媒体库、中央预览、右侧属性面板、底部时间线。

3.5 Elevation & Depth：无阴影的扁平深色

品牌整体扁平而深。层级感来自视频内容「切开」页面，而非投影。弹窗在调暗的背板上使用柔和md阴影；编辑器面板仅靠 1pxborder分隔，内部无阴影。

3.6 Components：小圆角组件谱系

• 按钮：高 36–44 px、圆角 4 px（小圆角是签名特征，chrome 上最大 4 px）。主按钮为实心白底黑字、无边框；次按钮为透明底 + 低透明度 1px 白边框。
• 视频块：全出血自动播放片段，无边框、无阴影，仅 hover 时轻微缩放。
• 输入框：高 36 px、圆角 2 px、1pxborder，聚焦时变亮。
• 标签页：纯文字 + 底部细下划线。
• 徽章：muted色的小号等宽文字标签，无背景。

3.7 Do's & Don'ts：可直接执行的风格守则

Do

• 以自动播放的生成视频作为 hero 元素；
• 默认纯黑背景 + 白色文字；
• Display 用 Söhne（或 Inter）字重 500，绝不用粗体；
• chrome 的圆角保持小（≤ 4 px）；
• 把视频片段本身当设计——chrome 应围绕它们「消失」。

Don't

• 添加色相强调色——品牌是单色的；
• chrome 上使用大于 8 px 的圆角；
• 用渐变、辉光或色洗做装饰；
• 堆叠多个 CTA——一个白色药丸足矣；
• 在营销 mockup 里展示编辑器——要展示输出（视频）。

3.8 Responsive Behavior：响应式策略

约 960 px 以下：多列视频网格纵向堆叠，且只自动播放视口内的那个片段以节省带宽；hero 标题从 ~96 px 降到 ~36 px；区块内边距从 128 降到 64 px。编辑器本身仅限桌面端，移动端用户进入的是「只读查看」体验。

四、Agent 如何调用：skill 工具与brand:runwayml加载链路

Runway 参考文档在生成工作流中的实际入口是skill工具。packages/core/src/tools/skill.ts 定义了完整的加载链路，核心机制如下：

1. 工具声明：makeSkillTool()暴露名为skill的 Agent 工具，参数name描述中明确支持两类输入——内置方法技能（如form-layout、empty-states、design-system-baton）或品牌参考brand:<slug>（如brand:vercel、brand:linear、brand:stripe，Runway 即brand:runwayml）。工具的引导文案要求 Agent在写代码之前、当请求与某个风格匹配时就调用它，且每次会话每个技能只注入一次。

2. 清单解析：listSkillManifest()读取brandRefsRoot/manifest.json，把slug拼成规范技能名brand:runwayml，aliases设为品牌名Runway，path指向runwayml/DESIGN.md。即便 manifest 缺失，也会回退到遍历目录、按brand:<slug>/DESIGN.md的约定路径注册——这就是为什么每个品牌目录必须存在DESIGN.md。

3. 安全路径解析：resolveSafeManifestPath()对注册路径做两层防护——先用path.relative校验候选路径不能逃出模板根目录，再逐段lstat检查不允许穿过符号链接，防止模板目录被恶意软链劫持。

4. 去重注入：invokeSkill()先查alreadyLoaded集合，命中则返回简短的already-loaded响应；否则读取DESIGN.md全文并返回status: 'loaded'。成功加载后规范名被加入去重集合，同一会话内重复调用不会再次注入整篇文本，节省上下文窗口。

5. 错误契约：读取失败会抛出带ERROR_CODES.SKILL_LOAD_FAILED的CodesignError；找不到技能则返回not-found并提示去查资源清单。

另外，加载路径由调用方在工厂时注入（skillsRoot/brandRefsRoot），生产环境指向<userData>/templates/skills/与<userData>/templates/brand-refs/——这两个目录由应用启动时从内置资源播种（只补充缺失文件，不覆盖用户已有文件）。这也解释了为什么brand:runwayml等品牌参考属于「用户可见、可编辑的模板树」的一部分，而应用启动的方法技能升级机制（apps/desktop/src/main/method-skill-upgrades.ts 及其 SHA-256 修订记录）明确不触碰私有品牌参考与工作区DESIGN.md。

五、实战：让 Agent「按 Runway 风格」出设计

原文档末尾的Agent Prompt Guide是面向生成侧的可操作清单，完整继承如下——当请求被判定为「Runway 风格」时：

1. 构建纯黑 + 白字。无强调色——生成视频提供全部色相能量；
2. 页面以一个全出血自动播放视频片段开场，围绕它的 chrome 应不可见；
3. 文字用 Söhne（或 Inter）字重 500、紧字距，不用粗体；
4. 输入框圆角 2–4 px、按钮圆角 4 px；
5. 单个白色药丸 CTA、黑字、无边框、无阴影。

在 Open CoDesign 的完整流程中，这段指南与前三节令牌/规则共同构成「先加载、后翻译」的两步走：

• 加载：Agent 调用skill("brand:runwayml")，DESIGN.md全文经 packages/shared/src/design-md.ts 的formatDesignMdForPrompt()规范化后注入上下文；
• 翻译：由于品牌参考「不是项目文件」，Agent 应把采纳的决策（颜色令牌、字体栈、圆角上限、布局节奏、组件形态）写入工作区 DESIGN.md，作为该项目视觉真相的唯一来源（design-system baton），后续多屏、品牌驱动的生成都应维护与更新它，而不是反复引用参考文档。

从源码结构可以推断，这套「参考品牌 → 工作区规范 → 生成执行」的链路，正是 Open CoDesign 让同一个 Agent 能稳定产出多种成熟品牌风格的基础设施：风格知识沉淀为结构化、可校验、可注入的文档资产，而不是散落在模型权重里的模糊印象。

六、总结

runwayml/DESIGN.md是一份「麻雀虽小、五脏俱全」的品牌参考范例：YAML 令牌层给出了可直接复制的完整取值（纯黑画布、白字、Söhne 500、2–4px 小圆角、白色药丸 CTA），Markdown 正文层给出了从概览、色彩、字排、布局、层级到 Do's & Don'ts、响应式与 Agent 提示的完整叙事。在 Open CoDesign 中，它经由 manifest.json 注册、被 skill.ts 安全加载、被 design-md.ts 严格校验，并由 brand-refs-design-md.test.ts 保证每一份随包发布的品牌参考都符合 DESIGN.md 规范。对开发者而言，既可以把本文中的令牌与规则直接复制进自己的设计系统，也可以照着 Runway 这个范例的结构，为任何品牌编写一份可被 Agent 消费的brand:<slug>/DESIGN.md。

说明：本文基于 open-codesign 仓库内 apps/desktop/resources/templates/brand-refs/runwayml/DESIGN.md 整理；该文档底部声明其灵感源自 Runway 公开品牌物料，令牌来源于公开 CSS / press 材料，与品牌所有者无关联，文档结构基于 VoltAgent/awesome-design-md（MIT）。

• 人工智能
• AI 应用
• 桌面应用