vscode-ui-sketcher

vscode-ui-sketcherとは？

vscode-ui-sketcherは、UIプロジェクトを形にするVisual Studio Code拡張機能（webview搭載）です。リポジトリでは、このツールをVS Codeのワークフローの中でUIデザイン作業をインタラクティブで出荷可能なものに変える位置づけとしています。

プロジェクトはオープンソースで、VS Code拡張機能と独立したwebviewアプリの両方を含みます。また、tldrawからの描画インスピレーションとdraw-a-uiからのUI描画のヘッドスタートを参照しています。

主な機能

• UIスケッチのためのVS Code拡張プロジェクト：通常のVS Codeワークフローの一部として、エディタ内でUIアイデアを描く方法を提供。
• 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描画ツールの出発点として活用可能。

FAQ

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統合がない場合があります。
• デザイン-to-コード向けの他のVS Code拡張アプローチ：UI生成やモックアップを対象とした拡張機能は類似の目的を果たせますが、ワークフローやレンダリング/エクスポートオプションが異なります。
• Webベースの共同ホワイトボード/デザインボード：エディタ統合ワークフローではなくブラウザ描画が必要なら、Web描画キャンバスが代替。VS Codeプロジェクトコンテキストの強調が少ない。
• ダイアグラム/フローツール：ピクセルレベルのレイアウトより構造を主に必要とするユーザー向けに、ダイアグラムツールがUIスケッチキャンバスよりシンプルなドキュメント優先ワークフローを提供。