pen.dev 運営中

pen.devはコーディング環境で動作するデザインキャンバスです。開発者はここでプロダクトのインターフェースを作成し、ページフローを探索しながら、デザインとコードの関連性を保てます。デザインファイルは.pen形式でコードリポジトリに保存され、Gitを使ってバージョン、ブランチ、マージを管理できます。また、デザインをHTML、CSS、Reactに変換することも可能です。MCPを通じてキャンバスの読み取りと書き込みにも対応しています。

フロントエンド開発者

IDE内で直接ページやコンポーネントを設計し、デザイン結果をHTML、CSS、Reactに変換できます。デザインツールとコード環境を行き来する手間を減らせます。

AIコーディングツールを使う開発者

Cursor、VSCode、Claude Code、OpenAI Codexからキャンバス機能を呼び出し、インターフェースを生成したり、複数のページ案を並行して探索したりできます。

デザインシステムを持つ開発チーム

コードベースにある既存のデザインシステムをキャンバスに接続し、コンポーネント化されたデザインキットでインターフェースを構築しながら、デザインと実装の一貫性を保てます。

無限デザインキャンバス

IDE内でプロダクトのインターフェースを作成・調整できます。ピクセル単位の配置に対応し、デザインとコードを常に近接した作業環境に置けます。

AIによるページとフローの生成

プロンプトからページ全体や一連のインターフェースフローを生成できます。複数のAIアシスタントに異なるデザインの方向性を並行して探索させることも可能です。

コンテキストに応じたデザイン操作

画面全体または一部の領域に対して要件を入力し、あらかじめ用意された操作ですばやく調整できます。最初からカスタム操作を記述することも可能です。

デザインからフロントエンドコードへ変換

キャンバス上のデザインをHTML、CSS、Reactに変換し、開発者がビジュアル案を実際に使えるアプリケーション実装へ進められるようにします。

デザインファイルのバージョン管理

デザインを.penファイルとして保存してコードリポジトリに置き、開発コードと同じようにGitでバージョン、ブランチ、マージを管理できます。

Figmaデザインのインポート

Figmaのデザインを直接コピーして貼り付け、ベクター、テキスト、スタイルをpen.devに取り込んで編集を続けられます。

MCPによる双方向キャンバス操作

MCPを通じてデザインキャンバスの読み取りと書き込みを行い、データベース、API、チャートデータ、PlaywrightやPuppeteerなどの外部ソースにも接続できます。

デザインファイルをコードリポジトリに保存

デザインを独立したツールに隔離せず、ファイルとしてプロジェクトリポジトリ内に保存できます。コードと一緒にバージョン管理することが可能です。

オープンファイル形式

デザインファイルは読み取り、デバッグ、拡張が可能です。公式はブラックボックス形式を採用していないことを強調しており、開発者は自分のツールでファイルを処理できます。

双方向MCP機能

キャンバス情報の読み取りだけでなく、完全な書き込み権限も提供します。外部MCP、データソース、その他のエージェントがキャンバス操作に参加できます。

デザインとコードを同じ画面で操作

ピクセル単位のデザインキャンバスをコーディング環境に配置し、開発者がデザインと実装をすばやく切り替えられるようにします。従来のデザイン引き継ぎプロセスを減らせます。

• 公式ホーム：pen.dev – Design on canvas. Land in code.
• 公式料金ページ：pen.dev – Design on canvas. Land in code.