Claude Codeループエンジニアリングのすべてのレベル

AAI LABS
컴퓨터/소프트웨어AI/미래기술

스크립트

00:00:00AIエージェントの活用において、ループエンジニアリングはもはや不可欠な手法となっています。その理由は
00:00:04エージェントが以前よりもはるかに長時間、自律的に動き続けられるようになったからです。ここでは
00:00:093つの異なるループを、分かりやすくレベル別に整理して紹介します。
00:00:13レベル1では、基本的な単位とそれを効率的に使う方法を取り上げます。レベル2では、その単位を組み合わせて
00:00:18ファクトリー(工場)のように機能させる方法を解説し、最後のレベル3では、自由な時間を大幅に増やして真の
00:00:23エージェント駆動を実現します。今回の動画は非常に情報量が多いため、いつでも見直せるように
00:00:28タイムスタンプを概要欄に記載しています。また、この動画では
00:00:33Claude Codeを使用しますが、ここで紹介するシステムはCodexなどでも
00:00:38同様に動作します。ツールとしてはWarpとVS Codeを使用しており、どちらも簡単にインストールでき、
00:00:43両方のツールで同じ単一のフォルダを開くだけで、すぐに一緒に作業を始められます。Vibe Codingに
00:00:48ループエンジニアリングを導入する方法へ進む前に、まず「ループ」とは何かを説明する必要があります。これまでは、
00:00:53何かを開発する際にもすでに何らかのループの中にいました。エージェントにプロンプトを与えると、作業を開始し、
00:00:57それが終わると結果の確認を求められます。もし間違っていれば、別のプロンプトを
00:01:02エージェントに与えて再度構築を始めさせる、というループの中にすでに身を置いていたのです。さて、エージェントループとは、
00:01:07このプロセスから人間が抜け出し、検証の部分もエージェント自身に担わせる仕組みのことです。
00:01:12これは自然な進化の方向と言えます。なぜなら、エージェントを使った開発で最も時間がかかるのは
00:01:17開発作業そのものではないからです。それはバックグラウンドで自律的に行われます。実際に
00:01:21私たちの注意を必要とするのは、エージェントが成功したかどうかをチェックすることです。しかし、エージェントが正しい出力を
00:01:26知っている場合にのみ、自ら検証を行うことができます。それがループの核心部分です。しかし、他にも
00:01:30重要な要素があります。まず、ループを開始させるトリガーがあり、次にループ本体があります。
00:01:35そして各ループの最後には、エージェントの作業が完了したかどうかを判断するための検証チェックが
00:01:41必要となります。その検証チェックは人間が決める必要があります。つまり、エージェントループにおいて
00:01:46人間が担当し続ける部分は、最初から人間のものであるべき部分です。それは、エージェントのスイッチを
00:01:50切るべきか、それともさらに作業を続けるべきかを決める判断です。これは人間にしか担えません。さて、
00:01:55なぜ急にループエンジニアリングに移行しているのか、なぜ1年前にはこれがうまくいかなかったのか、
00:01:59そう疑問に思うかもしれません。その答えは、当時のモデルはこれほど長時間動作しなかったからです。しかし現在では、
00:02:04登場している新しいモデルにより、人間なしで何時間も作業を続けることが可能になりました。私たちが
00:02:08これらすべてを検証するために使っているのは、サロン用の予約アプリです。ユーザーがサイトにアクセスし、
00:02:13スタイリストを選択すると、日ごとの空き時間を確認して予約できる仕組みになっています。
00:02:17さらに、これを利用するすべてのサロンには受付担当者がいるため、スタッフ用のログイン機能もあります。
00:02:22彼らは届いたリクエストの承認や拒否を行い、サロン内の各スタイリストのカレンダーを管理します。
00:02:27現時点では、ランディングページをはじめとして、追加すべき重要な機能がまだたくさん欠けています。
00:02:31これは、私たちが実際にアプリを構築した際のClaude Codeのセッション画面です。
00:02:36「loop engineering」というフォルダを作成し、その中でClaude Codeにプロジェクトの
00:02:41セットアップを依頼しました。アプリ自体は「loop salon」というフォルダにあり、Next.jsアプリとして構築されています。
00:02:46もし初めて聞く言葉であっても、心配いりません。モデルにNext.jsアプリを作成したいと伝え、
00:02:51そこから開発を始めれば、自動で処理してくれます。これは、今回私たちが作っているような実際のWebサイトを
00:02:55構築する上で最も人気のある方法の1つです。さて、フォルダ内に用意しておくべきファイルがいくつかあります。
00:03:00まず「Claude.md」があります。中身は「Agents.mdを確認するように」という指示だけです。
00:03:04これは、Claude Codeだけでなく、このリポジトリ内で複数のエージェントを稼働させる可能性があるためです。
00:03:09Claude Code以外のほぼすべてのエージェントは、新しいセッションが開始されるたびに
00:03:14「Agents.md」の指示をルールとして参照します(Claude.mdを参照するのはClaude Codeのみです)。
00:03:21「Agents.md」の中身についても、特に自分で一から書く必要はありませんでした。次に、
00:03:27ユーザーが実際に操作するアプリのクリック可能なすべての部分を網羅した「design.functional.md」
00:03:33というファイルがあります。それらのデザインはこのファイルに基づいています。お気づきかもしれませんが、
00:03:36このアプリのデザインはDuolingoに似ています。Duolingoのデザインを模倣したためです。
00:03:41次に、知っておくべきスキルがいくつかあります。1つ目は「Grill Me」で、最初のバージョンを
00:03:45構築しているときに使用しました。ユーザーの要望が明確になるまで、エージェントが次々と質問を投げかけてくるスキルです。
00:03:50他にもスキルが含まれており、それらについては後ほど触れます。お気づきのように、
00:03:55このプロジェクトはすでに構築済みです。それは意図的にそうしています。何か新しいものを始めるとき、
00:03:59最初に作るべきなのはMVP(実用最小限の製品)です。これは製品の最も粗削りな動作バージョンであり、
00:04:04主要な機能のみを実行し、他には何もしないものです。MVPを構築する段階では、ループを使うべきではありません。
00:04:08MVPはそもそもすぐに作れます。しかし、それにループを適用しようとすると、エージェントが動き出す前に
00:04:13「完了」とは何を意味するのかを定義しなければなりません。その段階ではプロダクトの向かう先がまだ明確ではないため、
00:04:18仕様を詰める作業に、自分で最初のバージョンを自力で構築するよりも長い時間がかかってしまいます。
00:04:23しかし、レベル1の解説に入る前に、チャンネル登録と
00:04:27高評価ボタンを押していただけると幸いです。この小さな応援のジェスチャーが、私たちにとって大きな支えとなります。それでは、ループエンジニアリングのレベル1に進みます。
00:04:33ここでは、1つの目標を持つ1つのループを扱います。チェック作業は人間から
00:04:37エージェントへと移行します。これを適用する場所はランディングページです。一見するとランディングページは
00:04:421つの画面にすぎないため、ループを適用するには不適切な場所のように思えるかもしれません。
00:04:47エージェントは1回の実行で構築でき、何か問題があれば複数ではなく単一のプロンプトで修正できるからです。
00:04:51ランディングページにループを組み込む方が、ページ自体を作るよりも手間がかかるように思えるでしょう。
00:04:57しかし今回は、GSAPスキルを利用したアニメーション満載のランディングページを作りたいと考えています。すべてがアニメーションで動き出し、
00:05:02よく考えると、こうした部分は一度目視で確認しただけではチェックしきれません。アニメーションの場合、
00:05:07エージェントがミスを起こしやすい箇所が多く、何度も細かいやり取りが必要になります。このように、
00:05:12エージェントと何度も試行錯誤ややり取りが必要になる要素こそ、ループ処理を導入すべきかどうかの優れた判断基準となります。
00:05:16さて、ループを設定する前に、人々を混乱させがちな用語の命名規則について触れておきます。これは
00:05:21Claude Codeでスラッシュメニューを開いた瞬間に直面する問題です。メニューには「loop」というコマンドと
00:05:25「goal」というコマンドがあり、ループエンジニアリングで実際に使用するのは「goal」の方です。「loop」コマンドは
00:05:30タイマーに従ってプロンプトを実行するもので、何かが変更されたかどうかにかかわらず、5分ごとや1時間ごとに再度実行されます。
00:05:35しかし、「goal」コマンドは、要求したことが実際に達成されるまで働き続けるコマンドです。
00:05:40したがって、私たちがループエンジニアリングと言う場合、それはgoalコマンドを使用していることを指します。なお、loopコマンド自体も
00:05:45一部のフォームやループエンジニアリングのワークフローで使用されることはありますが、ここでは使用しません。goalコマンド自体は
00:05:51非常にシンプルです。「/goal」と入力し、次に達成したい目標を記述して、モデルに対して
00:05:56目標が達成されたかどうかをどのように検証すべきかも指示します。その後、各ターンの終わりに、より小さなモデルが
00:06:00会話の内容を読み込み、エージェントが引き続きこれに取り組む必要があるか、あるいは条件が満たされたかを判断します。
00:06:05ランディングページの作成を開始するために、私たちは再び「Grill Me」スキルを使い、この機能の仕様書(スペック)ファイルが必要だと伝えました。
00:06:11指示内容の詳細に入る前に、プロジェクト内にある「features」フォルダを確認する必要があります。その中の各フォルダは、
00:06:16エージェントが完了させなければならない1つの機能を表しています。それらの各フォルダには2つのものが含まれています。
00:06:211つはその機能に関するすべてが書き込まれる仕様書(スペック)ファイルであり、もう1つは初期状態では空であり、
00:06:25エージェントがその機能のループを実行するにつれてデータが埋まっていく「verification」フォルダです。
00:06:31次に、どのスキルを使用するかを指示しました。1つ目はGSAPスキルで、美しくアニメーションする
00:06:35ランディングページを実現するためのものですが、それほどリッチなアニメーションはページの動作を著しく重くしてしまいます。
00:06:41そのため、ページを再度見直してアニメーションを失わずに速度を取り戻す「optimize」スキルも一緒に使うよう指示しました。
00:06:45また、参考にするための画像リファレンスとして、イラストが配置されたランディングページの画像を提示しました。
00:06:50そして最後に指示したのが、検証(チェック)に関する内容です。通常ここは、人間とエージェントが
00:06:55何度もやり取りをする部分であり、人間がページを見て何が間違っているかを伝え、エージェントがそれを修正しに行きます。
00:06:59そこで、デザインを実際にチェックするために、このプロジェクトだけでなく
00:07:04マシン上のすべてのプロジェクトに適用されるグローバルな「Claude.md」に記載されている特定のツールを使うよう指示しました。
00:07:11その結果、記述されたのは次の2つの要素です。ページ構築のためのスペックと、そのページに対して実行される検証用チェックリストです。
00:07:15グローバルファイルに定義されていたスクリーンショットツールがそこに組み込まれたのはそのためです。
00:07:20そのツールを使えば、毎回フルブラウザを起動するよりもはるかに高速にスクリーンショットを撮影できるからです。
00:07:25ここで一時停止して、プロンプトの全体に目を通しても構いません。そうすることで、これらすべてがより明確に理解できるようになります。
00:07:30その後、Grill.meは質問フェーズに入り、ランディングページに関する一連の質問を私たちに投げかけました。
00:07:34そして、スペックをgoalへと昇華させる最後の指示を与えました。スペックファイルをgoalとして記述し、
00:07:39goalコマンドで実行できるようにするよう求めたのです。これに基づいてさらにいくつかの変更が加えられ、
00:07:45結果として、今後はgoalコマンドを実行し、ランディングページのスペックファイルを渡すだけで済むようになりました。
00:07:50すべての機能に対してこの作業を毎回繰り返すのは、誰もが避けたい無駄な手間です。
00:07:55そこで私たちは「goal writer」スキルを作成しました。先ほど解説した一連の流れや1行の指示がすべてそこに組み込まれています。
00:08:00このスキルが行うのは、機能フォルダ内にスペックファイルがあらかじめgoal形式で書き込まれた状態のフォルダを作成することです。
00:08:06その後、エージェントは作業を開始し、第1パスを終えた後、チェックリストを用いて何度も自身を採点する第2パスを実行しました。
00:08:11処理が停止した時点で、実行時間は38分に達しており、指摘されたエラーはマスコットの1体の点滅に関するもの1点だけでした。
00:08:16チェックリストを何度も照らし合わせ、自己評価を繰り返しました。その後動作が停止し、その時点で
00:08:2138分間実行され、エラーが1つだけ見つかりました。マスコットの1体のまばたきに関する問題です。
00:08:26これがその成果物です。もう1回修正のプロンプトを与えたところ、マスコットは意図した通りに
00:08:31まばたきするようになりました。検証ツールでは絶対に捉えられなかったであろう唯一のミスです。なぜなら
00:08:36スクリーンショットは常に一瞬を切り取るものであり、まばたきとまばたきの間の隙間は短すぎて
00:08:422枚のスクリーンショットでは捉えきれないからです。それ以外では、イラストの仕上がりは非常に良く、
00:08:46目指していたDuolingo風のデザインとも完全にマッチしており、すでにメインアプリにあるものと同じ
00:08:50スタイルです。参考資料にも忠実に従っており、「今すぐ予約」をクリックすると直接アプリに移動して
00:08:55すぐに使い始めることができます。さて、ここから先のすべての動作の基盤となるセットアップがいくつかあります。
00:09:00このアプリには、あなたのパソコン単体では行えない3つの要素が必要ですが、ご自身でそれらを
00:09:05ご自身で操作していただく必要はないので、その点はご安心ください。さて、これまでに作成した
00:09:10保存されており、世界中でそれが唯一のコピーです。パソコンが壊れたり、
00:09:15うっかり削除したりでもすれば、プロジェクト丸ごと消えてしまいます。まずその問題を解決するのが
00:09:20最初の課題であり、それを直してくれるのがGitHubです。Claudeがフォルダー内にプロジェクトのコードを書き込み、
00:09:25そのコードをオンライン上のリポジトリに保存してくれます。自分のパソコンの中だけでなく
00:09:31相手のサイト上でそのフォルダがそのまま生き続けるようなイメージです。2つ目は、アプリがまだ何も
00:09:36という点です。実際に人々が利用するため、予約情報はどこかに保存されなければなりません。さもないと、
00:09:41誰かが予約を入れた後にページを再読み込みしただけで、すべてが消えてしまいます。そのためデータベースが必要になり、
00:09:45私たちが使用するのがSupabaseです。そして最後の問題として、アプリは自分のパソコン上でしか動かないため、
00:09:50他の人は誰もアクセスできません。そのためデプロイを行う必要があります。これは、他の人が開けるように
00:09:55アプリをインターネット上のどこかに配置することを意味し、それを実行するのがVercelです。さて、これら3つの
00:09:59プラットフォームで行うべき作業はアカウントの作成だけで、各ウェブサイトにアクセスして「Googleでログイン」を
00:10:04クリックするだけです。設定項目や準備は一切ありません。その後の処理はすべてエージェントを介して行われます。
00:10:08それが機能する理由は、3つすべてがCLIを備えているからです。エージェントは人間のようにはウェブサイト上を
00:10:14クリックして回ることができません。そのため、CLIがエージェントにとってのプラットフォーム操作ツールとなります。
00:10:20通常であればGitHubでリポジトリを、SupabaseやVercelでプロジェクトを手動作成する必要がありますが、ClaudeならCLIを使ってそれらを代行できます。
00:10:263つすべてのサービスでアカウントを作成したら、エージェントの元に戻り、CLIを使ってこれら3つを
00:10:31操作したい旨を伝えます。すると各プラットフォーム用のコマンドが提示されるので、別のターミナルで
00:10:37それを実行する必要があります。エージェントはすでに1つ目のターミナルで稼働しているため、2つ目を開いて
00:10:41そこにコマンドを貼り付けます。CLIがインストールされた後、アカウントへのログインが行われます。
00:10:46ブラウザにページが開き、そこで承認を行うと認証が完了します。
00:10:51その時点から、エージェントはそのプラットフォーム上で何でもできるようになり、もうそれらのサイトを自分で開く必要はなくなります。
00:10:56また、概要欄に無料のセットアップファイルを載せているため、この手順を細かく覚える必要もありません。
00:11:00そのファイルをエージェントに渡すだけで、Next.jsアプリのセットアップを基本的には自動で行ってくれ、
00:11:05これら3つをすべて接続するために必要なその他の手順も案内してくれます。
00:11:10さらに、こうしたプラットフォームのルールは常に変化するため、各プラットフォームはエージェント向けのスキルを公開しています。
00:11:16GitHubについては、あまり仕様が変わらず現在も変更頻度が低いため、専用のスキルは用意していません。
00:11:21しかし、Vercelデプロイ用スキルがあり、これによってVercel CLIを使ってプロジェクトを自動デプロイする方法を
00:11:26エージェントに指示することができます。そして、Supabase用のスキルとSupabaseベストプラクティス用のスキルもあります。
00:11:31これらも自動で呼び出されるため、エージェントがこれら2つのプラットフォームのいずれかを使用する必要が生じた際、
00:11:37特になんの作業をしなくても、自分で勝手にそれらを利用してくれます。
00:11:42こうしてSupabaseデータベースにデータが蓄積され、プロジェクトがVercel上で公開状態になります。
00:11:47これらスキルのリンクは下の概要欄に記載しておきます。ですが次のレベルに進む前に、
00:11:52スポンサーであるHedraについてご紹介させてください。Manusのようにリサーチを行いプロジェクトを計画する
00:11:57エージェントと一くくりにしがちですが、Hedraも同様のことができます。違いは、完成したドキュメントや
00:12:02スライドではなく、完成した動画を提供してくれる点にあります。いわば「ClaudeとCanvaの融合」です。
00:12:08対話しながら一緒に作り上げていくことができます。スペース内で試してみたところ、アプリ用の短いプロモーション動画を
00:12:13作成するよう依頼しました。興味深かったのは動画そのものよりも、エージェントがそこに到達するまでの過程でした。
00:12:18最初にいくつかの確認の質問があり、次に提案された計画が提示されました。Hedraは推測で進めるのではなく、
00:12:23自分でトピックを調査し、実際の発見を持ち帰ってきました。そこから完全な台本がキャンバスに展開され、
00:12:28エージェントが手順を案内してくれて、最終的なプロモーション映像が完成しました。これは編集者や
00:12:33ライターをつけずに1人でマーケティングを行っている人にこそ最適です。Hedraを使えば、
00:12:38かつてチーム全体で行っていた作業を1人で行えるようにします。Hedra.comで無料でお試しいただけ、
00:12:43コードを使用すると初月が50%オフになります。リンクとコードは下の概要欄にあります。それでは、
00:12:48次のレベルに進みましょう。レベル2は「ソフトウェアファクトリーループ」と呼ばれます。
00:12:53このレベルでは複数の機能をまとめて計画し、それらをループに設定することで、1つの機能が完成しても停止せず、
00:12:59エージェントがリストにある機能の数々を夜通し作業し続けられるようにします。ループは非常に長期化することがあるため、
00:13:04与えられた機能リストが完了したかどうかを判定するトラッカーが必要になります。ゴールループは、
00:13:09リスト上のすべての機能のチェックが外れたら完了となります。さて、新機能を計画する際には、
00:13:13何を作るかを記述するだけでなく、実際にUIを作成するべきです。これをプロトタイプと呼び、
00:13:18実際には動作しないものの、アプリを完全にクリック操作できるバージョンです。開発を始める前に
00:13:23UIプロトタイプを構築すべき大きな理由は2つあります。1つ目の理由は、プロトタイプがあれば、
00:13:28自分が作ろうと想像していたものが、実際に自分が作りたかったものと一致しているかどうかを確認できるからです。
00:13:332つ目の理由は、このプロトタイプが、ループ内で動作するエージェントにとって、自分が構築したものが
00:13:37正しいかどうかを検証する手段になるからです。さて、ファクトリー内では、エージェントがリストを
00:13:42ループ状に処理し、各項目を1つずつ作業していきます。しかし、個々の項目に対してどのように作業を進めるのでしょうか?
00:13:48メインエージェントは項目を選択しても、自分自身で構築作業を行いません。サブエージェントにタスクを渡し、
00:13:53サブエージェントがその機能を完成させます。しかし、もしサブエージェントが構築に失敗し、アプリが台無しに
00:13:58なってしまったらどうなるでしょうか?そのため、メインエージェントはブランチと呼ばれるフォルダーの
00:14:03コピーを作成し、エージェントはその上で作業を行います。エージェントの作業が完了しても、自分自身で検証は行いません。
00:14:07これはループエンジニアリングにおけるもう1つの非常に重要なルールにつながります。作業を行ったエージェントは、
00:14:13決して自分自身で検証を行ってはならないということです。検証は常に、新鮮なコンテキストウィンドウを持つ別のエージェントに
00:14:18任せるべきです。これがまさにサブエージェントの仕組みであるため、メインエージェントはそのブランチを
00:14:24敵対的レビューエージェントに渡します。つまり、このエージェントは常に作業内容に何らかのエラーが
00:14:29あるものと仮定して検証する必要があります。これによりバグの発見に役立ちます。そのため、敵対的レビューエージェントから
00:14:34何らかの問題が指摘された場合、メインエージェントはビルドエージェントを再度起動しなければならず、
00:14:39リスト上の機能のチェックが外れるまでこのループが継続します。その機能が完了したら、ユーザーが新機能を利用できるよう、
00:14:44そのブランチの成果物をデプロイ済みアプリに反映させる必要があります。ご存知ないかもしれませんが、
00:14:48GitHub上のコードのメインバージョンこそが、Vercel上のデプロイされたアプリで実際に表示されているものです。
00:14:53したがって、ブランチがメインバージョンにマージされれば、そのブランチ内の機能がデプロイ済みアプリに
00:14:58反映されます。ここであなたの最終承認が必要になります。機能が完成すると、プルリクエストが作成されます。
00:15:03プルリクエストとは、機能ブランチをメインブランチにマージするためのリクエストです。そのプルリクエストには、
00:15:08エージェントがスクリーンショットも添付します。しかし、より確実を期したい場合は、Claudeにそのブランチに
00:15:13切り替えるよう依頼し、フォルダー内でその機能が実際に動作するかどうかをご自身のパソコンでテストすることができます。
00:15:18問題なければ、プルリクエストをマージすればよいのです。スキルの話をもう一度振り返ってみると、
00:15:22現在ではこの新機能スキルが追加されていることが分かります。このスキルを呼び出すと、基本的には
00:15:27この内部にフォルダーを作成する必要があり、各フォルダーには検証用のspec.mdや
00:15:33その他のファイルが含まれていなければならない旨がエージェントに伝えられます。ご覧のとおり、ここで2つの機能を定義しました。
00:15:381つ目の機能は、サロンの各スタッフを紹介するサービスページを新たに作成することです。そして
00:15:432つ目は、顧客がサロンのスタイリストとセッションを行った際、管理者である受付係を介して
00:15:48レビューを追加できるようにすることです。さて、ここでは新機能スキルを直接使用する代わりに、
00:15:53ゴールライター・スキルを使用します。これらのスキルはすべて相互につながっています。そのため、機能をゴールにしたくない場合や、
00:15:58ループなしで単に機能の作業を行いたい場合は、ゴールライターを使用しません。
00:16:03しかしゴールライターを使用すると、新機能スキルがトリガーされ、仕様書ファイルを実行可能なゴールへと
00:16:08変換するためのルールも追加されます。すでに話し合ったように、機能の実装を始める前に、
00:16:13その機能のUIを作成するべきです。これが、新機能スキルが機能的UIスキルを呼び出す理由であり、
00:16:18アプリ内にmocksという名前のフォルダーを存在させるべきこと、およびそのmocksフォルダー内のHTMLファイルが
00:16:23アプリ全体の完全に機能するプロトタイプになることをエージェントに伝えます。
00:16:29また、受付係と顧客の両方のビューが含まれるようになります。各フォルダーにこれらは
00:16:331つだけ存在するはずであり、機能的UIスキルはまだ作成されていない場合にのみこれを生成します。
00:16:37もちろん、新機能が作成されるたびにトリガーされるため、各機能フォルダーの内部には
00:16:42HTMLファイルも追加されることになります。
00:16:47HTMLファイルも追加されます。クローンしたアプリをベースに、
00:16:53機能によって変更される部分だけを取り出して表示します。例えば、ここにサービス機能があります。
00:16:58モックを開くと、アプリに完全なサービスページが追加され、
00:17:04このボタンからアクセスできるようになっているのが分かります。「今すぐ予約」をクリックしてスタイリストを選ぶと、
00:17:08まずそのスタイリストでどのサービスを受けたいか尋ねられます。この機能は実際にはまだ
00:17:13アプリに実装されておらず、クローン内にも実装されていませんでしたが、この機能プロトタイプには実装されています。
00:17:19そのため、作っているものが本当に求めているものかどうかを視覚的に確認できます。さらにこれは、
00:17:24ループが構築しているものが正しいかどうかを検証する手段にもなります。その後、
00:17:292つの機能を書くように指示したところ、セッションレビューとサービスのフォルダが作成されました。
00:17:33これがセッションレビューのUIです。こちらも同様に、顧客と受付担当者の両方の視点で表示できます。
00:17:38受付担当者が顧客の代わりにレビューを追加する仕組みになっています。現時点ではサイトがこのように動作すると想定しているためです。
00:17:43実際のサイトではこのような動きにはなりませんが、デモサイトなので機能を作り込んでいる段階です。
00:17:47これで複数の機能を扱えるようになったため、それらを管理するためのリストが必要になります。
00:17:52そこで機能バッチスキルを使用します。これは単一のテーブル形式になった
00:17:57Qのマークダウンファイルを利用するものです。機能がリスト化されており、
00:18:02例えば現在はまだループが実行中で、1つ目を構築しているところです。2つ目はまだ「TODO」の状態で、
00:18:061つずつマークされていきます。そのため、スキルを呼び出して必要な機能を追加するよう指示するだけで済みます。
00:18:11そしてご覧のとおり、両方のファイルの作成が完了し、機能が追加されたことが表示されます。
00:18:16追加が終わると、実際に実行するためのゴールコマンドが提示されます。
00:18:21今回は少し調整を加え、ゴール内でキューファイルを実行しました。TODOやビビル中の行がなくなるまで、
00:18:26つまりすべての作業が完了して「Done」に移動するまで停止しないように設定しました。
00:18:31こうして作業が開始されました。現在も最初の機能の構築が続いています。先ほどお伝えしたとおり、
00:18:36まずサブエージェントが実際の構築を行い、その作業をチェックして検証するために
00:18:41敵対的エージェントが起動します。処理はまだ続いており、およそ3時間が経過しました。
00:18:46完了したら最終的な結果をお見せします。それではご覧のとおり、
00:18:51GitHubを開くと「loop salon」プロジェクトがここにあります。もし見つからない場合は、
00:18:55エージェントにこのリンクを教えるよう頼めば簡単に開くことができます。
00:19:00ここにあるプルリクエストタブを開くと、エージェントが確認用に作成したプルリクエストが表示されます。
00:19:04これを見ると、全体の要約に加えて、必要な作業が実際に完了した証拠となる
00:19:09ページのスクリーンショットも提供されています。これらをすべて確認したら、
00:19:13プルリクエストをマージするだけです。そしてご覧のとおり、ライブホストされたバージョンがここにあります。
00:19:18独自ドメインがないためVercelのドメインで終わっていますが、要望通りにサービス機能が追加されているのが分かります。
00:19:23サービス機能に移動すると、サロンが提供しているすべてのサービスが表示されます。
00:19:27さらに「今すぐ予約」オプションに進むと、スタイリストごとにそれぞれのサービスが用意されていることが確認できます。
00:19:33予約する前には必ずサービスを選択する必要があります。2つ目のプルリクエストをマージしたときも、
00:19:37まったく同じ結果になります。ここまでで説明してきた内容はすべて、
00:19:42ご自身で構築できるように解説しています。スキルの本質は単にファイルに記述された指示にすぎません。
00:19:47そのため、ご自身で作れないものは何もありません。とはいえ、
00:19:51そこまでの手間をかけたくない場合は、リポジトリ全体を私たちのコミュニティである「AI labs pro」で公開しています。
00:19:56お見せしたシステム全体とすべてのスキルがそのまま含まれています。
00:20:01私たちの活動に価値を感じていただき、チャンネルをサポートしたい場合は、それが最適な方法です。
00:20:05リンクは概要欄に記載しておきます。このプロセス全体において、あなたが行うべきことは残りわずか2つだけです。
00:20:10機能の計画を立てることと、機能や変更がユーザーに送信される前に最終的な許可を与えることです。
00:20:14どちらの作業も、特に計画の段階においてはパソコンの前にいる必要はありません。
00:20:19要望を伝えると、理解できるまで質問してくれ、プロトタイプまで作成してくれます。これらすべてを
00:20:24スマホから実行可能です。小さな変更であれば、最終的な許可出しもスマホから行うことができます。
00:20:28ここで「レベル3」が登場します。その主な目的は、パソコンへの依存をなくすことです。
00:20:33この目的にぴったりな「Paseo」という優れたアプリを見つけました。自分のパソコン上でエージェントを動かし、
00:20:37スマホからそのウィンドウを覗けるようにする仕組みです。そのため、エージェントはすべてのファイル、
00:20:43スキル、ログイン済みのCLIが揃ったあなたのマシン上に存在し続けます。
00:20:48この動画で構築したすべてがそのまま動き続けます。Claude Codeにも、
00:20:52内蔵のリモートコントロール機能を使って同様のことを行う方法がありますが、機能の多くが正常に動作しません。
00:20:57例えば、Claudeのリモートコントロール機能ではスキルを実行するためのメニューがうまく表示されません。
00:21:03そのため、今回紹介する無料アプリのリンクを下に貼っておきます。
00:21:07すべての機能の深掘りはせず、使い始めるために必要な基本機能に絞って説明します。
00:21:12このアプリにはワークスペースシステムがあり、各ワークスペースが1つのフォルダに対応しています。
00:21:17その中で異なるチャットを開いてClaude Codeを直接実行できるため、別の個別サブスクリプションを契約する必要はありません。
00:21:22さらに非常に興味深い特徴として、自分のラップトップだけでなく、接続したMac miniでも実行できる点があります。
00:21:26そのため、ラップトップからMac miniを操作することも、スマホからそのMac miniを操作することも可能です。
00:21:31また、味気ないターミナル画面ではなく、より洗練されたインターフェースになっています。
00:21:35Cursorに似た見た目ですが、機能はすべて揃っています。ゴールコマンドも、
00:21:40自作した他のスラッシュコマンドも問題なく動作します。それでは、
00:21:45ここで「loop engineering」フォルダを開いてセッションを作成し、新しい機能を定義してみましょう。
00:21:49ここには「モバイルプレビュー」という新しいスキルが1つ追加されているので、後ほど詳しく説明します。
00:21:54これがモバイル上でどのように見えるかをお見せするため、スマホの画面をミラーリングしています。
00:21:59これはパソコンで使用できるものとまったく同じインターフェースです。
00:22:03Claude Codeのすべての機能やスラッシュコマンドをそのまま利用できます。
00:22:09新しい機能を始めるには、スマホからそのまま新しい機能のスラッシュコマンドを実行します。
00:22:14今回は、これまで実装されていなかった顧客側のログインフローを実装しました。
00:22:18ここからが非常に面白いところです。当然機能ファイル全体が記述されますが、
00:22:22モックがどのように見えるかを示すために、インターフェース内に直接画像を出力してくれます。
00:22:27その画像はスマホ上にも表示されるため、スマホから直接UIを確認することができます。
00:22:32そして、先ほどのモバイルプレビュー用スキルを実行すると、HTMLモックがリンクとしてデプロイされます。
00:22:37これはVercel上で無料デプロイされるもので、リンクをクリックするだけで実際のモックアップにアクセスできます。
00:22:42単なる画像を見るだけでなく、画面をタップしてアプリを正しく操作しながら確認できるようになります。
00:22:47これこそが、スマホからこのファクトリーを運営する際に真に求められていた機能です。
00:22:51本日の動画は以上となります。チャンネルをサポートし、このような動画の制作を続けられるよう応援していただける場合は、
00:22:56下の「Super Thanks」ボタンからご支援いただけます。いつものように、ご視聴いただきありがとうございました。
00:23:01また次回の動画でお会いしましょう。

설명

Learn loop engineering in Claude Code across 3 levels, so AI agents build, verify and ship features while you sleep. Loop engineering explained: the next step past prompt engineering, and the base of real AI automation. Try Hedra at https://hedra.link/ailabs and use code AILABS50 for 50% off your first month. Free setup resources: https://drive.google.com/drive/folders/1pagLScBGfGXkfxYiqCpEkei9KDI8SdCs?usp=sharing Community with All Resources: ailabspro.io/?v=PLyRe6Zk--8 The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ PASEO: https://paseo.sh/ Open Source Skills in this video: Grill Me: https://github.com/mattpocock/skills GSAP: https://github.com/greensock/gsap-skills Vercel: https://github.com/vercel-labs/agent-skills Supabase: https://github.com/supabase/agent-skills You were already running a loop before you knew what one was. You prompt, the agent builds, you check it, you prompt again. So what is loop engineering? It is handing that checking step to the agent and keeping only the one decision that was always yours: whether the agent is done or needs to keep working. This is the full guide, built on a real salon appointment app that goes from missing a landing page to shipping features overnight. Everything runs in Claude Code, on Warp and VS Code. Before the loop * Why loop engineering did not work a year ago, and what changed with models that run for hours * Why you should never loop your MVP, and what to build by hand instead * CLAUDE.md pointing to AGENTS.md, so the repo is not locked to one agent * design.functional.md for every clickable part of the app * The Grill Me skill, which keeps asking questions until the spec is actually clear Level 1: one loop, one goal (loop engineering in Claude Code) * The naming trap in the slash menu: /loop runs on a timer, /goal runs until the thing is done. Loop engineering is the goal command * How the goal command verifies: a smaller model reads the turn and decides continue or stop * A features folder where each feature holds a spec file and an empty verification folder * The real signal that something needs a loop: it takes a lot of back and forth * A motion heavy landing page with the gsap skill, then the optimize skill to win the speed back * Screenshot based verification pulled from the global CLAUDE.md instead of a full browser every pass * The goal-writer skill, so you never write the "make this a goal" line twice * A loop engineering example: 38 minutes unattended, one error left, and why a screenshot could never catch a blinking mascot Setup: GitHub, Supabase, Vercel * Why your project needs a repo, a database and a deployment, explained for non developers * You make three accounts with Google login and configure nothing * The agent does the rest through each platform's CLI, including the auth step you paste into a second terminal * The Vercel deploy skill and the Supabase skills that auto invoke when the agent needs them Level 2: the software factory loop engineering workflow * Planning several features at once and running them as one queue instead of one feature at a time * Why you build a clickable prototype first: to find out if you wanted the thing you described, and to give the loop something to verify against * The new-feature and functional-ui skills, and the mocks folder that holds a working fake version of the app * The rule that matters most: the agent that does the work never verifies the work * Subagent builds on a branch, adversarial review agent assumes there is a bug, main agent loops until the row is ticked * feature-batch and a queue.md table, with the goal running until nothing is left in todo or building * Pull requests with screenshots attached, plus how to check the branch locally before you merge * Merge to main, Vercel picks it up, and the feature is live for users Level 3: get off the laptop * The only two jobs left: plan the feature, approve the merge. Neither needs a keyboard * Paseo, a free app that runs Claude Code on your own machine and gives you a window into it from your phone, so your skills and logged in CLIs keep working * Why we skipped Claude Code's built in remote control: no skills menu. In Paseo, /goal and every slash command still work * The mobile preview skill, which deploys the HTML mocks as free Vercel links so you can click through a prototype on your phone instead of squinting at images 00:00 Intro 00:46 What A Loop Is 02:08 The Project 04:32 Level 1 07:58 The Goal Writer Skill 08:57 Setup 11:11 Platform Skills 11:53 Sponsor 12:46 Level 2 16:14 The Functional UI Skill 17:51 The Feature Batch Skill 20:13 Level 3 22:34 Mobile Preview Skill Hashtags: #ai #claude #claudeCode #codex #chatgpt #claudeAi #aiAutomation #loopEngineering

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기