# Pencil Pencilは、IDEやコードベース内でインターフェースを作成できるAI支援デザインツールです。ツールを切り替えず、コードとともにデザインファイルを構築・反復・管理できます。 - Findings24: - ウェブサイト: - 料金: Freemium - カテゴリー: AIグラフィックデザイン, AIデザインアシスタント, AI開発者ツール ## Pencilとは？ Pencil は、コードに近い場所にあるキャンバス上でインターフェースを作成できる AI 支援デザインツールで、特に開発者の IDE 内で作業することに重点を置いています。サイトでは、コードベース内に存在するオープンなデザイン形式を中心に構成された、エージェント駆動の MCP キャンバスとして説明されています。 その主な目的は、チームがコーディング環境を離れずにデザインできるようにし、デザインファイルを通常のソースコードのようにバージョン管理、ブランチ分け、マージできるようにすることです。Pencil はまた、プロンプト、デザインキット、インポートした Figma コンテンツを直接操作できる点を重視しており、アイデアから本番対応の UI までを 1 つのワークフローで進められます。 ## Pencilでできること ### IDE ネイティブのデザインキャンバス 別のデザインツールとコードエディタを切り替えるのではなく、IDE 内で直接デザインできます。製品は、デザインとコードを近い場所に保つことを中心に設計されています。 ### エージェント駆動のキャンバス AI 駆動のキャンバスワークフローで、画面やより大きなフローを生成できます。ホームページでは、AI と並行して作業し、複数の方向性を同時に作成できると説明されています。 ### リポジトリ内のオープンなデザインファイル コードベース内に存在するオープンなデザイン形式を使用します。Pencil は、デザインファイルが読み取り可能で、デバッグ可能で、拡張可能で、Git でバージョン管理できると説明しています。 ### コピー＆ペーストによる Figma インポート Figma からコピーすることで、ツール間のデザイン移動をより簡単に行えます。ホームページでは、ベクター、テキスト、スタイルがそのまま引き継がれると説明されています。 ### 厳選キットとブランドシステム 厳選されたコンポーネントベースのデザインキットを使うことも、自分のものを持ち込むこともできます。ホームページでは、Pencil にブランドキットが含まれ、コードベース内のチーム既存のデザインシステムにも接続できると説明されています。 ### 複数のクライアント विकल्प デスクトップアプリ、IDE 拡張機能、CLI を通じて製品にアクセスできます。ダウンロードページには、ネイティブのデスクトップ版、複数のエディタ向けアドオン、npm でインストールする CLI が掲載されています。 ## 利用シーン ### コーディングしながらデザインする デザイン作業を別の引き継ぎ工程ではなく実装と並行して進めたいときに、エディタ内で直接 UI 画面やフローを作成します。 ### プロンプト主導のコンセプト作成 プロンプトギャラリーや独自のプロンプトを使って、新しい画面の方向性を生成したり、レイアウトを洗練したり、複数のコンセプトをすばやく試したりします。 ### Figma デザインを取り込む 既存の Figma デザインを出発点としてインポートし、元のデザインアセットを保持したまま Pencil で反復を続けます。 ### リポジトリ管理のデザインファイル 通常の開発プロセスの一部として、Git でバージョン管理、ブランチ分け、マージできるリポジトリベースのデザインファイルを扱います。 ### IDE とターミナルのワークフロー ターミナルから、または Cursor や VS Code のようなツール内で AI 支援デザインを使いたいときに、CLI やエディタ拡張機能を利用します。 ## よくある質問 ### 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 アプリ、モバイルアプリ、デザイン方向のプロンプトが含まれています。 ## クイック情報 - **カテゴリ**: デザインツール / 開発者向けツール - **主な用途**: IDE とコードベース内でのインターフェース設計 - **プラットフォーム**: デスクトップアプリ、IDE 拡張機能、CLI - **サイトで挙げられている対応エディタ**: Cursor, VS Code, Claude Code, OpenAI Codex, Google Antigravity IDE, Windsurf - **価格**: 現在無料 - **Webサイト**: pencil.dev