Dimensional Drawing：用 AI 描繪 UI 尺寸圖

這個 GitHub 專案 enesozturk/dimensional-drawing 是一個非常獨特的 AI Agent Skill 集合。它的核心目的不是提供一個傳統的軟體工具，而是提供一套「指令集（Skills）」，教導 AI 代理（如 Claude, Cursor, Codex 等）如何將一個 UI 元件（例如卡片、對話框）轉換成 Apple 風格的單頁技術尺寸圖（Dimensional Drawing），甚至能將其轉化為精美的自繪動畫影片。

以下是該專案的詳細解說：

1. 專案主要目的

該專案模仿 Apple 為硬體配件（如 iPhone 保護殼）提供的技術規格圖。其目標是將 UI 的「視覺呈現」轉化為「建築結構」，讓開發者或設計師能一眼看出元件的：

• 精確尺寸：內外邊距（Padding）、間距（Gap）、圓角（Radius）。
• 層級結構：透過「爆炸圖」展示元件由底層到頂層的堆疊關係。
• 視窗位置：元件在螢幕（Viewport）中的擺放邏輯。

2. 核心功能與產出

專案分為兩個主要部分：

• 靜態繪圖 (dimensional-drawing)：
  • 輸入：UI 原始碼、Storybook 連結、URL 或截圖。
  • 輸出：一個自包含的 HTML 檔案（內含 SVG）。
  • 內容：包含標題欄（變數表）、主視圖（Plan View）、爆炸軸測圖（Exploded View）、細節放大圓圈以及詳細的變數對照表。
• 動態動畫 (dimensional-drawing-motion)：
  • 功能：將上述靜態圖轉化為約 10 秒的 MP4 影片。
  • 視覺效果：像一支筆在紙上快速繪圖，鏡頭隨之拉遠、圖層炸開，最後呈現完整圖面。

3. 運作原理與「家規」(House Rules)

為了維持 Apple 風格的嚴謹感，專案定義了五條核心規則，AI 在執行時必須遵守：

1. 單色主義 (Monochrome)：僅使用黑、白、灰。靠線寬、虛線、斜線填充來區分元素。
2. 關注結構而非內容 (Architecture, not content)：不畫真實的文字，而是用 TITLE SLOT、CONTENT SLOT 等佔位符，避免文字長度影響尺寸分析。
3. 變數化而非數字化 (Variables, not numbers)：圖面上不直接寫 16px，而是寫 S1。具體數值記錄在右側的變數表中，且支持公式（例如 H1 = 2·S1 + H3）。
4. 去品牌化 (Unbranded)：使用中性名稱（如 UI-CARD-001），不加入公司 Logo。
5. 絕不杜撰 (Never invent values)：未知數一律標記為 [TBD]。

4. 技術棧

• 量測工具：使用 Playwright (Chromium) 實際渲染頁面，透過 getBoundingClientRect 和 getComputedStyle 抓取真實的 CSS 數值。
• 繪圖技術：純 SVG + Inline JS，確保輸出檔案輕量且可在瀏覽器直接開啟。
• 動畫實現：
  • Claude Motion：主要針對 Claude.ai 的 Motion Artifacts 優化。
  • Headless 渲染：提供 Node.js 腳本，利用 Playwright 逐幀渲染後透過 ffmpeg 編碼成 MP4。

5. 如何使用

這不是一個安裝後直接執行的 App，而是一組教 AI 的「教材」：

• 對於 Claude 使用者：將 skills/ 資料夾壓縮上傳至 Claude 的 Capabilities $\rightarrow$ Skills。
• 對於其他 AI Agent：讓 Agent 讀取 SKILL.md 文件。
• 指令範例：「請幫我把 src/components/Card.tsx 這個元件畫成 dimensional drawing」。

總結

dimensional-drawing 將 「工程製圖」 的嚴謹邏輯引入到 「UI 交付」 中。它將 UI 視為一種建築物，透過變數化和結構化，讓 AI 能產出極具專業感且可直接用於開發對接的技術規格書。