ローカルで動く AI デザインツール『Open Design』をdevコンテナで触ってみた

クラウドのチャットに投げてデザインを作らせるツールは増えたが、「自分のマシンの中だけで完結し、しかも普段使っている Claude Code をそのままエンジンに使う」というアプローチのものはまだ珍しい。

Open Design はまさにそれを掲げた、local-first な AI デザインワークスペースだ。今回、開発用の Docker コンテナにセットアップして、ランディングページ1枚と web3 アプリの画面ワイヤーフレームを実際に作らせてみた。

セットアップから「ちょっと触ってみる」までを、検証を担当した yatmita 記者が Claude Code に聞いた。

---

1. そもそも Open Design とは何か

記者: ひとことで言うと?

開発者: 「ローカルで動くデザイン特化のワークスペース」です。プロジェクトの中に、AI が生成したデザインファイルと、それを作るための会話が入っている。クラウドに送らず、手元にインストール済みのコードエージェント CLI（claude や codex など）を検出して、それを子プロセスとして動かすのが一番の特徴です。

記者: つまり、デザインを生成する頭脳は外から持ってくる?

開発者: そうです。自前の生成モデルを持つのではなく、ユーザーが既に契約・インストールしている CLI をそのまま使う。今回の環境だと claude（Claude Code）が検出されて、それが裏で動きました。

2. セットアップ

記者: インストールは大変でしたか?

開発者: モノレポを clone して、pnpm install してから開発モードで起動する、という標準的な流れです。起動すると daemon（本体）と Web UI が立ち上がり、ブラウザでアクセスできます。今回は dev コンテナ内で動かして、Windows 側のブラウザから localhost で開きました。

記者: 起動したら、まず何が出る?

開発者: プロジェクト一覧の画面です。ここに作ったものがサムネイル付きで並びます。URL を打つ必要はなくて、アプリを開く → カードをクリックするだけ。

3. 中身はどうなっているのか

記者: 仕組みを少しだけ。

開発者: きれいに整理されていて、daemon が本体エンジンです。Web UI も、付属の od というコマンドラインツールも、デスクトップアプリも、全部この daemon の同じ API を叩くクライアントにすぎない。だから「UI で作る」も「コマンドで作る」も、行き着く先は同じエンジンです。

記者: 生成の流れは?

開発者: プロンプトを送ると、daemon が裏でプロンプトを組み立てます。そこに デザインシステム（配色やタイポの「型」）や スキル（作り方の知識）、過去の メモリ が差し込まれる。それを CLI に渡して実行し、結果をストリーミングで画面に返す。出来上がった成果物は、ただの HTML ファイルとしてプロジェクトの中に保存されるのがポイントです。

記者: ただのファイル、というのは?

開発者: プラットフォームに閉じ込められた特殊な形式ではなく、index.html のような普通のファイルがそのまま置かれる。後で見るように、これが効いてきます。

左に会話、中央に「Design Files」のツールバーと、生成物をその場で表示するサンドボックスプレビュー。右上には使うデザインシステムを選ぶドロップダウンもある。

4. 同梱されている「型」の量

記者: デザインの素材はどれくらい入っている?

開発者: これが結構な量で、著名サイトのデザインシステムが約150個、ローカルに同梱されています。stripe、notion、apple、tesla みたいなブランドの「デザイン言語」を写した DESIGN.md + トークン CSS + コンポーネント集のセット。これらはネット接続なしで使える。

記者: ネットがいるものもある?

開発者: はい。「コミュニティ」のデザインやプラグインは、GitHub 上のマーケットプレイスから取得してくる形です。なので正確には「コアの素材は同梱、コミュニティ拡張は取得」という二層構造。完全オフラインで完結するのはコア部分まで、と理解しておくといいです。

5. 実際に作ってみる ── ランディングページ1枚

記者: まず軽いものから。

開発者: yatmita のトップページ改訂案、というお題で、warm-editorial（落ち着いた読み物系）のデザインシステムを指定して1枚作らせました。途中で「タグラインはどうする?」みたいな確認が一度挟まって、「お任せで」と答えるとビルドが進む。数十秒〜数分で index.html が1枚出てきます。

記者: ちゃんとしてますね。

開発者: ヒーロー、注目作品のカード、カテゴリ導線、新着リスト、フッターまで、warm-editorial らしい暖色と余白で出てきました。レスポンシブにも対応している。

記者: 直したいときは?

開発者: 2通りあります。会話で「ここをこう変えて」と頼むと、エージェントが文脈を保ったまま index.html を書き換えてくれる。もう一つは、ファイルが普通の HTML なので自分で直接編集する。どちらでやっても同じファイルに反映され、ブラウザを更新すればプレビューに出る。「成果物がただのファイル」という設計のおかげで、人間が触ってもエージェントが触っても破綻しない。

6. もう少し本格的に ── web3 アプリの画面ワイヤー

記者: 次はもっと実務寄りのものを。

開発者: 「やくそく」という web3 アプリ（PWA）を題材に、全11画面のワイヤーフレームを作らせてみました。オンボーディング、ホーム、住所録、請求書まわり、交換（こうかん）まわり、設定……というアプリの画面一式です。

記者: 一気に出た?

開発者: ここは一工夫いりました。最初「10画面ぜんぶを1ファイルに詰めて」と頼んだら、1回の応答で出せる分量の上限に当たって途中で止まってしまった。そこで、共通の styles.css を1枚作り、画面ごとに別ファイルで生成するやり方に切り替えたら、すんなり全11画面そろいました。

記者: 分割したのに、見た目はバラけなかった?

開発者: そこは会話の文脈が効いていて、「既存の styles.css とトーンに合わせて」と指示するだけで、暖色・下部ナビ・ステータスバッジ・和語ラベルといったトーンが11画面で一貫しました。これは Open Design が元々「index.html をランチャーにして、画面は別ファイル」という作りを想定しているのとも噛み合っています。

記者: これは見ごたえがありますね。

開発者: 1画面ずつ別ファイルなので、index.html のランチャーから各画面に飛んで確認できます。「アプリ全体の画面設計をまず並べて見たい」という用途には素直にハマりました。

7. 触ってみての所感

記者: ざっくり、どういう人に向いていそう?

開発者: 芯にあるのは3つで、local-first（手元で完結）、BYO agent（自分のエージェントをそのまま使う）、成果物が実ファイル（編集も実行も自由）。この思想が好きな人、特に「対話しながらデザインを詰めたい」「生成物をそのままコードに持っていきたい」という人には気持ちよく使えるはずです。

記者: 逆に、ここは押さえておくべき、という点は?

開発者: 大量の画面を一発で出そうとすると、エージェント側の出力上限にぶつかることがある。今回みたいに「共通スタイル + 画面ごと分割」で投げるのが実践的なコツです。あとは、同梱の素材が豊富な反面、お題に合った型を自分で選べるかどうかで仕上がりがけっこう変わる。そのあたりの手綱は握る前提のツール、という感じですね。

記者: まずは何から触るのがいい?

開発者: 起動したらプロジェクトを1つ作って、好きなデザインシステムを選んで、ランディングページを1枚出してみる。これが一番手っ取り早く「何ができるか」が分かります。そこから画面を増やしたり、編集を会話で頼んだり、と広げていくといいと思います。

---

ローカルで完結し、自分の Claude Code をそのままエンジンにできる、というだけで触ってみる価値はある。まずは1枚、何か作らせてみるところから。