ZSeven-W/openpencil

The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.

解決する課題

OpenPencilは、自然言語プロンプトを使用してユーザーインターフェース(UI)を作成できるオープンソースのAIネイティブベクターデザインツールです。AIエージェントを通じてベクターグラフィックスのレイアウトとスタイル設定を自動化することで、コンセプトデザインと本番環境ですぐに使えるコードとの間のギャップを埋めます。

仕組み

このツールは、モデルの能力(Claude、GPT-4o、Geminiなど)に応じてプロンプトを適応させるマルチモデルインテリジェンスシステムを使用しています。オーケストレーターが複雑なページデザインを小さな空間的サブタスクに分解し、並行して動作するAIエージェントチームがそれらを処理します。これらのエージェントは、無限キャンバス上でリアルタイムにデザインを生成します。さらに、MCP (Model Context Protocol) サーバーが組み込まれており、外部のAIエージェント(Claude CodeやGitHub Copilotなど)がターミナルから直接デザインファイルを読み取り、変更することが可能です。

対象ユーザー

AIを活用して「デザインからコードへ」のワークフローを加速させたいUI/UXデザイナー、開発者、プロダクトマネージャー、およびデザインを人間が読めるJSONファイルとして保存する「デザイン・アズ・コード (design-as-code)」アプローチを好むユーザー向けに設計されています。

主な特徴

  • Prompt-to-UI: テキストの説明から、リアルタイムのストリーミングアニメーションを伴うフルページデザインを生成します。
  • 並行エージェントチーム: 複数のエージェントがページの異なるセクション(hero、footerなど)を並行して生成します。
  • デザイン・アズ・コード (Design-as-Code): Gitフレンドリーで差分管理が可能な .op JSONファイルを使用します。
  • マルチプラットフォームエクスポート: React + Tailwind、Vue、Svelte、Flutter、SwiftUI、Jetpack Composeなどへエクスポート可能です。
  • MCPサーバー: MCP互換エージェントを介したターミナルベースのデザイン自動化を実現します。
  • クロスプラットフォーム: Rustコアで構築されており、ネイティブデスクトップアプリ(macOS、Windows、Linux)およびWebアプリとして利用可能です。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト