一个被忽略的问题
做过设计系统的人都知道一个尴尬现实：
组件做了 30 个，但没人知道怎么用。
文档写了，没人看。Figma 规范画了，开发不看。Storybook 部署了，业务方不打开。
原因很简单：组件库是技术资产，但展示是用户体验。 你不能指望别人翻一个技术文档来理解你的设计系统。
这就引出了一个反直觉的结论：
设计系统的展示能力，比组件本身更重要。
如果没人能快速理解你的组件怎么用、什么场景该用什么组合——再好的组件库也会沦为"只有我自己能用"的内部工具。
Exhibition Template：让展示本身变成协议
我的解法是：把"如何展示组件"这件事也变成协议。
不是手动为每个组件写展示页面——而是定义一套展览模板协议，让系统根据协议自动生成展示。
核心概念
Exhibition Template 定义的是"如何在展厅中展示一个设计对象"。
它不关心组件怎么实现——只关心：
- 标题和描述放哪
- 变体对比怎么排布
- Props playground 怎么交互
- 使用场景怎么呈现
- 协议约束怎么可视化
Exhibition 的三层结构
Layout Layer：展示布局
定义展厅的物理结构：
- Sidebar 导航 — 左侧组件/Section 列表
- 主内容区 — 组件实例 + 变体对比
- Scroll Spy — 滚动同步高亮当前位置
Content Layer：协议→展示的映射
核心魔法在这里。 组件协议文件已经定义了所有元数据：
{
"name": "button",
"variants": ["default", "secondary", "destructive", "outline", "ghost"],
"props": { "size": ["sm", "md", "lg"], "disabled": [true, false] }
}Exhibition 的 Content Layer 把这些元数据自动映射为展示元素：
variants→ 变体对比网格（5 列展示 5 种按钮）props.size→ 尺寸对比行（sm/md/lg 横排）props.disabled→ 状态切换 toggle
你不需要手写"这里展示 5 种变体"——协议里写了多少种，展厅就自动展示多少种。
Interaction Layer：让开发者玩起来
- Props Playground — 可交互地调整 props 值，实时看效果
- DevOverlay — 在组件上叠加标注层，显示 token 映射和协议约束
- Code Copy — 一键复制使用代码
Gallery Discovery：自动发现，自动展示
最优雅的部分是 Gallery Discovery——不需要手动注册"展厅展示哪些组件"。
当你运行 ds gallery 时：
- 扫描
manifest/component-registry.json（31 个组件） - 扫描
manifest/section-registry.json（21 个 Section） - 为每个已注册对象生成展示配置
- 启动可视化展厅
新增一个组件时，只需在协议注册表里注册——Gallery 自动展示它。 零额外维护。
为什么这比 Storybook 好
| 维度 | Storybook | Exhibition Template |
|---|---|---|
| 展示内容来源 | 人工写 stories | 协议自动映射 |
| 新组件加入 | 写新 story 文件 | 注册表注册即可 |
| 展示和实现一致性 | 可能脱节 | 协议是单一来源 |
| AI 可消费 | 否 | 是（JSON/YAML） |
| 维护成本 | 随组件数线性增长 | 几乎恒定 |
核心区别：Storybook 的 stories 是额外的产物——你要维护组件代码 + story 代码两份东西。Exhibition 从同一份协议同时驱动实现和展示——天生一致。
对 AI 的意义
Exhibition Template 对 AI 工作流有两重意义：
1. AI 生成组件 → 自动可见
AI 帮你生成一个新组件时，如果它同时写了协议文件和实现代码——展厅自动展示这个新组件。AI 不需要额外写 demo 页面。
2. Exhibition 本身是 AI 的学习材料
展厅不只面向人——它同时是 AI 的参考上下文。当 AI 需要在某个场景中使用组件时，它可以"看"展厅中的活实例，而不是读抽象文档。
设计原则
| 原则 | 说明 |
|---|---|
| 协议即展示 | 展示内容从协议自动派生，不独立维护 |
| 零配置发现 | 注册即可见，不需要手动加入展厅 |
| 渐进细节 | 概览→变体→Props→代码→约束，层层深入 |
| 开发者优先 | 交互式 playground + 一键复制 + DevOverlay |
| AI 友好 | 所有展示数据来自结构化文件，AI 可直接消费 |
适用场景
Exhibition Template 不只适用于 UI 组件库：
- API 文档 — 把 OpenAPI spec 当作"协议"，自动生成交互式 API playground
- 图标库 — icon 注册表自动生成图标浏览器
- 配色方案 — Token 文件自动生成配色展示板
- 任何有结构化元数据的东西 — 都可以用 Exhibition 思路自动展示
核心理念总结：不要手动维护展示——让展示从数据中长出来。 当你的设计系统自己能讲清楚自己，它就不再需要"布道者"。每个想用它的人，打开展厅就能理解。