新しいデザインツール Pencil を試してみた

Pencil は、Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすることができます。オープン形式の .pen ファイルを使用しており、テキストエディタで内容を確認したり、バージョン管理システムで管理したりすることも可能です。また Figma からのインポートにも対応しています。

この記事では Pencil を実際に試してみた感想を共有します。

インストールとセットアップ

Pencil は以下のリンクからダウンロードできます。現時点では MacOS と Linux のみ対応しています。

Pencil – Design on canvas. Land in code.

Pencil fundamentally increases your engineering speed by bringing designing directly into your preferred IDE.

www.pencil.dev

:::info 当面の間 Pencil は無料で利用できますが、将来的には有料プランが導入される予定です。 :::

インストール後アプリケーションを起動したらメールアドレスの入力を求められます。登録したメールアドレスに確認コードが送信されるので、コードを入力してアクティベートします。

キャンバスの使用感は Figma によく似ています。左側のツールバーではレイヤーの一覧が表示され、右側のプロパティパネルでは選択したオブジェクトの詳細設定が可能です。コンポーネント, デザインテーマと変数, Flex Layout といった基本的な機能は一通り揃っています。

プロンプトでデザインを生成

AI を使用してデザインを生成する方法を試してみましょう。まずは新しい .pen ファイルを作成します。空のファイルで作成しても良いのですが、ここではあらかじめ用意されたデザインシステムコンポーネントを使用してみましょう。上部のツールバーの左から 2 番目のアイコンの「Design Kits & Style Guides」をクリックします。

ダイアログで使用可能なコンポーネントキットが表示されます。ここでは「Shadcn UI」を選択します。

Shadcn UI のコンポーネントがキャンバスに追加されました。

作成したファイルは .pen ファイルとしてローカルに保存されます。.pen ファイルは JSON 形式で保存されており、テキストエディタで開いて内容を確認することも可能です。

{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "MzSDs",
      "x": 0,
      "y": 0,
      "name": "shadcn: design system components",
      "theme": {
        "Mode": "Light",
        "Base": "Neutral",
        "Accent": "Default"
      },
      "clip": true,
      "width": 2800,
      "height": 3586,
      "fill": "$--background",
      "layout": "none",
      "children": [
        /* ... */
      ]
    }
  ],
}

キャンバスの左下に「Design with Claude Code」というチャット欄が表示されているので、ここにデザインの指示を入力してみます。Pencil をインストールした際に Claude Code と自動で連携されているようであり、このチャット欄から Claude Code を使用してデザインを生成します。例えば「Create a login form with email and password fields, and a submit button.」と入力して Enter キーを押してみましょう。

デザインのガイドラインと利用可能なコンポーネントの一覧を確認したうえで、キャンバス上の空いているスペースにログインフォームが生成されました。

生成されたログインフォームは確かに既存のコンポーネントを使用して作成されていることがわかります。

Pencil MCP でコードを書き出す

Pencil MCP を使用して AI コーディングツールと連携し、デザインからコードを書き出すことができます。あらかじめ Next.js で作成したプロジェクトを用意しておき、Shadcn UI のコンポーネントをインストールしておきます。

npx create-next-app@latest my-penciled-app
cd my-penciled-app
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add label

Pencil をインストールしたタイミングで Claude Code に自動で Pencil MCP が追加されるようです。~/.claude.json ファイルには以下の設定が追加されていました。

{
  "mcpServers": {
    "pencil": {
      "command": "/Applications/Pencil.app/Contents/Resources/app.asar.unpacked/out/mcp-server-darwin-arm64",
      "args": [
        "--ws-port",
        "52036"
      ],
      "env": {},
      "type": "stdio"
    }
  }
}

Claude Code を起動して /mcp コマンドを実行し、Pencil MCP が利用可能になっていることを確認します。

/mcp

主なツールは以下の通りです。

以下のようなプロンプトを入力して、Pencil MCP を使用してログインフォームのコードを書き出してみます。

Pencil MCP を使用して、現在のデザインからログインフォームを `/app/login/page.tsx` に Shadcn UI を使用してコードを書き出してください。

はじめに get_editor_state ツールが呼び出され、現在のエディタ状態が取得されます。このとき Pencil 上ではログインフォームのレイヤーを選択している状態にしておいてください。その後 batch_get ツールで選択中のノードの詳細が取得され、get_guidelines ツールで Shadcn UI のスタイルガイドが取得されます。

正しくデザイン仕様を解析できているようですね。この情報をもとにログインフォームを作成し始めました。

実装が完了したら get_screenshot ツールで Pencil 上のスクリーンショットを取得し、コードと比較しています。ここではタイトルとサブタイトルの構造の修正を行っていますね。

実際に http://localhost:3000/login にアクセスしてみると、Pencil 上のデザインとほぼ同じ見た目でログインフォームが表示されていることがわかります。

ターミナルから動かして MCP ツールと連携する

Pencil ではローカルでインストールされている Claude Code と連携して動いているため、Claude Code にあらかじめ MCP サーバーを登録しておくことで、その MCP サーバーを利用して Pencil にデザインを取り込むことが可能です。

例えば Playwright MCP サーバーを登録しておくと、特定のウェブサイトのスクリーンショットを取得して、そのデザインを Pencil にインポートすることができます。 以下のコマンドで Claude Code に Playwright MCP サーバーを登録します。

claude mcp add playwright npx @playwright/mcp@latest

Pencil 上のチャット欄からは MCP サーバーを使用できないようだったので、ターミナルから Claude Code を起動して Pencil MCP を使用してデザインを作成してもらいましょう。

claude "Playwright MCP を使用して、azukiazusa.dev のデザインを取得し、Pencil 上にデザインをインポートしてください。"

Playwright MCP の take_screenshot ツールが呼び出され、指定されたウェブサイトのスクリーンショットが取得されます。その後 batch_design ツールで現在開いている Pencil のキャンバスにデザインが作成されます。作成されたデザインの再現度はあまり高くありませんが、ターミナルから様々なツールを組み合わせて利用できる点は面白いですね。

他にもレポジトリのコードを解析してデザインを取り込むといった使い方も考えられるでしょう。例えば以下のようなプロンプトです。

claude "Pencil MCP を使用して、app/ ディレクトリ内のコードを解析し、トップページのデザインを再現してください。"

claude "Pencil MCP を使用して、components/ ディレクトリ内の Button コンポーネントのコードを解析し、Pencil のコンポーネントとして取り込んでください。"

Claude Code を使用し AI コーディングと同じ手順でデザインを構築できるので、AI コーディングで培ったノウハウをそのまま活用できる点が魅力的だと感じました。今回はスクリーンショットをそのままデザインに変換しようとした結果あまり良い出力を得ることができませんでしたが、普段の AI コーディングと同じように Plan モードを活用し AI とともに対話しながらデザインを設計していくことで、より良い結果が得られるのではないかと思います。

まとめ

• Pencil は Figma のような使用感で UI デザインができるツール。キャンバス上で AI を並列で動かしてデザインを生成したり、Claude Code や Cursor などの AI コーディングツールと連携してコードを書き出したりできるという特徴がある
• Pencil MCP を使用して Claude Code と連携し、デザインからコードを書き出すことが可能。Pencil 上で選択中のノードを解析し、Shadcn UI のコンポーネントを使用してコードを書き出すことができた
• ターミナルから Claude Code を起動して Pencil MCP と他の MCP サーバーを組み合わせて利用することも可能。Playwright MCP を使用して特定のウェブサイトのデザインを取得し、Pencil 上でデザインの再現を試みた

参考

• Pencil – Design on canvas. Land in code.