IDE ネイティブのデザインキャンバス
別のデザインツールとコードエディタを切り替えるのではなく、IDE 内で直接デザインできます。製品は、デザインとコードを近い場所に保つことを中心に設計されています。
Pencil
認証するPencilは、IDEやコードベース内でUIを作成できるAI支援デザインツール。デザインファイルをコードと並行して管理し、切り替えずに反復できます。
概要
Pencil は、コードに近い場所にあるキャンバス上でインターフェースを作成できる AI 支援デザインツールで、特に開発者の IDE 内で作業することに重点を置いています。サイトでは、コードベース内に存在するオープンなデザイン形式を中心に構成された、エージェント駆動の MCP キャンバスとして説明されています。
その主な目的は、チームがコーディング環境を離れずにデザインできるようにし、デザインファイルを通常のソースコードのようにバージョン管理、ブランチ分け、マージできるようにすることです。Pencil はまた、プロンプト、デザインキット、インポートした Figma コンテンツを直接操作できる点を重視しており、アイデアから本番対応の UI までを 1 つのワークフローで進められます。
主な機能
エージェント駆動のキャンバス
AI 駆動のキャンバスワークフローで、画面やより大きなフローを生成できます。ホームページでは、AI と並行して作業し、複数の方向性を同時に作成できると説明されています。
リポジトリ内のオープンなデザインファイル
コードベース内に存在するオープンなデザイン形式を使用します。Pencil は、デザインファイルが読み取り可能で、デバッグ可能で、拡張可能で、Git でバージョン管理できると説明しています。
コピー＆ペーストによる Figma インポート
Figma からコピーすることで、ツール間のデザイン移動をより簡単に行えます。ホームページでは、ベクター、テキスト、スタイルがそのまま引き継がれると説明されています。
厳選キットとブランドシステム
厳選されたコンポーネントベースのデザインキットを使うことも、自分のものを持ち込むこともできます。ホームページでは、Pencil にブランドキットが含まれ、コードベース内のチーム既存のデザインシステムにも接続できると説明されています。
複数のクライアント विकल्प
デスクトップアプリ、IDE 拡張機能、CLI を通じて製品にアクセスできます。ダウンロードページには、ネイティブのデスクトップ版、複数のエディタ向けアドオン、npm でインストールする CLI が掲載されています。
一般的な利用シーン
コーディングしながらデザインする
デザイン作業を別の引き継ぎ工程ではなく実装と並行して進めたいときに、エディタ内で直接 UI 画面やフローを作成します。
プロンプト主導のコンセプト作成
プロンプトギャラリーや独自のプロンプトを使って、新しい画面の方向性を生成したり、レイアウトを洗練したり、複数のコンセプトをすばやく試したりします。
Figma デザインを取り込む
既存の Figma デザインを出発点としてインポートし、元のデザインアセットを保持したまま Pencil で反復を続けます。
リポジトリ管理のデザインファイル
通常の開発プロセスの一部として、Git でバージョン管理、ブランチ分け、マージできるリポジトリベースのデザインファイルを扱います。
IDE とターミナルのワークフロー
ターミナルから、または Cursor や VS Code のようなツール内で AI 支援デザインを使いたいときに、CLI やエディタ拡張機能を利用します。
Pros and Cons
Pros
- デザインとコードを同じ環境に保てるため、コンテキストの切り替えを減らせます。
- デスクトップ、IDE 拡張機能、CLI など、複数の入り口に対応しています。
- リポジトリ内に存在するオープンなファイル形式を使用するため、ファイルが読みやすく、Git で管理しやすくなります。
- プロンプトベースの作成と、再利用可能なプロンプト例のギャラリーを備えています。
- ホームページの記載によると、ベクター、テキスト、スタイルを保持したまま Figma のコピー＆ペーストインポートを利用できます。
Cons
- 料金ページにはまだ有料プランの構成は表示されておらず、現在は無料であると記載されているだけです。
- 収集した情報源ではサイトのドキュメントが限られているため、セットアップの詳細、対応ワークフロー、チーム共同作業の挙動は十分に説明されていません。
FAQ
Pencil はどのツールや IDE をサポートしていますか？
Pencil は、あなたが使い慣れた IDE の中で動作するように設計されています。サイトではホームページで Cursor、VS Code、Claude Code、OpenAI Codex が挙げられており、ダウンロードページでは Cursor、VS Code、Google Antigravity IDE、Windsurf 向けの拡張機能に加えて、ターミナルベースの利用向けの CLI も掲載されています。
実際にはどのように Pencil を使いますか？
ホームページでは、Pencil はコードベース内に存在するオープンなデザイン形式を中心に構成された、エージェント駆動の MCP キャンバスとして説明されています。ダウンロードページにはデスクトップアプリ、IDE 拡張機能、CLI も示されており、複数の使い方があることが分かります。
Pencil は無料ですか？
価格ページでは、Pencil は現在無料と記載されています。また、将来的に有料機能やプランが導入される可能性があり、料金が発生する前に条件が表示されるとも案内されています。
Prompt Gallery は何に使えますか？
プロンプトページは、Pencil に貼り付けてデザインを生成または変更できる、コピー可能なプロンプトのギャラリーです。例として、Web アプリ、モバイルアプリ、デザイン方向のプロンプトが含まれています。
Quick Facts
- カテゴリ
- デザインツール / 開発者向けツール
- 主な用途
- IDE とコードベース内でのインターフェース設計
- プラットフォーム
- デスクトップアプリ、IDE 拡張機能、CLI
- サイトで挙げられている対応エディタ
- Cursor, VS Code, Claude Code, OpenAI Codex, Google Antigravity IDE, Windsurf
- 価格
- 現在無料
- Webサイト
- pencil.dev
Pencilの代替品
Paper
Paperは、キャンバス、コード、AIエージェントをつなぎ、チームが1つのワークフローで作成・共有・出荷できるデザインツール。デスクトップアプリ、MCP対応のエージェントアクセス、実コンテンツとデザイントークンのワークフローに対応。
Superside
Supersideは、グローバル人材、AIファーストのワークフロー、プロジェクト管理ツールを組み合わせた、企業・社内チーム向けAIクリエイティブサービスです。
Orca
Orcaは、コードエージェントでの開発・実装を支援するAgent Development Environment。分離されたworktree上で複数のCLIエージェントを並列実行し、デスクトップとモバイルの連携ワークフローに対応します。
Firebase Studio
Firebase Studioは、Gemini支援のコーディング、アプリプレビュー、クラウドエミュレータを備えたブラウザベースのフルスタック開発用ワークスペースです。既存リポジトリの取り込み、新規アプリの試作、共同作業、ブラウザからのデプロイに対応します。
EZsite AI
EZsite AIは、URLをフルスタックのReactまたはVue.jsアプリに変換するAIサイトビルダー。ホスティング、独自ドメイン、コード書き出し、バックエンド機能を搭載。
AI Magicx
AI Magicxは、チャット、画像、動画、音声、音楽、メール、開発タスクを1か所で扱える統合AIワークスペース。複数モデルを使い分ける手間を減らします。