Open Design のスキルを連鎖させて構築できる 5 つのエンドツーエンド・ワークフロー

ほとんどのチュートリアルは機能を一度に 1 つずつ見せます。本ガイドが扱うのは、Open Design の機能を完全なエンドツーエンドのパイプラインへと連鎖させたとき、それが何になるか——それぞれが 1 つのセッションでまとまった成果物一式を生み出す、5 つの現実的なワークフローです。Panda Making Money が彼の動画で示した解説に沿い、現行リリースに合わせて書き直し、最新化したものです。全体像は上の動画をご覧いただくか、文章版をこのまま読み進めてください。

スライドデッキモード：デッキのカテゴリを選び、サンプルを fork して出発点にします。

連鎖を可能にするもの

Open Design はオープンソースかつローカルファーストのデザインプラットフォームで、あなたがすでに使っているコーディング agent の上で動作します（Claude Code、Codex、Cursor、Gemini、OpenCode など）。機能を実際のパイプラインへとつなげられるのは、次の 3 つの設計上の選択によります：

• スキルはファイルである——プラグインではありません。各スキルは、ある画面（ランディングページ、ダッシュボード、デッキ、モバイルアプリ……）に対するルールを agent に与えます。フォルダを置いて、再起動すれば動きます。
• デザインシステムは可搬な DESIGN.md——ブランドはディスク上で一度定義され、1 つのセッション内のすべての成果物に一貫して適用されます。
• 本物の作業ディレクトリ——agent は実際のファイルを読み書きし、メディアを生成し、ダウンロードできる PPTX / HTML / ZIP / MP4 を出力します。

さらにディスカバリーフォーム（最初の質問）、ビジュアルディレクションのピッカー、そして出力がレンダリングされる前の自己批評パスを加えると、agent はチャットボックスというよりも、ブリーフに沿って作業を進めるデザイナーのように振る舞います。これが、以下のすべてのワークフローが土台とする基盤です。

ワークフロー 1 —— プロダクトピッチ & 市場投入一式

創業者に必要なのはデッキだけではありません——すべてが 1 つのブランドに感じられるアセットが必要です。ディスカバリーフォームに記入し、ビジュアルディレクションを選ぶと、agent はあなたの DESIGN.md ブランドシステムを構築し、ピッチにはデッキスキルを、インタラクティブなデモページにはプロトタイプスキルを、補助となる画像にはメディアパイプラインを実行します——すべて同じビジュアル言語で。ピッチ用の PPTX、プロダクトページ用の HTML プロトタイプ、SNS 用の MP4 ティザーをエクスポート。1 つのセッション、1 つのブランド、1 つのストーリー。

ワークフロー 2 —— エンドツーエンドのマーケティングキャンペーン

まず DESIGN.md にブランドを確立し、それからスキルを順番に実行します：キャンペーン用のメールテンプレート、遷移先となる SaaS ランディングページ、プロモーション用のSNS アセット、そしてメディアパイプラインが揃いの画像とクリップを生成します。デバイスフレームでモバイルとデスクトップを示し、agent は A/B バリアントを生成し、ビジュアルディレクションはすべての接点で一貫し続けます。完全なキャンペーン引き継ぎ一式を ZIP でエクスポート——6 つのツールを行き来する必要はありません。

HyperFrames ギャラリー：コード駆動のモーション・動画作品を fork してリミックスできます。

ワークフロー 3 —— モバイルアプリのプロトタイプ + 開発者への引き継ぎ

モバイルアプリスキルを選び、DESIGN.md を適用し、機能を説明します。ディスカバリーフォームがインタラクションフローを捉え、続いて agent はデバイスフレーム付きの iOS/Android プロトタイプを構築し、UI 上に To-Do プランをリアルタイムでストリーミングします。サンドボックスのプレビューで操作し、会話形式で反復し、開発者に渡すために ZIP に入ったクリーンな HTML をエクスポートします（あるいはその ZIP を Claude Design に再インポートして作業を続けます）。アイデアから引き継ぎまでの引き締まったループです。

ワークフロー 4 —— コンテンツシリーズ & ウェビナー用アセット

永続的なプロジェクトを立ち上げます（ローカルの SQLite ストアに支えられているため、agent は前回どこで終えたかを覚えています）。各エピソードのデッキにはスライドスキルを、付随する文章にはドキュメントページスキルを、サムネイルとプロモクリップにはメディアパイプラインを使います。ここでマルチ agent の側面が光ります：1 つの agent でコンテンツを構成し、もう 1 つで視覚要素を生成する——すべて同じセッションで——そしてビジュアルディレクションを DESIGN.md に固定し、各エピソードがブランドに沿い続けるようにします。

ワークフロー 5 —— ブランドデザインシステムの作成 & 展開

もっとも戦略的なものです。agent はブランドアセット・プロトコルを実行します——あなたのブランドカラーを特定し、16 進数値を抽出し、完全なブランド仕様を書き上げます——それから、タイポグラフィ、パレット、スペーシング、コンポーネント、ムード、モーションを網羅した完全な DESIGN.md を構築します。ディスク上に存在するようになれば、今後のあらゆるセッションがそれを参照します：今日はウェブプロトタイプ、明日はデッキ、その後はドキュメントページ。一貫性はファイルレベルで強制され、システムは可搬です——コミットし、共有し、あるいは貢献として還元できます。

プレビューでレンダリングされた本物の生成プロトタイプ——ダークで映画的なエージェンシーのランディングページ。

これを選ぶべきとき（ホスト型ツールとの比較）

Panda の率直な位置づけ：磨き抜かれたホスト型ツールは、すぐ使える完成度、チームコラボレーション、ゼロセットアップで勝ります。Open Design が勝るのは、スタックを所有したいとき——自分のモデル、ローカルにある自分のデータ、git でバージョン管理されたスキルとブランドシステム——そして、本来なら 6 つのツールにまたがるはずの手順をパイプラインへとつなげたいときです。両者は互いに排他的ではありません。ホスト型ツールで素早く下書きし、その ZIP を Open Design に持ち込んで、より長期的で、所有された、反復的な作業を行うことができます。

ヒント

• まず DESIGN.md を定義する——これがパイプライン内のすべての成果物をブランドに沿わせ続けるものです。
• スキルを 1 つのセッションで順番に実行する——毎回ゼロから始めるのではなく。
• 永続的なプロジェクトを使う——複数セッションにわたる作業に。agent は前回終えた場所から再開します。
• agent を組み合わせる——1 つのモデルに構成を、もう 1 つに視覚要素の生成を、同じセッションで任せる。
• フォーマットごとにエクスポートする——デッキは PPTX、プロトタイプは HTML、SNS は MP4、引き継ぎは ZIP。

FAQ

Open Design は本当に 1 つのセッションでキャンペーン全体を生み出せますか？ はい——関連するスキル（メール、ランディングページ、SNS）を 1 つの DESIGN.md とメディアパイプラインに対して連鎖させ、その一式を ZIP の引き継ぎとしてエクスポートします。

多くの成果物にわたってどのようにブランドを保つのですか？ ブランドはディスク上の可搬な DESIGN.md に存在します。どのセッションも同じファイルを参照するため、一貫性は記憶によってではなく、ファイルレベルで強制されます。

成果物を開発者に渡せますか？ はい——ZIP に入ったクリーンな HTML をエクスポートします。また、Claude Design の ZIP をインポートして、ツールをまたいでプロジェクトを続けることもできます。

無料ですか？ アプリは Apache-2.0 の下でオープンソースであり、ローカルでの実行は無料です。支払うのは、接続した agent とプロバイダーのモデルおよびメディアの利用分だけです。

---

この文章ガイドは Panda Making Money の解説に基づいています。上の完全な動画をご覧いただき、より多くの AI ツール深掘りのためにPanda Making Money を購読してください。