オープン・デザインは、オープンソースでネイティブ・ファーストのAI駆動型インターフェース・デザインとプロトタイピング・ツールである。 Anthropic 的 Claude Designのオープンソース解析ソリューション。ユーザーのローカルにインストールされた11のコードインテリジェンス（Claude Code、Cursor、Gemini CLIなど）またはOpenAIフォーマットと互換性のあるサードパーティAPI（BYOK）に接続することで、モデルバインディングの制限を解除し、大規模なモデルをプロのUI/UXデザイナーに変換します。このプラットフォームには、31のプロフェッショナルなデザインシナリオモジュール（ウェブプロトタイプ、SaaSランディングページ、モバイルアプリ、データダッシュボード、プレゼンテーションなどをカバー）と、トップブランドの129のデザインシステムが組み込まれています。ユーザーは自然言語の要件を入力するだけで、システムはインタラクションアンケートを使ってデザインの方向性を確認し、AIはサンドボックスのリアルタイムプレビューでコードとインタフェースを自動生成し、HTML、PDF、PPTX、ZIP形式へのワンクリックエクスポートをサポートします。
機能一覧
- マルチモデルとローカル・インテリジェンスのサポート11種類のAIプログラミングクライアント（Claude Code、Cursor Agent、Gemini CLI、GitHubなど）を自動的に検出し、ローカル環境変数にアクセスします。 Copilot CLIなど）、またはBYOK（Bring Your Own Keyモード）を通じて、OpenAI APIフォーマットと互換性のある大規模モデルにアクセスすることができます。
- 31 既成概念にとらわれないデザイン・スキルWebプロトタイプ、SaaSランディングページ、管理ダッシュボード、モバイルアプリ、ダイナミックページ、プレゼンテーション(PPT)、その他大量のシーンテンプレートを内蔵し、ワンクリックでAIの出力形式を切り替えることができます。
- 129の内蔵ブランド・デザイン・システムApple、Stripe、Vercel、Notion、Figmaなど、世界的に有名なメーカーや製品のデザインシステム仕様一式が提供されており、ワンクリックで適用することで、専門家によるカラーマッチング、タイポグラフィ、インタラクションのトーンを得ることができます。
- プレシジョン・ニーズ・インタラクティブ・クエスチョン・アンケート（ディスカバリーフォーム）AIはコードの実行を開始する前に、ターゲットとする読者層、視覚的なトーン、サイズの制約などの基本情報を確認するために、複数選択肢からなるアンケートをポップアップ表示させる。
- サンドボックス・リアルタイム・レンダリングとマルチフォーマット・エクスポート生成されたUIコードは、安全なiframeサンドボックス環境でリアルタイムレンダリングでプレビューされます。生成されたプロジェクトを直接HTML、印刷用PDF、PPTXファイル、および完全なソースコードZIP（ジップ）にエクスポートするためのサポート。
- 5つのビジュアル・スタイル・ジャンルミニマリスト・モダン、テクニカル・プラグマティズム、ソフト・ヒーリングなど、5つのプリセット・スタイルのライブラリーが提供され、カラーとフォント定義のための明確なパラメーターが用意されている。
- 五次元の自己修正と見直しAIモデル：結果を出力する前に、AIモデルは5つの次元の客観的な自己採点（デザインコンセプト、ビジュアルレベル、ディテールの実行など）に従わなければならない。
- シームレスなクロードデザイン履歴のエクスポートAnthropicのウェブサイトから直接プロトタイプのZIPアーカイブをドラッグ＆ドロップでインポートし、履歴環境を読み込んでローカルで編集を続けることができます。
ヘルプの使用
I. 環境要件と準備
Open Designはウェブフレームワークとローカルバックエンドデーモンで構築されたツールシステムです：
- Node.jsNode.js 24または同等の最新バージョンがシステムにインストールされていることを確認する（バージョン切り替えにはnvm / fnmツールを推奨）。
- パッケージ管理ツール pnpm: このプロジェクトは pnpm (バージョン 10.33.x 系列) に強く依存しています。pnpmへの依存は
corepack enableコマンドを実行しcorepack pnpm --version環境を検証する。 - AIベースの準備現地でカスタマイズされた vLLM OpenAI標準のベースURLとAPIキーに対応（独自のキーが付属）。 Claude Code 或 Cursor CLIやその他のローカル・プログラミング・エージェント。
II.詳細なインストール・プロセス
コンピュータのターミナル（ターミナルまたはコマンドプロンプト）を開き、以下のコマンドを入力してインストールしてください：
- プロジェクトのソースコードをダウンロードする：
Gitを使ってプロジェクトのコードをローカルにクローンし、そのフォルダに移動する。git clone https://github.com/nexu-io/open-design.git cd open-design - コアパッケージ管理の有効化と依存関係のインストール：
corepack enable pnpm installプログレス・バーが終了するのを待つと、システムはフロントエンドのワークベンチとバックエンドのデーモンを含むすべての依存パッケージを自動的に取り出します。
- オープンデザイン・ローカルサービスの開始：
pnpm tools-dev run web起動に成功すると、ターミナル・パネルはウェブ側のローカル・アクセス・アドレスを出力する（例えば
http://localhost:3000).リンクをコピーしてブラウザで開き、インターフェイスにアクセスしてください。プログラムを初めて起動すると、自動的にローカルな.od/SQLiteデータベースを保存するための隠しフォルダ。
III.中核機能の運用およびワークフローのガイドライン
ステップ1：AIドライバーエンジンとワークフローオプションの設定
ウェブサイトのホームページにアクセスすると、左側にすべてのツールバーが表示されます。サポートされているローカルCLIがインストールされていない場合、「ようこそ」のポップアップが表示されます。以下を選択できます BYOK (Bring Your Own Keyモード)必要なのは、OpenAI互換フォーマットのインターフェースのアドレスと、対応する呼び出しモデル（たとえば gpt-4o)とAPI Keyが貼り付けられている。これにより、ネットワーク環境に関係なくAIに接続することができます。
ステップ2：「デザインスキル」と「デザインシステム」を選択します。“
入力ダイアログボックスの上には、非常に重要な2つのドロップダウンメニューカードがある：
- スキルの選択どのような商品形態を出力したいかをここで定義します。例えば
saas-landingランディング・ロング・ページを作成することができる。mobile-app含まれるiPhone 15 Proのボーダーが呼び出され、モバイルコンポーネントが生成されます。guizang-pptその後、プレゼンテーション・モードに入ります。 - 設計システムの選択UIインターフェースの基本的な視覚的特徴をここで決定します。ドロップダウンメニューは
stripe、vercel、linear-app129以上の仕様があり、ワンクリックで対応するラベルの設計思想を継承することができます。
ステップ3：説明書の提出とディスカバリー調査票の記入
例えば、「サインアッププロセスを含むソーシャルツールアプリのホームページを作成するのを手伝ってください」など。
送信に戻ると、AIはシステムによって「停止」されます。その後、画面の中央にポップアップが表示され、視聴者、視覚的感情、カラーパレットなどのオプションが表示されます。ダイナミック・フォームこのメカニズムにより、AIは想像したドメインに強制的に収束する。必要なだけ多くのボックスにチェックを入れる（通常1分もかからない）。これにより、AIは想像したドメインに強制的に収束させられ、生成されるコードは非常に専門的なターゲットが設定されたものになる。
ステップ4：コード生成と結果のレンダリングへのリアルタイムアクセス
アンケート提出後、インターフェイスは以下のように変わります：
- Todoプログレス（ToDo追跡カード）画面の左側のパネルには、AIの動作（CSSを解析している、HTML構造を書いている、動的効果をテストしている、など）がカードのパイプラインで即座に表示される。
- サンドボックス・プレビュー右側のメイン・ワークスペースはセキュアなアイソレーションを含むiframeで、基礎となるHTMLとCSSが構築される際にリアルタイムでレンダリングされたGUIを読み込みます。高度に忠実なシャドウ、インタラクション、レスポンシブなエフェクトを見ることができます。
ステップ5：シームレスな修正とファイルエクスポート
- インターフェイスにローカルな変更を加える必要がある場合、現在のページを離れる必要はなく、チャットボックスにリクエストを入力するだけで（例えば「大見出しのフォントを小さくし、背景をダークモードに変更する」など）、AIが文脈に応じてリアルタイムでサンドボックス内の更新を置き換える。
- インターフェイスの右上隅をクリックエクスポートボタン.ページプロトタイプが生成されたら
Export HTML或Export ZIPダウンロードには、すべてのローカライズされたスタイル依存の開発用zipが含まれています。Export PPTX/PDF社内会議用のネイティブ・オフィスのプレゼンテーション・ドキュメントを入手。プロジェクトデータは自動的に永続化され、ローカルに保存されます。
アプリケーションシナリオ
- プロダクト・マネージャーやデザイナーのための低コストで迅速なプロトタイプ作成
複雑なFigmaの配線テクニックをマスターする必要がなく、質問フィルタを使った1文の記述で、リアルでブランド化されたビジュアル・スタイル(AppleやVercelなど)を持つ、忠実度の高いWebやモバイル・アプリのインタラクティブ・プロトタイプを数分で生成することができます。 - フルスタック開発者とエンジニアのためのフロントエンドブースト
バックエンドやフルスタックの開発者は、優れたデザインやレイアウトのスキルがないことがよくあります。彼らはOpen Designに実装する機能要件を直接入力し、自己完結型のフロントエンドフレームワークスキルモジュールを選択することで、AIによって生成されたクリーンで新鮮なHTMLとCSSソースコードを、専門的なデザインシステムの仕様に従ってZIP形式でエクスポートすることができます。 - マーケティングと商品化資料作成
デッキモード」と「ソーシャルカルーセル」のいずれかを選択することで、マーケティング担当者はコピーのアウトラインを提供するだけで、AIが自動的にテキストを拡大縮小し、高度なアニメーションとエフェクトを備えたオンラインマガジンスタイルのスライドショーまたはソーシャルメディアマルチグリッドカードを生成します。AIは自動的にテキストを拡大縮小し、高度なアニメーションを備えたオンラインマガジンスタイルのスライドショーやソーシャルカルーセルを作成します。 - アジャイルチームの日常業務と報告資料
Kanban-board、Finance-report、Meeting-notesの各モジュールを使用することで、チームメンバーは、乾燥したテキストを大きなデータ表示や美しい財務文書ページなどの機能的なオフィス資産に即座にコスト効率よく変換することができます。
QA
- オープンデザインとアンソロピックの公式クロード・デザインの主な違いは何ですか？
フォーマル Claude Design Open Designはクローズドソースで有償のクラウド専用モデル専用ツールですが、Open Designは完全にオープンソースでローカルファーストのシステムアーキテクチャです。サンドボックスのプレビューとレンダリングのロジックを継承するだけでなく、ローカルにデプロイされたAIコードのインテリジェンスを利用したり、機能をブロックすることなく、プロキシAPIを介して市場にあるほぼすべての大規模言語モデルを切り替えることができる。 - Open Designを使うのにプログラミングの知識は必要ですか？
必要ない。システムの操作ロジックは、自然言語対話型デザインツールに非常に近い。グラフィカル・インターフェース、インタラクティブなアンケート・フォーム、ドロップダウンメニューが付属しています。コードの基礎知識がなくても、バックグラウンドで書かれたコードが直接翻訳され、直感的で忠実度の高いビジュアル・インターフェースとして表示されます。 - 生成されたコードプロジェクトや設計資料は市販されていますか？
Open Design自体はApache-2.0のオープンソースプロトコルでリリースされており、生成されたアウトプットはユーザーに帰属する。ただし、このシステムには、いくつかの有名ブランド（Stripe、Teslaなど）の実際のデザイン仕様のテンプレートが組み込まれているため、これらの再現性の高いUIを公共の商業的実現に使用する場合は、サードパーティブランドの著作権を侵害する法的リスクがないかどうかを確認する必要があることに注意する必要がある。 - ローカルにAIインテリジェンスがインストールされていない場合、どのように使えばいいですか？
まったく問題はない。BYOK（Bring Your Own Key）が用意されている。初回のウェルカムインターフェースでは、OpenAI対応のAPIリクエストアドレス、APIキー、DeepSeekやOpenRouterなどのプラットフォームのモデル名を入力するだけで、すべての機能をスムーズに利用することができます。 - なぜAIは、要件を入力した後に直接描画を開始するのではなく、フォームをポップアップ表示するのですか？
これは、このツールの核となる機能のひとつです。従来のAIによる図面は、やみくもに「フリーハンド」で描かれ、安っぽい作品が出来上がることが多かったが、Open Designに組み込まれた「スマート・ディスカバリー・フォーム」は、AIが書き始める前に、核となるゴールと制約を定義させる。ユーザーが複数の選択をするのに30秒かかるが、後々何十回もの非効率な修正を省くことができる。
