Anatomy
這項技能用來製作如實驗台上的小型儀器般的圖形：一個帶支腳的重底座、附有刻度尺的軌道、帶襯套的滑座、滾花旋鈕、螺旋彈簧、指針會移動的千分表，以及像小點般的螺絲。讀者因為認出這部機器而理解其中的概念。圖形上顯示的每個數字，都來自於驅動其零件移動的同一個模型。
技能附帶了八個完整的範例。開始之前請先開啟最接近的一個。每個無框架的範例都可以透過 node examples/<名稱>/build.mjs 建置，它會在腳本旁邊生成一個獨立的 HTML 頁面；加上 --light 參數則使用亮色主題。
examples/dial-indicator/是最小的範例：一個裝在支架上的千分表，總共約 300 行。examples/desk-computer/是無框架的 SVG：一台桌上型電腦，附有可輸入文字的鍵盤。輸入的文字會顯示在 CRT 螢幕上（該螢幕繪製於機殼正面平面內），當關機時，畫面會收縮成一條線和一個點。它有大約 85 個實體和 850 條路徑。examples/arcade-cabinet/是一個直立式大型電玩機台，側板已卸下，約有 240 個實體和 15 條線纜。一枚硬幣飛入投幣口，沿著滑槽滾下（速度等同於一枚滾動的圓盤在 30° 斜坡上的速度），觸發幣條開關的電線，最後掉入錢箱；開關的脈衝會沿著線纜一段一段地傳送至主機板，CRT 螢幕會暖機、自我檢測並執行展示模式（繪製於傾斜螢幕的平面內）。搖桿傾斜時會關閉面板下方的一個微動開關。它展示了如何放置攝影機，使剖面圖的機構始終保持在視野內；如何沿任意軸將凹面電路板繪製成稜柱；如何將移動中的零件以與建置時相同的模組在頁面中重建；以及如何在已排序的插槽中預留空間給即時產生的硬幣和電線。執行node build.mjs --audit可以驗證幾何正確性。examples/raptor-engine/是一具懸掛在測試台上的火箭引擎。其圓形零件來自kit/lathe.mjs，管路與線束則來自kit/tube.mjs。它可以分解成 11 個子組件，並具有交錯的彈簧和逐幀的深度重新排序。每個零件都記錄了其真實形狀，執行node build.mjs --audit（kit/audit.mjs）可以在靜止、分解狀態以及爆炸分解動畫的每一幀中驗證：沒有任何零件穿過其他零件；每個端點都正確安裝在真實的支座上；沒有彎管被擠壓、折疊或落在其他線上；沒有曲線輪廓的斜率出現抖動；並且所有重疊部分都按深度順序正確繪製。WebGL 的羽流、震波、水花和蒸汽會在 SVG 的後層與前層之間渲染。它是密集管路、平滑陰影和淡出效果的參考範例。examples/ripple-tank/是一個學校用的水波槽，安裝在高腳架上，下方鋪著紙張螢幕，視角由上往下 44°。兩個 WebGL 圖層（紙張上的燈光、陰影和焦散，以及水的反射和玻璃）與等角平面對齊，並由純粹的色散和光學模型（model.mjs）驅動；頻率變化會透過歷史紋理從振動子向外傳播。examples/test-rig/是一個來自真實網站（React/Next）的正式圖形：一個安裝在彈簧滑座上的玻璃按鈕、一個裝在軌道上可按壓和拉伸的探針，以及一個讀取傾斜量的千分表。它有 53 個實體和大約 470 條路徑。examples/spot-plate/是來自同一個網站的第一個正式圖形：六對玻璃滴在點滴板上，每對都由同一個距離場繪製，因此距離小於merge參數的兩滴會融合成一塊玻璃。一組測隙規控制merge值，每個間隙對應一片測片。它是形體互相融合以及單一控制項驅動多個零件的參考範例。examples/turning-dial/是選用的 3D 模式：一個在真實 3D 空間中旋轉的撥盤，上面有一個小型機器手。它有大約 90 個金屬材質的活動零件、一個第二旋轉組、一個鉸鏈、一個三關節手指（可抬起）以及一個可作為自由體分離的艙體。WebGL 的 LED、光暈和火花會跟隨移動的零件。旁邊的stress.mjs是一個放在凌亂車間裡、約有 380 個零件的密集機械手，用於衡量效能。
測試台是繪圖本身的品質標竿。猛禽引擎則是著色器工作的標竿：一個 WebGL 效果必須達到其世界空間、無彈出、無縫渲染的標準。
唯一重要的概念
物件本身就是解說。 不要繪製方塊、箭頭和標籤。發明一個真實的、做工精良的物理物體，它的運作就是概念本身。以下是早期圖形對應關係的範例：
| 概念 | 物件 |
|---|---|
| 一個共享 GPU 上下文服務於多個畫布 | 龍門繪圖機：一個列印頭造訪 16 個井 |
| 一個快取鍵，當無變化時跳過工作 | 彈子鎖：當每個銷子都匹配時，鎖芯轉動且無需重繪 |
| 七個位元組每紋理素（bytes per texel）不同的渲染目標 | 七個抽屜的櫃子，每個抽屜深度等於其位元組數 |
| 可分離模糊（49×49 次取樣 vs 49+49） | 釘床印章，旁邊是兩個裝在軌道上的梳子 |
| 一個按壓並傾斜的彈簧 | 帶有彈簧、探針和千分表的測試台 |
| 一個高度輪廓 | 一個壓在邊緣上的輪廓儀 |
| 取決於朝向的光線 | 一個小型攝影棚：轉盤周圍有主燈和補光燈 |
以下兩種失敗情況在實務中皆有發生：
- 太過抽象。 堆疊的板子、浮動的平板或帶標籤的盒子，看不出是什麼東西。
- 太過扁平且單調。 一大塊平板上只有幾條線，沒有體積感、沒有零件，也沒有任何值得探索的地方。
兩種情況的修正方法相同：一個由許多微小、精確、有目的的零件構成的可辨識機器。
每個作品都高度精細。 這適用於所有圖形，無論概念或需求多小：一個快速的解說圖仍然是一台密集且真實的機器，絕非幾個平板。根據規模（工作流程步驟 1）來決定要推進到什麼程度：一個「圖形（Figure）」會對其主題和機制進行 4 倍的細緻描繪；一個「英雄（Hero）」或「史詩（Epic）」則是對整個畫作進行 4 倍細緻描繪。
- 閱讀真實物件。 按照真實物體的製造方式來建構：每個螺絲、接縫、倒角、襯套、標籤板、帶接頭的線纜、帶刻度的尺規，以及用來固定零件的零件。
- 兩種觀看效果。 在 1 倍大小時，它看起來像一台清晰的機器。在 4 倍大小時，每個區域仍然有真實的細節可以發現；空白的表面或空盪的角落代表尚未完成，而不是簡潔。
- 有目的性，絕非雜訊。 細節來自屬於該機構的零件。每個零件都坐落於另一個零件上、終止於某個邊緣，並以淡出而非突然停止的方式結束。
- 最後檢查。 在完成之前，放大到 4 倍（對於圖形是針對主題和機制，對於英雄或史詩則是整個畫作），並在每個單調的區域補上缺少的真實零件。
工作流程
請依此順序進行。在開始任何幾何圖形之前，先構思概念和零件清單。大部分品質在此階段決定。
- 開始前先確定尺寸。 在任何其他工作之前先指定尺寸，並在使用者要求預估時間時，告知大約需要多久時間（針對較低層級）。
- 圖形（Figure）：一個機制，40–80 個零件，SVG，最多一個 WebGL 圖層。直接指定尺寸並建置，無需詢問。因為一個圖形通常能在不到一小時內完成，所以不必向使用者告知時間。對於以下的進度檢查，預算最多一個小時。
- 英雄（Hero）：一個密集的物體、多個 WebGL 圖層或一個 3D 主題，80–150 個零件。大約 2–4 小時。先告知使用者，然後再開始建置，除非使用者要求快速完成。
- 史詩（Epic）：整個車輛、建築或工廠，具有多個運動系統，或對多個主題使用 3D 模式。需要 6 小時或更長時間。不要直接開始。提供預估時間，提出一個保留核心概念的英雄版本，並列出完整版本會增加的內容。僅在使用者選擇時才建置史詩。
- 無論何種尺寸，都應在第一個小時內有一個可在瀏覽器中開啟的工作頁面，並從那裡逐步深化。在每個步驟開始時執行
date指令，當某個步驟花費時間超過其預估份額的兩倍時，請告知使用者當前進度以及剩餘工作。
- 先追求真實。 收集被解釋事物的真實數字和行為：尺寸、數量、閾值、曲線。即時讀數、運動和圖說都必須是真實的。如果可能，將模型寫成一個小型的純模組（如測試台範例中的
rig.ts），並讓所有東西都由該模型驅動。 - 發明物體。 挑選一個機器、工具、儀器或家具，其機制與概念一一對應。用一句話說明什麼東西在移動以及該移動代表什麼意義。切勿複製參考圖片：借鑑其表面處理，而非其物體本身。
- 零件清單。 列出至少 40 個零件（圖形為 40–80 個，英雄為 80–150 個，史詩則更多），並分組：底座（底板、支腳、溝槽、角落螺絲、標籤板、尺規條）、結構（立柱、軌道、框架條、止動件）、機構（滑座、襯套、彈簧、柱塞、指針）、控制器（滾花旋鈕、指旋螺絲、冠輪）以及主題本身（即唯一被點亮的零件）。每個零件都坐落於另一個零件之上。
references/craft.md包含一個零件詞彙表與製作方法。 - 規劃世界。 使用與真實物體約 1 像素對應的世界單位：x 和 y 位於地面，z 朝上。將平面佈局規劃為圓角矩形
{x, y, w, d, r}和圓形。選擇攝影機：預設為方位角 45°，範圍 35–60° 以顯示長邊，俯仰角 30°（像水波槽的 44° 那樣更高，以便觀察開口內部）。然後使用fitProjection(points, width, height, { pad, azimuth })進行調整。 - 一次建立幾何圖形。 使用工具包在幾何模組中預先計算所有靜態路徑：
slabOf、cylinder、extrude、planOutline、topTicks、knurl、coil、radialTicks等。沿任意軸的圓形零件（鐘形、法蘭、閥門、致動器）來自kit/lathe.mjs，管線和線纜則來自kit/tube.mjs。移動零件在靜止位置一次性建構，並使用translateAlong移動。只有形狀會變化的零件才需要逐幀重建。 - 從後到前、從下到上繪製。 使用
depthOf對重複零件進行排序。將任何包裹另一個零件的東西分成後半部和前半部：圍繞桿子的彈簧、圍繞滑座的框架桿。移動零件應繪製在其物理位置上。請參閱references/craft.md中的「畫家順序」。一旦圖形包含管線、線纜和圓形零件，就停止手動調整鍵值：在將每個項目放入A.recorder(P, { order, spring })時記錄其形狀，讓A.settle(R, P)在兩個項目重疊處測量真實深度並設定鍵值，最後以A.auditOrExit(R, P)結束建置。在繪製管線之前先規劃路由：兩端都要有真實的連接埠，管道路徑沿著結構佈設，交叉點位於直管段上，並使用套管來分隔管線（references/craft.md，第 8 節）。記錄您所繪製物體的真實形狀：一個僅為了讓審查通過的佔位形狀是錯誤，而審查正是為了發現此類錯誤。一根從填料函滑出的桿子應使用G.rodOut製作，並記錄為A.slide。 - 加上框架。 將圖形放入卡片中：左上角顯示
Fig n，右上角顯示簡短標題，左下角顯示互動提示，右下角顯示即時讀數。圖例和真實的圖說應放在卡片下方，而文字應保持在外，最多只允許一個微小的刻字標籤出現在圖形內。 - 讓它活起來。 使用基於時間的平穩動畫：指數跟隨或真實的彈簧。當無人觸摸時，會有一個空閒巡覽循環播放。圖形會回應滑鼠和鍵盤輸入，當離開畫面時停止運作，並在「減少動態效果」設定下保持靜止。在參考物件上撰寫屬性，不要每幀重新渲染。請參閱
references/motion.md。 - 像評論家一樣驗證。 業主透過放大來發現錯誤，所以您應該先放大。檢查您產生的每張 PNG。
- 使用
scripts/capture.mjs擷取桌面、手機（寬度 390）、懸停狀態以及數個動態瞬間的畫面；對於序列、分解狀態和--no-webgl備用方案，請使用scripts/drive.mjs。 - 將審查問題減至零。 對於包含管線、線纜或圓形零件的圖形，
node build.mjs --audit必須以audit passed結束，每個失敗行都應為 0：檢查靜止、分解以及飛行中途的間隙、端子、鬆散端點、摺疊、自交疊、擁擠（也針對細長實體）、佔位形狀、支撐、抖動、鞍部和深度順序。請透過修正幾何來解決聯鎖問題，切勿使用鍵值偏移。 - 將線條檢查減至零。 審查永遠不會看到線條標記。
node scripts/lines.mjs page.html --out shots/lines.png（以及在-light頁面上，以及在drive.mjs的["lines"]動作下的每個靜止姿勢）必須輸出line ends: 0：每個接縫、標線、肋條、刻度標記和指針都必須終止於一條筆畫、一個點或一個輪廓上。請檢視標示了圓圈的 PNG。 - 對兩種主題下的每個接合處進行 4 倍放大特寫（也要建置
--light版本），分別在組裝和分解狀態下檢查：每個法蘭、三通、彎頭、夾具、閥門、波紋管、帶子、鞍座、球接頭和交叉點；每個彎曲物體（無色調階梯）；每個紋理結束處（位於邊緣或淡出處）；帶有接縫的扁平盒面；每個接合處的紋理軟管；靜止和全行程狀態下的每個滑動桿；以及每個包含文字或著色器內容的視窗。 - 著色器： 使用
["slow", 0.05]以慢動作輸出一張聯絡表，涵蓋每個過渡；無彈出現象、無顏色切換，邊緣讀值為 0。在亮色主題下，還要記錄每個過渡期間每幀的墨水覆蓋率（其變化必須與亮度單調一致），並在 8–16 倍放大下裁剪墨水與筆畫交會處（references/verify.md，「亮色主題著色器」）。 - 將您的 PNG 與範例並列，並捫心自問：它是否立刻就是一個真實的物體，充滿了具有體積感的小零件，並且每條線條都終止於某個東西？它在 1 倍時是否高度精細，在 4 倍時仍然有值得欣賞之處，沒有任何空白表面或空盪角落？重複疊代直到答案為「是」。核對清單：
references/verify.md。
- 使用
設定
工具包位於 kit/ 目錄下：
| 檔案 | 用途 |
|---|---|
kit/iso-kit.ts | 將所有核心功能放在一個檔案中：攝影機、實體、零件庫、SVG 字串渲染器、卡片和頁面建置器，以及 CSS（ISO_CSS）。將其複製到 TypeScript 專案中。 |
kit/iso-kit.mjs | 編譯為純 ESM 的相同核心，用於 Node 腳本。直接導入即可。 |
kit/iso.css | 將 ISO_CSS 寫出的檔案。導入一次，並在其包裝器上放置 class="iso"（再加上 data-theme="light" 用於亮色主題）。 |
…
（由於原文過長，此處已截斷）實際上，完整的 SKILL.md 包含更多關於工具包檔案用途的表格、參考文件連結（如 references/craft.md、references/motion.md、references/verify.md），以及核心繪圖工具（如 project、depthOf、translateAlong、slabOf、cylinder、extrude、coil 等）的詳細 API 文件。