スライド形式 は何をしますか？
ページをプレゼンテーションとして構築します。各画面が1つの質問に答えるスタック形式です。質問は小さく表示し、回答は1～2文で大きく表示します。その下に、物事が実際に起こっている様子を示すライブシーンを配置します。例えば、顧客が列を作る様子、エンジン内の空気の流れ、商品を追いかけるお金などです。読者は1つのコントロールで操作し、シーンが変化するのを観察することで、見て理解できます。どの画面で止まっても、その時点での理解が得られます。ページはそのテーマに特化した良質なアプリのように感じられます。artifact-design がプラットフォームのルール（テーマ、電話幅、CDN、単一チェック）を維持します。ユーザーがこのスキルをインストールしているため、artifact-designのデフォルトと異なるルールは、ユーザー自身の言葉として解釈します。
1. メインポイントを見つける
読者が最初の画面を見た後に理解すべきこと、または決定すべきことを1文で書きます。
2. 最も近いサンプルを開く
このコンテンツに最も近いサンプルを開き、計画を立てる前に全体を読んでください：examples/explainer.html（仕組みの説明）、[examples/decision.html](examples/decision.html）（「すべきか」「どちらか」の判断）、[examples/plan.html](examples/plan.html）（計画、旅行、タイムライン）。これらは構造、シーン、コードの基準です。同じ方法でページを構築します。
3. 画面を計画する
画面をリストアップします。画面1では、読者がメインポイントを観察と操作を通して見つけられます。次の各画面では、前の画面で生じた質問（なぜ、どのように、どのくらい、次は何か）に答えます。新しいトピックは、コンテンツの主題が変わったときにのみ始めます。画面は4～7画面です。
各画面について、返信に以下を記述します：
- 質問：読者が尋ねるか検索するであろう形で、5語以内で明確に表現します（「どのくらい時間がかかる？」ではなく「10Kにどのくらい？」とします。質問は回答の上に小さく表示され、メニューで画面の名前になります）。画面1の質問は主題を表し、ページに飛んできた読者が何についてのページかすぐにわかるようにします；
- 回答：1～2文；
- シーン：1行で、画面に何が表示され、何が起こり、読者が何を操作し、シーンからどの数字が読み取れるかを記述します。
シーンは以下のパターンから選びます：1つのユニットがシステムを通過する様子、段階を経て流れるもの、回転するメカニズム、1つのルールに従うエージェントの群れ、フィールド内のトレーサー、スクラバー付きのリプレイ、前後の分割表示、または満ちたり減ったりするタンク。「コントロール、数字、バー」とだけ書かれ、画面にもの自体が表示されていない場合はダッシュボードです。その場合はシーンとして書き直します。
シーンは説明のためのものです。ページ上のすべての実数はコンテンツから取得し、推定値である場合はその旨をラベル表示します。
各画面には、その画面の残りのストーリー（短いポイント、背後にある数字、注意点）を格納する折りたたみ可能な「詳細」セクションをシーンの下に配置します。出典やどの画面にも該当しない内容は、最後に折りたたまれた「完全なノート」セクションにまとめるか、省略します。
すべての画面に質問、回答、シーンの説明があり、折りたたみ部分外のテキストが40語以内になったら完了です（ラベルと数字はカウントしません）。
4. ルックを選択する
このテーマに人々が使うであろうアプリ名を考え（旅行→旅行アプリ、ビジネス判断→最新のビジネスツール）、styles/ から該当ファイルのみを開きます。ユーザーがスタイル名を指定した場合はそれを採用します。スタイルからパレットと書体を取得し、各画面にその色の大きな領域を1つ配置します。
5. 構築する
- サンプルと同様に、kit/screens.html 上に構築します。すべての画面がDOM内に存在し、ページは通常通りスクロールします。デスクトップでは質問が右端に常時表示され（電話ではタブ）、各画面に「詳細」折りたたみ、最後に「完全なノート」、ライト/ダーク切り替えを配置します。
- 各シーンは最初からポイントを示している状態で開きます（ゼロからの空フレームではなく中間から）。画面がビューポートに入ると約10秒間自動再生し、最後のフレームで静止して読者が読んでいる間はページが動かないようにします。コントロールを操作すると新しい設定で再再生され、タップで一時停止します。動きの軽減設定が有効な場合は、静止フレームでポイントを示します。数字はシーン上のラベルとして配置し、画面の主役にはしません。
- 各画面をアプリビューとしてレイアウトします。シーンが画面で最も大きな要素で、電話では幅いっぱいに、デスクトップでは中央に幅広のステージを配置します。その上に回答を大きく表示します。
- 物理的なもの（デバイス、機械、建物、身体の一部）を描画する場合は、まずfigures.mdを読みます。アイソメトリックキット、フラットな描画、描画なしのどれを使うかが決まります。
ファイルツールを使って直接ページを書き、サンプルから手作業でコピーしてください。スクリプトの実行が許可されていない可能性があるため、ページはスクリプトに依存しません。
計画したすべての画面がページに配置され、シーンが動いている状態で完了です。
6. チェックする
ページをレンダリングできる場合は、電話幅で画面1のスクリーンショットを1枚撮ります。できない場合はコードを読みます。以下の質問に「はい」か「いいえ」で答えてください：
- 画面上の何かが、もの自体（そのチャートではない）として表示されていますか？
- 動きがあり、読者の操作でその動作が変わりますか？
- 読者は数秒以内に何をすべきかわかりますか？
- 主題が変わったらルックも変わりますか？
数も確認します：画面数（4～7）、折りたたみ外の単語数（各40以下）。失敗したものを1パスで修正し、公開します。