Design Ship

1 つのコマンド: Claude Design ハンドオフ URL → レビュー可能な GitHub PR。

/ork:design-ship https://claude.ai/design/abc123     # ハンドオフ URL から
/ork:design-ship /tmp/handoff-bundle.json            # ローカルファイルから

使用場面

Claude Design ハンドオフ URL (またはファイル) があり、現在のブランチに対して PR をオープンしたい場合に使用します。中間のステップなし、手動テスト生成なし、手動 PR ドラフト作成なしです。

インポートのみが必要な場合 (テスト、PR なし) は、代わりに /ork:design-import を使用してください。

パイプライン

ハンドオフバンドル (URL またはファイル)
  │
  ▼
┌──────────────────────────────┐
│ 1. /ork:design-import         │  コンポーネントをスキャフォルド、来歴を記録
│    (オーケストレータへ        │  トークン調整済み
│     委譲してパース + 重複排除) │  コンポーネント作成または再利用
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 2. /ork:cover                 │  新規コンポーネント別 Storybook ストーリー
│    (Storybook + Playwright)   │  新規ルート/ビュー用 Playwright E2E
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 3. /ork:expect                │  差分認識ブラウザ検証
│    (CDP + ARIA ツリーファースト)│  PR 本文用スクリーンショット保存
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 4. /ork:create-pr             │  PR をオープン:
│                               │   - Claude Design URL リンク
│                               │   - ビフォー/アフタースクリーンショット
│                               │   - コンポーネント スキャフォルド一覧
│                               │   - カバレッジ デルタ
│                               │   - ラベル: claude-design
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 5. 来歴更新                   │  .claude/design-handoffs/<id>.json を
│                               │  オープンされた PR 番号と URL でパッチ
└──────────────────────────────┘

プリフライト

パイプラインを開始する前に、ワーキングツリーがシップ可能なほどクリーンであることを確認します:

status = Bash("git status --porcelain")
if status:
    AskUserQuestion(questions=[{
      "question": "ワーキングツリーにコミットされていない変更があります。どのように進めますか?",
      "header": "プリフライト",
      "options": [
        {"label": "先にコミット", "description": "/ork:commit を実行してからシップを続行"},
        {"label": "スタッシュして復元", "description": "今スタッシュし、PR オープン後に復元"},
        {"label": "この PR に含める", "description": "リスク有り — 変更が関連する場合のみ"},
        {"label": "キャンセル", "description": "design-ship を中止"}
      ],
      "multiSelect": False
    }])

current_branch = Bash("git branch --show-current")
if current_branch in ("main", "master", "dev"):
    AskUserQuestion(questions=[{
      "question": f"{current_branch} ブランチにいます。フィーチャーブランチを作成しますか?",
      "header": "ブランチ",
      "options": [
        {"label": "はい — feat/design-ship-<bundle-id>", "description": "推奨"},
        {"label": "キャンセル", "description": "自分でブランチを切り替えてください"}
      ],
      "multiSelect": False
    }])

フェーズ 1 — インポート

/ork:design-import をバンドル引数で実行します。その出力 (インポート マニフェスト) をキャプチャします — bundle_id、作成されたコンポーネント一覧、来歴ファイルパスが含まれています。

インポートが失敗した場合、中止します。部分的にインポートされたコンポーネントに対するテスト生成には進みません。

フェーズ 2 — カバー

フェーズ 1 で作成されたコンポーネントをスコープとして /ork:cover を実行します:

component_paths = [c["path"] for c in import_result["components"] if c["decision"] != "reuse"]

Agent(
  subagent_type="test-generator",
  description="新規インポートされたコンポーネントをカバー",
  prompt=f"""cover スキルを使用してこれらのコンポーネント用のテストを生成してください (スコープ限定 — 無関係なファイルのスイートを再生成しないでください):
  {component_paths}

  必要なレベル:
  - コンポーネント別 Storybook ストーリー (必須)
  - 新規ルートが登録されている場合の Playwright E2E (src/app または src/pages を確認)
  - コンポーネントに非自明なロジックが含まれている場合のユニットテスト (純粋なプレゼンテーション用はスキップ)
  """
)

フェーズ 3 — Expect

差分認識ブラウザ検証を行うために /ork:expect を実行します。これは PR 本文に含まれるスクリーンショットを生成します:

Agent(
  subagent_type="expect-agent",
  description="インポートされたコンポーネントの差分認識検証",
  prompt=f"""expect スキルを現在のディフに対して使用してください。

  追加: 新規コンポーネントそれぞれについてビフォー/アフタースクリーンショットを
  キャプチャし、.claude/design-handoffs/{bundle_id}/screenshots/ に
  保存してください。これらは PR 本文にアップロードされます。

  検証に失敗した場合は、ブロックしないでください — 結果を報告し、続行してください。
  失敗は PR レビューで表面化します。
  """
)

フェーズ 4 — PR 作成

バンドルと検証結果からテンプレート化した本文で /ork:create-pr を使用します:

pr_body = f"""## 概要
Claude Design ハンドオフから生成: {bundle_url}

Bundle ID: `{bundle_id}` · Provenance: `.claude/design-handoffs/{bundle_id}.json`

## コンポーネント
| 決定 | コンポーネント | パス |
|---|---|---|
{table_from(import_result['components'])}

## トークン
- 追加: {len(token_diff['added'])}
- 変更: {len(token_diff['modified'])}
- 競合 (解決済み): {len(token_diff['conflicts'])}

## 検証 (`/ork:expect`)
{expect_summary}

## カバレッジ デルタ (`/ork:cover`)
{coverage_delta}

## スクリーンショット
{screenshot_table}

---
🤖 `/ork:design-ship` で オープン · Closes: (なし — 関連イシューを手動でリンク)
"""

Bash(f"gh pr create --title '{pr_title}' --body @- <<< '{pr_body}' --label claude-design")

フェーズ 5 — 来歴を更新

来歴ファイルをオープンされた PR 番号と URL でパッチします:

provenance = Read(f".claude/design-handoffs/{bundle_id}.json")
provenance["pr"] = {"number": pr_number, "url": pr_url, "opened_at": now()}
Write(f".claude/design-handoffs/{bundle_id}.json", provenance)

障害モード

フェーズ	障害	動作
プリフライト	ダーティツリー、main ブランチ	AskUserQuestion、サイレントに進行しない
1. インポート	スキーマ偏差、トークン競合	design-import は既にプロンプト表示; ユーザーがキャンセルした場合は中止
2. カバー	テスト生成失敗	expect に続行 — テストは PR レビューで回復可能
3. Expect	ブラウザ検証失敗	PR に続行 — 失敗は PR 本文に記載
4. PR 作成	gh 未認証	中止、認証エラーを表示
5. 来歴	ファイル書き込み不可	警告するが失敗しない (PR は既にオープン)

構成

スキル	役割
design-import	フェーズ 1 — コンポーネント スキャフォルド
cover	フェーズ 2 — Storybook + Playwright
expect	フェーズ 3 — 差分認識ブラウザ検証
create-pr	フェーズ 4 — テンプレート化した本文で PR をオープン
remember / memory	来歴更新

このスキルの責務外

関心事項	担当
バンドルの解析	claude-design-orchestrator エージェント (design-import で呼び出し)
コンポーネント重複排除	オーケストレータエージェント (design-import で呼び出し)
テスト実行 (CI)	GitHub Actions — このスキルはテストのみ生成
PR のマージ	人間のレビュアー — 自動マージは絶対しない

制限事項

• 自動マージなし: このスキルは PR をオープンし、人間がレビューしてマージします。
• 反復ループなし: PR レビューでデザイン変更が明らかになった場合、現在は Claude Design から再度エクスポートして /ork:design-ship を再実行します。リバースパス (ライブ UI ドリフト → claude.ai/design の改良プロンプト) は M124 — Claude Design Drift Sync (Bet B) で追跡されています: #1391 (PR フック)、#1393 (/ork:design-iterate)、#1395 (design-drift-detector エージェント)。
• 単一バンドル スコープ: 1 回の実行で 1 つのバンドル、1 つの PR。複数バンドルのバッチはサポートされていません。