卡片插图 是做什么的？
核心理念
一张卡片应呈现事物本身，经简化至读者所需，构图具有明确意图，每条标注皆有理由。界面或文档的片段，扁平、放大、置于浅灰色背景之上；周围用等宽字体书写少量技术标注，并以细线相连。观者无需阅读卡片文字即可理解资源内容。
词汇表
每个场景由三至五个以下元素组成，从不用全。
绘制场景前需参阅的视觉参考文件：
references/vocabulaire.png（及.svg）：十二种元素，每种独立置于其面板，附一行规则说明。references/exemple-noir-et-blanc.png和references/exemple-accent-couleur.png（及.svg）：同一完整场景的两种模式，仅强调元素颜色不同。references/accent-palette.png和.json：调色板中的十种色调及其柔和版本。
| 元素 | 说明 |
|---|---|
| 背景 | 浅灰色面板（#F3F3F2 至 #F5F5F4），圆角 16-24 px，长宽比 13:10。无阴影，无显式边框。 |
| 场景（Stage） | 虚线 gray-300 矩形，内部包含极淡网格：即工作区域。可选，用于表示“这是一个设计空间”。 |
| 窗口 | 白色窗口，标题栏含三个灰色圆点，gray-200 边框，柔和阴影。窗口超出场景或面板边缘（右侧或底部被裁切）：表明构图是有意为之。若 URL 重要则显示地址栏。 |
| 骨架屏 | 次要文本以圆角灰色条 (gray-200) 表示，列表行以分隔线隔开，头像以灰色圆圈表示。仅承载意义的关键元素使用真实文字（如“Share”、“Publish”）。 |
| 堆叠 | 多张卡片垂直错位堆叠，仅露出每张顶部（文件名、标题）；最上方卡片完整显示标题和段落。用于表示一组文档。 |
| 弹出层 | 白色小卡片，叠放于窗口边缘（如侧边栏、一排复选框），阴影比窗口更重：表示其位于上层。 |
| 标注 | 等宽字体 gray-500，字号 11-13 px，置于对象外部：属性（data-target="share"）、状态（小卡片中的 { open: false }）、文件路径、设计决策。以从业者语言命名图像展示的内容。 |
| 连接线 | gray-400 细线，从标注起始，以 4 px 实心圆点终止于元素。直线或仅一条平滑曲线。虚线箭头表示反向关联。 |
| 步骤时间线 | 水平线，包含空心圆圈，每个下方有等宽字体标签；当前步骤为实心圆。用于定位资源在流程中的位置。 |
| 联系表 | 小型缩略图网格，编号 01 至 06，仅一张被选中，通过连接线关联至其放大版本。用于展示系列中的特定元素。 |
| 尺寸标注 | 图纸式测量标记（线条、两端止挡、“4px”），类似带注释的原型图。用于精确细节。 |
| 编号标签 | 实心圆点，内含数字 1、2、3，按阅读顺序置于元素上。若存在交互则附带光标指示。 |
两种模式
技能在两种模式之一中运行，仅改变一个元素——强调色——的颜色。背景、表面、骨架屏、标注、构图和交互保持不变。
| 模式 | 如何调用 | 强调元素 |
|---|---|---|
| 黑白 | /card-illustrations noir et blanc、“黑白”、“单色”、“无彩色” | 纯灰 gray-900（其上文字为白色） |
| 颜色强调色 | /card-illustrations accent、“带强调色”、“彩色” | 基于稳定标识符从调色板选取的色调 |
模式选择：优先依据参数或请求措辞。若无明确指示，则沿用已上线场景的模式以保持库内风格一致；若无已有场景，则默认黑白。切勿在同一网格内混用两种模式：切换模式需同时重新渲染所有可见卡片。在代码中，模式为单一常量（ACCENT_MODE: 'ink' | 'color'），由所有场景读取，一行代码即可切换整个资源库。
强调色：灰色加一抹色彩（颜色强调色模式）
场景整体保持灰色（背景、白色表面、骨架屏、标注）。仅一个元素使用强调色：当前步骤、选定缩略图、尺寸标注、选中复选框、主按钮、保留元素。其他一切均为灰色或墨水色。强调色限于插图使用，网站界面（按钮、链接、导航）保持单色。
调色板包含十种色调，均具有相同的亮度和饱和度（OKLCH 色彩空间：L 0.655, C 0.11），仅色调不同。此设置为最鲜艳值，确保十种颜色均在 sRGB 色域内，且至少满足 3:1 对比度（图形元素阈值）。每种色调有一种柔和版本（L 0.95, C 0.03），用于着色标签或浅色背景。色板见 references/accent-palette.png，数值见 references/accent-palette.json。
| 名称 | 强调色 | 柔和版 |
|---|---|---|
| 红 | #CB756E | #FFE7E4 |
| 珊瑚 | #C87A56 | #FFE9DE |
| 橙 | #BF8242 | #FDEBDA |
| 琥珀 | #AF8B37 | #F8EDD8 |
| 绿 | #63A266 | #E3F4E2 |
| 翡翠 | #42A680 | #DDF5E9 |
| 青绿 | #0DA5A5 | #D8F5F5 |
| 天蓝 | #389DC7 | #DBF3FF |
| 蓝 | #6B90D4 | #E4EFFF |
| 紫 | #9284CE | #EEEBFF |
使用规则：
- 每个场景一种色调，随机但稳定选取：通过
accentFor(id)函数从资源标识符（简单哈希）派生色调，确保服务器和浏览器获取相同颜色，避免水合错误。切勿使用Math.random()选取。 - 在纯色强调色上，文字为白色且加粗（字号至少 11 px）；在柔和背景上，文字使用纯色强调色。
- 同一场景内绝无两种色调，绝无色调渐变。例外情况：绿/橙可用性条以颜色本身为主题。
- 参考示例：一组界面元素，其中活动标签着色、主按钮填色、选中复选框上色、滑块以鲜艳色调显示于灰色网格背景（柔和版本）。
新增色调：以 L 0.655 和 C 0.11 计算，验证其在 sRGB 色域内且与白色维持 3:1 对比度，然后插入其色调相邻位置。
构图
- 对象位于左侧或中央，标注位于右侧或下方，绝不覆盖内容。
- 裁切：窗口超出面板边缘带来比完整缩小窗口更大的真实感。
- 面板边距宽松（8-10%）；使用三至五个元素；若犹豫是否添加元素，则不添加。
- 在卡片大小（约 350 px 宽）下可读：文字最小 11 px，等宽字体亦同。
- 字体：模拟界面使用无衬线字体，仅标注使用系统等宽字体（
ui-monospace、font-mono）。
场景应展示的内容
片段应传达资源是什么及其用途，而非展示其内部机制。例如：集体工作坊应展示其看板（多方便签、重点便签及其投票），而非时间安排；清单应展示已勾选项目；例行活动应展示每周两次会议。若片段需要解释才能理解，则说明选错了片段。标注的作用是阐明，而非弥补模糊的图像。
悬停交互
每个场景仅一个交互动作，用于说明文档的功能：勾选复选框、填充下一编号标签、弹出层上移、选择下一缩略图。变换和透明度，持续 300 毫秒，采用平滑缓动曲线，仅限指针设备，位移最多几个像素。
实现方式（React 和 Tailwind）
- 面板（背景）和场景各自为一个组件，场景组件根据资源标识符选择。
- 所有场景共享少量基础构件：表面（白色卡片、柔和阴影）、标签、骨架条、悬停交互常量（时长、位移）。
- 同一渲染函数用于网格、“继续阅读”卡片和轮播。
- 资源详情页可直接展示事物本身（模型图、演示文稿幻灯片）而非缩略图。
新增资源
- 一句话描述：哪一片段代表该资源，唯一使用颜色的元素是哪个，标注（最多两条）如何命名。
- 从词汇表中选取三至五个元素。使用 HTML 和 Tailwind 编写场景，位置基于面板百分比，各语言文字放入独立字典（法语中注意不间断空格）。
- 将其添加至场景选择器中，附带其悬停交互。
- 在 1280 px 2x 和 390 px 宽度、静止和悬停状态下截图。验证：卡片大小下可读，单个元素含单色，标注位于对象外部，无无意义裁切。
已排除的方案
- 等距“纸张”视图：看起来像实体材料。
- 缩小图表缩略图：文字不可读，元素过多。
- 工作坊时间安排：展示机制而非事物本身。
- 渐变色、场景内多种颜色、调色板外的饱和色。