説明
pen.devは、High Agency Inc.によるエージェントデザインキャンバスで、以前はPencil（pencil.dev）として知られていたメーカーによって作られました。この製品は、静的な画面だけでなく、ソフトウェアを構築するために設計されていると説明しています。デザイナーと開発者は、AIエージェントが共にデザインし、既存の作業を洗練させたり、プロンプトから新しい画面を構築したりできるオープンキャンバスで作業します。
続きを読む
キャンバスは、.penというオープンファイル形式でデザインを保持します。これは、エージェントと人間の両方が読み取り、編集できるプレーンなJSONファイルで、製品が説明する同じコードベース内に保存されます。作業は、FigmaやSketchからのペンツール、グラデーション、コンポーネント、フレックスレイアウトなどのツールを使用して手動で行うか、エージェントに画面をドラフト、洗練、または拡張するよう指示することによって行われます。内蔵のブラウザとChrome拡張機能により、ユーザーは任意のウェブページ、アプリ、デザインをインポートして編集可能なレイヤーとしてキャンバスに直接追加でき、Figmaファイルもベクター、テキスト、スタイルを保持したまま直接インポートされます。
ユーザーは、自分のモデルをキャンバスに持ち込みます。pen.devは、Claude、GPT、Grok、Qwen、Gemini、Kimi、DeepSeek、Minimaxと連携し、既存のChatGPTまたはClaudeのサブスクリプション、APIキー、MCP、WebMCP、またはコマンドラインを通じて接続されます。同じMCPリンクを使用すると、Claude Code、Codex、Cursor、Antigravityなどのツールがpen.devのCLIを介してヘッドレスでデザインでき、キャンバスを開くことなく作業できます。
他のキャンバス機能には、Vibe Shadersと呼ばれるリアルタイムシェーダー効果、AI Penと呼ばれるAI支援のアイコンおよびイラスト描画、ファイル間で共有されるコンポーネントライブラリ、数千のレイヤーや数十ギガバイトのコンテンツでもスムーズに動作するように構築されたカスタムWebGLレンダリングパイプラインが含まれます。完成した作業は、PNG、JPEG、WEBP、PDFとして任意のスケールでエクスポートされ、HTMLとCSSまたはTailwindにワンクリックでエクスポートされるか、最新バージョンを任意のブラウザで開く共有可能なリンクとしてエクスポートされます。スライドとプレゼンテーションモードが組み込まれており、キャンバス作業をデッキに変換できます。
pen.devは現在無料です。会社は、将来の有料プランについては明確に説明すると述べています。デスクトップアプリとしてダウンロード可能で、Chrome、VS Code、Cursor、OpenVSX用のブラウザおよびエディタ拡張機能が付属し、a16zのSpeedrunプログラムによって支援されています。これは、視覚デザインと作業コードの間をツールを切り替えずに移動したいプロダクトデザイナーや小規模なソフトウェアチームに適しており、純粋なグラフィックデザイン製品を求めるチームには向いていません。
- カテゴリーAI UI/UXデザインツール
- 料金モデルフリーミアム
- デプロイデスクトップ、IDE拡張、CLI
- プラットフォームmacOS、Windows、Linux
pen.devの主要機能
エージェントがネイティブに読み取り、編集できるオープンな.penファイル形式
Claude、GPT、Gemini、Grok、Qwen、Kimi、DeepSeek、Minimaxの持ち込みモデルサポート
Claude Code、Cursor、CodexからのヘッドレスデザインのためのMCP、WebMCP、CLI接続
任意のウェブページを編集可能なレイヤーとしてインポートするための内蔵ブラウザとChrome拡張機能
ベクター、テキスト、スタイルを保持したFigmaインポート
数千のレイヤーでスムーズに動作するように構築されたカスタムWebGLキャンバス
リアルタイムの視覚効果とグラデーションのためのVibe Shaders
エージェントを使用してアイコンやイラストを生成するためのAI Pen
HTML/CSS/TailwindまたはPNG/JPEG/WEBP/PDFへのワンクリックエクスポート
キャンバス作業をデッキに変換するためのスライドとプレゼンテーションモード
pen.devの使い方は？
ダウンロード: pen.devデスクトップアプリを取得するか、Chrome、Cursor、VS Code拡張機能を追加します。
キャンバスを開始: 空のキャンバスを開くか、Figma、ウェブページ、または自分のコードベースからデザインをインポートします。
モデルを接続: ClaudeまたはChatGPTのサブスクリプションでサインインするか、APIキーを追加するか、MCPを介してエージェントをリンクします。
デザインまたはプロンプト: ペンツールやコンポーネントを使用して手動で描画するか、エージェントに画面を構築または洗練させるよう依頼します。
エフェクトを追加: 必要に応じてシェーダー、グラデーション、AI描画アイコンを適用します。
エクスポートまたは共有: HTML/CSS、画像形式、またはPDFにエクスポートするか、最新バージョンへのリンクを送信します。
pen.devの使用例
- エージェントUIデザイン
- デザインからコードへの引き渡し
- ウェブページのクローン作成
- MCPを介したヘッドレスデザイン
