TOOL DIRECTORY
Pencil
Pencilの機能・料金・選び方
IDEやデスクトップのキャンバスでUIを描き、.penファイルとしてコードと同じ場所に置く。
公式サイトへ 確認日
Pencilとは
Pencil（公式サイト pen.dev、旧 pencil.dev）は、開発環境の中で動くベクターデザインツールです。画面をキャンバスで組み立て、`.pen` ファイルとしてコードと同じリポジトリに置けます。VS CodeやCursorの拡張、デスクトップアプリがあります。
確認時点で本体は無料です。将来有料機能を足す場合は、課金前に条件を示すと公式が書いています。AIでの操作にはClaude Codeなどの認証が必要で、その利用料はPencilとは別に発生します。
向いている仕事・具体的な使い方
- UIの下書き：キャンバスで画面を組み、.penをコミットする。
- 実装連携：MCP経由でコーディングエージェントにデザインを読ませる。
- 既存デザインの取り込み：Figmaから貼った要素をコード側の作業に渡す。
機能をもとに編集部が整理した活用例です。実測レビューではありません。
できること・主な機能
- VS Code / Cursor拡張とデスクトップアプリ
- デザインを.penとしてリポジトリに保存
- 本体は無料。MCPでコーディングエージェントから操作
選ぶときの確認ポイント
- AI操作にはClaude Codeなどの認証が別途必要。
- 今後有料化する可能性を公式が案内。Figmaのような共同編集前提ではない。
編集部による選定時の確認事項です。実測レビューではありません。
料金体系・日本語対応
- 料金体系
- 本体は無料。将来の有料化は事前案内すると公式。AIは接続先の契約。
- 無料枠
- あり
- 日本語対応
- 未確認
料金の出典 · 確認日 2026-09-12
年払いの月額換算は、毎月の請求額ではありません。料金の通貨・課金条件と確認日を合わせてご確認ください。
表は横にスクロールできます →
| プラン | 料金・課金条件 | 主な機能・利用上限 |
|---|---|---|
| ソフトウェア本体 | 無料 確認時点で自己サーブの有料プランなし。 |
|
| AI・エージェント接続 | 接続先のサブスクまたはAPI従量 Pencilは請求しない。Claude Codeのログインが公式の前提。 |
|
追加料金・契約時の確認事項
- 公式サイトは pen.dev（旧 pencil.dev）。広告制作の trypencil.com とは別製品。
- IDEやモデルの利用料は各サービスの契約画面で確認する。
関連モデル
モデルとサービスの対応関係は確認中です。
同じ用途の候補
Claude — 文章や資料を読み、対話しながら下書きとコードを組み立てる。
Genspark — 調査から資料や画像の作成まで、AIワークスペースで進める。
Gamma — 伝えたい内容からプレゼンテーションやWebページを構成する。
用途が重なる候補です。性能の優劣を示す順位ではありません。
関連記事・使い方
関連記事はまだありません。
出典・確認日
- 公式資料：www.pen.dev — 確認日
- 公式資料：www.pen.dev — 確認日
- 公式資料：docs.pencil.dev — 確認日
- 公式資料：docs.pencil.dev — 確認日
図鑑の初回掲載日 2026-09-12。料金など未確認の項目は推定せず表示しています。
掲載・評価方針