Open Design

コーディングエージェントをデザイン制作へ拡張

Claude Code、Codex、Cursor、Gemini CLI、OpenCode、Qwenなどの対応エージェントへOpen DesignのスキルとMCPサーバーを接続し、普段使っているAI開発環境からデザイン制作を依頼できます。ランディングページ、アプリのUI、ダッシュボード、ワイヤーフレーム、プレゼン資料、SNS画像など、目的に応じたスキルをエージェントが呼び出し、文章だけの回答ではなく表示・編集可能な成果物として生成します。一般的なAIデザインサービスの専用チャットへ作業を移すのではなく、コード、仕様書、既存コンポーネントが置かれたプロジェクトの文脈を使えるため、見た目だけのモックと実装の間に生じるズレを抑えやすい点が特徴です。導入には対応エージェントやローカル環境の準備が必要で、ブラウザだけで完結する初心者向けサービスではありません。Node.jsやCLIを使う構成もあるため、最初は公式デスクトップアプリかクイックスタートに沿って小さなプロジェクトで試すと理解しやすくなります。

成果物をローカルの編集可能なファイルで管理

生成されたUIや資料は、Open Designのクラウド内だけで閲覧する独自データではなく、利用者のプロジェクトディレクトリへHTML、コード、画像、動画、設定ファイルなどとして保存されます。制作後に別サービスへ書き出して修正するのではなく、エディタやGitで差分を確認し、既存の開発フローへ組み込めるため、AIが作った初稿を人が継続して改善しやすい設計です。ランディングページならコンポーネントやスタイルを修正し、スライドやダッシュボードなら内容とレイアウトを調整するなど、再生成だけに頼らず成果物そのものを編集できます。ローカル優先の構成は、ファイルの保管場所やバージョン管理を自分で決めたい制作会社、開発チーム、機密性のある案件にも適しています。ただし、利用するAIモデルへ送信されるプロンプトや文脈は、選択したプロバイダーの処理条件に従います。ローカル保存だからすべての情報が端末外へ出ないわけではないため、API事業者のデータ利用方針と社内規定を確認する必要があります。

DESIGN.mdでブランドルールを再利用

色、書体、余白、角丸、コンポーネント、画像の方向性、文章トーンなどをDESIGN.mdへまとめ、複数の制作物へ共通して適用できます。既存サイトのURL、スクリーンショット、Figmaの内容などをもとにブランドの特徴を抽出し、再利用可能なデザインシステムとしてプロジェクト内へ保存する流れも用意されています。毎回のプロンプトで「この色を使う」「この雰囲気にする」と説明し直さず、ランディングページ、営業資料、管理画面、SNS素材などへ同じルールを反映できるため、AI生成物ごとに見た目がばらつく問題を減らせます。また、DESIGN.mdとスキルは特定のモデルへ固定されないため、Claude CodeからCodexへ切り替える場合でもブランド設定を引き継げます。一方、自動抽出されたルールが企業の正式なブランドガイドラインと完全に一致するとは限りません。ロゴの余白、指定色、禁止表現、アクセシビリティなどは人が確認し、社外公開前に正式なルールへ合わせて修正することが重要です。

UIからスライド・動画までスキルを追加

Open Designには、UI、ワイヤーフレーム、プロトタイプ、ダッシュボード、ランディングページ、スライド、画像、動画など、用途別に構成された多数のスキルとテンプレートがあります。エージェントは依頼内容に合うスキルを利用し、一般的な文章生成だけでは作りにくい画面構成、インタラクション、データ表示、映像出力などを制作します。必要な機能が既存のスキルにない場合は、Apache 2.0で公開されたコードを基にスキルやプラグインを編集し、自社の制作手順、コンポーネント、出力形式へ合わせて拡張できます。定型的な提案資料や顧客向けレポートを繰り返し作る制作会社では、社内テンプレートをスキル化して作業を標準化する用途にも向きます。ただし、スキルの数が多いほど自動的に高品質になるわけではありません。目的に合わないテンプレートを使うと情報構造が崩れるため、最初に成果物の用途、読み手、必要な編集形式を明確にし、生成後に内容と操作性を確認する必要があります。

無料のオープンソースとBYOKで運用

Open Design本体はApache 2.0ライセンスで公開されており、ソフトウェアの利用、改変、セルフホスト、社内向けの拡張を行えます。Open Design自体の定額契約を必須とせず、Claude、OpenAI、Googleなど自分が選んだAIプロバイダーのAPIキーを持ち込むBYOK方式で動かせるため、使用モデル、料金、データ処理先を自分で管理できます。公式のモデルルーターを備えたデスクトップアプリやAMRも提供されており、環境構築を簡略化した利用方法を選ぶことも可能です。費用は本体の利用料だけでなく、使用するモデル、生成量、ホスティング環境によって変わるため、完全に無償で継続できるとは限りません。高性能モデルで大量の画像、動画、コードを生成するとAPI費用が増える可能性があります。導入前に小規模な案件で品質と消費量を測り、モデルごとの料金上限、ログ管理、APIキーの権限を決めておくと、オープンソースの自由度を保ちながら予算を管理しやすくなります。