ui-ux-pro-max-skill：Slides 幻灯片子技能全解——用设计令牌、Chart.js 与文案公式构建策略型 HTML 演示文稿

2026-09-04 23:10:54作者：邵娇湘

本文以 ui-ux-pro-max-skill 仓库中 design 技能的幻灯片参考文档 slides.md 为核心，完整拆解该仓库「幻灯片（Slides）」子技能的知识库组织、六步创作工作流、16:9 响应式 HTML 模板、14 种版式模式、15 套演示策略与 5 大文案公式，并结合其底层 BM25 检索引擎 search-slides.py 的源码实现，说明这套「策略 + 令牌 + 图表 + 文案」的演示文稿生成体系如何在 Claude Code 等 Agent 环境中落地运行。

一、Slides 是什么：design 技能内置的演示文稿子能力

slides.md 的文档标题与定位非常明确：

Strategic HTML presentation design with Chart.js data visualization, design tokens, responsive layouts, and copywriting formulas.

即：策略化的 HTML 演示文稿设计，其四大支柱是 Chart.js 数据可视化、设计令牌（design tokens）、响应式布局与文案公式。它不是 PPT 导出工具，而是让 AI Agent 直接生成单文件、可直接在浏览器中播放的 HTML 幻灯片——带键盘/点击导航、进度条、动画类、内嵌图表。

1.1 在 design 技能中的路由位置

design 技能是仓库中的统一设计入口（见 SKILL.md），其「Sub-skill Routing」路由表把设计任务分发给 7 个方向，其中演示文稿任务路由到内置的 Slides 能力：

Task	Sub-skill	Details
Brand identity, voice, assets	`brand`	外部技能
Tokens, specs, CSS vars	`design-system`	外部技能
shadcn/ui, Tailwind, code	`ui-styling`	外部技能
Logo creation, AI generation	Logo（内置）	`references/logo-design.md`
CIP mockups, deliverables	CIP（内置）	`references/cip-design.md`
Presentations, pitch decks	Slides（内置）	`references/slides.md`
Banners, covers, headers	Banner（内置）	`references/banner-sizes-and-styles.md`
Social media images/photos	Social Photos（内置）	`references/social-photos-design.md`
SVG icons, icon sets	Icon（内置）	`references/icon-design.md`

值得注意的两点（从源码结构看）：

Slides 是内置（built-in）子能力，不像 logo/CIP 那样配有 Python 生成脚本，其「引擎」是纯文档驱动的知识库 + design-system 技能的 BM25 检索 CLI；
仓库中还存在一个独立的 slides 技能目录（.claude/skills/slides/），其 references 目录下的 create.md、html-template.md、layout-patterns.md、slide-strategies.md、copywriting-formulas.md 与 design 技能下的 5 个 slides 参考文件一一对应，可视为同一套幻灯片知识体系的独立技能封装。

二、Usage：如何触发 Slides 任务

slides.md 给出的激活方式极简：

Activate the design skill and specify slides task, e.g. "create a pitch deck".

即激活 design 技能并说明是 slides 任务，例如直接说「create a pitch deck（做一个融资路演 deck）」。

进入创作流程后，Agent 会加载创作引导文件 slides-create.md，其全文只有一个任务壳，揭示了该技能与上层任务的参数传递方式：

Invoke `slides` skill to create persuasive HTML slides using design tokens, Chart.js, and the slide knowledge database.

## Task
<task>$ARGUMENTS</task>

$ARGUMENTS 是 Claude Code 技能机制的占位符：用户发起技能时附带的原始需求（如 "create a pitch deck for an AI analytics startup"）会被注入 <task> 标签，作为后续所有布局/策略/文案检索的意图输入。

三、Knowledge Base：五文件知识库的完整索引

slides.md 的核心是一张「Knowledge Base」表，把幻灯片知识拆成 5 个可独立加载的参考文件。原文档中的局部相对链接（相对于 .claude/skills/design/references/ 目录）统一转换为仓库根路径后如下：

Topic	文件（仓库根路径）	Purpose
Creation Guide	slides-create.md	逐步幻灯片创作工作流
Layout Patterns	slides-layout-patterns.md	幻灯片版式模板与网格系统
HTML Template	slides-html-template.md	演示文稿的基础 HTML 结构
Copywriting	slides-copywriting-formulas.md	面向幻灯片内容的 AIDA、PAS、FAB 公式
Strategies	slides-strategies.md	按演示类型区分的上下文策略

这 5 个文件分别回答「怎么做（流程）、怎么摆（版式）、怎么搭（HTML 骨架）、怎么写（文案）、怎么排（策略叙事）」，构成一个闭环。下文第三节至第六节将逐一展开，信息量完整继承自各参考文件并结合仓库数据源做扩展。

四、When to Use：适用场景边界

slides.md 明确列出了 5 类适用场景：

Marketing presentations and pitch decks（营销演示与融资路演）
Data-driven slides with Chart.js visualizations（带 Chart.js 可视化的数据驱动幻灯片）
Strategic slide design with layout patterns（基于版式模式的策略化幻灯片设计）
Copywriting-optimized presentation content（经文案公式优化的演示内容）
Investor decks, sales presentations, team updates（投资人 deck、销售演示、团队更新）

反面边界同样清晰：它不适用于需要精确像素排版的印刷物（那是 Banner 子技能的事，22 种艺术风格 + 精确尺寸截图导出），也不负责设计令牌本身的生成（那是 design-system 外部技能的事）。Slides 消费令牌，生产演示文稿。

五、Key Features：五大关键特性及其仓库证据

slides.md 列出五大 Key Features，每一条都能在仓库中找到对应的实现证据：

特性	声明	仓库中的实现证据
Chart.js Integration	Bar、line、pie、doughnut、radar 图表	slides-html-template.md 内嵌 Chart.js 4.4.1 CDN 与完整 line 图配置；数据侧由 slide-charts.csv 提供 4 域之一 `chart` 的选型依据
Design Tokens	一致的间距、颜色、排版	模板中以 CSS 变量承载（`--color-primary`、`--primitive-gradient-primary`、`--typography-font-heading` 等），令牌本体由 design-system 技能产出（embed-tokens.cjs）
Responsive	桌面与移动端均可播放	模板内置 768px / 480px 两级断点，移动端收窄 padding、字号与导航按钮
Copywriting	内置 AIDA、PAS、FAB 公式	slides-copywriting-formulas.md + slide-copy.csv 的 `copy` 检索域
Layout Patterns	Hero、split、grid、comparison、timeline 等版式	slides-layout-patterns.md 的 14 种版式表 + slide-layouts.csv 的 `layout` 检索域

六、Workflow：六步创作流水线

slides.md 的 Workflow 是整个文档的操作主线，逐步拆解如下——每一步都指向一个具体的知识库文件或检索命令：

步骤	原文定义	对应仓库落地
1. Parse presentation type	从用户请求中解析演示类型	解析 `$ARGUMENTS` 中的任务（如 "pitch deck" → 投资人语境），为后续检索生成查询词
2. Load creation guide	加载创作指南	slides-create.md：以设计令牌 + Chart.js + 幻灯片知识库库构建有说服力的 HTML 幻灯片
3. Select layout patterns	选择版式模式	查 slides-layout-patterns.md 的 14 版式表，或用 `search-slides.py "..." -d layout` 查 slide-layouts.csv
4. Apply copywriting formulas	套用文案公式	按页型匹配 slides-copywriting-formulas.md 的公式-页型映射表
5. Use HTML template	使用 HTML 模板	以 slides-html-template.md 的完整单文件模板为骨架
6. Apply strategy	套用演示策略	按目标/受众在 slides-strategies.md 的 15 套策略中选型，确定页数与情绪弧

六步的顺序暗含一个设计意图：先定叙事骨架（策略），再逐页填充（版式 + 文案），最后落到统一模板（HTML），保证生成结果「先对故事，再对排版」。

七、HTML 模板深拆：16:9 锁定、安全区与导航脚本

第五步所依赖的 slides-html-template.md 提供了一份可直接复制运行的完整单文件 HTML 模板，是整套体系中「工程密度」最高的部分。关键设计点如下。

7.1 16:9 锁定与 letterbox

模板在桌面端（min-width: 769px）把 .slide-deck 锁定为严格 16:9，视口比例不符时自动 letterbox（上下或左右留黑边），保证投屏演示时版式不被拉伸：

@media (min-width: 769px) {
    .slide-deck {
        /* Lock to 16:9 — letterbox if viewport ratio differs */
        max-width: calc(100vh * 16 / 9);
        max-height: calc(100vw * 9 / 16);
        margin: auto;
        position: absolute;
        inset: 0;
    }
}

移动端则直接铺满 100vw × 100vh。所有幻灯片 .slide 绝对定位叠放，通过 opacity + visibility 配合 0.4s 过渡做淡入切换，.active 类控制当前页。

7.2 安全区约束：`.slide-content` 内层包装

模板强调 always wrap content in .slide-content：外层 .slide 负责全屏定位与居中，内层 .slide-content 以 overflow: hidden + max-height: 100% 把内容约束在安全区内，防止文案超长时溢出 16:9 画框。每条幻灯片内容还应配一个动画类（见 7.4）。

7.3 导航系统：按钮 + 键盘 + 点击 + 进度条

模板内置的 JS 导航逻辑非常轻量（约 30 行），覆盖三种输入方式：

function showSlide(n) {
    if (n < 1) n = 1;
    if (n > total) n = total;
    current = n;
    document.querySelectorAll('.slide').forEach((s, i) => {
        s.classList.toggle('active', i === n - 1);
    });
    document.getElementById('current').textContent = n;
    document.getElementById('progressBar').style.width = (n / total * 100) + '%';
}

底部圆形 ← / → 按钮（移动端收窄为 32px）；
键盘 ArrowRight / 空格前进、ArrowLeft 后退；
点击页面任意非导航区域前进一页；
顶部 3px --color-primary 进度条，宽度按 n / total * 100% 实时插值。

7.4 动画类库：fade-up / count / scale / stagger

模板内置 4 类动画，与版式文档中的「Animation」列一一对应（animate-fade-up、animate-stagger、animate-scale、animate-count）：

/* Fade Up */
.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
    opacity: 0;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scale */
.animate-scale {
    animation: scaleIn 0.5s ease-out forwards;
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Stagger Children */
.animate-stagger > * {
    opacity: 0;
    animation: fadeUp 0.5s ease-out forwards;
}
.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }

.animate-stagger 是网格类版式（Feature Grid、Metrics Dashboard、Pricing Cards）的标准搭档：子元素按 0.1s 步进依次入场。

7.5 Chart.js 集成：容器尺寸策略 + 暗色主题图表

模板把 Chart.js 4.4.1 从 jsDelivr CDN 引入（chart.umd.min.js），并给出一个 MRR 折线图的标准写法。有两个容易被忽略的工程细节：

容器尺寸策略——不用固定像素，而是「宽度上限 + 高度视口比例」双约束，保证 16:9 锁定下图表不被裁切：

<div class="chart-container" style="width: min(80%, 600px); height: clamp(200px, 40vh, 350px);">
    <canvas id="revenueChart"></canvas>
</div>

暗色主题图表配置——网格线用 rgba(255,255,255,0.05) 的极浅白、刻度用 #B8B8D0、关闭图例，与 #0D0D0D 背景协调：

new Chart(document.getElementById('revenueChart'), {
    type: 'line', // or 'bar', 'doughnut', 'radar'
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            label: 'MRR ($K)',
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } },
            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } }
        }
    }
});

7.6 背景图叠层与 CSS 变量参考

背景图幻灯片采用「slide-with-bg + 渐变遮罩 + z-index 分层」三层结构，避免图片抢文字：

<div class="slide slide-with-bg" style="background-image: url('...')">
    <div class="overlay" style="background: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))"></div>
    <div class="content" style="position: relative; z-index: 1;">
        <!-- Slide content -->
    </div>
</div>

模板尾部给出 6 个核心 CSS 变量契约（令牌注入点），Agent 生成幻灯片前应先由 design-system 技能产出令牌、再用 embed-tokens.cjs 的输出替换模板中 :root 占位区：

Variable	Usage
`--color-primary`	品牌主色（CTA、高亮、进度条）
`--color-background`	幻灯片背景
`--color-secondary`	次要元素
`--primitive-gradient-primary`	标题渐变（配合 `background-clip: text` 做渐变大标题）
`--typography-font-heading`	标题字体
`--typography-font-body`	正文字体

八、Layout Patterns：14 版式 × 卡片变体 × 视觉处理

8.1 版式选型表

slides-layout-patterns.md 提供 14 种版式与「用途 + 动画类」的映射，这是第六步（Workflow step 3）的核心查表：

Layout	Use Case	Animation
Title Slide	Opening/first impression	`animate-fade-up`
Problem Statement	Establish pain point	`animate-stagger`
Solution Overview	Introduce solution	`animate-scale`
Feature Grid	Show capabilities (3-6 cards)	`animate-stagger`
Metrics Dashboard	Display KPIs (3-4 metrics)	`animate-stagger-scale`
Comparison Table	Compare options	`animate-fade-up`
Timeline Flow	Show progression	`animate-stagger`
Team Grid	Introduce people	`animate-stagger`
Quote Testimonial	Customer endorsement	`animate-fade-up`
Two Column Split	Compare/contrast	`animate-fade-up`
Big Number Hero	Single powerful metric	`animate-count`
Product Screenshot	Show product UI	`animate-scale`
Pricing Cards	Present tiers	`animate-stagger`
CTA Closing	Drive action	`animate-pulse`

8.2 四个核心版式的 CSS 骨架（含响应式断点）

版式文档给出了 4 段可直接使用的 CSS 结构，且每段都带 768px / 480px 两级降级——网格列数随视口收窄，是「Responsive」特性的具体兑现：

/* Title Slide */
.slide-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Two Column Split */
.slide-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 768px) {
    .slide-split { grid-template-columns: 1fr; gap: 24px; }
}

/* Feature Grid (3 columns) */
.slide-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 768px) {
    .slide-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    .slide-features { grid-template-columns: 1fr; }
}

/* Metrics Dashboard (4 columns) */
.slide-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .slide-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .slide-metrics { grid-template-columns: 1fr; }
}

8.3 组件变体与视觉处理

同一版式还可通过三张「修饰表」变化出不同质感：

卡片样式（Card Styles）

Style	CSS Class	Use For
Icon Left	`.card-icon-left`	带图标的功能项
Accent Bar	`.card-accent-bar`	高亮功能项
Metric Card	`.card-metric`	数字/统计
Avatar Card	`.card-avatar`	团队成员
Pricing Card	`.card-pricing`	价格档位

指标样式（Metric Styles）：gradient-number（渐变数字）、oversized（120px+ 特大数字）、sparkline（内联迷你图）、funnel-numbers（转化漏斗数字）。

视觉处理（Visual Treatments）：gradient-glow（标题页/CTA）、subtle-border（问题陈述页）、icon-top（功能网格）、screenshot-shadow（产品截图）、popular-highlight（定价卡放大 1.05 倍突出）、bg-overlay（背景图叠层）、contrast-pair（before/after）、logo-grayscale（客户 logo 统一灰度）。

8.4 版式决策流（Layout Decision Flow）

文档末尾的决策流把「查表」升级成四问四答，且每一问都落到一个可检索的数据域：

1. What's the slide goal?
   └─> Search layout-logic.csv

2. What emotion should it trigger?
   └─> Search color-logic.csv

3. What's the content type?
   └─> Search typography.csv

4. Should it break pattern?
   └─> Check position (1/3, 2/3) → Use full-bleed

注意第 4 问「破格」原则：在整份 deck 的 1/3 与 2/3 位置应打破节奏（如切到 full-bleed 全幅版式），制造注意力峰值。这四个数据文件（slide-layout-logic.csv、slide-color-logic.csv、slide-typography.csv、slide-backgrounds.csv）正是下文上下文检索模式的服务端数据。

九、Strategies：15 套演示结构与情绪弧

slides-strategies.md 提供 15 套「页数 + 目标 + 受众」齐备的 deck 结构，是 Workflow 第 6 步的选型依据：

Strategy	Slides	Goal	Audience
YC Seed Deck	10-12	Raise seed funding	VCs
Guy Kawasaki	10	Pitch in 20 min	Investors
Series A	12-15	Raise Series A	Growth VCs
Product Demo	5-8	Demonstrate value	Prospects
Sales Pitch	7-10	Close deal	Qualified leads
Nancy Duarte Sparkline	Varies	Transform perspective	Any
Problem-Solution-Benefit	3-5	Quick persuasion	Time-pressed
QBR	10-15	Update stakeholders	Leadership
Team All-Hands	8-12	Align team	Employees
Conference Talk	15-25	Thought leadership	Attendees
Workshop	20-40	Teach skills	Learners
Case Study	8-12	Prove value	Prospects
Competitive Analysis	6-10	Strategic decisions	Internal
Board Meeting	15-20	Update board	Directors
Webinar	20-30	Generate leads	Registrants

9.1 三套典型结构的逐页拆解

YC Seed Deck（10 页）：Title/Hook → Problem → Solution → Traction → Market → Product → Business Model → Team → Financials → The Ask。 情绪弧：curiosity → frustration → hope → confidence → trust → urgency。

Sales Pitch（9 页）：Personalized Hook → Their Problem → Cost of Inaction → Your Solution → Proof/Case Studies → Differentiators → Pricing/ROI → Objection Handling → CTA + Next Steps。 情绪弧：connection → frustration → fear → hope → trust → confidence → urgency。

Product Demo（6 页）：Hook/Problem → Solution Overview → Live Demo/Screenshots → Key Features → Benefits/Pricing → CTA。 情绪弧：curiosity → frustration → hope → confidence → urgency。

9.2 Duarte Sparkline 模式

策略文档把 Nancy Duarte 的 Sparkline 模式形式化为「What Is / What Could Be」交替 + 终点收束：

What Is → What Could Be → What Is → What Could Be → New Bliss
(pain)     (hope)         (pain)     (hope)         (resolution)

并给出与决策流第 4 问互相印证的结论：Pattern breaks at 1/3 and 2/3 positions create engagement peaks（在 1/3、2/3 位置破格制造参与峰值）。

9.3 上下文匹配表

「场景 → 推荐策略」的速查映射：

Context	Recommended Strategy
Raising money	YC Seed, Series A, Guy Kawasaki
Selling product	Sales Pitch, Product Demo
Internal update	QBR, All-Hands, Board Meeting
Public speaking	Conference Talk, Workshop
Proving value	Case Study, Competitive Analysis
Lead generation	Webinar

十、Copywriting：5 大公式 × 页型映射 × 标题模式

slides-copywriting-formulas.md 是 Workflow 第 4 步的弹药库，覆盖 25 条公式，其中 5 条核心公式全文如下。

10.1 核心公式与模板句

PAS（Problem-Agitate-Solution）——用于问题页、痛点页组件：Problem → Agitate → Solution 模板：[Pain point]? Every [time frame], [consequence]. [Solution] fixes this.

AIDA（Attention-Interest-Desire-Action）——用于 CTA、收尾页组件：Attention → Interest → Desire → Action 模板：[Bold statement]. [Benefit detail]. [Social proof]. [CTA].

FAB（Features-Advantages-Benefits）——用于功能页、产品展示组件：Feature → Advantage → Benefit 模板：[Feature] lets you [advantage], so you can [benefit].

Cost of Inaction——用于激化页、制造紧迫感组件：Status Quo → Loss → Time Decay 模板：Without [solution], you're losing [amount] every [timeframe].

Before-After-Bridge（BAB）——用于转变叙事、案例页组件：Before → After → Bridge 模板：[Pain point before]. [Desired state after]. [Your solution] is the bridge.

10.2 公式-页型映射表（含情绪目标）

Slide Type	Primary Formula	Emotion
Title/Hook	AIDA, Hook	curiosity
Problem	PAS, Agitate	frustration
Cost/Risk	Cost of Inaction	fear
Solution	FAB, BAB	hope
Features	FAB	confidence
Traction	Proof Stack	trust
Social Proof	Testimonial	trust
Pricing	Value Stack	confidence
CTA	AIDA, Urgency	urgency

这张表是「策略的情绪弧」与「单页文案」之间的齿轮：例如 YC Seed Deck 的第 2 页（Problem，目标情绪 frustration）应使用 PAS 的 Agitate 分量，第 10 页（The Ask，urgency）应使用 AIDA + Urgency。

10.3 标题模式与快速参考

Power Words（强力句式）："Stop [bad thing]"、"Get [desired result] in [timeframe]"、"The [adjective] way to [action]"、"Why [audience] choose [product]"、"[Number] ways to [achieve goal]"。

Contrast Patterns（对比句式）："[Old way] is dead. Meet [new way]."、"Don't [bad action]. Instead, [good action]."、"From [pain point] to [benefit]."。

Social Proof Patterns（背书句式）："[Number]+ [users/companies] trust [product]"、"Join [notable company] and [notable company]"、"As seen in [publication]"。

Quick Reference（意图速查）：

Need	Use Formula
Create urgency	Cost of Inaction, Scarcity
Build trust	Social Proof, Testimonial
Show value	FAB, Value Stack
Drive action	AIDA, CTA
Tell story	BAB, Story Arc
Present data	Proof Stack

十一、检索引擎纵深：search-slides.py 与 BM25 四域

前述各参考文档中反复出现的「Search Commands」（如 search-slides.py "metrics dashboard" -d layout）指向仓库中真实存在的检索 CLI。它的实现分为两层，值得展开。

11.1 核心层：slide_search_core.py 的 BM25 四域配置

slide_search_core.py 是一个自包含的 BM25 检索引擎（k1=1.5, b=0.75，分词时剔除标点并过滤长度 ≤2 的词），默认 MAX_RESULTS = 3，数据目录指向同技能下的 data/。其 CSV_CONFIG 注册了 4 个检索域：

域（-d）	数据文件	检索列（search_cols）
`strategy`	slide-strategies.csv	strategy_name, keywords, goal, audience, narrative_arc
`layout`	slide-layouts.csv	layout_name, keywords, use_case, recommended_for
`copy`	slide-copy.csv	formula_name, keywords, use_case, emotion_trigger, slide_type
`chart`	slide-charts.csv	chart_type, keywords, best_for, when_to_use, slide_context

也就是说，Markdown 参考文档是「人类可读摘要」，而这 4 张 CSV 是「机器可检索全量库」：以 slide-strategies.csv 为例，每行除策略名外还带 keywords、slide_count、structure（逐页结构串）、tone、narrative_arc、emotion_arc、sparkline_beats 等字段，信息量大于 slides-strategies.md 的摘要表格；slide-layouts.csv 的 css_structure 列则直接给出各版式 CSS 片段。此外 data 目录还有 slide-backgrounds.csv、slide-color-logic.csv、slide-typography.csv、slide-layout-logic.csv 4 张支撑「上下文模式」的逻辑表，对应版式决策流的四个问题。

11.2 CLI 层：search-slides.py 的完整参数面

search-slides.py 在核心层之上封装了命令行界面与格式化输出，脚本头部还专门为 Windows 控制台（cp1252 编码）做了 UTF-8 重定向防护。其参数面：

search-slides.py "investor pitch"           # 自动检测域（strategy）
search-slides.py "funnel conversion" -d chart
search-slides.py "headline hook" -d copy
search-slides.py "two column" -d layout
search-slides.py "startup funding" --all    # 搜索所有域
search-slides.py "metrics dashboard" --json # JSON 输出

参数速查：

参数	说明	默认值
`query`（位置参数）	检索查询串	必填
`-d / --domain`	指定域：strategy / layout / copy / chart	自动检测
`-n / --max-results`	最大返回条数	3
`--all`	跨全部 4 域检索	关
`--json`	JSON 输出	关
`--context`	启用上下文检索模式（布局/字体/颜色/背景一体化推荐）	关
`--position`	当前页在 deck 中的位置（1 起始）	1
`--total`	deck 总页数	9
`--prev-emotion`	上一页的情绪标签，用于计算对比	无

11.3 上下文模式：一次调用拿到一页的完整设计决策

--context 模式是整个体系里最「Agent 友好」的能力：调用 search_with_context(query, slide_position, total_slides, previous_emotion) 后，一次输出即包含该页的完整决策包——推荐版式（recommended_layout + 方向 + 视觉重量）、字体方案（primary/secondary 字号 + 字重对比）、颜色处理（背景/正文色/强调色用法）、是否破格（should_break_pattern）、是否 full-bleed、背景图建议（类别 + 叠层 + 检索关键词）、动画类（默认 animate-fade-up）。

参考文档中给出的两条典型用法：

# 按用途查版式
python .claude/skills/design-system/scripts/search-slides.py "metrics dashboard" -d layout

# 上下文推荐：第 4 页/共 10 页的 traction 页
python .claude/skills/design-system/scripts/search-slides.py "traction slide" \
  --context --position 4 --total 10

策略与文案域的对应命令：

python .claude/skills/design-system/scripts/search-slides.py "investor pitch" -d strategy
python .claude/skills/design-system/scripts/search-slides.py "series a funding" -d strategy --json
python .claude/skills/design-system/scripts/search-slides.py "problem agitation" -d copy

从源码结构看，format_context 输出的「Pattern Break / Full Bleed」标记正与第八节决策流第 4 问、第九节 Sparkline 的 1/3 与 2/3 破格结论同源——Markdown 文档教「原则」，CSV 数据供「查表」，BM25 引擎做「匹配」，三者构成一条完整链路。

十二、实战串联：从 "create a pitch deck" 到可播放的单文件 HTML

把六步工作流、知识库与检索命令串起来，一次完整的投资人 pitch deck 生成过程在仓库体系内是这样走的：

解析：用户说 "create a pitch deck for an AI analytics startup"，$ARGUMENTS 注入任务，解析出类型 = 融资路演、受众 = VC；
定策略：search-slides.py "investor pitch" -d strategy 返回 YC Seed Deck（10 页、情绪弧 curiosity→…→urgency），确定 10 页骨架与逐页情绪目标；
逐页定版式：对每一页执行 search-slides.py "<页主题>" --context --position N --total 10 --prev-emotion <上页情绪>，拿到版式 + 字体 + 颜色 + 动画的整页决策（第 4 页 Traction 用 Metrics Dashboard + animate-stagger-scale；第 9 页 The Ask 用 CTA Closing + animate-pulse）；
写文案：按页型查公式映射表——Problem 页用 PAS 的 Agitate 句，Traction 页用 Proof Stack，The Ask 页用 AIDA + Urgency；
出图表：Traction/Financials 页用 search-slides.py "mrr growth" -d chart 选定 line/bar 类型，按 7.5 节的容器与暗色配置写 Chart.js；
组装模板：以 slides-html-template.md 的完整 HTML 为骨架，注入 design-system 产出的 CSS 令牌到 :root，逐页填 .slide-content，保存为单文件——浏览器打开即可用 ←/→、空格、点击翻页，顶部进度条同步。

这套流程没有任何构建步骤：产物是一个内联了 CSS/JS、外链 Chart.js CDN 的自包含 HTML 文件，可直接发送、投屏或托管。

十三、小结与相关文件索引

回到 slides.md 本身：它只有 40 余行，却是一个精心设计的「索引型参考文档」——用 Knowledge Base 表声明 5 个知识文件、用 When to Use 划清场景边界、用 Key Features 给出能力承诺、用 6 步 Workflow 锁定执行顺序。真正的深度全部沉淀在三个可追溯的落点：参考文档（Markdown 原则层）、CSV 数据（全量检索层）、BM25 CLI（执行层）。对使用 ui-ux-pro-max-skill 的开发者而言，掌握以下路径即可复现全部能力：

角色	路径
技能入口	design SKILL.md
幻灯片总参考	slides.md
创作工作流	slides-create.md
版式模式	slides-layout-patterns.md
HTML 模板	slides-html-template.md
文案公式	slides-copywriting-formulas.md
演示策略	slides-strategies.md
检索 CLI	search-slides.py / slide_search_core.py
令牌嵌入	embed-tokens.cjs
幻灯片数据目录	.claude/skills/design-system/data/
独立 slides 技能	slides SKILL.md