Open CoDesign 品牌参考指南：Runway 风格 DESIGN.md 深度解析与 Agent 调用实践

人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载本篇文章以 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 正文区风格叙事、Dos Donts、Agent 提示指南。这种「机器可解析令牌 人类可读规则」的双层结构正是它既能被校验器严格检查、又能被 Agent 直接理解的原因。二、令牌层Runway 品牌系统的结构化定义文档开头的 YAML frontmatter 是整套令牌的权威来源值得逐字段拆解2.1 颜色令牌colors令牌值语义primary#FFFFFF白色主 CTA 填充色与 hero 文字色secondary#000000黑色background#000000纯黑画布surface#0E0E0E区块带与编辑器面板surfaceRaised#1A1A1A卡片、弹窗、hover 状态text#F5F5F5深底上的正文色muted#7A7A7A次级文案border#222222发丝线hairlineRunway 品牌刻意不设彩色强调色accent——所有色彩能量都由生成式视频内容本身提供。这也是「视频即设计」理念在令牌层的直接体现accent令牌被定义为白色而非某个品牌色。2.2 字体令牌typographydisplayfontFamily: Söhne, GT America, Inter, system-ui, sans-seriffontWeight: 500lineHeight: 1.05letterSpacing: -0.025em。bodyfontFamily: Söhne, Inter, system-ui, sans-seriffontWeight: 400lineHeight: 1.5letterSpacing: -0.005em。monofontFamily: Söhne Mono, JetBrains Mono, ui-monospace, monospacefontWeight: 400。注意字体栈中都带有system-ui/monospace兜底意味着即使环境中没有 Söhne 等商业字体也能退回到系统无衬线体或等宽字体——这是令牌设计可落地性的关键。2.3 圆角令牌roundednone: 0px、sm: 2px、md: 4px、lg: 8px、full: 9999px。Runway 的签名式特征正是「小圆角」输入框 2px、按钮 4pxchrome 上最大不超过 4pxlg的 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 组件令牌componentsfrontmatter 中的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 → Dos and Donts的已知顺序检查重复或乱序会报错。对应的自动化测试位于 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用于卡片、弹窗与 hovertext是深底正文muted作次级文案border是发丝线。品牌刻意没有色相强调色——生成视频提供全部色彩与能量。3.3 Typography克制字排SöhneKlim Type Foundry是品牌主字体——一款带有微妙温度的中性 grotesk。Display 字重 500而非 700品牌回避粗体紧字距-0.025em正文字重 400、行高 1.5。层级靠字号与字重而非颜色拉开hero64–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 Dos Donts可直接执行的风格守则Do以自动播放的生成视频作为 hero 元素默认纯黑背景 白色文字Display 用 Söhne或 Inter字重 500绝不用粗体chrome 的圆角保持小≤ 4 px把视频片段本身当设计——chrome 应围绕它们「消失」。Dont添加色相强调色——品牌是单色的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 定义了完整的加载链路核心机制如下工具声明makeSkillTool()暴露名为skill的 Agent 工具参数name描述中明确支持两类输入——内置方法技能如form-layout、empty-states、design-system-baton或品牌参考brand:slug如brand:vercel、brand:linear、brand:stripeRunway 即brand:runwayml。工具的引导文案要求 Agent在写代码之前、当请求与某个风格匹配时就调用它且每次会话每个技能只注入一次。清单解析listSkillManifest()读取brandRefsRoot/manifest.json把slug拼成规范技能名brand:runwaymlaliases设为品牌名Runwaypath指向runwayml/DESIGN.md。即便 manifest 缺失也会回退到遍历目录、按brand:slug/DESIGN.md的约定路径注册——这就是为什么每个品牌目录必须存在DESIGN.md。安全路径解析resolveSafeManifestPath()对注册路径做两层防护——先用path.relative校验候选路径不能逃出模板根目录再逐段lstat检查不允许穿过符号链接防止模板目录被恶意软链劫持。去重注入invokeSkill()先查alreadyLoaded集合命中则返回简短的already-loaded响应否则读取DESIGN.md全文并返回status: loaded。成功加载后规范名被加入去重集合同一会话内重复调用不会再次注入整篇文本节省上下文窗口。错误契约读取失败会抛出带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 风格」时构建纯黑 白字。无强调色——生成视频提供全部色相能量页面以一个全出血自动播放视频片段开场围绕它的 chrome 应不可见文字用 Söhne或 Inter字重 500、紧字距不用粗体输入框圆角 2–4 px、按钮圆角 4 px单个白色药丸 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 小圆角、白色药丸 CTAMarkdown 正文层给出了从概览、色彩、字排、布局、层级到 Dos Donts、响应式与 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-mdMIT。赞分享人工智能AI 应用桌面应用【免费下载链接】open-codesignOpen-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.项目地址https://gitcode.com/gh_mirrors/op/open-codesign点击查看免费下载相关推荐Open CoDesign DESIGN.md设计系统实战把品牌规范变成可复用的AI设计记忆Open CoDesign DESIGN.md设计系统实战把品牌规范变成可复用的AI设计记忆 Open CoDesign 是一款开源的桌面端 AI 设计工具人工智能AI 应用桌面应用ag-kit DESIGN.md 参考库实战指南用 70 真实品牌设计规范驱动 AI 界面设计ag kit DESIGN.md 参考库实战指南用 70 真实品牌设计规范驱动 AI 界面设计 本指南讲解 ag kit 中 design spec 技能附人工智能AI 技能claude-seo Banana 扩展品牌/风格 Presets 参考指南——用预设实现 SEO 图片生成的一致性claude seo Banana 扩展品牌/风格 Presets 参考指南——用预设实现 SEO 图片生成的一致性 导读 本篇技术指南围绕 claude s上一篇Kokoro TTS高级技巧流式播放、语速调节与音频格式选择终极指南下一篇彻底解决Monaco Editor变量冲突环境变量优先级全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考