vscode-ui-sketcher

vscode-ui-sketcher 是什麼？

vscode-ui-sketcher 是一個 Visual Studio Code 延伸模組（包含 webview 元件），用來將 UI 專案畫成真。專案儲存庫將此工具定位為在 VS Code 工作流程中，將 UI 設計工作轉化為互動且可交付的成果。

專案為開源，包含 VS Code 延伸模組與獨立的 webview 應用程式。它也參考了 tldraw 的繪圖靈感，以及 draw-a-ui 的 UI 繪圖起手式。

主要功能

• 用於 UI 草圖的 VS Code 延伸模組專案：提供在編輯器內繪製 UI 構想的方式，融入典型的 VS Code 工作流程。
• 基於 webview 的編輯體驗：延伸模組包含專屬的 ui-sketcher-webview 套件，表示繪圖 UI 在 webview 中運行。
• 使用 pnpm 的可重現開發環境：包含安裝依賴項的指示（pnpm install）以及建置 webview（pnpm build 或 pnpm build --watch）。
• 透過 VS Code 除錯器支援除錯：儲存庫明確建議使用 VS Code 除錯器來運行延伸模組。
• 基於瀏覽器的 webview 開發：開發者可直接運行 webview（pnpm --filter ui-sketcher-webview dev）並開啟本機 URL http://localhost:3174。
• 開源授權（AGPL-3.0）：儲存庫包含 AGPL-3.0 授權檔案，這與程式碼的使用與重新散布方式相關。

如何使用 vscode-ui-sketcher

1. 從 Visual Studio Marketplace 安裝延伸模組（或在「延伸模組」分頁搜尋「UI Sketcher」）。
2. 開啟延伸模組並遵循螢幕上的工作流程來繪製 UI 專案（儲存庫中參考了 README 與延伸模組 README，但提供的頁面內容未包含詳細的產品內步驟）。
3. 若要貢獻或開發：複製儲存庫，使用 pnpm install 安裝依賴項，然後使用提供的 ui-sketcher.code-workspace 開發環境來建置並運行延伸模組。
4. 針對 webview 工作：從 ./ui-sketcher-webview 運行 pnpm --filter ui-sketcher-webview dev，並在瀏覽器中開啟 http://localhost:3174。

使用情境

• 在 VS Code 中迭代版面時繪製 UI：使用延伸模組在不離開編輯器的情況下草擬介面結構。
• 開發或自訂繪圖體驗：貢獻者可針對 ui-sketcher-webview 套件進行工作，並透過本機瀏覽器 URL 查看變更。
• 在編輯器中除錯延伸模組行為：使用 VS Code 除錯器運行延伸模組並調查問題。
• 開發期間建置並監控 webview：當你需要在 webview 上工作並獲得快速回饋時，運行 pnpm build --watch。
• 從開源參考實作中學習：儲存庫結構（延伸模組 + webview 套件、工作區檔案與建置指示）可用作類似 VS Code 繪圖工具的起點。

常見問題

vscode-ui-sketcher 安裝在哪裡？

從 Visual Studio Marketplace 安裝，或在「延伸模組」分頁搜尋「UI Sketcher」。

開發期間是否有獨立的 webview 程式碼可運行？

有。儲存庫記載使用 pnpm --filter ui-sketcher-webview dev 運行 webview，並開啟 http://localhost:3174。

如何從原始碼建置延伸模組或 webview？

頁面內容指出，你可從 ./ui-sketcher-webview 運行 pnpm build（或 pnpm build --watch）。它也表示開發時「僅使用 ui-sketcher.code-workspace 檔案」。

專案使用什麼授權？

儲存庫列出 AGPL-3.0 授權。

替代方案

• 通用 UI 圖表工具：專注於繪圖或圖表化（常具備匯出功能）的工具可取代草圖工作流程，但可能未整合至 VS Code。
• 其他設計轉程式碼的 VS Code 延伸模組方法：針對 UI 生成或 mockup 的延伸模組可達成類似目標，但工作流程與渲染/匯出選項會有所不同。
• 基於網頁的協作白板/設計畫布：若你需要瀏覽器繪圖而非編輯器整合工作流程，網頁繪圖畫布可作為替代，較少強調 VS Code 專案脈絡。
• 圖表/流程工具：對於主要需要結構而非像素層級版面的使用者，圖表工具可提供較簡易的文件優先工作流程，與 UI 草圖畫布相比。