ui-ux-pro-max-skill 幻灯片布局模式全解：25 种 Layout 的选型、CSS 结构与上下文化检索机制

本篇指南以 ui-ux-pro-max-skill 的 slides-layout-patterns.md 为核心，完整覆盖其布局选型表、CSS 结构、卡片/指标变体、视觉处理、检索命令与决策流程，并结合仓库内的 25 布局数据目录、BM25 检索引擎源码与上下文推荐算法，讲清"一张幻灯片该用哪种布局"从经验判断到可执行决策的完整链路。读完你可以直接复制文档中的 CSS 结构与动画类用于 HTML 幻灯片，也能运行 search-slides.py 按幻灯片目标、位置、情绪自动推导布局与全出血（full-bleed）策略。

文档定位：布局模式是 slides 技能体系的"结构层"

在 SKILL.md 定义的 design 技能中，幻灯片相关参考文档分工明确：slides-strategies.md 讲叙事结构，slides-copywriting-formulas.md 讲文案公式，slides-html-template.md 提供可运行的 HTML 骨架与动画类实现，而 slides-layout-patterns.md 负责其中一环——每张幻灯片用什么结构排布内容。

文档开篇即声明其承载范围："25 slide layouts with CSS structures and animation classes"。需要注意一个细节：文档内的选型表格列出了 14 种高频布局，而完整的 25 种布局目录实际存放在数据文件 slide-layouts.csv 中——文档表格是该目录的高频子集，两者是"精选清单 + 全量数据"的关系，下文会分别展开。

按用例选择布局：核心选型表

文档给出了 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-scale、animate-count 等）的 CSS 实现统一放在 slides-html-template.md 的 "Animation Classes" 一节，例如 .animate-stagger > * 通过 nth-child 递增 animation-delay（0.1s 起，每级 +0.1s）实现子元素级联入场，与上表"Feature Grid 用 stagger"的意图一致——卡片逐张浮现。

全量 25 布局目录的字段结构

slide-layouts.csv 中每行布局包含 15 个字段，比文档表格的信息维度更全：

CSV 字段	含义	对应文档概念
layout_name / keywords	布局名与检索关键词	选型表左列
use_case	适用场景	选型表中列
content_zones	内容分区说明（如 "Center: Logo + Title + Tagline"）	文档未单列，属扩展信息
visual_weight	视觉权重（visual-heavy / numbers-dominant 等）	决策参考
cta_placement	CTA 放置位置	决策参考
recommended_for / avoid_for	推荐/避免的使用场景	决策参考
css_structure	一行式 CSS 结构	文档 "CSS Structures" 节
card_variant / metric_style / quote_style	卡片/指标/引言变体	文档 "Component Variants" 节
grid_columns	网格列数（1/2/3/4）	文档 CSS 中的 repeat(n, 1fr)
visual_treatment	视觉处理	文档 "Visual Treatments" 节
animation_class	动画类	选型表右列

文档选型表未覆盖的其余 11 种布局及其动画类（取自同一 CSV）：

Layout	Use Case	Animation
Agenda Overview	Preview presentation structure	animate-stagger
Before After	Show transformation impact	animate-scale
Icon Grid Stats	Summarize key points visually	animate-stagger
Full Bleed Image	Create visual impact	animate-ken-burns
Video Embed	Show video content	animate-scale
Funnel Diagram	Show conversion or process flow	animate-chart
Quote Plus Stats	Combine social proof with data	animate-stagger
Section Divider	Transition between sections	animate-fade-up
Logo Grid	Display client or partner logos	animate-stagger
Chart Focus	Present data visualization	animate-chart
Q&A Slide	Invite audience questions	animate-fade-up

四类核心 CSS 结构（可直接复制）

文档给出了 4 组带响应式断点的 CSS 结构，完整继承如下。它们的断点（768px / 480px）与 slides-html-template.md 中 "Responsive Breakpoints" 一节的模板断点保持一致，即布局结构与幻灯片容器共用同一套视口策略。

Title Slide（标题页）

居中 Flex 纵轴，承载 Logo、标题、Tagline：

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

Two Column Split（双栏对比）

两栏等宽网格，768px 以下退化为单栏：

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

三档断点：桌面 3 列 → 平板 2 列 → 手机单列，间距同步从 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（4 列指标看板）

4 列指标卡，小屏降为 2 列/单列：

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

值得说明的是，CSV 中每种布局的 css_structure 字段是一行压缩写法，例如 Feature Grid 为 display:grid; grid-template-columns:repeat(3,1fr); gap:24px——正是上面完整 CSS 的"检索版"摘要：检索引擎输出压缩版供快速决策，文档提供展开版供直接落地。

组件变体与视觉处理

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

这些类与 CSV 的 card_variant 字段对应（如 icon-left、accent-bar、metric-card、avatar-card、pricing-card），即数据目录中的变体名会被 search-slides.py 直接输出，再映射到文档中的类名。

Metric Styles（指标样式）

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

对应 CSV 的 metric_style 字段：Metrics Dashboard 行取 gradient-number，Big Number Hero 取 oversized，Icon Grid Stats 与 Chart Focus 取 sparkline，Funnel Diagram 取 funnel-numbers。

Visual Treatments（视觉处理）

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

其中 popular-highlight 的 "scale 1.05" 可直接在 Pricing Cards 的 CSS 结构中找到依据：CSV 中该布局的 css_structure 为 display:grid; grid-template-columns:repeat(3,1fr); gap:24px; .popular:scale(1.05)；logo-grayscale 则对应 Logo Grid 的 filter:grayscale(1)。视觉处理名同时出现在 CSV 的 visual_treatment 字段中，保持命名一致。

检索布局：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 的 argparse 定义（L118-L156），完整参数面为：

参数	默认值	说明
query（位置参数）	必填	检索词
-d/--domain	自动检测	strategy / layout / copy / chart 四选一，缺省时由 detect_domain() 按关键词打分自动判定
-n/--max-results	3	返回条数上限
--all	关	跨全部四个领域检索
--json	关	JSON 输出
--context	关	启用上下文推荐模式
--position	1	当前幻灯片序号（1-based）
--total	9	总页数
--prev-emotion	无	上一页情绪，用于对比度计算

底层实现：BM25 而非关键词子串匹配

slide_search_core.py 中的 BM25 类（L44-L103）是检索核心，关键参数与行为：

• 构造参数 k1=1.5, b=0.75（标准 BM25 取值），IDF 采用 log((N - f + 0.5)/(f + 0.5) + 1) 平滑形式；
• tokenize() 会转小写、去标点、过滤长度 ≤ 2 的词，所以查询 "two column" 中真正参与打分的是 "column" 这类词；
• 布局领域的检索列是 layout_name, keywords, use_case, recommended_for（L23-L27），即"metrics dashboard"能命中的前提是 CSV 的 layout_name/keywords 里存在 metrics, kpis, numbers, stats, data 这些词——这也是文档建议用英文设计术语而非自然语句查询的原因；
• 只有得分 > 0 的行才进入结果，MAX_RESULTS = 3 与 CLI 默认值一致。

布局结果输出时由 search-slides.py 的 format_result() 打印 Use case、Zones、Visual weight、CTA、Recommended、Avoid、CSS 七个维度，正是 CSV 字段的展示子集。

上下文推荐：布局只是输出的四分之一

文档第二条命令中的 --context 模式对应 search_with_context()（slide_search_core.py L352-L453）。它把"检索一张幻灯片"升级为"给定整份 deck 上下文，推导这张幻灯片的全部设计决策"，输出四组决策数据 + 两个布尔策略：

1. 布局：按从查询中推断的 goal 查 slide-layout-logic.csv，得到 layout_pattern、direction（如 visual-right）、visual_weight（如 70-visual）；
2. 字体：按内容类型查 slide-typography.csv，如 cta-action 为 primary 64px / secondary 24px / 权重 700-500 / 行高 1.1；
3. 色彩：按 layout-logic 行携带的 emotion 查 slide-color-logic.csv，如 urgency 对应 gradient 背景 + 白字 + "cta-button" 强调位；
4. 背景图：若 layout-logic 标记 use_bg_image=true，再查 slide-backgrounds.csv 得到图片类别、叠层样式与搜索关键词（如 cta → celebration-success / gradient-brand）；
5. 两个布尔策略：should_break_pattern（是否打破视觉模式）与 should_use_full_bleed（是否用全出血背景）；
6. 动画类：goal → 动画类的映射表内置于 L436-L447，例如 traction → "animate-chart animate-count"、cta → "animate-pulse"，与文档选型表的动画列口径一致。

全出血与模式打破的规则

这两个布尔判断有明确算法（should_use_full_bleed，L301-L322；calculate_pattern_break，L325-L349）：

全出血同时满足三个条件：情绪属于高情绪节拍（hope / urgency / fear / curiosity）；总页数 ≥ 3；当前页落在战略位 [1, total//3, 2*total//3, total-1]。注释明确其设计意图："Premium decks use 2-3 full-bleed slides strategically"，即全出血是稀缺资源而非默认选项。

模式打破满足其一即可：总页数 ≥ 5 且当前页在 total//3 或 2*total//3 位置（即文档决策流程第 4 步 "Check position (1/3, 2/3)" 的代码化）；或上一页情绪与当前情绪构成对立（frustration ↔ hope/relief、hope ↔ frustration/fear、fear ↔ hope/relief）。源码注释将这一手法标注为 Duarte Sparkline 式的情绪对比技术。

四步布局决策流程

文档结尾给出的决策流程：

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

对照仓库实现，这条流程的每一步都有对应的数据文件与函数（文档中的文件名是简称）：

流程步骤	文档文件名	实际数据文件	代码入口
1. 目标 → 布局	layout-logic.csv	slide-layout-logic.csv	get_layout_for_goal()
2. 情绪 → 色彩	color-logic.csv	slide-color-logic.csv	get_color_for_emotion()
3. 内容类型 → 字体	typography.csv	slide-typography.csv	get_typography_for_slide()
4. 位置 → 打破模式/全出血	—（规则内置）	—	calculate_pattern_break() / should_use_full_bleed()

四份决策 CSV 的键列分别是 goal、emotion、content_type、slide_type（见 DECISION_CSV_CONFIG）。也就是说，--context 模式把四步流程合并为一次命令调用；而四份 CSV 也可以直接查阅作为静态参考，例如 layout-logic 中 "agitation → full-bleed-stat / centered / 100-text / break_pattern=true" 一行就完整表达了"放大情绪页该用全屏数字、并打破模式"的决策。

与 HTML 模板的衔接：动画类与断点从哪里来

布局模式文档只给出结构与类的"设计意图"，可运行的载体是 slides-html-template.md：

• 文档选型表中的 animate-fade-up / animate-scale / animate-stagger / animate-count 均在该模板的 "Animation Classes" 节有 keyframes 与延迟实现；animate-stagger-scale、animate-pulse、animate-ken-burns、animate-chart 等其余类可按同一模式（forwards + opacity: 0 初始态）补齐；
• 模板的 16:9 舞台约束（max-width: calc(100vh * 16 / 9) 等 letterbox 规则）决定了文档中 max-height: 60vh（Product Screenshot）、65vh（Chart Focus）这类以 vh 为单位的 CSS 结构能落在同一比例空间内；
• 模板的 768px / 480px 响应式断点与本文 "四类核心 CSS 结构" 中每个网格的断点完全对齐，落地时可直接并置使用；
• 色彩/字体通过 :root CSS 变量注入（--color-primary、--primitive-gradient-primary、--typography-font-heading 等），而变量生成由 design-system 技能的 generate-tokens.cjs 与 embed-tokens.cjs 承担——布局决定"结构"，token 决定"外观"，二者正交。

小结：选型、检索、落地三步闭环

• 选型：先按"按用例选择布局"表确定布局与动画类；需要 content_zones、avoid_for、grid_columns 等更细维度时，直接查 slide-layouts.csv 的 15 字段全量目录；
• 检索：python .claude/skills/design-system/scripts/search-slides.py "<query>" -d layout 走 BM25 检索；加入 --context --position N --total M --prev-emotion x 则额外获得字体、色彩、背景图与全出血/打破模式的策略输出；
• 落地：从文档复制对应 CSS 结构，套用 slides-html-template.md 的 16:9 舞台与动画类实现，断点 768px / 480px 三档保持一致。

适用前提：整套机制面向"浏览器内 16:9 HTML 幻灯片"场景；search-slides.py 为纯标准库实现（csv、re、math、argparse），Python 3 环境下可直接运行，无需额外依赖。