ハクソク

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

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

2026年5月2日原文(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のスターを本当に買う人いるの？この異常な成長の理由がわかるかも。

└

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

Hacker Newsで議論の続きを見る