Design Principles-二趣网

Design Principles

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

Typography and the grid are the only design elements needed. Mathematical relationships create visual harmony. Restraint is the ultimate sophistication. The grid is not a limitation — it is liberation through structure.

四句箴言概括风格哲学：排印 + 网格即全部设计元素；数学关系创造视觉和谐；克制是高级的终极形态；网格不是限制而是通过结构获得解放。按照 spec.md 的约定，`## Design Principles` 是可选自由体正文段，用于沉淀风格的设计观，也是后续自动生成设计简报（design brief）时的基调来源。 --- ## 八、Connectors：四个落地通道的完整翻译方案 文档正文的 `## Connectors` 章节给出四条落地通道的速览，以下结合 [.agents/skills/visual-style/references/connectors/](https://link.gitcode.com/i/78dab18a55299aefd43345c343428f4f) 下的四个连接器文件逐一展开。 ### 8.1 HeyGen Video Agent（AI 视频生成） 映射规则（源自 [heygen-video-agent.md](https://link.gitcode.com/i/576a50f47c80866baccf5a9c5bd1a251)）： | visual-style.md 字段 | HeyGen 用法 | |----------------------|-------------| | `style_prompt_full` | 逐字追加进生成提示词 | | `motion.transitions` | 场景转场指令 | | `motion.animation_style` | 动画行为 | | `motion.pacing` | 节奏引导 | | `typography.caption` | 字幕样式（如开启字幕） | | `layout.aspect_ratio` | 方向设置（16:9 = 横屏，9:16 = 竖屏） | | `mood.avoid` | 负向提示 / 排除指令 | | `assets.gsep_elements` | 叠加资产（如支持） | | `x_heygen.orientation` | 显式方向覆盖 | | `x_heygen.video_id` | 引用已有 HeyGen 视频 | **完整提示词模板**：

Create a video about [TOPIC].

Script: [USER'S SCRIPT]

Visual style: [PASTE style_prompt_full HERE]

Additional constraints:

[ITEMS FROM mood.avoid]

Motion:

Transitions: [motion.transitions]
Pacing: [motion.pacing]
Animation: [motion.animation_style]

Format: [layout.aspect_ratio OR x_heygen.orientation]

**瑞士风格数据片示例**（无 Avatar 纯动态图形模式）：

Create a video about our Q4 results.

Script: Revenue grew 40% year over year. We shipped 12 new features. Customer satisfaction hit an all-time high of 94%.

Visual style: Josef Müller-Brockmann Swiss International Style. Grid-locked layouts with mathematical precision. Black and white base with ONE accent color (electric blue #0066FF). Strong diagonal compositions. Helvetica typography only. Data visualizations are the hero — animated charts, counters, grids. Every frame snaps to a grid. Transitions are horizontal grid wipes. No organic shapes. No gradients. No stock photography. Everything is geometric, systematic, precise.

Additional constraints:

No avatar
No b-roll footage
No stock photography
Pure motion graphics only

Motion:

Transitions: horizontal grid wipes, clean hard cuts
Pacing: Measured, confident, unhurried
Animation: Elements snap to grid positions, charts animate systematically

Format: landscape (16:9)

连接器文档特别提示三条实战技巧：对不想要的东西要**显式声明**（HeyGen 对负向约束响应良好）；抽象风格务必加 "No avatar. No b-roll. Pure motion graphics."；数字密集型内容要主动点出 "animated charts, counters, data viz"。 ### 8.2 HTML Slides（Web 演示） 映射规则（源自 [html-slides.md](https://link.gitcode.com/i/70795836439070e5e54eb5047cc3b989)）：颜色映射为 `--color-bg` / `--color-text` / `--color-accent` / `--color-muted` 四个 CSS 变量，排印映射为 `--font-display` / `--font-body`，正文要求单 HTML 文件、零依赖、`clamp()` 响应式尺寸、每页 `height: 100vh; overflow: hidden` 不滚动。 **瑞士风格 CSS 变量**： ```css :root { --color-bg: #000000; /* colors.primary[0].hex */ --color-text: #FFFFFF; /* colors.primary[1].hex */ --color-accent: #0066FF; /* colors.accent[0].hex */ --color-muted: #CCCCCC; /* colors.neutral[0].hex */ --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif; }

12 栏网格叠加层（Swiss 风格专属视觉元素）：

.slide::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent, transparent calc(100% / 12 - 1px), var(--color-muted) calc(100% / 12 - 1px), var(--color-muted) calc(100% / 12) ); opacity: 0.1; pointer-events: none; }

标题排版遵循typography.display：Helvetica Bold、大写、tight tracking、text-align: left：

h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 8rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; text-align: left; }

8.3 paper.design（UI 设计文档）

映射规则（源自 paper-design.md）：颜色直接落入文档色板（背景#000000、文字#FFFFFF、强调#0066FF、网格线#CCCCCC），排印加载 Helvetica 三档字重，版式按layout.grid建 12 栏网格并开启吸附。使用 AI 布局功能时，将style_prompt_full粘贴进提示词并附上mood.avoid作为 Constraints。

可直接套用的设计简报模板：

## Design Brief **Style:** Josef Müller-Brockmann Swiss International Style **Color Palette:** - Pure Black: #000000 — dominant ground, text, structural elements - Pure White: #FFFFFF — background fields, negative space - Electric Blue: #0066FF — the ONE accent, data highlights **Typography:** - Display: Helvetica Bold - Body: Helvetica Regular **Layout:** Strict modular grid — 12 columns, Flush left, grid-snapped **Mood:** precise, systematic, authoritative, geometric **Avoid:** organic shapes, gradients, stock photography, centered text, decorative elements, drop shadows, rounded corners

8.4 Figma（设计工具样式库）

映射规则（源自 figma.md）：将颜色生成为分层级的 Color Styles，将排印生成为 Text Styles，将网格生成为 Layout Grid 预设。

颜色样式：

Folder: brand/ - brand/black → #000000 (Pure Black) - brand/white → #FFFFFF (Pure White) Folder: accent/ - accent/electric-blue → #0066FF (Electric Blue) Folder: neutral/ - neutral/grid-gray → #CCCCCC (Grid Gray) - neutral/dark-gray → #333333 (Dark Gray)

文本样式：

Folder: heading/ - heading/display → Helvetica Bold, 48px Folder: body/ - body/default → Helvetica Regular, 16px Folder: label/ - label/default → Helvetica Light, 12px

网格预设："12 columns"→ Columns: 12、Type: Stretch、Margin: 64px、Gutter: 24px；"Strict modular grid"→ 行列同时启用。命名时用role字段作为样式描述。连接器文档还提供了VisualStyle/Color/TypographyStyle的 TypeScript 接口定义，供需要编写 Figma 插件解析visual-style.md的开发者直接参考。

九、扩展字段：`x_*`命名空间与资产占位

x_heygen: video_id: "" orientation: "landscape" assets: reference_images: [] gsep_elements: [] html_snippets: [] color_palette_image: url: ""

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析