OpenMontage visual-style 的 Figma Connector把 visual-style.md 设计系统映射为 Figma 样式与组件【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本指南详解 OpenMontage 仓库中 visual-style Skill 提供的 Figma 连接器Connector它解决的核心问题是如何把一份可移植的visual-style.md设计系统文件自动映射为 Figma 的颜色样式、文本样式、效果样式与布局网格并在一个 Style Guide Frame 中完成设计系统的可视化存档。读完本文你将掌握字段级映射规则、Figma 资源命名约定、网格预设的生成逻辑以及如何基于 TypeScript 接口编写读取visual-style.md的 Figma 插件。背景为什么需要 Figma Connectorvisual-style.md是 OpenMontage visual-style Skill 定义的一种单文件视觉设计系统格式它用带 YAML frontmatter 的 Markdown 文件把颜色、字体、布局、动效、情绪等设计要素集中封装任何 AI 工具都能消费。完整字段规范见 references/spec.md。但设计系统的价值要在目标工具中落地才能兑现。Figma 是设计师协作的核心阵地而 Figma 对样式有自己的一套组织方式颜色样式Color Styles、文本样式Text Styles、效果样式Effect Styles和布局网格Layout Grids它们按文件夹 命名的层级组织。Figma Connector 就是两者之间的翻译层——把visual-style.md的结构化字段翻译成 Figma 原生可识别的样式体系。从 SKILL.md 的Apply工作流看Figma 与 HeyGen 视频、HTML 幻灯片、paper.design 并列属于四大官方连接器之一其余三个见 connectors 目录 下的heygen-video-agent.md、html-slides.md、paper-design.md。字段映射总览visual-style.md → Figma 输出Connector 文档开篇给出了一张完整的字段映射表这是整个转换过程的合同visual-style.md 字段Figma 输出colors.primary颜色样式brand/primary、brand/secondarycolors.accent颜色样式accent/primary、accent/secondarycolors.neutral颜色样式neutral/100、neutral/200等typography.display文本样式heading/displaytypography.body文本样式body/default、body/largetypography.caption文本样式label/default、label/smalltypography.rules设计评审检查清单layout.grid布局网格预设layout.aspect_ratio画框Frame尺寸mood.avoid设计评审检查清单assets.reference_images风格指南画框理解这张表的两个要点结构化字段各司其职颜色、字体、网格这类可参数化的字段被翻译为 Figma 的样式对象而typography.rules、mood.avoid这类规则性、约束性字段无法参数化被转化为设计评审清单供人或 AI在交付前核对。与style_prompt_full的关系spec.md 明确style_prompt_full是最重要的字段任何工具即使不解析结构化字段也能直接把它当作文本提示词使用。Figma Connector 走的是精细控制路线——解析结构化字段生成真实样式对象而style_prompt_full仍可作为风格指南画框中的补充说明文字。颜色样式从colors对象到 Figma Color StylesConnector 文档规定了颜色样式的生成规则按文件夹分组每个colors数组元素映射为一个样式Folder: brand/ - brand/black → colors.primary[0].hex - brand/white → colors.primary[1].hex Folder: accent/ - accent/primary → colors.accent[0].hex - accent/secondary → colors.accent[1].hex (if exists) Folder: neutral/ - neutral/light → colors.neutral[0].hex - neutral/dark → colors.neutral[1].hex关键命名约定每个颜色样式的描述Description使用颜色对象中的role字段。结合 spec.md 的颜色对象 schema一个合法的颜色条目必须包含name、hex、role三个字段- name: Descriptive Name hex: #RRGGBB role: how this color is used in the system值得注意的映射细节colors.primary在 spec 中被要求至少 2 个颜色因此brand/black、brand/white是默认形态colors.accent和colors.neutral为可选字段accent/secondary、neutral的多个色阶如neutral/100、neutral/200都是如果存在才生成的条件分支Figma 的斜杠/命名即文件夹结构brand/primary会自动归入brand文件夹这正是文档 Tips 中用文件夹按用途分组颜色样式的底层实现。以画廊中真实的 Müller-Brockmann Swiss 风格示例 为例其颜色部分映射结果为源字段Figma 样式名hexrole作为描述colors.primary[0]brand/black#000000dominant ground, text, structural elementscolors.primary[1]brand/white#FFFFFFbackground fields, negative spacecolors.accent[0]accent/primary#0066FFthe ONE accent — data highlights, key emphasiscolors.neutral[0]neutral/light#CCCCCCgrid lines, secondary structurecolors.neutral[1]neutral/dark#333333supporting text, secondary labels文本样式从typography到 Figma Text Styles文本样式按字阶Type Scale分组生成Folder: heading/ - heading/display Font: typography.display.family Weight: typography.display.weight Size: 48px (or derive from style) Folder: body/ - body/default Font: typography.body.family Weight: typography.body.weight Size: 16px Folder: label/ - label/default Font: typography.caption.family Weight: typography.caption.weight Size: 12px映射要点typography.display→heading/display字号默认 48px文档注明或从 style 推导typography.body→body/default字号默认 16pxtypography.caption→label/default字号默认 12px字体族family与字重weight直接取自对应字段。补充说明字段结构来自 spec.md 的 Typography 对象 schemadisplay: family: Font Family Name weight: bold style: uppercase, tight trackingstyle字段如 uppercase, tight tracking是自然语言样式描述无法直接对应 Figma 的字体属性但它应被带入文本样式或风格指南画框的说明区。仍以 Swiss 示例为参照typography.rules中的 Helvetica ONLY、Type sizes follow a mathematical scale 等条目在文档映射表中会进入设计评审检查清单。布局网格从layout.grid到 Figma Layout Grid 预设Figma 的布局网格支持列Columns、行Rows与二者的组合。Connector 文档给出三条生成规则12 columns → Columns: 12 Type: Stretch Margin: 64px Gutter: 24px 8-point grid → Rows: Count Height: 8px Strict modular grid → Both columns AND rows enabled解读12 columns是文档中最典型的网格描述生成 12 列、Stretch 拉伸类型、64px 外边距Margin、24px 间距Gutter的列网格8-point grid生成行网格行高 8px——这是与 8 点间距系统配套的基线网格Strict modular grid严格模块化网格则同时启用列与行形成完整模组网格。在实际解析时layout.grid是自由文本字段如 spec 示例中的 Strict modular grid — 12 columnsConnector 需要从中识别关键数值列数、间距、边距来决定网格参数如果描述不完整应保守降级——只生成能确定的部分避免臆造数值。同时layout.aspect_ratio如 16:9决定风格指南画框的宽高比这是画框尺寸一栏的来源。风格指南画框把整个系统可视化归档Connector 文档要求生成一个风格指南画框Style Guide Frame把颜色、字体、规则一次性铺陈出来作为设计系统的说明书。文档给出了清晰的画框结构┌─────────────────────────────────────────────────────┐ │ [name] │ │ [style_prompt_short] │ ├─────────────────────────────────────────────────────┤ │ COLORS │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │████│ │████│ │████│ │████│ │████│ │ │ └────┘ └────┘ └────┘ └────┘ └────┘ │ │ Primary Secondary Accent Neutral │ ├─────────────────────────────────────────────────────┤ │ TYPOGRAPHY │ │ │ │ Display Heading │ │ [typography.display.family] [weight] │ │ │ │ Body text paragraph │ │ [typography.body.family] [weight] │ │ │ │ CAPTION / LABEL │ │ [typography.caption.family] [weight] │ ├─────────────────────────────────────────────────────┤ │ RULES │ │ ✓ [typography.rules[0]] │ │ ✓ [typography.rules[1]] │ │ │ │ AVOID │ │ ✗ [mood.avoid[0]] │ │ ✗ [mood.avoid[1]] │ └─────────────────────────────────────────────────────┘画框的组成与数据来源头部name样式名style_prompt_short一句话电梯陈述COLORS 区块按 Primary / Secondary / Accent / Neutral 分组展示色块TYPOGRAPHY 区块用真实字体渲染 Display Heading、Body、Caption 三级字阶标注 family 与 weightRULES / AVOID 区块把typography.rules以 ✓ 列表、mood.avoid以 ✗ 列表呈现——这正是正向约束 负向反模式双轨治理的直观体现。spec.md 的 Design Decisions 中解释了mood.avoid存在的理由告诉 AI 不要做什么往往比告诉它做什么更有效。画框尺寸由layout.aspect_ratio决定而assets.reference_images参考图 URL若存在则被导入画框作为视觉参照。Workflow六步落地流程Connector 文档给出的完整执行流程Read the style— 加载visual-style.md文件Create color styles— 调色板中每个颜色生成一个颜色样式Create text styles— 生成 Display、Body、Caption 文本样式Set up layout grid— 创建网格预设Build style guide frame— 生成风格指南画框归档整个系统Add reference images— 若assets.reference_images可用导入参考图。该流程与 SKILL.md 的通用 Apply 工作流一致Read the style → 确定 connector → Load connector → Transform字段映射→ Generate output。Figma Connector 的六步就是这个通用流程在 Figma 场景下的具象化。Figma 插件集成TypeScript 接口如果要把这个过程自动化可以构建一个读取visual-style.md的 Figma 插件。Connector 文档提供了完整的 TypeScript 接口定义interface VisualStyle { name: string; version: string; style_prompt_short: string; style_prompt_full: string; colors: { primary: Color[]; accent?: Color[]; neutral?: Color[]; }; typography: { display: TypographyStyle; body: TypographyStyle; caption: TypographyStyle; rules?: string[]; }; // ... other fields } interface Color { name: string; hex: string; role: string; } interface TypographyStyle { family: string; weight: string; style?: string; }使用建议该接口与 spec.md 的 Required/Optional 字段表完全对应colors、typography为必填accent、neutral、rules为可选因此插件解析时应做可选字段的空值兜底hex为#RRGGBB格式插件端需转换为 Figma 使用的 0–1 浮点 RGBr/255、g/255、b/255style_prompt_full未被结构化映射时仍可作为画框注释或图层说明写入保证即使不解析也能用若要扩展工具特定配置spec 允许在 frontmatter 中使用x_*命名空间如x_figma: { library_id: xyz789 }插件可读取x_figma段做库关联等高级能力而不会污染核心 schema。实战提示TipsConnector 文档最后给出四条工程化建议字体可用性Font availability— 生成文本样式前确认typography.*.family指定的字体在 Figma 中可用Google Fonts 或本机已安装否则 Figma 会回退到默认字体样式将失真颜色组织Color organization— 用文件夹即样式名中的/层级按用途分组颜色样式便于团队检索与维护样式描述Style descriptions— 始终用role字段作为样式描述让每个颜色样式的用途一目了然设计评审Design review— 从typography.rules和mood.avoid生成检查清单作为交付前的设计评审依据。与其他 Connector 的协作边界Figma Connector 与 visual-style Skill 中的其他连接器互补而非互斥HeyGen Video Agent Connector面向视频生成直接使用style_prompt_full与motion.*字段HTML Slides Connector把颜色映射为 CSS 变量、typography.display用于 h1–h3paper.design Connector面向设计文档。Figma Connector 的特殊价值在于它把设计系统落成设计工具中的一等公民——样式Style与组件Component可以被设计师直接引用、复用和版本化从而实现AI 生成设计系统 → 设计工具落地 → 设计师协作迭代的闭环。同一份visual-style.md既可以被 Figma 消费生成样式库又可以被 HeyGen 用于视频风格化——这正是单文件、多工具可移植设计哲学的体现画廊中的 预置风格示例 均为同一套格式。小结Figma Connector 将visual-style.md的每个核心字段都映射到了 Figma 的原生能力颜色数组 → 分组颜色样式字阶对象 → 文本样式layout.grid→ 网格预设typography.rules与mood.avoid→ 评审清单assets.reference_images→ 风格指南画框。搭配 spec.md 的字段规范与 画廊示例 的真实数据你可以立即用它把任何visual-style.md一键翻译成可用的 Figma 设计系统或基于给出的 TypeScript 接口开发自有插件。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考