open-design

Open Design — 汎用デザインタスク基盤

このスキルは、Open Design カタログ（OD リポジトリのローカルクローンに保存されています）を、あらゆるエージェントセッションで実行できるワークフローにします。OD 独自のデーモンが行う処理を再現します。ブランド仕様とテンプレートを紐づけ、制作ルールを重ね、ワークフローに沿って進めます。OD のデーモンを起動しておく必要はありません。OD のデーモンにあるプレビュー／コメント／スライダー機能は意図的に対象外としています。代わりに、エージェントで通常使う開発サーバーとブラウザー検査ツールを使用してください。

起動するタイミング

次のような依頼で起動します。

• 「<artifact> を作って」などの依頼。<artifact> は deck / prototype / landing / dashboard / poster / brochure / video template / audio piece を指します。
• 「<brand> のデザインシステムを適用して」または「これを X のような見た目にして」。
• 「デザインシステム／DESIGN.md をセットアップして」。
• 「UI を監査／批評して」、「5 次元レビューを実施して」。
• Open Design に明示的に言及する依頼。

デザイン以外のタスク（バックエンド、インフラ、リファクタリング、バグ修正）では起動しないでください。

クロスプラットフォームに関する注意

すべてのヘルパースクリプトは Node.js（.mjs）で、macOS、Linux、Windows で同じように動作します。git クローンの手順には PATH 上に git が必要です。bash には依存しません。

$SKILL_DIR — ヘルパースクリプトの場所

4 つのリストスクリプトは、この SKILL.md と同じ場所にあります。スクリプトを起動するときは、SKILL.md があるディレクトリの絶対パスを $SKILL_DIR として使用してください。このパスはすでに分かっています。エージェントがこのファイルを読み込んだ場所です（例：Claude Code では ~/.claude/skills/open-design/、Codex では ~/.codex/skills/open-design/ など）。Bash の呼び出しで明示的に node に渡してください。

$OPEN_DESIGN_ROOT — OD コンテンツの場所

ROOT = $OPEN_DESIGN_ROOT  (if set and non-empty)
     | ~/.open-design-skill/repo  (default)

OD リポジトリ（https://github.com/nexu-io/open-design）はここに一度クローンし、すべてのプロジェクトで再利用します。スクリプトはデフォルトで ~/.open-design-skill/repo を使用しますが、既存のチェックアウトがある場合は OPEN_DESIGN_ROOT を尊重します。

ワークフロー

3 つのフェーズで進めます。セットアップ → 紐づけまたは選択 → 作成と実行。

フェーズ 1 — セットアップ（起動のたびに実施）

OD コンテンツのルートを確認します。

ROOT="${OPEN_DESIGN_ROOT:-$HOME/.open-design-skill/repo}"
[ -d "$ROOT" ] && echo "OK: $ROOT" || echo "MISSING: $ROOT"

存在しない場合は、AskUserQuestion を使ってクローンの実行を確認します。

Open Design のコンテンツを ~/.open-design-skill/repo にクローンしますか？（数百 MB）

オプション（単一選択）：「今すぐクローン」（推奨）／「キャンセル」。

「今すぐクローン」を選んだ場合は、次を実行します。

mkdir -p "$(dirname "$ROOT")"
git clone https://github.com/nexu-io/open-design "$ROOT"

「キャンセル」を選んだ場合は、既存のチェックアウトを指すよう OPEN_DESIGN_ROOT を設定するようユーザーに伝え、停止します。

フェーズ 2 — 紐付ける、または選ぶ

ユーザーのプロジェクト（エージェントの現在の作業ディレクトリ）に .open-design.json があるか確認します。

test -f .open-design.json && cat .open-design.json

存在する場合（紐付け済み）： ファイルを解析し、designSystem.path と skill.path を読み込む対象として、すぐにフェーズ 3 に進みます。リフレッシュを促すメッセージを表示したり、一覧スクリプトを実行したりしないでください。プロジェクトの途中での反復作業で、ユーザーのテンプレートの内容が変わらないようにしてください。

ユーザーが明示的に切り替えを依頼した場合（「デザインシステムを X に切り替える」「テンプレートを選び直す」「ブランドを変更する」など）は、まず .open-design.json を削除してから、未紐付けのフローに進みます。

存在しない場合（未紐付け）：

(a) リフレッシュの確認。 AskUserQuestion：

Open Design の内容を先に更新しますか？（ローカルクローンで git pull）

選択肢：「最新の状態に更新」（推奨）／「スキップ」。

「最新の状態に更新」の場合：

git -C "$ROOT" pull --ff-only

(b) 目的を絞り込む。 AskUserQuestion（質問は 1 つ、選択肢は 4 つ）：

何を作成しますか？

選択肢：

• デッキ／スライド／プレゼンテーション
• プロトタイプ／ランディングページ／ダッシュボード／ページ
• 画像、動画、音声の成果物
• デザインシステムの設定または適用（成果物はまだ作成しない）

どれにも当てはまらない場合、ユーザーは「その他」を選べます。その場合は、上記のいずれか、または機能スキルに対応付けるための追加質問をします。

(c) 関連するサブセットをスキャンする。 適切な一覧スクリプトを node で実行し、$SKILL_DIR にはこのスキルのディレクトリへの絶対パスを渡します。

目的	コマンド	フィルター
デッキ	node "$SKILL_DIR/scripts/list-design-templates.mjs"	mode == deck の行
プロトタイプ／ランディングページ／ダッシュボード	node "$SKILL_DIR/scripts/list-design-templates.mjs"	mode == prototype の行
画像／動画／音声	node "$SKILL_DIR/scripts/list-design-templates.mjs"	mode in {image, video, audio, template} の行
機能スキル	node "$SKILL_DIR/scripts/list-skills.mjs"	（すべて。upstream != "-" の行にはスタブのフラグを付ける）
デザインシステム	node "$SKILL_DIR/scripts/list-design-systems.mjs"	ユーザーが指定したキーワード／雰囲気でフィルター

すべてのスクリプトは、ヘッダー行付きの TSV を出力します。列数は一定で、空のフィールドは - として出力されます。

(d) 絞り込んで提示する。 どのリストも、そのまま表示するには大きすぎます。

デザインシステム（150 件以上）の場合：まず AskUserQuestion で雰囲気やブランドのキーワード（「特定のブランドはありますか？」「ミニマル？」「大胆？」「エディトリアル？」「温かみのある？」「技術的？」など）を尋ねます。次に、そのキーワードで TSV の title、category、description 列を grep でフィルターし、一致したものだけを提示します。

テンプレート（110 件以上）とスキル（130 件以上）の場合：まず目的に合ったサブセットに絞り込み、一致度の高い上位約 6 件を（slug と 1 行の説明を含む）簡潔なインラインリストとして表示します。次に AskUserQuestion で、可能性の高いデフォルトを 3 つと、自由入力の slug を指定するための「その他」を提示します。

スタブスキル（list-skills.mjs で upstream != "-" の行）を提示する場合は、「上流へのポインター — 個別のインストールが必要」と明記し、上流バンドルをインストールするかスキップするかをユーザーが選べるようにします。

(e) 紐付ける。 ユーザーがデザインシステムを 1 つと、テンプレート／スキルを 1 つ選んだら、エージェントの現在の作業ディレクトリに .open-design.json を書き込みます。

{
  "version": 1,
  "designSystem": {
    "slug": "bmw",
    "path": "design-systems/bmw"
  },
  "skill": {
    "slug": "html-ppt-pitch-deck",
    "path": "design-templates/html-ppt-pitch-deck",
    "kind": "design-template",
    "mode": "deck"
  },
  "boundAt": "2026-05-20T13:22:00Z"
}

このファイルに関する注意事項：

• パスは常に $OPEN_DESIGN_ROOT からの相対パスとし、OS 間での互換性を保つためにスラッシュを使用します。
• skill.kind は、design-templates/ 配下のエントリーでは "design-template"、skills/ 配下のエントリーでは "skill" とします。
• skill.mode は、選択したエントリーのフロントマターにある od.mode の値に合わせます。値がない場合は省略します。
• テンプレートのフロントマターに od.design_system.requires: false（組み込みのスタイルが含まれていることを示します）がある場合は、designSystem: null を設定し、デザインシステムの選択を省略します。
• boundAt は UTC の ISO 8601 形式とします。

フェーズ 3 — 構成と実行

バインドされた本文は、このスキルのディレクトリからではなく、$OPEN_DESIGN_ROOT から読み取ります。

1. Read "$OPEN_DESIGN_ROOT/<designSystem.path>/DESIGN.md" — ファイル全体 （designSystem が null の場合はこのステップをスキップします）。
2. Read "$OPEN_DESIGN_ROOT/<skill.path>/SKILL.md" — ファイル全体。その フロントマターで以下を確認します。
   • od.craft.requires — 選択されたエントリがオプトインするクラフトの スラッグのリスト（存在しない場合があります）。
   • od.design_system.sections — このテンプレートにとって実際に重要な DESIGN.md のセクション（注意を集中させるために使用します。DESIGN.md 全体はロードされたままです）。
3. od.craft.requires の各スラッグについて: Read "$OPEN_DESIGN_ROOT/craft/<slug>.md"。
4. テンプレートが assets/ または references/ サブディレクトリを同梱して いる場合、ワークフロー本文がそれらを参照したときにオンデマンドで読み取る ファイルとして扱います。先読みはしないでください。

次に、競合時の優先順位を次のようにして、構成されたワークフローを実行します。

1. DESIGN.md — ブランドトークンが優先されます。
2. craft/*.md — DESIGN.md が上書きしない範囲を普遍的なルールがカバー します。
3. SKILL.md 本文 — 成果物の種類に固有のワークフロー（ブリーフの明確化 → ファイルの書き込み → セルフチェック）。

成果物は、OD のクローンやこのスキルのインストールディレクトリではなく、 ユーザーのプロジェクト（cwd）に書き込みます。テンプレートが出力ファイル名 （通常は index.html）を指定している場合は、cwd からの相対パスとして書き込み ます。

同じプロジェクトでの以降のターン

バインドされたターンではフェーズ 2 をショートカットします。.open-design.json を読み、同じ DESIGN.md + SKILL.md + craft 本文を再度読み、同じワークフローに 従います。リフレッシュプロンプトはバインドされたターンでは提供されません — それはプロジェクトの途中でテンプレートの内容を変更してしまうからです。 再選択せずに OD の内容をリフレッシュするには、ユーザーはセッション間に手動で git -C "$OPEN_DESIGN_ROOT" pull を実行できます。

エッジケース

• skills/ 配下のスタブスキル: エントリの約半数は、上流リポジトリを 指すキュレーションされたスタブです（それらのフロントマターの od.upstream フィールドが設定されており、本文には「上流を X にインストール してください」と書かれています）。提供時に上流の URL を提示し、上流を別途 インストールするのか、それともスタブのメタデータを設計コンテキストとしてのみ 使用するのかを尋ねてください。
• od.design_system.requires: false: そのテンプレートは自己完結しており、 DESIGN.md を必要としません（例: guizang-ppt）。デザインシステムの選択を スキップし、designSystem: null でバインドします。
• ユーザーの cwd に DESIGN.md がない: このスキルは DESIGN.md をユーザーの プロジェクトにコピーしません。$OPEN_DESIGN_ROOT から読み取り、その内容を プロンプトを通じて渡します。ユーザーが自分のリポジトリに実体のある DESIGN.md を明示的に求めている場合は、バインド後にコピーします: cp "$OPEN_DESIGN_ROOT/<designSystem.path>/DESIGN.md" .。
• プロセス外のプレビュー / コメントモード: これらは OD のデーモン内に あり、このスキルの範囲外です。プレビュー / デバッグには、エージェントの 標準ツールを使用します — 開発サーバーを起動し、chrome-devtools MCP や playwright を使って検査します。

.open-design.json の役割（再掲）

「私たちは X のデザインシステムと Y のテンプレート / スキルを選んだ」という プロジェクトごとの記録です。プレーンな JSON で、手動で編集でき、git に コミットすることを意図しているため、デザインの選択がコラボレーター間で持続 します。これはバインドされた本文をキャッシュしません — それらは毎ターン 常に $OPEN_DESIGN_ROOT から再読み取りされるため、クローン内での git pull は次のターンで即座に反映されます。

---

メンテナンス: https://github.com/sugarforever/open-design-skill。 Open Design 上流: https://github.com/nexu-io/open-design。