Pencil

Pencilとは？

Pencilは、コードベースとIDE（Cursor、VS Code、Claude Code）内に直接存在するオープンデザインフォーマット上に構築されたエージェント駆動のデザインキャンバスです。ピクセルパーフェクトなベクターキャンバスを開発環境に導入することで、従来のデザイン・トゥ・コードハンドオフを排除します。デザインファイルはGitリポジトリにバージョン管理されたJSONベースファイル（.penフォーマット）として保存され、チームがコードと同じブランチ、マージ、協調ワークフローを使用してデザインを管理できます。PencilはClaude Codeと統合し、コンポーネントベースのデザインシステムをサポートし、コピー＆ペースト機能によりFigmaとの双方向ワークフローを可能にします。このプラットフォームはModel Context Protocol（MCP）アーキテクチャを使用し、他のツールやエージェントがプログラム的にデザインを読み書きできます。

主な機能

• 統合デザインキャンバス

  ピクセルパーフェクトな無限WebGLキャンバスがIDEに直接埋め込まれ、デザインツールとコードエディター間のコンテキスト切り替えを排除します。

• Gitベースのバージョン管理

  デザインファイルがリポジトリにJSON形式で保存され、標準Gitワークフローを使用したデザインとコードのバージョン管理、ブランチ、マージを可能にします。

• 並列AI生成

  複数のデザインエージェントを同時に実行して異なるデザイン方向を探索し、線形ワークフローなしで迅速な反復と実験を可能にします。

• コンポーネント＆デザインシステム

  事前構築されたコンポーネントライブラリを活用し、コードベースからチームの既存デザインシステムを直接接続して一貫性と再利用性を確保します。

• Figma統合

  シームレスなコピー＆ペーストによりFigmaからデザインをインポートし、ベクター、テキスト、スタイルが完全に転送されてコード統合ワークフローへスムーズに移行します。

• MCP駆動の拡張性

  Model Context Protocolによる完全な読み書きアクセスにより、データベース、API、チャートライブラリ、Playwright/Puppeteer、カスタムエージェントとの統合を可能にします。

ユースケース

• デザイン・トゥ・コード加速 : プロダクトチームがIDE内でインターフェースをデザインし、即座にプロダクション対応コードを生成できるため、デザインハンドオフフェーズを排除し、デザイン意図と実装間の不整合を削減します。
• バイブコーディングワークフロー : 開発者が高レベルプロンプトとキャンバス上の視覚的操作を通じてUI/UXを反復でき、エージェントコード生成の速度と視覚デザインの精密制御を組み合わせます。
• デザインシステムガバナンス : 承認されたコンポーネントライブラリとデザイントークンをコードベースに直接埋め込むことでデザインの一貫性を強制し、開発者が明示的なバージョン管理変更なしに標準から逸脱することを不可能にします。
• 協調デザイン＆開発 : マルチプレイヤー機能により、機能横断チームが同一キャンバス上で同期的に作業でき、デザイナーが視覚的方向性を提供し、開発者が機能コンポーネントを並行して実装します。
• 迅速プロトタイピング : 共有キャンバス上で複数のデザイン方向を迅速に探索し、コードのようにデザインをブランチする能力を持ち、勝利した反復をプロダクションアプリケーションに発展させます。

よくある質問