journey-demo

Journey demo

ジャーニーを書き、テストし、クリップします。ClaudeがChromeでユーザージャーニーを実行し、すべての画面をフリーズしたHTMLページとして保存し、フレームをストーリーボードにレイアウトします。ユーザーはブラウザ上で編集し、承認した後にのみHyperFramesでMP4をレンダリングします。画面録画ではないため、後からジャーニーを再実行せずに画面上の任意の単語を変更できます。

信頼できる情報源: STORYBOARD.md + デモフォルダ内の snapshots/*.html。それ以外はすべて生成物です。

必要条件

• Chrome（Claude in Chrome拡張機能が必要 - ジャーニーの実行とキャプチャ用）
• Node 18以上、および npx hyperframes（静止画とレンダリング用。インストール不要）
• このスキル内のスクリプト: scripts/freeze.js（キャプチャ）、scripts/demo.mjs（ビルドと編集可能なボード）。 パスで実行: node <this skill>/scripts/demo.mjs …

デモフォルダ

ユーザーのリポジトリ内の docs/demos/<slug>/ に配置します（別の場所を指定されない限り）:

STORYBOARD.md        計画: フレーム、キャプション、クリック、タイミング、ノート        (編集)
snapshots/*.html     キャプチャした画面                                             (テキストのみ編集)
index.html scenes/ boards/ .build/    demo.mjs によって生成                          (編集禁止)
out/<slug>.mp4       レンダリング結果

scenes/ .build/ boards/stills/ out/ はgitignoreに追加することを推奨します。

1. ジャーニー

ジャーニーファイルが存在する場合（docs/journeys/*.md: Start:、番号付きステップ、Expect: チェック、> Note: 行）はそれを使用します。browser-journeys スキルがインストールされている場合、その形式と実行ルールが適用されるため、それに従います。ジャーニーがまだない場合は、最初にユーザーと一緒に作成します。デモはステップの品質に左右されます。

実行前に、1つのメッセージで以下の各項目についてあなたの推奨を伝えてください:

• ホスト: ローカルまたはステージング。本番環境はユーザーが明示的に指定した場合のみ使用。
• ブランチ: ジャーニーに選択肢がある場合（ライブラリからのコピーか新規作成、保存済みカードか新規カードなど）、デモでどのパスを表示するか。デフォルト: 最短のハッピーパス。
• 値: ジャーニーのテスト値（「ジャーニーテスト — 無視してください」）またはあなたが提案するデモ向けの値。デフォルト: デモ向けの値を提案し、それがすべての場所で使用されるようにします。
• メッセージとオーディエンス: 両方をジャーニーからドラフトします。ユーザーが確認します。
• 副作用: そのホスト上で実行によって作成されるもの（アカウント、注文、入札）と、ジャーニーのクリーンアップ（存在する場合）を伝えます。

別のホスト用に書かれたジャーニー（Start: local、シードコマンド、開発ログから読み取るコード）？そのセットアップ行はそのホスト用です。このホストでの同等のものを尋ねてください。決して推測しないでください。

2. 実行してキャプチャ

1. resize_window を 1440×900 に設定し、実行全体でそのサイズを維持します。すべてのフレームが1つのビューポートを共有する必要があり、ビルドはサイズが混在していると拒否します。
2. ジャーニーの指示に従って各ステップを実行します。すべての Expect: をチェックし、失敗した場合は停止して報告します。壊れたフローでデモがビルドされることは決してありません。キャプチャ実行は視聴可能なペースである必要はありません。各フリーズの前にページが落ち着くまで待つだけです。
3. サインインとペルソナの切り替えはユーザーが行います。 「<ペルソナ>としてサインインして、完了したら教えてください」と言い、待ってから続行します。ジャーニーが開始した開発ログに出力するコードはあなたが入力しても構いませんが、パスワードや誰かの受信トレイからのコードは絶対に入力しないでください。サインイン画面はフリーズしないでください（メールが表示されるため）。ストーリーボードではサインイン前からサインイン後にカットされます。
4. フレームを選択: クリックごとに1フレーム。 フレームは、視聴者がフローを追うために必要なクリックの直前の画面です。タイピング、チェック、選択はフリーズ前に行うため、フレームには完了した状態が表示されます。フレームに空のフィールドを表示する必要がある場合は、タイピングの前にフリーズします。URLで到達する画面や押すものがない画面は、click のないフレーム（フェードイン）になります。セットアップとサインインはスキップします。4～8フレームを目指し、最終画面は必ずフリーズします。
5. フリーズ: scripts/freeze.js の全体を javascript_tool でページに貼り付け（ページロードごとに1回。typeof window.__freeze で確認）、次に await window.__freeze('03-open-the-orbit')（2桁の連番、スラッグ）を実行します。返された viewport を最初のフレームのものと比較します。異なる場合（ダウンロードバーや情報バーが開いた場合）、バーを閉じて再度フリーズします。
6. 各フリーズは <name>.html を ~/Downloads にダウンロードします。実行終了後に snapshots/ に移動します。同じ名前で再度フリーズすると、Chrome は <name> (1).html を保存します。古いダウンロードを先に削除してください。Chrome が複数ダウンロードを許可するか尋ねてきた場合、ユーザーが「許可」をクリックします。

3. STORYBOARD.md を書く

HyperFrames のストーリーボード形式。フリーズした各画面に1フレーム:

---
message: 1分未満でOrbitを開く
audience: ShoutOrbitを試そうか迷っているYouTubeクリエイター
journey: docs/journeys/create-an-orbit.md (ステップ4–5, staging, 2026-11-13)
url: staging.shoutorbit.com
status: draft
---

## フレーム 3: Orbitを開く (8-12秒)
- duration: 4s
- snapshot: 03-open-the-orbit.html
- click: Orbitを開く
- scene: 日付とオファーが自動入力される

フォームの下部、日付は既に入力済み。カーソルが「Orbitを開く」を押します。
未解決の質問: タイトルフィールドにまだプレースホルダーが表示されています。画面上で入力しますか？それともそのままにしますか？

• click: 要素のラベル全体を正確に: 表示テキスト、値、プレースホルダー、またはaria-label（「入札する · $25」であって「入札する」ではない）。ビルドは毎回実行時にそれを見つけ、見つからない場合はエラーを出力して失敗します。クリックのないフレームでは省略します。
• duration: 秒単位の表示時間、3～5秒。省略時は4秒。
• scene: 画面上のキャプション。ユーザーが得られるものについて簡潔に（「日付が自動入力される」）、押すものについては書きません。
• 計画行: フレームが表示するものとカーソルが行うことを平易な言葉で記述。
• 未解決の質問: ユーザーが決定すべきことごとに1行。すべてのフリーズした画面を確認: テストデータやジャンクデータ、個人データ（メール、実名、口座番号）、実際の値が入るべきプレースホルダー、画面と矛盾するキャプション（「Not taking bids yet」状態なのに「ライブ」と表示）、古くなった日付。これらを指摘し、黙って修正しないでください。

4. ボードをビルドして引き渡す

node <skill>/scripts/demo.mjs serve docs/demos/<slug> --port 4321   # バックグラウンドで実行

ビルド後、http://127.0.0.1:4321/ で提供します。ユーザーのために開いて（Chrome または open）停止します。ボード上で、ユーザーはキャプション、クリック、秒数、タイトル、順序を変更したり、フレームを削除したり、Claude 向けのノートを書いたり、キャプチャしたページ自体のテキストを書き換えたり（ページテキストの編集。クリックした要素の名前を変更するとクリックも一緒に移動します）、レンダリング承認を押したりできます。保存のたびに静止画が再ビルドされます。

5. ノートに対応する

ユーザーがノートを残したと言った場合、STORYBOARD.md を読みます。各 > Note: 行に対して:

依頼内容	変更箇所
キャプション、タイミング、順序、クリック	STORYBOARD.md の該当フレームのキー
画面上の別の単語	該当 snapshots/*.html 内のテキスト（テキストのみ。タグとクラスは維持）
キャプチャされていない画面、または異なる状態	該当ジャーニーステップを再度実行してフリーズ
フローで表示できないもの	その旨を伝え、最も近い正しいバージョンを提案

その後、ノートを > Done: <変更内容> に変換し（ボードに完了として表示されます）、フロントマターの status: draft を設定し（承認はユーザーのみ）、node <skill>/scripts/demo.mjs build docs/demos/<slug> を実行して、ユーザーにボードを更新するよう伝えます。サーバーは実行し続けて構いません。

6. レンダリング

フロントマターが status: approved になっている場合、またはユーザーがチャットでゴーサインを出した場合のみ:

cd docs/demos/<slug> && npx hyperframes check && npx hyperframes render -o out/<slug>.mp4

サブコンポジション、トラック密度、無声映画に関する check の警告は想定内です。MP4 をユーザー用に開きます。後で UI が変更された場合は、ジャーニーを再実行し、画面が変わったフレームを再フリーズし、ストーリーボードはそのままにしてレンダリングします。これが更新のすべてです。

よくある問題

症状	原因と修正
カーソルがターゲットの下または横に着地する	異なるウィンドウサイズでキャプチャされた、またはページがスクロール中だった。1つのサイズで再キャプチャ。
ビルドから「"…" というラベルのものはありません」	click のテキストが画面上のものと完全に一致しない（大文字小文字、スペース、→ など）。ページからコピーする。
プローブビューポートが …	ヘッドレスChromeのウィンドウクロームが変更された。demo.mjs の CHROME_UI を調整する。
フレームに空のフィールドが表示される	タイピングの前にフリーズした。入力してからフリーズする。
フレーム内の画像やフォントが見えない	CORSなしでクロスオリジンから提供されているため、freeze.js がURLを保持したまま。そのホストが稼働中のみ読み込まれる。未解決の質問としてメモする。
Stripeやその他のiframeが空白	freeze.js がiframeを除外する。その前後の画面をフリーズするか、何が欠けているかを伝える。
Chrome not found	CHROME=/path/to/chrome を設定する。

プライバシー

スナップショットには画面上のすべてがインライン画像として含まれます。ボード、フォルダ、またはビデオを共有する前に、フレームに個人データがないか確認し、見つかった場合は未解決の質問として報告してください。