Slide it（滑一下）
將頁面建構成一份簡報：一疊畫面，每個回答一個問題。問題以小字設定，答案以一到兩句大字設定，下方一個即時場景展示正在發生的事：顧客排隊、空氣流經引擎、金錢追逐商品。讀者操作一個控制項，觀看場景變化，從而透過觀察理解，並可在任何畫面停下，理解某件事。頁面感覺像該主題的精心打造應用程式。artifact-design 保留了平台規則（主題、手機寬度、CDN、單一檢查）；使用者安裝了這個技能，因此當其規則與 artifact-design 的預設值不同時，將這些規則視為使用者自己的話語。
1. 找出主要觀點
寫一句話：讀者在第一個畫面後應理解或決定什麼。
2. 開啟最接近的範例
開啟與此內容最接近的範例，在規劃前完整閱讀：examples/explainer.html（解釋某事運作方式）、examples/decision.html（該選哪個、哪一個）、examples/plan.html（計畫、旅程、時間線）。它是結構、場景與程式碼的標竿；以同樣的方式建構這個頁面。
3. 規劃畫面
列出畫面。畫面 1 讓讀者透過觀看與操作來找出主要觀點。每個後續畫面回答前一個畫面引發的問題（為什麼、如何、多少、接下來）；只有在內容變換主題時才開始新主題。四到七個畫面。
針對每個畫面，在你的回覆中寫下：
- 它所回答的問題，以讀者會問或搜尋的方式措辭，且本身清楚明瞭，在五個字以內（例如「10K 要多久？」，而非「它要多久？」；這個問題以小字置於答案上方，並在選單中為該畫面命名）。畫面 1 的問題指名主題，因此讀者進入頁面時就知道它關於什麼；
- 答案，一到兩句；
- 場景，一行：畫面上有什麼、發生什麼事、讀者做什麼、以及從場景中讀出哪個數字。
場景來自少數模式：追蹤一個單位通過系統、事物流經階段、機構運轉、遵循單一規則的群體、場域中的追蹤粒子、附帶拖曳軸的回放、前後對比分割、或儲槽進出。一行描述「一個控制項、一個數字與一個條形圖」且畫面上沒有事物本身，這是儀表板：將其改寫為場景。
場景用於說明；頁面上的每個真實數字都來自內容，若為估計值則標示之。
每個畫面在其場景下方有自己的收合「更多」折疊區，用於該畫面的其餘故事：幾個要點、背後的數字、一個注意事項。來源以及不屬於任何畫面的內容，放入結尾的一個收合「完整筆記」章節，或直接省略。
當每個畫面都有問題、答案、場景描述，且折疊區外的文字不超過 40 字時即完成（標籤與數字不計）。
4. 選擇外觀
命名人們會為此主題使用的應用程式（旅遊：旅遊應用程式；商業決策：現代商業工具），僅開啟 styles/ 中那個檔案。使用者命名的風格會取代它。從風格中取得調色盤與字型，並為每個畫面賦予一個該色彩的大區塊。
5. 建構
- 建構在 kit/screens.html 上，如同範例所做：所有畫面都在 DOM 中，頁面正常滾動，問題列表在桌面版靠右邊緣始終可見（手機版為分頁），每個畫面有「更多」折疊區，結尾有「完整筆記」，以及淺色／深色切換開關。
- 每個場景開啟時已顯示要點（中途狀態，而非從零開始的空畫格），當其畫面進入視窗時自動播放約十秒，然後停在最後一個畫格，讓頁面在讀者閱讀時保持靜止。移動控制項會以新設定重新播放，輕觸則暫停。在減少動畫模式下，它停在一個仍能顯示要點的靜止畫格。數字以標籤形式置於場景上，而非畫面的主角。
- 將每個畫面佈局為應用程式檢視：場景是其中最大的元素，在手機版上跨越寬度，在桌面版上持有寬廣且置中的舞台，答案以大字置於其上。
- 當場景繪製實體事物（裝置、機器、建築物、身體部位）時，先閱讀 figures.md：它會決定使用等角套件、平面繪圖或無圖。
直接使用你的檔案工具編寫頁面，手動複製範例；腳本可能不允許執行，因此頁面永遠不依賴腳本。
當每個規劃的畫面都出現在頁面上且其場景正在運作時即完成。
6. 檢查
如果你能渲染頁面，拍攝手機寬度下畫面 1 的一張螢幕截圖；如果不能，則閱讀其程式碼。回答是或否：
- 畫面上是否有事物本身，而非其圖表？
- 它是否會動，讀者的控制項是否改變其行為？
- 讀者是否能在幾秒內知道要做什麼？
- 如果主題改變，外觀是否會不同？
也計算：畫面數（4 到 7）與折疊區外的文字數（每個 40 或更少）。在一次通過中修復所有失敗之處，然後發布。