open-design

open-design — ローカルファーストなデザイン成果物の生成

キーワード：open-design · local design tool · prototype generation · design artifact

Anthropic の Claude Design に代わるオープンソースのツールです。すでにマシンにインストールされているコーディングエージェントを使って、Web、モバイル、デスクトップのプロトタイプ、スライドデッキ、メディア成果物を生成します。

Open Design は、タスクに合った最小の生成モードを選ぶと最も効果的です。

• フルデッキに取りかかる前に、まずプロトタイプから始めます
• カスタムスタイルを重ねる前に、デザインシステムを1つ選びます
• 出力形式を1つ選びます（PDF／PPTX にエクスポートする前に HTML で確認します）
• 生成を始める前に、Turn 1 のヒアリングフォームを使ってリダイレクトの繰り返しを減らします

このスキルを使用する場面

• 1つのプロンプトから、ローカルファーストな UI プロトタイプ、プレゼンテーションデッキ、またはドキュメント成果物を作成したい
• すでにインストール済みのコーディングエージェント（Claude Code、Cursor、Gemini CLI など）を使ってデザイン成果物を生成したい
• 組み込みの72種類のデザインシステム（Linear、Stripe、Vercel、Notion、Apple など）を出力に適用したい
• 複数形式へのエクスポートが必要（HTML で確認 → PDF、PPTX、ZIP、または Markdown）
• デザイン成果物に埋め込む、AI 生成の画像、動画、音声メディアが必要
• カスタムのファイルベーススキルで Open Design を拡張したい、または Claude Code プラグインとしてインストールしたい

このスキルを使用しない場面

• 実際のコードベースで UI コンポーネントを作成するタスク → stitch-skills または design-system に振り分けます
• 動画制作または Remotion アニメーションのタスク → video-production に振り分けます
• デザインシステムを適用しないデータ駆動型のプレゼンテーションデッキのタスク → presentation-builder に振り分けます
• 既存のメディアファイルを圧縮または最適化するタスク → compresso に振り分けます
• Web UI 全般の批評または監査 → web-accessibility に振り分けます

手順

ステップ 1：生成モードを決める

ワークフローを選ぶ前に、必要最低限の情報を集めます。

• 出力タイプ：UI プロトタイプ、プレゼンテーションデッキ、ランディングページ、ドキュメント、またはメディア成果物
• デザインシステム：組み込みの72種類（Linear、Stripe、Vercel、Notion、Tesla、Apple…）から1つ、またはカスタム
• ビジュアルの方向性：5種類の方向性（ミニマル、ボールド、遊び心のあるデザイン、エンタープライズ、ダーク）から1つ
• エクスポート形式：HTML での確認、PDF、PPTX、ZIP、または Markdown
• エージェント：処理を委任する、インストール済みの CLI（自動検出または明示的に指定）

次のルールに従います。

1. 出力が UI プロトタイプまたはランディングページの場合 → prototype モードを選びます
2. 出力がプレゼンテーションまたは投資家向けデッキの場合 → deck モードを選びます
3. 出力が長文ドキュメントまたは仕様書の場合 → document モードを選びます
4. メディア（画像／動画／音声）の生成が主な出力の場合 → media モードを選びます
5. ユーザーがデザインシステムを選んでいない場合 → 生成前に Turn 1 のヒアリングフォームを使って方向性のずれを減らします

ステップ 2：Open Design をインストールする

# Clone and install
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install

# Start the local web UI
pnpm tools-dev run web

要件：

• Node.js ~24
• pnpm 10.33.x

プラグインのインストール（Claude Code）：

claude plugin marketplace add nexu-io/open-design

jeo-skills からインストールする：

npx skills add https://github.com/akillness/jeo-skills --skill open-design

ライフサイクルコマンド：

pnpm tools-dev start    # start daemon
pnpm tools-dev stop     # stop daemon
pnpm tools-dev run web  # open local web UI
pnpm tools-dev status   # check status
pnpm tools-dev logs     # tail logs
pnpm tools-dev inspect  # inspect agent connections
pnpm tools-dev check    # preflight check

ステップ 3：適切な生成モードを選ぶ

A. プロトタイプモード

Web、モバイル、またはデスクトップの UI モックアップが必要な場合に使用します。

Mode: Prototype
Design system: Linear (or any of 72 built-ins)
Visual direction: minimal / bold / playful / enterprise / dark
Output: HTML review → PPTX / PDF / ZIP

最適な用途：

• SPA ダッシュボード、ランディングページ、モバイル画面
• 複数ページにわたるプロトタイプのフロー
• 実装前の、デザインシステムに沿ったモックアップ

B. デッキモード

投資家向けピッチ、ロードマップ、またはアーキテクチャのデッキが必要な場合に使用します。

Mode: Deck
Design system: Vercel / Stripe / Notion (pick one)
Visual direction: enterprise / bold
Output: PPTX, PDF, or Google Slides

最適な用途：

• 投資家向け／ロードマップ／ローンチ用デッキ
• アーキテクチャおよびデモのプレゼンテーション
• ワークショップまたはゲームのピッチ用スライドデッキ

振り分け先：デザインシステムを適用しないデッキのみの作業は、presentation-builder に振り分けます。

C. ドキュメントモード

長文の技術文書、仕様書、またはスタイルを適用したレポートを出力する場合に使用します。

Mode: Document
Design system: pick one for consistent typography/spacing
Output: Markdown, PDF

最適な用途：

• デザイン仕様書およびシステムドキュメント
• PDF にエクスポートする、スタイルを適用した技術レポート

D. メディアモード

主な成果物として、画像、動画、音声を生成する場合に使用します。

対応している生成バックエンド：

• 画像：gpt-image-2（統合されたコーディングエージェント経由）
• 動画：Seedance 2.0
• HTML → MP4：HyperFrames
• 製品、マーケティング、ソーシャルメディアのカテゴリにわたる、すぐに使えるプロンプトテンプレート93種類

ステップ4：デザインシステムを適用する

Open Designには、以下を備えた72種類の組み込みデザインシステムがあります。

• 一貫性のあるカラーパレット、タイポグラフィ、スペーシングのトークン
• フォーマットをまたいだ一貫性（HTML、PPTX、PDFで同じシステムを使用）
• 実在する製品の名前が付いたシステム（Linear、Stripe、Vercel、Notion、Tesla、Appleなど）

成果物ごとに、使用するデザインシステムは1つにしてください。複数のシステムを混在させると、出力に一貫性がなくなります。

ステップ5：成果物をエクスポートする

必要を満たす最小の出力形式を選択してください。

形式	最適な用途
HTMLレビュー	関係者による迅速なレビュー、最終エクスポート前の反復作業
PPTX	プレゼンテーションスライド、エクスポート後の編集
PDF	最終納品、印刷
ZIP	アセットを含む成果物一式
Markdown	ドキュメント、Wikiへの統合

PDF/PPTXにエクスポートする前に、まずHTMLでレビューし、方向性に問題がないか確認してください。

ステップ6：カスタムスキルで拡張する

Open Designは、ファイルベースのスキルプラグインに対応しています。

• スキルフォルダーをskills/ディレクトリに配置し、再起動します
• スキルフォルダーは、このリポジトリで使用されているものと同じSKILL.md規約に従います
• GitHubのイシューやPRを通じて、コミュニティのスキルやデザインシステムを提供できます

# Add a custom skill to Open Design
cp -r my-custom-skill open-design/skills/
pnpm tools-dev stop && pnpm tools-dev run web

例

例1：SaaSダッシュボードのプロトタイプ

Mode: Prototype | Design system: Linear | Direction: minimal
Prompt: "Analytics dashboard with sidebar nav, KPI cards, and a time-series chart"
Export: HTML review → PPTX

例2：投資家向けピッチデッキ

Mode: Deck | Design system: Vercel | Direction: enterprise
Prompt: "10-slide investor deck: problem, solution, market, traction, team, ask"
Export: PPTX

例3：製品画像の生成

Mode: Media | Backend: gpt-image-2 | Template: Product hero
Prompt: "Clean product hero image for a developer CLI tool, dark background, code aesthetic"

例4：プラグインのインストール

# Claude Code plugin
claude plugin marketplace add nexu-io/open-design

ベストプラクティス

1. 生成前に、Turn 1のディスカバリーフォームを使ってデザインシステム、ビジュアルの方向性、出力形式を確定してください。依頼の内容が曖昧な場合は、省略しないでください。
2. フォーマットをまたいだ出力の一貫性を保つため、成果物ごとにデザインシステムを1つ選択してください。
3. 反復作業のコストを抑えるため、PDF/PPTXへのエクスポートを確定する前にHTMLでレビューしてください。
4. 生成した画像や動画が主な納品物である場合に限り、メディアモードを使用してください。副次的な成果物の場合は使用しないでください。
5. 実際のコードベースにあるUIコンポーネントの場合は、代わりにstitch-skillsまたはdesign-systemに振り分けてください。
6. Open Designにファイルベースのスキルを追加する場合は、このリポジトリで使用されているものと同じSKILL.md形式に従ってください。
7. 初回使用前にpnpm tools-dev checkを実行し、Node.jsとpnpmのバージョン要件を確認してください。

参考資料

• Open Design GitHubリポジトリ
• stitch-skills — 実際のコードベースで、AIが生成するUIコンポーネントを使用する場合
• presentation-builder — デザインシステムを適用せず、データ駆動型のデッキ成果物を作成する場合
• video-production — Remotionやプログラム可能な動画制作の場合
• compresso — オフラインでメディアを圧縮する場合
• web-accessibility — 幅広いWeb UIの監査やガイドラインを確認する場合