企业官网建设流程全解析

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

导读

本文围绕 Open CoDesign 仓库内置的pitch-deck方法技能（method skill）展开，讲解该技能如何约束 AI 在生成融资路演、产品演示与多页叙事型演示文稿时的结构、排版、数据可视化与配色纪律，并深入其加载与注入机制：frontmatter 字段、三级技能目录优先级、skill(name)工具调用链与模板落地资源。读完本文，你将掌握 pitch-deck 的全部设计规则，并理解如何通过内置技能机制让任意模型（Claude、GPT、Gemini 等）按同一套演示文稿规范产出高质量幻灯片。

一、什么是方法技能：pitch-deck 在仓库中的定位

Open CoDesign 把"如何工作"的规则沉淀为可复用的 Markdown 方法技能（method skill），存放在 apps/desktop/resources/templates/skills 目录下，每个.md文件就是一个技能。根据 模板资源说明，skills/*.md是"通过skill(name)加载的 Markdown 方法技能，它们描述的是工作方法：布局、可访问性、图表、表单、响应式行为、工艺检查以及DESIGN.md交接规则"，与brand-refs/*/DESIGN.md（品牌参考）、design-skills/*.jsx（可复制的 JSX 组件片段）、scaffolds/**（脚手架源文件）属于不同资源类型。

pitch-deck.md 正是其中之一：当用户提出"做一个幻灯片/路演/演示文稿/多页叙事"时，它约束模型遵循幻灯片结构、留白纪律与"一页一主张"规则。其 frontmatter 中的描述明确写明：

Designs polished pitch deck slides and presentation layouts. Use when the user asks for a slide deck, investor pitch, presentation, or multi-slide narrative. Enforces slide structure, whitespace discipline, and one-claim-per-slide rule.

在 技能加载测试 中，pitch-deck被显式断言为内置技能之一，与frontend-design-anti-slop、data-viz-recharts、mobile-mock等同属内置技能集，证明该技能在构建打包时即随应用发布。

二、frontmatter 字段逐项解析：一个技能如何被注册与触发

pitch-deck.md的 YAML frontmatter 如下（完整继承原文）：

--- schemaVersion: 1 name: pitch-deck description: > Designs polished pitch deck slides and presentation layouts. Use when the user asks for a slide deck, investor pitch, presentation, or multi-slide narrative. Enforces slide structure, whitespace discipline, and one-claim-per-slide rule. trigger: providers: ['*'] scope: system disable_model_invocation: false user_invocable: true ---

这些字段由 packages/shared/src/skills.ts 中的SkillFrontmatterV1（基于 zod 的 schema）在加载时校验，各字段含义与默认值如下：

在 packages/providers/src/skill-injector.ts 的filterActive中可以看到激活过滤逻辑：!s.frontmatter.disable_model_invocation && matchesProvider(s.frontmatter.trigger?.providers, providerId)。也就是说，只有未被禁用的技能、且其trigger.providers包含'*'或当前提供商 ID 时，才会被纳入活动技能清单。pitch-deck的providers: ['*']保证它面向所有接入的模型提供商生效。

三、技能的加载链路：从模板目录到模型上下文

pitch-deck.md的完整加载路径如下，理解它有助于你弄清"文档中的规则如何真正进入模型"：

1. 模板树位置：技能文件位于apps/desktop/resources/templates/skills/。根据 generate.ts，桌面应用在运行时以app.getPath('userData')拼接出<userData>/templates，并从中加载 frames 与 design-skills；技能目录同理位于用户可编辑的<userData>/templates/skills/。首次启动时由应用 bundle 播种（seed），之后用户可自行编辑。
2. 加载器：packages/core/src/skills/loader.ts 内置了一个轻量 YAML frontmatter 解析器（支持键值对、>/|块标量、嵌套映射、行内与块序列），读取.md文件后用SkillFrontmatterV1校验，失败则抛出CodesignError(..., ERROR_CODES.SKILL_LOAD_FAILED)。
3. 三级优先级：loadAllSkills从内置（builtin）、用户（~/.config/open-codesign/skills）、项目（<project>/.codesign/skills）三层目录加载，合并时项目优先于用户、用户优先于内置（loadAllSkills源码注释明确：Priority order: project > user > builtin）。这意味着你可以通过用户或项目层放置同名pitch-deck.md覆盖内置规则，且覆盖行为由代码保证。
4. 清单与调用：skill(name)工具（packages/core/src/tools/skill.ts）通过listSkillManifest建立技能清单（名称、别名、描述、路径等），invokeSkill按名称或别名查找并把 Markdown 正文返回给模型；每个技能每会话只注入一次，重复调用返回 "already loaded" 短提示。模型必须先调用skill工具拿到正文，再开始生成幻灯片。

从源码结构看，v0.2 的设计是"不把技能全文注入每个请求的 prompt"，而是由 core 构建紧凑的资源清单，skill(name)是获取完整正文的唯一通道（见 skill-injector.ts 头部注释），这是一种节省 token、按需取用的注入策略。

四、核心设计原则：一页一主张与结构纪律

pitch-deck.md正文提出了八条可执行的幻灯片设计原则，以下逐条完整继承并展开。

4.1 一页一主张（One Claim Per Slide）

每页幻灯片只传达一个想法。如果你发现自己写出"以及、还有（and also...）"，那就应该拆成两页。这一主张必须能用一句不超过 12 个词的句子表达，并置于幻灯片顶部。

这条规则的价值在于把"论点"与"论据"分离：顶部主张句（claim）即页面的标题级信息，其余视觉元素全部服务于支撑这一句话。

4.2 字体层级（Typographic Hierarchy）

使用三级字号体系：

• 标题（headline）：56–72px
• 支撑陈述（supporting statement）：24–32px
• 正文 / 说明文字（body/caption）：14–16px

同时规定：最多使用两种字体家族——展示字体（display font）用于标题，中性字体（neutral font）用于正文；大标题使用紧凑字距（letter-spacing −0.02em 至 −0.04em），紧凑字距在视觉上传达"自信"。

4.3 留白即信号（Whitespace as Signal）

每页至少保留 20% 的空白面积。拥挤的页面暗示演讲者不信任观众。页边距至少为幻灯片宽度的 8–12%，元素之间的垂直间距不可妥协。

4.4 幻灯片比例与尺寸（Slide Ratio and Dimensions）

默认 16:9，画布建议 1920×1080px 或 1280×720px；避免 4:3（显得过时）。对于移动端优先场景（手机上滚动观看的 deck），改用 9:16 竖屏比例。

4.5 数据幻灯片（Data Slides）

每张图表必须包含：

• 陈述洞察（而非仅仅罗列指标）的标题；
• 与幻灯片正文同字体的坐标轴标签；
• 清晰的配色图例（color key）。

同时明确禁止：3-D 图表、超过 4 个分段的饼图。柱状图（bar charts）和面积图（area charts）阅读速度最快。使用单一强调色高亮想让观众注意的数据序列，其余序列统一置灰。

4.6 配色纪律（Color Discipline）

调色板限制为 3 种颜色：背景色、文字色、一个强调色（accent）。如果需要第二个强调色，必须是第一个强调色的浅色调（tint）。整套 deck 的所有页面共享同一调色板，中途不得引入新颜色。

4.7 开场页与收尾页（Opening and Closing Slides）

• 开场页必须在5 秒阅读内让问题变得"切肤可感"（make the problem viscerally clear）；
• 收尾页必须陈述唯一一个期望行动（invest / partner / join）并附上联系方式，而不是泛泛的"谢谢"或"Q&A"。

4.8 叙事弧线（Narrative Arc）

推荐结构：问题（Problem）→ 洞察（Insight）→ 方案（Solution）→ 证据（Evidence）→ 行动请求（Ask）。每个环节 1–3 页；产品功能介绍部分不得超过整个 deck 的 25%。

五、落地资源：slide-deck.jsx 与 slide-16-9.html

pitch-deck 技能约束的是"方法与规则"，而仓库同时提供了与之配套的可复制实现资源，让规则直接落到代码：

5.1 slide-deck.jsx：四套可直接复制的幻灯片组件

apps/desktop/resources/templates/design-skills/slide-deck.jsx 是设计技能（design skill）——可复制的 JSX 组件片段，由 design-skills/index.ts 定义的DESIGN_SKILL_FILES清单管理，宿主把它暴露在 Agent 虚拟文件系统的skills/<file>.jsx路径下。该文件头部注释声明其适用场景：

16:9 pitch / keynote slides. Four variants: editorial title slide, section divider with chapter number, two-column body with visual, and big-number stat slide.

即四种页面变体：编辑风标题页、带章节编号的分节页、图文两栏正文页、大数字数据页，以及自动渲染的页码条（page number strip）。

它与 pitch-deck 规则的高度对应值得注意：

• 16:9 画布：SlideShell使用aspectRatio: '16 / 9'，直接落实"默认 16:9"规则；
• 配色纪律：顶部TWEAK_DEFAULTS定义了五个 token——accent: #CC785C、bg: #faf8f3、ink: #1a1a1a、muted: #6b6258、rule: #e6dfd1，本质上是"背景 / 文字 / 强调色"三色体系的扩展实现，且全 deck 共用同一组 token；
• 字体层级：预置SERIF（Fraunces / DM Serif Display）、SANS（DM Sans）、MONO（JetBrains Mono）三个字体变量，标题与正文分别使用展示字体与中性字体；
• 留白：SlideShell内边距为56px 72px，在 16:9 画布上对应了充足的边缘留白；
• 页码与装饰：底部页码条以String(n).padStart(2, '0') / total形式渲染页号，配以分隔线和章节眉题（eyebrow），属于演示文稿的常规结构元素。

5.2 slide-16-9.html：完整的 16:9 演示脚手架

apps/desktop/resources/templates/scaffolds/decks/slide-16-9.html 是一份可直接起步的 HTML deck 脚手架，顶部 CSS 变量定义了成套设计 token：

:root { --deck-bg: #f7f3ec; --deck-paper: #fffaf2; --deck-ink: #10172b; --deck-muted: #5d6680; --deck-line: #ded6c8; --deck-accent: #e0522d; --deck-blue: #465a82; }

其.deck容器使用aspect-ratio: 16 / 9（宽度min(92vw, 1280px)），.slide内边距64px 72px 52px，正文使用 DM Sans 字体——在画布比例、边距、配色 token 化三方面与 pitch-deck 规则及 slide-deck.jsx 保持同一套设计语言。它属于scaffolds/**类型资源，按 模板资源说明 的定义，可通过scaffold(kind, destPath)直接复制到工作区作为起步资产。

六、实操建议：如何让 pitch-deck 规则真正生效

1. 明确请求意图：向应用描述需求时使用"slide deck / investor pitch / presentation / 多页叙事"等关键词，模型会依据description命中pitch-deck技能；你也可以按user_invocable: true手动触发。
2. 先加载技能再生成：skill(name)工具说明（skill.ts）要求"只要请求匹配，就在写代码之前调用"。生成前让模型先调用skill("pitch-deck")获取完整规则正文，再开始构建。
3. 复用落地资源：优先从slide-deck.jsx的四种页面变体与slide-16-9.html脚手架起步，它们已内置 16:9 画布、三色 token 体系与字体层级，天然满足技能约束。
4. 自定义与覆盖：技能支持三层覆盖（项目 > 用户 > 内置）。在项目根目录创建.codesign/skills/pitch-deck.md或在用户配置目录~/.config/open-codesign/skills/放置同名文件，即可按团队规范扩展或覆盖内置规则（参考 loader.ts 的loadAllSkills合并逻辑）。
5. 注意技能校验约束：description最长 1536 字符、frontmatter 字段必须通过SkillFrontmatterV1校验，加载失败会以SKILL_LOAD_FAILED错误码中止，因此自定义技能文件需严格遵循 schema 定义。

七、验证与测试依据

仓库对技能机制的验证是成体系的：

• skills/loader.test.ts 断言内置技能目录中包含pitch-deck（expect(ids).toContain('pitch-deck')），并覆盖了最小/完整 frontmatter 解析、缺失目录返回空数组、非 ENOENT 错误向上传播等边界情况；
• skill-injector.ts 的filterActive通过单测验证了提供商匹配与禁用过滤逻辑；
• 模板资源说明 明确了技能目录的资源语义、方法技能升级机制（仅七个已知方法文件可自动刷新，pitch-deck不在其中，属于稳定内置资源）以及"禁止 CDN 脚本、保持来源格式与扩展名一致"等内容维护清单。

结语

pitch-deck是 Open CoDesign 方法技能体系的一个典型样本：它以一份 Markdown 规则文件约束模型的设计行为，通过 frontmatter 声明触发条件与提供商范围，经由三级目录加载与skill(name)工具按需注入，并有slide-deck.jsx、slide-16-9.html等落地资源配套。理解它的加载链路与八条设计原则，你既能在日常使用中稳定产出结构严谨、留白得当、数据清晰的路演文稿，也能参考这套机制为项目沉淀自己的方法技能。

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