UI/UX Pro Max slides 技能布局模式体系解析：25 种幻灯布局、CSS 结构与上下文推荐引擎

本文基于 ui-ux-pro-max-skill 仓库中 slides 技能的知识库文件 layout-patterns.md 展开，完整覆盖该文档给出的 14 种幻灯布局选型表、4 套核心 CSS 栅格结构、卡片/指标组件变体与视觉处理手法，并结合仓库中 slide-layouts.csv 的完整 25 布局数据库与 slide_search_core.py 的推荐引擎源码，说明从"查表选布局"到"上下文感知推荐"的完整实现链路。读完后可独立复现幻灯布局选型、直接复用其 CSS 骨架，并掌握 search-slides.py 命令行工具的完整参数用法。

layout-patterns.md 在 slides 技能中的定位

slides 技能的 SKILL.md 定义了技能入口：通过 create 子命令创建带 Chart.js、设计令牌与响应式布局的 HTML 演示文稿，并列出四份知识库文件：

Topic	文件
Layout Patterns	references/layout-patterns.md（本文主体）
HTML Template	references/html-template.md
Copywriting Formulas	references/copywriting-formulas.md
Slide Strategies	references/slide-strategies.md

其路由逻辑是：解析 $ARGUMENTS 的第一个词作为子命令，加载对应 references/{subcommand}.md 后执行。因此 layout-patterns.md 是幻灯片创建流程中"选什么布局"这一步的直接知识来源——它同时服务于 Agent（作为检索依据）和人类开发者（作为可复制的 CSS 骨架库）。

布局选型表：14 种核心布局与动画类

文档给出的第一张核心表格，将 14 种布局与使用场景、默认动画类一一对应：

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

动画类的语义在文档中隐含了清晰的分组规律：animate-fade-up 用于静态陈述型页面（标题、对比、引言）；animate-stagger 系列用于多子元素依次入场的网格型页面；animate-count 专用于大数字的计数动效；animate-pulse 仅保留给 CTA 的持续吸引注意。这一分组在推荐引擎的 animation_map 中得到了印证（见下文"上下文推荐引擎"一节），例如 agitation 目标映射到 animate-count animate-stagger 的组合。

值得注意的是，文档标题写的是 "25 slide layouts"，但选型表只列出最常用的 14 种；另外 11 种存在于数据库 slide-layouts.csv 中，见文末的完整清单。

核心 CSS 结构：四套可直接复用的栅格骨架

文档给出了四种高频布局的完整 CSS，均自带响应式断点（768px 与 480px），可原样复制到幻灯项目中使用。

Title Slide（标题页）

垂直 Flex 居中，全部子元素水平对齐：

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

Two Column Split（双栏对比）

Grid 双列 + 768px 以下折叠为单列，间距同步从 48px 收到 24px：

.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（三列特性网格）

三档响应式：桌面三列 → 平板两列（gap 从 24px 收到 16px）→ 手机单列：

.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（四列指标看板）

同样三档响应式，桌面四列、平板两列、手机单列，gap 统一 16px：

.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; }
}

这四套骨架与数据库中的 css_structure 字段一一对应。例如 slide-layouts.csv 中 Feature Grid（id=4）记录的是单行压缩写法 display:grid; grid-template-columns:repeat(3,1fr); gap:24px，Pricing Cards（id=13）额外携带了 .popular:scale(1.05) 规则。也就是说 CSV 保存"最小骨架"，layout-patterns.md 提供"带响应式的完整版"，二者互为补充。

组件变体：卡片样式与指标样式

Card Styles

Style	CSS Class	Use For
Icon Left	.card-icon-left	Features with icons
Accent Bar	.card-accent-bar	Highlighted features
Metric Card	.card-metric	Numbers/stats
Avatar Card	.card-avatar	Team members
Pricing Card	.card-pricing	Price tiers

Metric Styles

Style	Effect
gradient-number	Gradient text on numbers
oversized	Extra large (120px+)
sparkline	Small inline chart
funnel-numbers	Conversion stages

这些类名与 CSV 数据库中的 card_variant、metric_style 列取值一致（如 id=11 Big Number Hero 的 metric_style 为 oversized，对应 font-size:120px 的 CSS 记录），保证了"文档描述 → 数据库检索 → 生成代码"三处术语统一。

视觉处理手法（Visual Treatments）

文档列出的 8 种视觉处理及其适用时机：

Treatment	When to Use
gradient-glow	Title slides, CTAs
subtle-border	Problem statements
icon-top	Feature grids
screenshot-shadow	Product screenshots
popular-highlight	Pricing (scale 1.05)
bg-overlay	Background images
contrast-pair	Before/after
logo-grayscale	Client logos

在 slide-layouts.csv 的 visual_treatment 列中，这些手法被固化到具体布局上：Title Slide 用 gradient-glow、Problem Statement 用 subtle-border、Before After（id=16）用 contrast-pair、Logo Grid（id=23）用 logo-grayscale（配套 filter:grayscale(1) 的 CSS 记录）。数据库中还额外出现了文档未单独列出的 timeline-dots、chart-left、funnel-gradient、video-frame、ken-burns（配套 animate-ken-burns 动画）等处理，属于 11 种扩展布局的专属手法。

检索命令：search-slides.py 的完整用法

文档给出两条示例命令：

# Find layout for specific use
python .claude/skills/design-system/scripts/search-slides.py "metrics dashboard" -d layout

# Contextual recommendation
python .claude/skills/design-system/scripts/search-slides.py "traction slide" \
  --context --position 4 --total 10

结合 search-slides.py 源码，完整参数面如下：

参数	说明
query（位置参数）	检索词，如 "metrics dashboard"
-d, --domain	指定领域：strategy / layout / copy / chart，不指定时自动检测
-n, --max-results	最大返回条数，默认 3
--all	跨全部领域检索
--json	输出 JSON（供 Agent 消费）
--context	启用上下文推荐模式（叠加布局/字体/色彩建议）
--position	当前页在整份 Deck 中的位置（1 起始，默认 1）
--total	Deck 总页数（默认 9）
--prev-emotion	上一页的情绪标签，用于对比度计算

两条命令分别对应两种模式：

1. 基础检索：-d layout 强制走 layout 领域，底层用 BM25 对 slide-layouts.csv 的 layout_name / keywords / use_case / recommended_for 四列打分。源码 slide_search_core.py 中 search() 的默认域由 detect_domain() 按关键词计分推断（如 "grid"、"column"、"pricing" 倾向 layout 域），检索分大于 0 才返回，避免噪声。
2. 上下文推荐：--context 模式调用 search_with_context()，在基础 BM25 结果之上，叠加"目标推断 → 布局/字体/色彩推荐 → 破格与全屏判断"的决策链（下一节详解）。--position 与 --total 正是决定"这一页该不该打破视觉节奏"的输入。

布局决策流程：文档四问与源码实现

文档末尾的决策流程是：

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

这四个问题与 search_with_context() 的执行顺序严格对应，逐一落到源码：

问题 1：布局目标。get_layout_for_goal()（slide_search_core.py#L229-L244）以 goal 为主键查 slide-layout-logic.csv，查不到时回退到 features 行。该 CSV 共 15 个目标（hook / problem / agitation / solution / proof / social / comparison / traction / cta / team / pricing / demo / vision / timeline / features），每行给出布局模式、方向、视觉权重与是否用背景图，例如 traction → chart-insight / chart-left / 60-chart。

问题 2：情绪色彩。get_color_for_emotion() 查 slide-color-logic.csv，以 emotion 为主键（缺省回退 clarity）。例如 urgency 行给出 background=gradient, text_color=white, accent_usage=cta-button, use_full_bleed=true——正是 CTA 页该用的处理；而 frustration 行给出 dark-surface + subtle-border，与选型表中 Problem Statement 配 subtle-border 手法互相印证。

问题 3：内容类型字体。get_typography_for_slide() 查 slide-typography.csv，规则是：页内含指标则优先返回 metric-callout 行，含引言则返回 quote-block 行，否则按 type_map 将 15 种 slide type 映射到具体排版行（如 cta → cta-action），全部未命中回退 feature-grid。

问题 4：是否打破模式。这里实现了两条规则：

• calculate_pattern_break()（slide_search_core.py#L325-L349）：总页数不足 5 不打破；恰好位于 1/3 与 2/3 位置时打破；或上一页情绪与本页构成对立对（frustration ↔ hope/relief、hope ↔ frustration/fear、fear ↔ hope/relief）时打破。注释注明这是 Duarte Sparkline 式的情绪对比手法。
• should_use_full_bleed()（slide_search_core.py#L301-L322）：仅当情绪属于高情绪档（hope / urgency / fear / curiosity）、总页数 ≥ 3、且位置落在 [1, 1/3, 2/3, 末页] 四个战略位时才允许全屏背景——即"高端 Deck 全篇只用 2~3 张全屏页"的约束在代码层面强制执行。

因此文档里第 4 问的 "Check position (1/3, 2/3) → Use full-bleed" 并非经验口诀，而是这两段函数的精确行为描述。

附：数据库中的完整 25 种布局

文档选型表之外的另外 11 种布局（来自 slide-layouts.csv，id 15–25），按"何时该用"归纳：

Layout	Use Case	动画	备注
Agenda Overview	长 Deck 的目录页	animate-stagger	3–5 页短 Deck 应避免
Before After	展示转化效果	animate-scale	需有 before/after 数据
Icon Grid Stats	4–6 个图标+指标摘要	animate-stagger	不做详细解释的汇总页
Full Bleed Image	视觉冲击时刻	animate-ken-burns	数据密集页禁用
Video Embed	嵌入视频	animate-scale	16:9 播放器
Funnel Diagram	转化/流程漏斗	animate-chart	非顺序数据禁用
Quote Plus Stats	引言+数据混合	animate-stagger	左侧 1.5fr 引言、右侧 1fr 指标
Section Divider	章节过渡	animate-fade-up	纯排版、极简
Logo Grid	客户/伙伴 Logo 墙	animate-stagger	Logo 少于 6 个时不建
Chart Focus	单图表数据页	animate-chart	图表 max-height 65vh
Q&A Slide	结尾提问页	animate-fade-up	时间不够可跳过

每行在 CSV 中都带有 recommended_for 与 avoid_for 两列反直觉的"负向约束"（如 Metrics Dashboard 标注 "Early-stage no data" 时避免使用），这是该数据库相比纯布局清单的关键差异：检索命中后，search-slides.py 的 format_result() 会把 Avoid 一并打印出来，提醒使用者先核对前提条件。

小结

layout-patterns.md 在 ui-ux-pro-max-skill 中承担"布局知识层"的角色：选型表与动画映射回答"用什么"，四套响应式 CSS 骨架回答"怎么搭"，卡片/指标/视觉处理三个变体表回答"细节怎么调"，检索命令与决策流程则把知识库接入 search-slides.py 与 slide_search_core.py 构成的 BM25 + 规则推荐引擎。复现整套流程只需三步：用 -d layout 按用途检索布局，用 --context --position N --total M 获取该页的位置化建议，再按返回的 css_structure 与 animation_class 落码即可。