卡片插圖 是做什麼的？
概念
卡片展示事物本身，簡化至讀者所需，刻意構圖，每個註解都有其理由。介面或文件的局部片段，以扁平、放大的形式呈現於淺灰色背景上；周圍有一些以等寬字體撰寫的技術備註，並以細線連接。必須在不閱讀卡片文字的情況下就能理解該資源的內容。
詞彙表
每個場景由三到五個以下元件組成，且從不使用全部。
視覺參考資料，繪製場景前請先查看：
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。無陰影，無明顯邊框。 |
| 場景 | 以 gray-300 虛線繪製的矩形，內部有極淡的網格：即工作區域。可選用，用於表示「這是一個設計空間」。 |
| 視窗 | 白色視窗，標題列有三個灰色圓點，邊框 gray-200，帶有柔和陰影。視窗超出場景或面板邊界（被截斷於右側或底部）：此為刻意構圖。若 URL 有意義，則包含網址列。 |
| 骨架 | 次要文字以灰色圓角條（gray-200）呈現，列表行以細線分隔，頭像以灰色圓盤呈現。只有承載意義的元素才有實際文字（例如「分享」、「發佈」）。 |
| 堆疊 | 多張卡片疊放，輕微垂直偏移，僅露出每張卡片的上方部分（檔名、標題）；最上方的卡片完整顯示標題和段落。用於展示文件集合。 |
| 彈出視窗 | 小型白色卡片，重疊於視窗邊緣（如邊框、一排方格），陰影比視窗更明顯：表示其在最上層。 |
| 註釋 | gray-500 等寬字體，11 至 13 px，置於物件外部：屬性（data-target="share"）、狀態（小卡片中的 { open: false }）、檔案路徑、決策。以工作坊語言命名圖像所顯示的內容。 |
| 指示線 | 從註釋延伸至元素上的細 gray-400 線條，末端為 4 px 實心圓點。直線或單一柔和曲線。表示返回關係時使用虛線箭頭。 |
| 步驟時間軸 | 水平線條，上有空心圓圈，每個圓圈下方有等寬字體標籤；當前步驟為實心圓。用於在流程中定位資源。 |
| 聯絡表 | 小型編號縮圖網格（01 至 06），其中一個被選中，並以指示線連接到其放大版本。用於檢視系列中的某個項目。 |
| 尺寸標註 | 繪製的測量線條（線段、兩端止擋、文字「4px」），類似於註釋模型上的標註。用於精確細節。 |
| 編號標記 | 實心圓盤 1、2、3，按閱讀順序放置在元素上。若有進行中的操作，則會顯示游標。 |
兩種模式
技能以兩種模式之一啟動，僅改變一件事：被強調元素的顏色。背景、表面、骨架、註釋、構圖和動畫均保持不變。
| 模式 | 如何呼叫 | 強調元素 |
|---|---|---|
| 黑白 | /card-illustrations 黑白、「黑白」、「單色」、「無彩色」 | 純 gray-900 墨水（其上文字為白色） |
| 色彩強調 | /card-illustrations 強調、「帶有強調色」、「彩色」 | 調色盤中的一種色調，從穩定識別碼中取得 |
模式選擇：優先依據引數或請求中的文字。若無指示，則沿用已上線場景的模式，以保持庫的一致性；若無現有場景，則使用黑白。絕不在同一網格中混合兩種模式：切換模式即表示要將所有可見卡片重新處理。在程式碼中，模式為單一常數（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）僅用於註釋。
場景應展示的內容
片段應說明資源是什麼以及其用途，而不展示其內部機制。集體智慧工作坊應透過其看板（多人之便利貼，以及被選中的便利貼及其投票數）來展示，而非其時間安排；核對清單應透過其勾選的方塊來展示；儀式應透過其本週的兩次會議來展示。若片段需要解釋才能理解，則表示選錯了片段。註釋是為了提供精確資訊，而非彌補模糊的圖像。
懸停互動
每個場景只有一種互動方式，用以說明文件的功能：核取方塊被勾選、下一個標記被填滿、彈出視窗升起、下一個縮圖被選中。使用 transform 與 opacity，300 ms，採用平緩加速曲線，僅限指標裝置，位移最多數個像素。
實作（React 和 Tailwind）
- 每個面板（背景）一個元件，每個場景一個元件，由資源識別碼選擇。
- 所有場景共享少數構建模組：表面（白色卡片、柔和陰影）、標記、骨架條、懸停互動常數（持續時間、位移）。
- 相同的渲染函數用於產生網格、「繼續閱讀」卡片和輪播。
- 資源的詳細資訊頁面可以開啟顯示事物本身（模型圖、投影片組的投影片），而非其縮圖。
新增資源
- 一句話：哪個片段代表該資源，哪個是唯一會帶有顏色的元素，以及哪個註釋（最多兩個）為其命名。
- 從詞彙表中選擇三到五個元件。以 HTML 和 Tailwind 編寫場景，使用面板的百分比定位，文字依語言放入字典（法語中注意不換行空格）。
- 將其加入場景選擇器，並附上懸停互動。
- 在 1280 px 下以 2x 解析度、以及在 390 px 下，分別拍攝靜止和懸停狀態的網格截圖。檢查：在卡片大小下可讀，僅一個元素有一種顏色，註釋位於物件外部，無任何非刻意的裁剪。
已排除的項目
- 等角「紙張」圖層：看起來像實體材料。
- 縮小圖表的縮圖：文字無法辨識，元素過多。
- 工作坊的時間安排：展示的是機制，而非事物本身。
- 漸變、同一場景中的多種顏色、調色盤之外的飽和顏色。