Findings24Findings24
Pencil logo

Pencil

認証する

Pencilは、IDEやコードベース内でUIを作成できるAI支援デザインツール。デザインファイルをコードと並行して管理し、切り替えずに反復できます。

AIデザインジェネレーターAIデザインアシスタントAI開発者ツール
ウェブサイトを訪問
Pencil preview

概要

Pencil は、コードに近い場所にあるキャンバス上でインターフェースを作成できる AI 支援デザインツールで、特に開発者の IDE 内で作業することに重点を置いています。サイトでは、コードベース内に存在するオープンなデザイン形式を中心に構成された、エージェント駆動の MCP キャンバスとして説明されています。

その主な目的は、チームがコーディング環境を離れずにデザインできるようにし、デザインファイルを通常のソースコードのようにバージョン管理、ブランチ分け、マージできるようにすることです。Pencil はまた、プロンプト、デザインキット、インポートした Figma コンテンツを直接操作できる点を重視しており、アイデアから本番対応の UI までを 1 つのワークフローで進められます。

主な機能

IDE ネイティブのデザインキャンバス

別のデザインツールとコードエディタを切り替えるのではなく、IDE 内で直接デザインできます。製品は、デザインとコードを近い場所に保つことを中心に設計されています。

エージェント駆動のキャンバス

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