Shopifyが公開した最強のClaude Codeワークフロー

概要

Shopifyは約300画面のモバイルアプリをAIコーディングエージェントで再構築した際、社内ツール「Helix」による構造化ワークフローを使いました。動画ではこの手法を分析し、Claude Code向けに再現する方法を紹介しています。機能を小さなチェックポイントに分け、4つのゲートを通過しない限り次へ進めない仕組みが核心です。

主なポイント

• Helixの基本構造: 画面を読み取り、複雑さの低い順に小さな「チェックポイント」へ分割します。初期の判断ミスを、修正コストが低いうちに発見できます。
• サブエージェントで新しいコンテキスト: タスクごとに別のコンテキストウィンドウを使い、長時間作業での品質低下(重要事項の忘却)を防ぎます。
• ゲートとルールの違い: ルールは単なる助言でエージェントは忘れますが、ゲートは通過しない限り次に進めません。
• フックで強制する仕組み: エージェント停止時にフックが終了コード2を返し、「未完了なので続行せよ」と促します。Ralphループと同じ発想です。
• 4つのゲート: 動作ゲート(テスト)、UIゲート(見た目と挙動)、コードレビューゲート(敵対的レビュー)、最終レビュー(人間による確認)です。
• 動作ゲートはTDD: 先にブラウザ不要のテストを計画・作成し、最初は失敗させます。その後に実装し、全テスト合格でゲート通過とします。
• UIゲート: ShopifyはGeminiの空間認識能力を使って画面差分を検出しました。動画では、HTMLプロトタイプとdesign.mdを基準に、外観担当と挙動担当の2つのClaudeサブエージェントを並行起動して比較します。
• 敵対的ループ: 批判役が問題を探し、修正役が直します。批判役が承認するまで繰り返します。
• チェックポイントのレビュー用ビューア: JSONの計画は人間が読みにくいため、簡単なWebページビューアで確認できるようにしています。
• オーケストレータースキル: 人間が介入するのは「計画の承認」と「最終確認」の2回だけです。最終確認の変更依頼は新しいチェックポイントになり、学びのファイルに記録され、次回以降の全エージェントが参照します。

実践に使えること

• 大きな機能を依頼する前に、チェックポイントプランナー用のサブエージェントで小タスクに分割し、JSONで保存して人間が承認する。
• 実装前にテストを計画・作成し、全合格を完了条件にする。
• Stopフックで、ゲート未通過なら終了コード2を返して作業を続行させる。
• UI作業ではHTMLプロトタイプとdesign.mdを先に作り、実装との差分を別セッションのサブエージェントにレビューさせる。
• 批判役と修正役の2エージェントによるレビューループを導入する。
• 人間のフィードバックを学習ファイルに蓄積し、全エージェントに作業前に読ませる。