ハクソク

世界を動かす技術を、日本語で。

オープンデザイン：コーディングエージェントをデザインエンジンとして活用する

8日前原文(github.com)

概要

  • Open Design (OD) は、Anthropicの Claude Design に対する完全な オープンソース代替
  • ローカルファースト ・ Webデプロイ対応 ・全レイヤーで BYOK（Bring Your Own Key/Agent） を実現
  • 13種のコーディングエージェントCLI と 31のスキル、72のデザインシステム を統合
  • Vercelデプロイ や 自ホスト、 CLI切替、 OpenAI互換API など柔軟な運用が可能
  • デザイン成果物ファースト のワークフロー、デモや豊富なショーケースも提供

Open Design（OD）：Claude Designのオープンソース代替

  • Claude Design（Anthropic） の独自性と制限

    • 2026年4月リリース、LLMがプロンプトから直接デザイン成果物を生成
    • 完全クローズドソース、クラウド限定、Anthropicモデル/スキルのみ利用可能
    • 自ホスト不可、エージェントの追加や切替も不可

  • Open Design（OD） の特徴

    • オープンソース、同様の成果物ファースト・メンタルモデル
    • ローカル動作 （pnpm tools-dev）、 Vercelデプロイ、 BYOK でエージェントやAPI自由選択
    • エージェント非同梱 ：既存CLI（13種）を自動検出・即利用
    • スキル駆動型デザインワークフロー と リアルなファイル生成

  • BYOKエージェントループ

    • 13種のCLI（Claude Code, Codex, Devin, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Mistral Vibe）
    • PATH自動検出、ワンクリック切替
    • CLI未所持でもOpenAI互換BYOKプロキシ経由で同様のフロー実現

  • デザイン成果物生成プロセス

    • インタラクティブな質問フォームで要件確定
    • 5つのキュレートされたビジュアル方向から選択
    • TodoWrite計画をUIにライブ表示
    • デーモンが実際のプロジェクトフォルダを生成し、テンプレート・レイアウト・チェックリストを準備
    • エージェントが自己批評（5次元評価）を実施、サンドボックスiframeで成果物を即時表示

コアOSSプロジェクトとの連携

  • alchaincyf/huashu-design ：デザイン思想・5段階ブランド資産プロトコル・自己批評・方向ピッカーの思想源泉
  • op7418/guizang-ppt-skill ：デッキモード・マガジンレイアウト・WebGLヒーロー・チェックリスト
  • OpenCoworkAI/open-codesign ：UXリファレンス・ストリーミング成果物ループ・iframeプレビュー・多形式エクスポート
  • multica-ai/multica ：PATHスキャン・ローカルデーモン・エージェント検出と協調モデル

機能一覧・アーキテクチャ

  • コーディングエージェントCLI（13種）

    • 主要なAIコーディングCLIを自動検出、切替可能

  • OpenAI互換BYOKプロキシ

    • baseUrl・apiKey・model指定で任意のOpenAI互換プロバイダをエンジン化（Anthropic, DeepSeek, Groq, MiMo, OpenRouter, self-hosted vLLM等）
    • セキュリティ：内部IP/SSRFはデーモンで遮断

  • デザインシステム（72種以上）

    • 2つのハンドメイドスターター＋70の実プロダクトシステム（Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu等）
    • 57のデザインスキルを追加

  • スキル（31種）

    • プロトタイプモード（27種）：Webプロトタイプ、SaaSランディング、ダッシュボード、モバイルアプリ、ソーシャルカルーセル等
    • デッキモード（4種）：マガジン風PPT、シンプルデッキ、Replitデッキ、週次アップデート
    • シナリオ別ピッカー：design / marketing / operation / engineering / product / finance / hr / sale / personal

  • メディア生成機能

    • 画像：gpt-image-2（Azure/OpenAI）
    • 動画：Seedance 2.0（ByteDance）
    • モーショングラフィックス：HyperFrames（heygen-com/hyperframes）
    • 93の即利用プロンプトギャラリー、.mp4/.pngをプロジェクトワークスペースに出力

  • ビジュアル方向

    • 5つのスクール（Editorial Monocle, Modern Minimal, Warm Soft, Tech Utility, Brutalist Experimental）
    • OKLchパレット＋フォントスタックをセットで提供

  • デバイスフレーム

    • iPhone 15 Pro, Pixel, iPad Pro, MacBook, Chromeブラウザ等

  • インポート・永続化・ライフサイクル

    • Claude DesignエクスポートZIPをドラッグ＆ドロップでプロジェクト化
    • SQLite保存（.od/app.sqlite）：プロジェクト・会話・メッセージ・タブ・テンプレート
    • pnpm tools-devで一括起動・停止・管理

  • デスクトップ/Electron対応

    • サンドボックスレンダラ＋サイドカーIPC
    • E2Eテストやスクリーンショット取得も可能

  • ライセンス

    • Apache-2.0

デモ・利用例

  • エントリービュー

    • スキル・デザインシステム選択、ブリーフ入力
    • プロトタイプ、デッキ、モバイルアプリ、ダッシュボード、エディトリアルページ等に即対応

  • ディスカバリーフォーム

    • デザイン前にブリーフを確定（サーフェス・ターゲット・トーン・ブランド文脈・スケール等）

  • 方向ピッカー

    • ブランド未設定時、5方向から選択→パレット・フォントを自動セット

  • ライブTodo進行

    • エージェントの計画がリアルタイムで進捗表示
    • 途中で修正指示も可能

  • サンドボックスプレビュー

    • すべての<artifact>がクリーンなiframeで即時表示
    • HTML/PDF/ZIPでダウンロード可能

  • 72システムライブラリ

    • 各プロダクトシステムのカラーパレット・ライブデモ・DESIGN.md閲覧

  • デッキモード

    • guizang-ppt-skillをバンドル、マガジンレイアウト・WebGL背景・HTML/PDFエクスポート

  • モバイルプロトタイプ

    • iPhone 15 Proフレームでピクセル精度のプロトタイプ表示

スキル・ショーケース例

  • dating-web ：マッチングダッシュボード、KPI、タイポグラフィ
  • digital-eguide ：2スプレッドのデジタルeガイド、クリエイター向け
  • email-marketing ：製品ローンチHTMLメール、テーブルフォールバック対応
  • gamified-app ：3フレームのゲーミフィケーションアプリ
  • mobile-onboarding ：3画面のモバイルオンボーディング
  • motion-frames ：CSSアニメーションつきヒーロー
  • social-carousel ：3カード構成のソーシャルメディアカルーセル
  • sprite-animation ：8ビットアニメスライド、日本語タイポグラフィ

デザイン・マーケティングサーフェス（プロトタイプモード）

  • web-prototype ：シングルページHTML（ランディング、ヒーロー、マーケページ等）
  • saas-landing ：SaaS向けランディング
  • dashboard ：管理画面・アナリティクス
  • pricing-page ：価格比較テーブル
  • docs-page ：3カラムドキュメント
  • blog-post ：長文エディトリアル
  • mobile-app ：モバイルアプリ画面
  • mobile-onboarding ：オンボーディングフロー
  • gamified-app ：ゲーミフィケーションアプリ
  • email-marketing ：HTMLメール
  • social-carousel ：ソーシャルカルーセル
  • magazine-poster ：マガジンポスター
  • motion-frames ：モーションヒーロー
  • sprite-animation ：8ビットアニメ
  • dating-web ：デートダッシュボード
  • digital-eguide ：デジタルガイド
  • wireframe-sketch ：手描きワイヤーフレーム
  • critique ：自己批評スコアシート
  • tweaks ：AI提案の微調整パネル

デッキサーフェス（デッキモード）

  • guizang-ppt ：マガジンスタイルWeb PPT（op7418/guizang-ppt-skillをバンドル）

Open Design は、 ローカル・クラウド・BYOK の柔軟性を持ち、 プロダクト品質のデザイン成果物 をAIエージェントと共に自動生成・即時プレビュー・編集できる、次世代の オープンソースAIデザインプラットフォーム です。

Hackerたちの意見

READMEがちょっと不気味だね。みんな、クロード営業マンみたいな書き方を普通だと思ってるの？でも、逆にアンソロピックには感謝しないと。これを見つけやすくしてくれてるから、もしかしたらわざとやってるのかも。

└

同意だわ。「6つの負荷に耐えるアイデア」セクションに入った瞬間、耐えられなくなった。すごく気持ち悪い。

└

「一目でわかる」セクションが特に面白かった。バズワードがぎゅっと詰まってるだけ。GitHubで見た中で一番密度の高い表だよ。

└

そうだね、同意する。オープンスペックのここみたいな「始め方」ガイドを探してたんだけど：https://github.com/Fission-AI/OpenSpec/blob/main/docs/gettin... 何も見つからなかった。

└

「AIが何かをデザインしようとしている」わけじゃない。プロンプトスタックによって、作業ファイルシステムを持ち、決定論的なパレットライブラリとチェックリスト文化を持つシニアデザイナーのように振る舞うように訓練されたAIだよ。え、シニアデザイナーに作業ファイルシステムやチェックリスト文化がないのがいいの？決定論的なパレットは？

└

それ、普通だね。みんな良いとは思ってないけど、まあまあって感じで流しちゃうのが楽なんだよ。

└

人々は本当にクロード営業マン風の書き方を普通だと思ってるの？特定のコミュニティでは、そうだね。野心的だけど退屈な中間管理職が書いた悪いパワーポイントみたいなもので、ミーム化されてる。そういうのはたくさんあるよ。もしその手のコピーをAIモデルに抽出させて、ちょっと不気味な感じで再現したら、うん、100%それだね。

└

この耐えがたいAIの時代はいつか終わるだろうね。人々がそれに疲れ果てるまで、我慢するしかない。無思考なライティング、SNSの投稿、メール、コールドコール…どれも努力がほとんどない共通の特徴があって、それが見える。思いつきで「いいアイデアだ」と思った衝動と同じくらい空虚で無意味だよ。私たちの中には、書くことすらしなかったら読まないってルールを意識的に守ってる人もいるし、残りの人も同じ考え方になっていくんじゃないかな。セールス最適化を装ったスパムファーム、"価値あるメッセージ"を送るLinkedInの狂人、エンジニアを装った低努力の怠け者たち…これらは全部消えて、本当の価値が勝つはず。今は、ナイジェリアの王子の手紙とあまり変わらないよ、工業化された感じで。

└

いらないものはなし。もう一つのいらないものもなし。ただ、欲しいものを、欲しい形で。

リポジトリが公開されて1週間で、もう14,000スターもついてる。ほら、ほぼ毎日1400スターずつ増えてるみたいだよ：https://www.star-history.com/?repos=nexu-io%2Fopen-design&ty... うん、全然怪しいことはないね。

└

GitHubのスターを本当に買う人いるの？この異常な成長の理由がわかるかも。

└

わお、ちょうど百の位に丸められてるの？それともスター履歴のデータ収集の副産物？

確かに、クロードデザインのアプローチはトークンを無駄に使ってるし、フルウェブサイトを構築する必要があるから時間もかかると思う。彼らのウェブサイトも明らかに雰囲気でコーディングされてて、他の部分とスタイルが統一されてないし。ChatGPTの画像2はUIプロトタイピングがずっと得意で、安くて早い。フィグマのプラグインは試してないけど、もっと効率的だと思う。

みんな最初にUIをデザインするの？プロトタイプができたら、必要なUIの内容をテキストでざっくり定義するだけなんだ。繰り返し出てくる要素を抽出して、そこにデザインを加える感じ。

└

何をやってるかによるよね。例えば、Slackみたいなプロダクトに取り組んでるなら、正しい質問は「あなたの機能に必要なUIは何か？」じゃなくて、「あなたのUXアイデアに必要な機能は何か？」ってことが多いよ。

└

プロダクトが最優先なら、UXをデザインすることになるけど、それにはUIも含まれるよね。テクノロジーが最優先なら、自分たちがやってることをそのままやる感じ。

結局、デザインされた素材があまりにも一般的で無限に生産できるものになっちゃって、価値がなくなるってことだよね。今、その道を進んでる感じ。ほとんどの素材において、ちゃんとしたデザイン作品を得ることの価値（例えば、「シードラウンド用の雑誌スタイルのピッチデッキを作って」ってこのデザインエンジンが言ってるやつ）は、努力と資本の組み合わせが生産にかかったっていうシグナル機能だけなんだ。確かに、1万のうちの1つのデザイン作品は実際に価値を加えるけど、普通はただのフィルタリング機能だよね。会議の前にパワーポイントデッキを作る目的は、デッキの価値じゃなくて、誰かが自分の考えを整理するために時間を使ったっていうシグナルなんだ。これがAI主導のデザインでは全部失われちゃう。デザインされたアーティファクトは無料で瞬時に作れるからね。そう、まだジョークに気づいてないおじいちゃんたちを1年くらいは感心させられるけど、最終的にはただの無意味なスタンダードになっちゃう。90年代のデスクトップパブリッシングと同じだよ。ちょっとの間はおじいちゃんたちを感心させたけど、結局は背景音みたいなスタンダードになっちゃった。

└

会議の前にパワーポイントデッキを作る目的は、デッキの価値じゃなくて、誰かが自分の考えを整理するために時間を使ったっていうシグナルなんだ。 > これがAI主導のデザインでは全部失われちゃう。デザインされたアーティファクトは無料で瞬時に作れるからね。最近、AI/LLMテーマのハッカソンに参加したんだけど、最後に勝ったチームがやったことを発表したんだ。スライドは全部AI生成で、テーマと短い準備時間を考えれば妥当だったけど、ちょっと変な感じだった。自分たちも驚くようなスライドで話してるのを見て、観客も驚いてた。ハッカソンのテーマを考えれば、彼らに対しては何も言えないけど、将来的に「スピード」や「生産性」が重視される仕事では、レビューされていないLLM生成のスライドが普通になるのかなって思う。そうならないことを願ってる。

└

デッキの内容を評価する必要があるのは嬉しいな。見た目の魅力みたいな安易なヒューリスティックを使うんじゃなくて。視覚的な魅力と努力の間には相関があることは理解してるけど、その相関はよくある問題があるからね。欠陥のあるモデルは役立つこともあるけど、その使い方をしっかり定義しないといけない。あなたが言ってる美的ヒューリスティックを使っている人たちが、ちゃんと考えを深めるために使ってるとは思えない。むしろ、考えたくないからショートカットに使ってるんじゃないかな。あなたが言ったシナリオと同じくらい可能性のあるシナリオは、技術者も非技術者と同じくらい視覚的に魅力的なプレゼンテーションを作れるようになって、その意見が以前よりも評価されるようになることだよね。これが起こるかどうかは分からないけど、まだ分からないことは確かだね。

└

ここでの避けられない結果は、デザインされた素材があまりにも一般的で無限に生産可能になって、価値のない背景音になっちゃうことだね。願わくば。プロセスが長すぎた。パワーポイントのアニメーションみたいな似たようなものと比べてみて。最初は楽しいけど、その後はうざくなる。コンテンツの生産コストがゼロになることで、メッセージを最も濃縮された形に磨き上げるためにもっと努力がかけられるのが、最良の副産物になるかも。

└

デザインの唯一の目的が美的な差別化だと仮定するなら、これは本当だね。実際、デザインにおける情報のスキャンの仕方、提示の仕方、視覚的な階層、グルーピングなどにはたくさんの科学があるんだ。それ自体に実用性があるものも多いし。

└

人間のコミュニケーションは、最終形にますます近づいているね：小文字のテキストと絵文字の箇条書きリスト。

└

俺はキャリアデザイナーとして言ってるんだけど、デザインが「品質を示す機能」としての役割はもう壊れてると思う。どんなものでも見栄えのいいサイトを作ることは可能だし、安っぽい商品を豪華なパッケージに包んで人を騙すこともできる。膨大な予算をかけて制作に時間がかかる映画でも、結局つまらないことが多いし。俺のお気に入りの曲の一つは、アーティストが日曜日の午後にホテルの部屋で書いたものなんだ。考慮すべきことが一つある。デザインでどんなコンテンツでも安くてすぐに包むことができるなら、今度はコンテンツのデザインをカスタマイズするのも安くてすぐにできるってことだ。もしかしたら、ブラウザのカスタムスタイルシートが約束してくれたような、ユーザー中心のインターネットに戻れるかもしれない。こうやってデザインを民主化することで、もっと多くのコンテンツが見やすくなるのはいいことだし（これは勝ちだね）。それに、デザインが本来あるべき決定マトリックスから外れて、より良い決定を下せるようになるのも（これも勝ち）。

└

LLMが特定のタイプの仕事のシグナル価値を減少させるってアイデアはすごく面白いね。あんまり考えたことなかったけど。ターゲット広告についてはよく考えるんだ。消費者と広告主の両方にとって、ターゲット広告がなぜそんなに役に立たないのかについての記事を読んでからずっと考えてる。表面的には両方にとって良さそうなのにね。 https://zgp.org/targeted-advertising-considered-harmful/ 何かをするのがすごく安くなると、質を良いものと悪いものと区別する手段としては完全に無意味になるんだよね。

└

https://medium.com/luminasticity/art-as-a-tool-for-storing-m... >「現代の世界はデザインが豊かで、アートが貧しい。つまり、大量生産の導入により、以前の時代ではマナに満ちていると見なされていたアイテムをどこにでも配布できるようになったが、今はユニークではなくなってしまった。彼らには何もない。」これは大量生産されたデザインに関する話だけど、AIが作ったアートには10倍適用されるようだね。

└

デザインの一つの使い方はシグナルだけど、全てではない。成功したデザインはその目的を果たすものだよ。多くのデザインされたものは差別化する必要がなくて、AIによる均一なデザイン（内部文書や地域サービスのビジネスコミュニケーションなど）から恩恵を受けると思う。デスクトップパブリッシングが手書きやタイプライターのメモを置き換えたように、プロのデザイナーを置き換えることはなかったけど（デジタルツールを学ぶ必要はあったけどね）。差別化が必要なデザインについては、どうなるか見ものだね。AIの均一性が、LLMが前回のクロールで吸い上げたトレンドを超えて「デザインアルファ」を提供できる才能ある人間のデザイナーにとって、より多くの機会を提供するかもしれない。

└

すでにかなり均一化されてるし、これに関してAIを責めるつもりはないよ。

Readmeがセールスデッキみたいだね。「6つの重要なアイデア」に到達したところでタブを閉じちゃった。もしあなたのツールが本当に良ければ、何ができるかを見せるだけでいいのに。あと、1週間で14kスターって、ここでかなりの働きをしてるよね。そんなに早く見つける人なんていないよ。

みんながここで一番生産的だと思うフローは何なんだろう？うちはバイブ感重視のコーディングチームで、レビューも多いんだ。それがバックエンドの作業ではスムーズになったけど、フロントエンドはまだまだ初期段階って感じ。AIがストーリーブック、ペンシル、フィグマ、プレイライト、テールウィンド/リアクト、プルリクエスト用のステージングサーバーとかを駆使してるけど、みんなこのフローを通るやり方が全然違うんだよね。それぞれのパーツの価値もまだ不明だし、いつがその時なのかも。開発者たちが今はもっとオーナーシップを持つようになってきて、これも変わってきてる。みんなクロードデザインに切り替えてるの？スーパースキルのインポートとか？とか。

今日、ツールのレートに関してサービスの問題があって、ナップスターやカザァを使ってた頃を思い出す。良いものがいっぱいあるけど、入り込むためのハードルが高すぎて、理解して価値を見出すのにすごく認知エネルギーが必要なんだ。そして、一旦それを理解できると、自分だけが操作できるモンスターのようなワークフローが待ってる。もしかして、年を取ったのかな？真剣な質問だけど、みんな本当にああいうREADMEでプロジェクトを始めて、すぐに動き出して価値を得られるの？

これ、結構複雑そうだけど、ほとんどの人にはそんなに複雑なUIやUX、マーケティングの解決策は必要ないと思う。俺はもうちょっとシンプルなものを作ったんだ。トークンシステムを生成して、UXをLLMに割り当てるやつ。 github.com/bmson/anchor-ui

これ、なんか膨れすぎてる気がする。