OpenMontage 视觉风格实战:用 Game Boy Color 复古像素风定义可移植的设计系统

OpenMontage 视觉风格实战:用 Game Boy Color 复古像素风定义可移植的设计系统 OpenMontage 视觉风格实战用 Game Boy Color 复古像素风定义可移植的设计系统【免费下载链接】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 仓库中.agents/skills/visual-style/references/gallery/game-boy-color.visual-style.md这一份完整的视觉风格定义文件展开系统讲解 Game Boy Color 复古像素美学如何被结构化为机器可读的visual-style.md格式并落地到 HeyGen 视频生成、HTML 幻灯片、paper.design 与 Figma 等不同工具。读完本文你将掌握这份风格文件的全部字段语义、色彩/字体/动效规范以及如何基于 OpenMontage 的 visual-style 技能体系把一种情怀美学转化为可被 AI 工具稳定消费的设计系统。一、背景这份文件在 OpenMontage 中的定位OpenMontage 是一个开源的、Agent 化的视频生产系统其 skills 目录中维护了一套名为visual-style的技能见 SKILL.md核心理念是用一份visual-style.md文件同时定义颜色、字体、布局、动效与情绪让任何 AI 工具都能消费它。该技能提供四种工作模式模式触发方式行为Create创建Create a visual-style.md for...通过引导式提问从零构建风格文件Extract提取Extract a visual-style.md from [URL/image/video]从网站、视频、PDF 中分析并生成风格文件Apply应用Apply this visual-style.md to [tool]通过连接器将风格映射到具体工具Gallery画廊Show me available visual styles浏览并套用预置风格game-boy-color.visual-style.md正是 Gallery 模式下的预置风格之一创作于 2026-03-12作者署名 Visual Style Gallery与 Müller-Brockmann Swiss、Saul Bass Cinematic、Neville Brody Industrial 等风格并列存放于 references/gallery/ 目录并在.claude/skills/visual-style/references/gallery/下有镜像副本。它同时被 references/connectors/heygen-video-agent.md 明确列为与 HeyGen Video Agent 配合良好的像素艺术、复古游戏风格。二、文件结构一份可供任何 AI 工具消费的完整规格按照 references/spec.md 中定义的 v1.0 格式规范visual-style.md是YAML frontmatter Markdown body的组合。本文件完整实现了这一结构YAML frontmatter---之间元数据、style_prompt_short/style_prompt_full、colors、typography、layout、motion、mood、assets、x_*扩展。Markdown body## Design Principles与## Connectors两个自由格式章节。spec.md 强调有效的风格文件必须包含name、version、style_prompt_short、style_prompt_full以及至少两个带name/hex/role的colors.primary颜色对象。本文件全部满足且版本号1.0指代的是格式规范版本而非风格自身版本。三、风格提示词短摘要与完整生成指令style_prompt_short一句话电梯陈述style_prompt_short: Late 90s handheld gaming nostalgia. Limited color palette, chunky pixels, portable adventures in your pocket.翻译过来即90 年代末掌机游戏怀旧感受限的配色、厚实的像素、口袋里的便携冒险。它服务于画廊浏览场景——当用户说Show me available visual styles时Agent 依靠这 1~2 句摘要快速向用户描述风格气质。style_prompt_full整个文件的国王字段style_prompt_full: Game Boy Color aesthetic from the late 1990s. Limited color palette per scene (originally 56 colors, often using 4-10 per sprite). Characteristic GBC colors: that specific teal-green (#0F380F to #9BBC0F gradient), purple shell (#663399), berry (#CC3366), teal (#339999), atomic purple (#6B3FA0). Chunky pixel graphics at low resolution (160x144 native). Dithering patterns for shading. Simple sprite animations at low frame rates (10-15fps). UI elements have that distinctive GBC border style. Sound design would be chiptune — 4-channel audio aesthetic. Portable, colorful, charming. Not as limited as original Game Boy, but still clearly constrained. Pokemon Crystal, Links Awakening DX, Wario Land 3 as references.在 visual-style 体系中style_prompt_full被反复强调为THE most important field见 SKILL.md 与 spec.md。设计决策在于很多 AI 工具只接受一段纯文本提示词因此必须保证即使工具不解析任何结构化字段单凭这段自然语言也能生成一致的画面。本文件的该字段把 GBC 美学的全部关键约束都内联进去了单场景受限调色板原始硬件 56 色单精灵常用 4~10 色特征色号详见下一节原生分辨率 160x144、低帧率 10~15fps 精灵动画抖动dithering做明暗过渡、GBC 风格 UI 边框芯片音乐chiptune4 声道听感参考作品Pokemon Crystal、Links Awakening DX、Wario Land 3四、色彩体系8 个色板 Token 与角色分工colors字段把整个配色拆成 primary / accent / neutral 三组每个颜色对象由name描述名、hex色值、role用途角色三元组构成。这份文件给出了完整 8 色方案Primary主色至少 2 个为必填名称Hex角色GBC Dark Green#0F380F最暗色调描边/轮廓GBC Light Green#9BBC0F最亮色调高光Accent强调色机壳变体名称Hex角色GBC Purple#663399原始机壳色品牌强调Berry Pink#CC3366莓红机壳变体Teal#339999青绿机壳变体Atomic Purple#6B3FA0原子紫机壳特殊强调Neutral中性色二级元素名称Hex角色GBC Mid Green#306230中间调次要元素GBC Pale Green#8BAC0F亮中间调这套配色还原了 GBC 硬件最标志性的四档绿色梯度#0F380F→#306230→#8BAC0F→#9BBC0F在完整提示词中被称为 that specific teal-green gradient同时用四款真实存在的机壳色紫#663399、莓红#CC3366、青绿#339999、原子紫#6B3FA0承担品牌与强调职责。用途上建议绿色当默认、机壳色当点缀。五、字体规范像素字体与四条铁律typography: display: family: Pixel font (8x8 or 16x16) weight: regular (pixels are pixels) style: uppercase or mixed, chunky body: family: Pixel font weight: regular style: dialogue box style caption: family: Pixel font weight: regular style: small, menu text rules: - All text must be pixel-perfect - Limited character sets (like actual GBC) - Text boxes with characteristic borders - Text reveals character by character风格明确要求 display/body/caption 三层全部使用像素字体且给出四条硬性规则所有文字必须像素级对齐字符集受限模拟真实 GBC 的字库能力文字框采用特征性边框文本按字符逐字显现。这正是 GBC 游戏对话框的经典交互——文字逐字跳出而非一次性淡入。在 HTML 连接器中Connector 文件进一步点名了可用的像素字体Press Start 2P、VT323并强调缩放必须使用整数倍2x、3x、4x以保持像素锐利。六、布局系统8 像素网格与 160x144 原生分辨率layout: grid: 8-pixel base unit alignment: Centered menus, left-aligned dialogue aspect_ratio: 10:9 (GBC native) or 16:9 (modern) notes: - 160x144 native resolution, scale up evenly - HUD elements at screen edges - Dialogue boxes at bottom third - Sprite-based compositions布局规范可以拆解为四条可执行指令8 像素基准网格所有元素尺寸、间距、坐标都落在 8px 的整数倍上对齐策略菜单居中、对话框左对齐——还原 GBC 菜单与剧情对话框的真实排版习惯宽高比双轨制复古原教旨选 10:9GBC 原生比例现代输出选 16:9由落地场景决定构图法则HUD 靠屏幕边缘、对话框占据下三分之一、以精灵sprite为单位组织画面。原生分辨率 160x144 必须均匀放大scale up evenly这是保证像素方方正正、不产生亚像素模糊的前提。七、动效与节奏低帧率、硬切与经典擦拭转场motion: transitions: - screen wipes (iris, horizontal, vertical) - palette fade (to white or black) - no smooth transitions animation_style: Low frame rate sprite animation (10-15fps). Two-frame walk cycles. Screen transitions are instant or use classic wipes. UI elements appear and disappear, dont fade. pacing: Quick, responsive, game-like audio_cues: - chiptune - 4-channel audio - 8-bit sound effects - menu blips and bloops动效层精确复刻了 90 年代末掌机游戏的技术性笨拙转场只允许三种屏幕擦拭虹膜/水平/垂直、调色板渐隐到白或黑、以及无平滑转场的硬切动画维持 10~15fps 的精灵动画帧率、两帧行走循环UI 元素直接出现/消失不做淡入淡出节奏是快速、响应式、游戏化的听觉提示是 4 声道芯片音乐与 8-bit 音效包括菜单的 blips and bloops。这与mood.avoid中禁止平滑动画smooth animations形成前后呼应——整个动效语言都在刻意拒绝现代视频的流畅性。八、情绪定位与反面清单mood: keywords: - nostalgic - portable - colorful - charming - playful - adventure era: 1998-2003 cultural_reference: Pokemon Crystal, Links Awakening DX, Wario Land 3, Game Boy Color hardware avoid: - smooth gradients - high resolution graphics - photorealistic elements - modern UI patterns - more than 56 colors total - smooth animations - anti-aliasingmood.keywords定义了风格的情绪靶心怀旧、便携、多彩、迷人、俏皮、冒险era精确锁定 1998~2003GBC 生命周期cultural_reference给出文化锚点。而mood.avoid是一份负面提示词清单——正如 spec.md 的设计决策章节所说负向约束与正向约束同等重要告诉 AI 不要做什么往往比要做什么更有效。这里明确禁止平滑渐变、高分辨率画面、写实元素、现代 UI 模式、全片超过 56 色、平滑动画、抗锯齿。最后一条尤其关键——抗锯齿是像素风的头号敌人。Markdown body 中的## Design Principles用四句话概括了设计哲学也可以视为给 Agent 的创作格言Constraints breed creativity. Every pixel counts when you only have 160x144. Color is precious — use it intentionally. Charm comes from character, not complexity.约束催生创造力只有 160x144 时每个像素都珍贵颜色宝贵要有意使用魅力来自角色感而非复杂度。九、工具扩展x_heygen 命名空间x_heygen: video_id: 94e43f67cbe546b783e1f5c6f2b66125 orientation: landscapex_*前缀是 spec.md 定义的工具专属扩展命名空间其设计决策是不同工具能力不同x_前缀让工具专属配置如x_heygen、x_figma、x_paper在不污染核心 schema 的前提下共存。本例中x_heygen携带了 HeyGen 视频 ID一份可复用的成片引用与横屏方向声明作为 Apply 模式下的显式方向覆盖。十、连接器实战把风格落地到四个目标工具文件 Markdown body 的## Connectors章节给出了四个工具的落地要点下面结合 connectors 目录 中的映射规范展开。10.1 HeyGen Video Agent原样使用 style_prompt_full最直接的连接方式将style_prompt_full逐字粘贴进 HeyGen 的生成提示词并强调四个关键词——厚实像素chunky pixels、受限色彩limited colors、低帧率动画low frame rate animations、屏幕擦拭转场screen wipe transitions外加无平滑移动一切是离散的像素步进No smooth movements — everything is discrete pixel steps。根据 heygen-video-agent.md 的字段映射其余字段对应关系为motion.transitions→ 场景转场指令motion.pacing→ 节奏指引mood.avoid→ 负面提示词x_heygen.orientation→ 横竖屏显式覆盖。组装后的提示词模板大致为Create a video about [TOPIC]. Script: [USERS SCRIPT] Visual style: [PASTE style_prompt_full HERE] Additional constraints: [ITEMS FROM mood.avoid] Motion: Transitions / Pacing / Animation Format: landscape (16:9)10.2 HTML 幻灯片CSS 变量 像素字体 整数倍缩放:root { --color-bg: #0F380F; /* colors.primary[0].hex */ --color-text: #9BBC0F; /* colors.primary[1].hex */ --color-accent: #663399; /* colors.accent[0].hex */ --color-muted: #306230; /* colors.neutral[0].hex */ --font-display: Press Start 2P, system-ui, sans-serif; --font-body: VT323, system-ui, sans-serif; }按 html-slides.md 的映射规则colors.primary[0]进--color-bg、colors.primary[1]进--color-text、colors.accent[0]进--color-accent、colors.neutral[0]进--color-muted。GBC 风格落地时还要遵守三条铁律图形只按整数倍缩放2x/3x/4x以保持像素锐利绿色系作为默认底机壳色做强调对话框使用特征边框。html-slides.md 同时规定前端幻灯片必须是单文件、零依赖、全尺寸用clamp()、单页禁止滚动height: 100vh; overflow: hidden——这些约束与 GBC 的受限美学天然契合。10.3 paper.design低分辨率设计再放大按 paper-design.md 的映射colors.primary/colors.accent/colors.neutral直接注入文档调色板layout.grid决定画板网格。GBC 风格的要求是先在低分辨率下设计、再整体放大Design at low resolution, scale up使用 GBC 调色板、抖动图案做明暗、精灵式构图、所有元素遵循 8 像素网格。对于 paper.design 的 AI 布局功能同样把style_prompt_full拼进提示词、把mood.avoid作为约束清单。10.4 Figma样式命名与 8x8 像素网格按 figma.md 的映射规范颜色对象逐个生成 Color Style命名约定与 role 描述对应visual-style.md 字段Figma 输出colors.primarygbc/dark-green、gbc/light-greencolors.accentgbc/purple、gbc/berry、gbc/teal、gbc/atomic-purplecolors.neutralgbc/mid-green、gbc/pale-green同时建立 8x8 像素网格对应layout.grid的 8-pixel base unit使用像素字体或自绘像素字型导出时关闭抗锯齿No anti-aliasing on exports——这与mood.avoid中禁止抗锯齿完全一致。如果开发 Figma 插件读取 visual-style.mdfigma.md 还给出了 TypeScript 接口示例VisualStyle/Color/TypographyStyle颜色对象即{ name, hex, role }三元组。十一、在 OpenMontage 中的检索与调用路径当你在 OpenMontage 的 Agent 会话中需要这类风格时调用链条如下进入 visual-style 技能SKILL.md 定义了 Create / Extract / Apply / Gallery 四种模式的触发词与默认工作流浏览画廊Gallery 模式下Agent 先列出 references/gallery/ 下所有风格Swiss、Brody、Saul Bass、Game Boy Color、HeyGen AI Video用style_prompt_short向用户描述气质加载全文用户选中后读取完整的game-boy-color.visual-style.md再走 Apply 模式——先询问目标工具或从上下文判断读取对应 connector 参考文件将字段映射为工具专属格式后产出。需要说明的是该文件同时存在.agents/与.claude/两套镜像副本内容一致可分别被不同的 AI 编码助手消费。此外create-video、heygen 等技能各自维护了更庞大的命名风格库后者收录 20 种风格按情绪强度排序并给出先匹配情绪、再匹配内容的选型建议可作为自定义风格的模板与参照。十二、要点回顾一份文件、一套系统Game Boy Color 风格被完整编码为 name、prompt、colors、typography、layout、motion、mood、assets、x_* 九个维度任何 AI 工具都能消费style_prompt_full是国王字段它必须能脱离结构化字段独立生成一致画面本文件把 56 色限制、160x144 分辨率、10~15fps、四款机壳色全部内联进了一段自然语言提示词负向约束同等重要mood.avoid里的禁渐变、禁抗锯齿、禁平滑动画、禁超 56 色比正向描述更能约束生成结果四连接器即插即用HeyGen 原样贴提示词、HTML 幻灯片映射 CSS 变量、paper.design 低分辨率设计放大、Figma 生成命名样式各有明确的字段映射表硬件的限制就是风格的灵魂8 像素网格、整数倍缩放、逐字显现文本、屏幕擦拭转场——这些复古的笨拙恰恰是今天辨识度最高的视觉资产。【免费下载链接】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),仅供参考